Stop using :not() pseudo class for mx_GenericEventListSummary (#8944)

* Stop using :not() pseudo class for mx_GenericEventListSummary Signed-off-by: Suguru Hirahara <[email protected]> * Use a CSS variable for mx_GenericEventListSummary on _EventTile.scss - icon-width Signed-off-by: Suguru Hirahara <[email protected]> * Use a CSS variable for mx_GenericEventListSummary on _EventTile.scss - right-padding Signed-off-by: Suguru Hirahara <[email protected]> * Move declarations for EventTile_line of GenericEventListSummary for IRC layout from _IRCLayout.scss to _EventTile.scss Signed-off-by: Suguru Hirahara <[email protected]> * Move mx_EventTile_line out of mx_GenericEventListSummary:not([data-layout=bubble]) Signed-off-by: Suguru Hirahara <[email protected]> * Move common style rules up Signed-off-by: Suguru Hirahara <[email protected]> * Set zero inline start padding to mx_EventTile_line of info tile of mx_GenericEventListSummary_unstyledList on IRC layout There should not be spacing between avatars and info tile line on IRC Layout Signed-off-by: Suguru Hirahara <[email protected]> * Apply the rule to group/modern layout only Signed-off-by: Suguru Hirahara <[email protected]> * Apply the inline start padding to modern/group layout only Overriding $left-gutter is not necessary for IRC layout Signed-off-by: Suguru Hirahara <[email protected]> * Merge the style block for mx_EventTile_info .mx_EventTile_line Signed-off-by: Suguru Hirahara <[email protected]> * Remove padding from info event tile line from mx_GenericEventListSummary on IRC layout Signed-off-by: Suguru Hirahara <[email protected]> * Add spacing between avatar and a single info event tile line on IRC layout Signed-off-by: Suguru Hirahara <[email protected]> * Stop using :not() pseudo class for mx_GenericEventListSummary on TimelineCard Signed-off-by: Suguru Hirahara <[email protected]> * Fix padding of line with redacted body text Signed-off-by: Suguru Hirahara <[email protected]>
matrix-org · Jul 6, 2022 · 5349f30 · 5349f30
1 parent 2706f14
commit 5349f30
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 23 deletions.
diff --git a/res/css/views/right_panel/_TimelineCard.scss b/res/css/views/right_panel/_TimelineCard.scss
@@ -149,11 +149,14 @@ limitations under the License.
         }
     }
 
-    .mx_GenericEventListSummary:not([data-layout=bubble]) {
-        .mx_EventTile_line,
-        > .mx_GenericEventListSummary_unstyledList > .mx_EventTile_info .mx_EventTile_avatar ~ .mx_EventTile_line {
-            padding-inline-start: var(--BaseCard_EventTile-spacing-inline);
-            padding-inline-end: var(--BaseCard_EventTile-spacing-inline);
+    .mx_GenericEventListSummary {
+        &[data-layout=irc],
+        &[data-layout=group] {
+            .mx_EventTile_line,
+            .mx_GenericEventListSummary_unstyledList > .mx_EventTile_info .mx_EventTile_avatar ~ .mx_EventTile_line {
+                padding-inline-start: var(--BaseCard_EventTile-spacing-inline);
+                padding-inline-end: var(--BaseCard_EventTile-spacing-inline);
+            }
         }
     }
 

diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
@@ -261,6 +261,10 @@ $left-gutter: 64px;
         &.mx_EventTile_continuation {
             padding-top: 0px !important;
         }
+
+        &.mx_EventTile_info .mx_EventTile_line {
+            padding-left: calc($left-gutter + 20px); // override padding-left $left-gutter
+        }
     }
 
     &[data-layout=bubble] {
@@ -366,17 +370,42 @@ $left-gutter: 64px;
     }
 }
 
-.mx_GenericEventListSummary:not([data-layout=bubble]) .mx_EventTile_line {
-    padding-left: $left-gutter;
+.mx_GenericEventListSummary {
+    &[data-layout=irc],
+    &[data-layout=group] {
+        .mx_EventTile_line .mx_RedactedBody {
+            line-height: 1; // remove spacing between lines
+        }
+    }
 
-    .mx_RedactedBody {
-        line-height: 1; // remove spacing between lines
+    &[data-layout=irc] {
+        .mx_EventTile_info .mx_EventTile_line {
+            padding-left: 0; // Override .mx_EventTile:not([data-layout="bubble"]).mx_EventTile_info .mx_EventTile_line
+        }
+
+        .mx_EventTile_line .mx_RedactedBody {
+            padding-left: 24px; // 25px - 1px
+
+            &::before {
+                left: var(--right-padding);
+            }
+        }
+
+        // Apply only collapsed events block
+        > .mx_EventTile_line {
+            padding-left: calc(var(--name-width) + var(--icon-width) + $MessageTimestamp_width + 3 * var(--right-padding)); // 15 px of padding
+        }
     }
-}
 
-.mx_EventTile:not([data-layout=bubble]).mx_EventTile_info .mx_EventTile_line,
-.mx_GenericEventListSummary:not([data-layout=bubble]) > .mx_GenericEventListSummary_unstyledList > .mx_EventTile_info .mx_EventTile_avatar ~ .mx_EventTile_line {
-    padding-left: calc($left-gutter + 20px); // override padding-left $left-gutter
+    &[data-layout=group] {
+        .mx_EventTile_line {
+            padding-left: $left-gutter;
+        }
+
+        .mx_GenericEventListSummary_unstyledList > .mx_EventTile_info .mx_EventTile_avatar ~ .mx_EventTile_line {
+            padding-left: calc($left-gutter + 20px); // override padding-left $left-gutter
+        }
+    }
 }
 
 .mx_EventTile_content {

diff --git a/res/css/views/rooms/_IRCLayout.scss b/res/css/views/rooms/_IRCLayout.scss
@@ -14,12 +14,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-$icon-width: 14px;
-$right-padding: 5px;
 $irc-line-height: $font-18px;
 
 .mx_IRCLayout {
     --name-width: 70px;
+    --icon-width: 14px;
+    --right-padding: 5px;
 
     line-height: $irc-line-height !important;
 
@@ -36,7 +36,7 @@ $irc-line-height: $font-18px;
         padding-top: 0;
 
         > * {
-            margin-right: $right-padding;
+            margin-right: var(--right-padding);
         }
 
         .mx_EventTile_msgOption {
@@ -157,26 +157,23 @@ $irc-line-height: $font-18px;
 
     .mx_EventTile_emote {
         .mx_EventTile_avatar {
-            margin-left: calc(var(--name-width) + $icon-width + $right-padding);
+            margin-left: calc(var(--name-width) + var(--icon-width) + var(--right-padding));
         }
     }
 
     blockquote {
         margin: 0;
     }
 
-    .mx_GenericEventListSummary > .mx_EventTile_line {
-        padding-left: calc(var(--name-width) + $icon-width + $MessageTimestamp_width + 3 * $right-padding); // 15 px of padding
-    }
-
     .mx_EventTile.mx_EventTile_info {
         .mx_EventTile_avatar {
-            left: calc(var(--name-width) + 10px + $icon-width);
+            left: calc(var(--name-width) + 10px + var(--icon-width));
             top: 0;
+            margin-right: var(--right-padding);
         }
 
         .mx_EventTile_line {
-            left: calc(var(--name-width) + 10px + $icon-width);
+            left: calc(var(--name-width) + 10px + var(--icon-width));
         }
 
         .mx_TextualEvent {