Enable background color on hover for chat panel and thread panel (#8644)

* Enable background color on hover for chat panel and thread panel - Display reactions row on hover - Use variables Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Replace --BaseCard_EventTile-spacing-horizontal with --BaseCard_EventTile-spacing-inline - horizontal: inline - vertical: block Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * mx_EventTile.mx_EventTile_bad[data-layout=bubble] seems to require bubble layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * yarn run lint:style --fix Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
matrix-org · Jun 10, 2022 · 0d3fe30 · 0d3fe30
1 parent 8e9f740
commit 0d3fe30
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 62 deletions.
diff --git a/res/css/views/right_panel/_BaseCard.scss b/res/css/views/right_panel/_BaseCard.scss
@@ -16,7 +16,7 @@ limitations under the License.
 
 .mx_BaseCard {
     --BaseCard_EventTile_line-padding-block: 2px;
-    --BaseCard_EventTile-spacing-horizontal: 36px;
+    --BaseCard_EventTile-spacing-inline: 36px;
 
     padding: 0 8px;
     overflow: hidden;

diff --git a/res/css/views/right_panel/_TimelineCard.scss b/res/css/views/right_panel/_TimelineCard.scss
@@ -43,63 +43,75 @@ limitations under the License.
     }
 
     .mx_NewRoomIntro {
-        margin-inline-start: var(--BaseCard_EventTile-spacing-horizontal);
-        margin-inline-end: var(--BaseCard_EventTile-spacing-horizontal);
+        margin-inline-start: var(--BaseCard_EventTile-spacing-inline);
+        margin-inline-end: var(--BaseCard_EventTile-spacing-inline);
     }
 
     .mx_EventTile_content {
         margin-right: 0;
     }
 
-    .mx_EventTile:not([data-layout="bubble"]) {
-        &.mx_EventTile_info .mx_EventTile_line,
-        .mx_EventTile_line {
-            padding: var(--BaseCard_EventTile_line-padding-block) var(--BaseCard_EventTile-spacing-horizontal);
-            padding-inline-end: $MessageTimestamp_width; // ensure timestamp is not hidden
-
-            .mx_EventTile_e2eIcon {
-                inset-inline-start: 8px;
+    .mx_EventTile {
+        &[data-layout=bubble] {
+            &::before {
+                z-index: auto; // enable background color on hover
             }
-        }
 
-        .mx_DisambiguatedProfile,
-        .mx_ReactionsRow,
-        .mx_ThreadSummary {
-            margin-inline-start: var(--BaseCard_EventTile-spacing-horizontal);
+            .mx_ReactionsRow {
+                position: relative; // display on hover
+            }
         }
 
-        .mx_ReactionsRow {
-            padding: 0;
+        &:not([data-layout="bubble"]) {
+            &.mx_EventTile_info .mx_EventTile_line,
+            .mx_EventTile_line {
+                padding: var(--BaseCard_EventTile_line-padding-block) var(--BaseCard_EventTile-spacing-inline);
+                padding-inline-end: $MessageTimestamp_width; // ensure timestamp is not hidden
 
-            // See margin setting of ReactionsRow on _EventTile.scss
-            margin-right: 8px;
-        }
+                .mx_EventTile_e2eIcon {
+                    inset-inline-start: 8px;
+                }
+            }
 
-        .mx_ThreadSummary {
-            margin-right: 0;
-            max-width: min(calc(100% - 36px), 600px);
-        }
+            .mx_DisambiguatedProfile,
+            .mx_ReactionsRow,
+            .mx_ThreadSummary {
+                margin-inline-start: var(--BaseCard_EventTile-spacing-inline);
+            }
 
-        .mx_EventTile_avatar {
-            position: absolute; // for IRC layout
-            top: 12px;
-            left: -3px;
-        }
+            .mx_ReactionsRow {
+                padding: 0;
 
-        .mx_MessageTimestamp {
-            position: absolute; // for modern layout and IRC layout
-            inset-inline-start: auto;
-            inset-inline-end: 0;
-        }
+                // See margin setting of ReactionsRow on _EventTile.scss
+                margin-right: 8px;
+            }
 
-        .mx_EventTile_msgOption {
-            // Override mx_EventTile_msgOption of mx_EventTile:not([data-layout="bubble"])
-            margin-inline-end: 0;
-        }
+            .mx_ThreadSummary {
+                margin-right: 0;
+                max-width: min(calc(100% - 36px), 600px);
+            }
 
-        &.mx_EventTile_info {
             .mx_EventTile_avatar {
-                left: 18px;
+                position: absolute; // for IRC layout
+                top: 12px;
+                left: -3px;
+            }
+
+            .mx_MessageTimestamp {
+                position: absolute; // for modern layout and IRC layout
+                inset-inline-start: auto;
+                inset-inline-end: 0;
+            }
+
+            .mx_EventTile_msgOption {
+                // Override mx_EventTile_msgOption of mx_EventTile:not([data-layout="bubble"])
+                margin-inline-end: 0;
+            }
+
+            &.mx_EventTile_info {
+                .mx_EventTile_avatar {
+                    left: 18px;
+                }
             }
         }
     }
@@ -134,8 +146,8 @@ 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-horizontal);
-            padding-inline-end: var(--BaseCard_EventTile-spacing-horizontal);
+            padding-inline-start: var(--BaseCard_EventTile-spacing-inline);
+            padding-inline-end: var(--BaseCard_EventTile-spacing-inline);
         }
     }
 

diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss
@@ -53,9 +53,12 @@ limitations under the License.
 }
 
 .mx_EventTile[data-layout=bubble] {
+    --EventTile_bubble-margin-inline-start: 49px;
+    --EventTile_bubble-margin-inline-end: 60px;
+
     position: relative;
     margin-top: var(--gutterSize);
-    margin-left: 49px;
+    margin-left: var(--EventTile_bubble-margin-inline-start);
     font-size: $font-14px;
 
     .mx_ThreadSummary {
@@ -89,8 +92,8 @@ limitations under the License.
         position: absolute;
         top: -1px;
         bottom: -1px;
-        left: -60px;
-        right: -60px;
+        left: calc(-1 * var(--EventTile_bubble-margin-inline-start));
+        right: calc(-1 * var(--EventTile_bubble-margin-inline-end));
         z-index: -1;
         border-radius: 4px;
     }
@@ -665,6 +668,17 @@ limitations under the License.
         }
     }
 
