Improve _NotificationPanel.scss (#9036)

* Include in mx_NotificationPanel 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> * Include in mx_RoomView_MessageList Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Include in mx_EventTile_roomName Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Include in mx_EventTile Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Same order as _FilePanel.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove redundant and obsolete declarations Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Shorthand for padding Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove a obsolete declaration Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move declarations out of mx_EventTile:not([data-layout=bubble]) Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge style declarations Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply the block start margin Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Improve style rules Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Align elements with flexbox, specifying how to handle overflow room name Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use column-gap instead Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Add indent to the comment Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
matrix-org · Jul 12, 2022 · 6fb8342 · 6fb8342
1 parent c175263
commit 6fb8342
Showing 1 changed file with 73 additions and 90 deletions.
diff --git a/res/css/structures/_NotificationPanel.scss b/res/css/structures/_NotificationPanel.scss
@@ -19,110 +19,93 @@ limitations under the License.
     flex: 1 1 0;
     overflow-y: auto;
     display: flex;
-}
-
-.mx_NotificationPanel .mx_RoomView_messageListWrapper {
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-}
 
-.mx_NotificationPanel .mx_RoomView_MessageList {
-    width: 100%;
-}
+    .mx_RoomView_messageListWrapper {
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+    }
 
-.mx_NotificationPanel .mx_RoomView_MessageList h2 {
-    margin-left: 0px;
-}
+    .mx_RoomView_MessageList {
+        width: 100%;
 
-/* FIXME: rather than having EventTile's default CSS be for MessagePanel,
-   we should make EventTile a base CSS class and customise it specifically
-   for usage in {Message,File,Notification}Panel. */
-
-.mx_NotificationPanel .mx_EventTile {
-    word-break: break-word;
-    position: relative;
-    padding-bottom: 18px;
-
-    &:not(.mx_EventTile_last):not(.mx_EventTile_lastInSection)::after {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        background-color: $tertiary-content;
-        height: 1px;
-        opacity: 0.4;
-        content: '';
+        h2 {
+            margin-left: 0;
+        }
     }
-}
 
-.mx_NotificationPanel .mx_EventTile_roomName {
-    font-weight: bold;
-    font-size: $font-14px;
+    /* FIXME: rather than having EventTile's default CSS be for MessagePanel,
+       we should make EventTile a base CSS class and customise it specifically
+       for usage in {Message,File,Notification}Panel. */
 
-    > * {
-        vertical-align: middle;
+    .mx_EventTile_avatar {
+        display: none;
     }
 
-    > .mx_BaseAvatar {
-        margin-right: 8px;
+    .mx_EventTile {
+        word-break: break-word;
+        position: relative;
+        padding-block: 18px;
+
+        .mx_EventTile_senderDetails,
+        .mx_EventTile_line {
+            padding-left: 36px; // align with the room name
+        }
+
+        .mx_EventTile_senderDetails {
+            position: relative;
+
+            a {
+                display: flex;
+                column-gap: 5px; // TODO: Use a spacing variable
+            }
+        }
+
+        .mx_DisambiguatedProfile,
+        .mx_MessageTimestamp {
+            color: $primary-content;
+            font-size: $font-12px;
+            display: inline;
+        }
+
+        &:hover .mx_EventTile_line {
+            background-color: $background;
+        }
+
+        &:not(.mx_EventTile_last):not(.mx_EventTile_lastInSection)::after {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background-color: $tertiary-content;
+            height: 1px;
+            opacity: 0.4;
+            content: '';
+        }
     }
-}
-
-.mx_NotificationPanel .mx_EventTile_roomName a {
-    color: $primary-content;
-}
-
-.mx_NotificationPanel .mx_EventTile_avatar {
-    display: none; // we don't need this in this view
-}
-
-.mx_NotificationPanel .mx_EventTile .mx_DisambiguatedProfile,
-.mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp {
-    color: $primary-content;
-    font-size: $font-12px;
-    display: inline;
-}
 
-.mx_NotificationPanel .mx_EventTile:not([data-layout=bubble]) .mx_EventTile_senderDetails {
-    padding-left: 36px; // align with the room name
-    position: relative;
-
-    a {
+    .mx_EventTile_roomName {
         display: flex;
+        align-items: center;
+        column-gap: $spacing-8;
+        font-weight: bold;
+        font-size: $font-14px;
+
+        a {
+            color: $primary-content;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
     }
-}
-
-.mx_NotificationPanel .mx_EventTile_roomName a,
-.mx_NotificationPanel .mx_EventTile_senderDetails a {
-    text-decoration: none !important;
-}
 
-.mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp {
-    visibility: visible;
-    position: initial;
-    display: inline;
-    padding-left: 5px;
-}
-
-.mx_NotificationPanel .mx_EventTile:not([data-layout=bubble]) .mx_EventTile_line {
-    margin-right: 0px;
-    padding-left: 36px; // align with the room name
-    padding-top: 0px;
-    padding-bottom: 0px;
-    padding-right: 0px;
-}
-
-.mx_NotificationPanel .mx_EventTile_selected .mx_EventTile_line {
-    padding-left: 0px;
-}
-
-.mx_NotificationPanel .mx_EventTile:hover .mx_EventTile_line {
-    background-color: $background;
-}
+    .mx_EventTile_selected .mx_EventTile_line {
+        padding-left: 0;
+    }
 
-.mx_NotificationPanel .mx_EventTile_content {
-    margin-right: 0px;
+    .mx_EventTile_content {
+        margin-right: 0;
+    }
 }
 
 .mx_NotificationPanel_empty::before {