Move unread notification dots of the threads list to the expected pos…

…ition (#8700) * Change dot size from 10px to 8px Signed-off-by: Suguru Hirahara <[email protected]> * Set inset 8px to the dot Signed-off-by: Suguru Hirahara <[email protected]> * Use shorthand properties for inset Signed-off-by: Suguru Hirahara <[email protected]> * Move blocks from '.mx_EventTile:not([data-layout=bubble])' to '.mx_EventTile[data-shape=ThreadsList]' For a notification dot it does not matter whether the layout of the event tile is bubble or not. Instead what matters is that the dot is expected to be displayed on the threads list. Signed-off-by: Suguru Hirahara <[email protected]> * Remove redundant declarations Signed-off-by: Suguru Hirahara <[email protected]> * Remove an obsolete z-index declaration The declaration was added with ed34952 to fix a clickability issue. Now the event tile is clickable everywhere, it is no longer required. Signed-off-by: Suguru Hirahara <[email protected]>
matrix-org · May 25, 2022 · f3b762c · f3b762c
1 parent 0f26ddd
commit f3b762c
Showing 1 changed file with 17 additions and 25 deletions.
diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
@@ -79,25 +79,6 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
     font-size: $font-14px;
     position: relative;
 
-    &[data-shape=ThreadsList][data-notification]::before {
-        content: "";
-        position: absolute;
-        width: 10px;
-        height: 10px;
-        border-radius: 50%;
-        right: -25px; // center it in the gutter (16px margin + 4px padding + half 10px width)
-        top: 4px;
-        left: auto;
-    }
-
-    &[data-shape=ThreadsList][data-notification=total]::before {
-        background-color: $room-icon-unread-color;
-    }
-
-    &[data-shape=ThreadsList][data-notification=highlight]::before {
-        background-color: $alert;
-    }
-
     .mx_ThreadSummary,
     .mx_ThreadSummaryIcon {
         margin-left: 64px;
@@ -780,12 +761,23 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
     &::before {
         content: "";
         position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        /* enough to cover all sibling elements */
-        z-index: 10;
+        inset: 0;
+    }
+
+    // Display notification dot
+    &[data-notification]::before {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        inset: 14px 8px auto auto; // 14px: align the dot with the timestamp row
+    }
+
+    &[data-notification=total]::before {
+        background-color: $room-icon-unread-color;
+    }
+
+    &[data-notification=highlight]::before {
+        background-color: $alert;
     }
 
     &:last-child {