+    /* events that do not require bubble layout */
+    .mx_EventTile_line {
+        background: transparent;
+    }
+
+    &:hover {
+        &::before {
+            background: transparent;
+        }
+    }
+
     &::after {
         content: "";
         clear: both;
@@ -708,20 +722,6 @@ limitations under the License.
     }
 }
 
-/* events that do not require bubble layout */
-.mx_GenericEventListSummary[data-layout=bubble],
-.mx_EventTile.mx_EventTile_bad[data-layout=bubble] {
-    .mx_EventTile_line {
-        background: transparent;
-    }
-
-    &:hover {
-        &::before {
-            background: transparent;
-        }
-    }
-}
-
 .mx_EventTile_tileError[data-layout=bubble] .mx_EventTile_line {
     flex-direction: column; // restore the centering
 }
diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
@@ -955,8 +955,17 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
         }
 
         &[data-layout=bubble] {
-            margin-inline-start: var(--BaseCard_EventTile-spacing-horizontal);
-            margin-inline-end: var(--BaseCard_EventTile-spacing-horizontal);
+            margin-inline-start: var(--BaseCard_EventTile-spacing-inline);
+            margin-inline-end: var(--BaseCard_EventTile-spacing-inline);
+
+            &::before {
+                inset-inline: calc(-1 * var(--BaseCard_EventTile-spacing-inline));
+                z-index: auto; // enable background color on hover
+            }
+
+            .mx_ReactionsRow {
+                position: relative; // display on hover
+            }
 
             .mx_EventTile_line.mx_EventTile_mediaLine {
                 padding-block: 0;