Merge pull request #4858 from matrix-org/t3chguy/room-list/2

Room Tile context menu, notifications, indicator and placement

res/css/_common.scss

@@ -588,27 +588,16 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
 
 // A context menu that largely fits the | [icon]    [label] | format.
 .mx_IconizedContextMenu {
-    // Put 20px of padding around the whole menu. We do this instead of a
-    // simple `padding: 20px` rule so the horizontal rules added by the
-    // optionLists is rendered correctly (full width).
-    > * {
-        padding-left: 20px;
-        padding-right: 20px;
-
-        &:first-child {
-            padding-top: 20px;
-        }
+    min-width: 146px;
 
-        &:last-child {
-            padding-bottom: 16px;
+    .mx_IconizedContextMenu_optionList {
+        & > * {
+            padding-left: 20px;
+            padding-right: 20px;
         }
-    }
 
-    .mx_IconizedContextMenu_optionList {
         // the notFirst class is for cases where the optionList might be under a header of sorts.
         &:nth-child(n + 2), .mx_IconizedContextMenu_optionList_notFirst {
-            margin-top: 12px;
-
             // This is a bit of a hack when we could just use a simple border-top property,
             // however we have a (kinda) good reason for doing it this way: we need opacity.
             // To get the right color, we need an opacity modifier which means we have to work
@@ -631,72 +620,55 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
             }
         }
 
-        ul {
-            list-style: none;
-            margin: 0;
-            padding: 0;
-
-            li {
-                margin: 0;
-                padding: 12px 0 0;
-
-                .mx_AccessibleButton {
-                    text-decoration: none;
-                    color: $primary-fg-color;
-                    font-size: $font-15px;
-                    line-height: $font-24px;
-
-                    // Create a flexbox to more easily define the list items
-                    display: flex;
-                    align-items: center;
-
-                    img, .mx_IconizedContextMenu_icon { // icons
-                        width: 16px;
-                        min-width: 16px;
-                        max-width: 16px;
-                    }
-
-                    span:last-child { // labels
-                        padding-left: 14px;
-                        width: 100%;
-                        flex: 1;
-
-                        // Ellipsize any text overflow
-                        text-overflow: ellipsis;
-                        overflow: hidden;
-                        white-space: nowrap;
-                    }
-                }
-            }
+        // round the top corners of the top button for the hover effect to be bounded
+        &:first-child .mx_AccessibleButton:first-child {
+            border-radius: 4px 4px 0 0; // radius matches .mx_ContextualMenu
         }
-    }
 
-    &.mx_IconizedContextMenu_compact {
-        > * {
-            padding-left: 11px;
-            padding-right: 16px;
+        // round the bottom corners of the bottom button for the hover effect to be bounded
+        &:last-child .mx_AccessibleButton:last-child {
+            border-radius: 0 0 4px 4px; // radius matches .mx_ContextualMenu
+        }
 
-            &:first-child {
-                padding-top: 13px;
+        .mx_AccessibleButton {
+            // pad the inside of the button so that the hover background is padded too
+            padding-top: 12px;
+            padding-bottom: 12px;
+            text-decoration: none;
+            color: $primary-fg-color;
+            font-size: $font-15px;
+            line-height: $font-24px;
+
+            // Create a flexbox to more easily define the list items
+            display: flex;
+            align-items: center;
+
+            &:hover {
+                background-color: $menu-selected-color;
             }
 
-            &:last-child {
-                padding-bottom: 13px;
+            img, .mx_IconizedContextMenu_icon { // icons
+                width: 16px;
+                min-width: 16px;
+                max-width: 16px;
             }
-        }
 
-        .mx_IconizedContextMenu_optionList {
-            &:nth-child(n + 2), .mx_IconizedContextMenu_optionList_notFirst {
-                margin-top: 10px;
+            span.mx_IconizedContextMenu_label { // labels
+                padding-left: 14px;
+                width: 100%;
+                flex: 1;
 
-                li:first-child {
-                    padding-top: 10px;
-                }
+                // Ellipsize any text overflow
+                text-overflow: ellipsis;
+                overflow: hidden;
+                white-space: nowrap;
             }
+        }
+    }
 
-            li:first-child {
-                padding-top: 0;
-            }
+    &.mx_IconizedContextMenu_compact {
+        .mx_IconizedContextMenu_optionList > * {
+            padding: 8px 16px 8px 11px;
         }
     }
 }

res/css/structures/_UserMenu.scss

@@ -86,6 +86,8 @@ limitations under the License.
 
     .mx_UserMenu_contextMenu_redRow {
         .mx_AccessibleButton {
+            padding-top: 16px;
+            padding-bottom: 16px;
             color: $warning-color !important; // !important to override styles from context menu
         }
 
@@ -95,6 +97,8 @@ limitations under the License.
     }
 
     .mx_UserMenu_contextMenu_header {
+        padding: 20px;
+
         // Create a flexbox to organize the header a bit easier
         display: flex;
         align-items: center;

res/css/views/rooms/_RoomTile2.scss

@@ -92,20 +92,18 @@ limitations under the License.
         justify-content: center;
     }
 
-    // The menu button is hidden by default
-    // TODO: [Notifications] Use mx_RoomTile2_notificationsButton, similar to the following approach:
-    // https://github.com/matrix-org/matrix-react-sdk/blob/2180a56074f3698fc0241c309a72ba6cad802d1c/res/css/views/rooms/_RoomSublist2.scss#L48-L76
-    // You'll need to do the same down below on the &:hover selector for the tile.
-    // See https://github.com/vector-im/riot-web/issues/13961.
-    // ... also remove this 5 line TODO comment.
+    // The context menu buttons are hidden by default
     .mx_RoomTile2_menuButton,
     .mx_RoomTile2_notificationsButton {
-        width: 0;
-        height: 0;
-        visibility: hidden;
+        width: 20px;
+        height: 20px;
+        margin: auto 0 auto 8px;
         position: relative;
+        display: none;
 
         &::before {
+            top: 2px;
+            left: 2px;
             content: '';
             width: 16px;
             height: 16px;
@@ -117,9 +115,12 @@ limitations under the License.
         }
     }
 
+    // If the room has an overriden notification setting then we always show the notifications menu button
+    .mx_RoomTile2_notificationsButton.mx_RoomTile2_notificationsButton_show {
+        display: block;
+    }
+
     .mx_RoomTile2_menuButton::before {
-        top: 8px;
-        left: -1px; // this is off-center to align it with the badges
         mask-image: url('$(res)/img/feather-customised/more-horizontal.svg');
     }
 
@@ -132,10 +133,9 @@ limitations under the License.
                 visibility: hidden;
             }
 
+            .mx_RoomTile2_notificationsButton,
             .mx_RoomTile2_menuButton {
-                width: 18px;
-                height: 32px;
-                visibility: visible;
+                display: block;
             }
         }
     }
@@ -158,6 +158,23 @@ limitations under the License.
     }
 }
 
+// We use these both in context menus and the room tiles
+.mx_RoomTile2_iconBell::before {
+    mask-image: url('$(res)/img/feather-customised/bell.svg');
+}
+.mx_RoomTile2_iconBellDot::before {
+    mask-image: url('$(res)/img/feather-customised/bell-notification.custom.svg');
+}
+.mx_RoomTile2_iconBellCrossed::before {
+    mask-image: url('$(res)/img/feather-customised/bell-crossed.svg');
+}
+.mx_RoomTile2_iconBellMentions::before {
+    mask-image: url('$(res)/img/feather-customised/bell-mentions.custom.svg');
+}
+.mx_RoomTile2_iconCheck::before {
+    mask-image: url('$(res)/img/feather-customised/check.svg');
+}
+
 .mx_RoomTile2_contextMenu {
     .mx_RoomTile2_contextMenu_redRow {
         .mx_AccessibleButton {
@@ -169,6 +186,16 @@ limitations under the License.
         }
     }
 
+    .mx_RoomTile2_contextMenu_activeRow {
+        &.mx_AccessibleButton, .mx_AccessibleButton {
+            color: $accent-color !important; // !important to override styles from context menu
+        }
+
+        .mx_IconizedContextMenu_icon::before {
+            background-color: $accent-color;
+        }
+    }
+
     .mx_IconizedContextMenu_icon {
         position: relative;
         width: 16px;