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,74 +644,19 @@ 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));
-
-    .mx_GenericEventListSummary_toggle {
-        margin: 0 55px 0 5px;
-        float: none;
-
-        &[aria-expanded=false] {
-            order: 9;
-        }
-        &[aria-expanded=true] {
-            text-align: right;
-        }
-    }
-
-    .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;
-        }
-    }
-
-    &::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] {
+    &[data-expanded=false] + .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
+    &[data-expanded=true] .mx_EventTile_info {
-    // 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;
 
@@ -720,7 +675,6 @@ limitations under the License.
         }
     }
 }
-}
 
 .mx_EventTile_tileError[data-layout=bubble] .mx_EventTile_line {
     flex-direction: column; // restore the centering

res/css/views/rooms/_EventTile.scss

@@ -307,15 +307,13 @@ $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;
 
     .mx_RedactedBody {
         line-height: 1; // remove spacing between lines
     }
 }
-}
 
 .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 {

res/css/views/rooms/_IRCLayout.scss

@@ -120,17 +120,10 @@ $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
     }
 
-        .mx_GenericEventListSummary_avatars {
-            padding: 0;
-            margin: 0 9px 0 0;
-        }
-    }
-
     .mx_EventTile.mx_EventTile_info {
         .mx_EventTile_avatar {
             left: calc(var(--name-width) + 10px + $icon-width);