Move style rules of GenericEventListSummary from _EventBubbleTile.scss to _GenericEventListSummary.scss (#8713)

* Move declarations of mx_GenericEventListSummary to _GenericEventListSummary.scss

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Move declarations of mx_GenericEventListSummary[data-expanded=false] to _GenericEventListSummary.scss

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Move declarations of mx_GenericEventListSummary[data-expanded=true] to _GenericEventListSummary.scss

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* de-nestify style rules

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Remove a padding declaration for _EventBubbleTile.scss to set correct cascading order

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* GenericEventListSummary_toggle for ':not([data-layout=bubble])'

Stop setting margin values as default ones

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* GenericEventListSummary_avatars for ':not([data-layout=bubble])'

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Extract flexbox declarations into _GenericEventListSummary.scss

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Move declarations of '&[data-layout=bubble]' up

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Extract background color into _GenericEventListSummary.scss

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Merge style rules of background of EventTile_bad

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Move .mx_GenericEventListSummary_avatars block from _IRCLayout.scsss to _GenericEventListSummary.scss

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* de-nestify style rules

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Stop using :not() pseudo class

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

res/css/views/elements/_GenericEventListSummary.scss

@@ -16,6 +16,76 @@ limitations under the License.
 
 .mx_GenericEventListSummary {
     position: relative;
+
+    &[data-layout=irc],
+    &[data-layout=group] {
+        .mx_GenericEventListSummary_toggle {
+            float: right;
+            margin: 8px 10px 0 0;
+        }
+
+        .mx_GenericEventListSummary_avatars {
+            padding-top: $spacing-8;
+        }
+    }
+
+    &[data-layout=irc] {
+        .mx_GenericEventListSummary_avatars {
+            padding: 0;
+            margin: 0 9px 0 0;
+        }
+    }
+
+    &[data-layout=bubble] {
+        --maxWidth: 70%;
+        margin-left: calc(var(--avatarSize) + var(--gutterSize));
+
+        &[data-expanded=false] {
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+            padding: 0 49px; // Align with left edge of bubble tiles
+        }
+
+        // ideally we'd use display=contents here for the layout to all work regardless of the *ELS but
+        // that breaks ScrollPanel's reliance upon offsetTop so we have to have a bit more finesse.
+        &[data-expanded=true] {
+            display: flex;
+            flex-direction: column;
+            margin: 0;
+        }
+
+        &::after {
+            content: "";
+            clear: both;
+        }
+
+        &:hover {
+            &::before {
+                background: transparent;
+            }
+        }
+
+        .mx_GenericEventListSummary_toggle {
+            margin: 0 55px 0 5px;
+
+            &[aria-expanded=false] {
+                order: 9;
+            }
+
+            &[aria-expanded=true] {
+                text-align: right;
+            }
+        }
+
+        .mx_GenericEventListSummary_line {
+            display: none;
+        }
+
+        .mx_GenericEventListSummary_avatars {
+            padding-top: 0;
+        }
+    }
 }
 
 .mx_GenericEventListSummary_unstyledList {
@@ -31,7 +101,6 @@ limitations under the License.
 .mx_GenericEventListSummary_avatars {
     display: inline-block;
     margin-right: 8px;
-    padding-top: 8px;
     line-height: $font-12px;
 }
 
@@ -43,9 +112,6 @@ limitations under the License.
 .mx_GenericEventListSummary_toggle {
     color: $accent;
     cursor: pointer;
-    float: right;
-    margin-right: 10px;
-    margin-top: 8px;
 }
 
 .mx_GenericEventListSummary_line {

res/css/views/rooms/_EventBubbleTile.scss

@@ -489,6 +489,12 @@ limitations under the License.
     }
 
     &.mx_EventTile_bad {
+        &:hover {
+            &::before {
+                background: transparent;
+            }
+        }
+
         /* Special layout scenario for "Unable To Decrypt (UTD)" events */
         .mx_EventTile_line {
             display: grid;
@@ -588,6 +594,15 @@ limitations under the License.
     }
 }
 
+.mx_EventTile.mx_EventTile_bubbleContainer[data-layout=bubble],
+.mx_EventTile.mx_EventTile_leftAlignedBubble[data-layout=bubble],
+.mx_EventTile.mx_EventTile_info[data-layout=bubble] {
+    padding: 5px 0;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+}
+
 .mx_EventTile.mx_EventTile_bubbleContainer[data-layout=bubble],
 .mx_EventTile.mx_EventTile_leftAlignedBubble[data-layout=bubble],
 .mx_EventTile.mx_EventTile_info[data-layout=bubble],
@@ -595,11 +610,6 @@ limitations under the License.
     --backgroundColor: transparent;
     --gutterSize: 0;
 
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    padding: 5px 0;
-
     .mx_EventTile_avatar {
         position: static;
         order: -1;
@@ -634,90 +644,34 @@ limitations under the License.
 }
 
 .mx_GenericEventListSummary[data-layout=bubble] {
-    --maxWidth: 70%;
+    .mx_EventTile.mx_EventTile_info .mx_EventTile_line {
-    margin-left: calc(var(--avatarSize) + var(--gutterSize));
+        // Avoid overflow of event info by cancelling width settings
+        width: 100%;
+        min-width: 0;
+        max-width: 100%;
+    }
 
-    .mx_GenericEventListSummary_toggle {
+    // increase margin between ELS and the next Event to not have our user avatar overlap the expand/collapse button
-        margin: 0 55px 0 5px;
+    &[data-expanded=false] + .mx_EventTile[data-layout=bubble][data-self=true] {
-        float: none;
+        margin-top: 20px;
+    }
 
-        &[aria-expanded=false] {
+    &[data-expanded=true] .mx_EventTile_info {
-            order: 9;
+        padding: 2px 0;
+        margin-right: 0;
+
+        .mx_MessageActionBar {
+            inset-inline-start: initial; // Reset .mx_EventTile[data-layout="bubble"][data-self="false"] .mx_MessageActionBar
+            inset-inline-end: 48px; // align with that of right-column bubbles
         }
-        &[aria-expanded=true] {
+
-            text-align: right;
+        .mx_ReadReceiptGroup {
+            // match alignment to RRs of chat bubbles
+            inset-inline-end: calc(-1 * var(--ReadReceiptGroup_EventBubbleTile-spacing-end) + 60px);
         }
-    }
 
-    .mx_GenericEventListSummary_line {
-        display: none;
-    }
-
-    .mx_GenericEventListSummary_avatars {
-        padding-top: 0;
-    }
-
-    .mx_EventTile {
-        &.mx_EventTile_info {
-            .mx_EventTile_line {
-                // Avoid overflow of event info by cancelling width settings
-                width: 100%;
-                min-width: 0;
-                max-width: 100%;
-            }
-        }
-    }
-
-    /* events that do not require bubble layout */
-    .mx_EventTile_line {
-        background: transparent;
-    }
-
-    &:hover {
         &::before {
-            background: transparent;
+            inset-inline-end: 0; // match alignment of the hover background to that of chat bubbles
-        }
-    }
-
-    &::after {
-        content: "";
-        clear: both;
-    }
-
-    &[data-expanded=false] {
-        // Align with left edge of bubble tiles
-        padding: 0 49px;
-
-        // increase margin between ELS and the next Event to not have our user avatar overlap the expand/collapse button
-        + .mx_EventTile[data-layout=bubble][data-self=true] {
-            margin-top: 20px;
-        }
-    }
-
-    // ideally we'd use display=contents here for the layout to all work regardless of the *ELS but
-    // that breaks ScrollPanel's reliance upon offsetTop so we have to have a bit more finesse.
-    &[data-expanded=true] {
-        display: flex;
-        flex-direction: column;
-        margin: 0;
-
-        .mx_EventTile_info {
-            padding: 2px 0;
-            margin-right: 0;
-
-            .mx_MessageActionBar {
-                inset-inline-start: initial; // Reset .mx_EventTile[data-layout="bubble"][data-self="false"] .mx_MessageActionBar
-                inset-inline-end: 48px; // align with that of right-column bubbles
-            }
-
-            .mx_ReadReceiptGroup {
-                // match alignment to RRs of chat bubbles
-                inset-inline-end: calc(-1 * var(--ReadReceiptGroup_EventBubbleTile-spacing-end) + 60px);
-            }
-
-            &::before {
-                inset-inline-end: 0; // match alignment of the hover background to that of chat bubbles
-            }
         }
     }
 }

res/css/views/rooms/_EventTile.scss

@@ -307,13 +307,11 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
     }
 }
 
-.mx_GenericEventListSummary:not([data-layout=bubble]) {
+.mx_GenericEventListSummary:not([data-layout=bubble]) .mx_EventTile_line {
-    .mx_EventTile_line {
+    padding-left: $left-gutter;
-        padding-left: $left-gutter;
 
-        .mx_RedactedBody {
+    .mx_RedactedBody {
-            line-height: 1; // remove spacing between lines
+        line-height: 1; // remove spacing between lines
-        }
     }
 }
 

res/css/views/rooms/_IRCLayout.scss

@@ -120,15 +120,8 @@ $irc-line-height: $font-18px;
         margin: 0;
     }
 
-    .mx_GenericEventListSummary {
+    .mx_GenericEventListSummary > .mx_EventTile_line {
-        > .mx_EventTile_line {
+        padding-left: calc(var(--name-width) + $icon-width + $MessageTimestamp_width + 3 * $right-padding); // 15 px of padding
-            padding-left: calc(var(--name-width) + $icon-width + $MessageTimestamp_width + 3 * $right-padding); // 15 px of padding
-        }
-
-        .mx_GenericEventListSummary_avatars {
-            padding: 0;
-            margin: 0 9px 0 0;
-        }
     }
 
     .mx_EventTile.mx_EventTile_info {