Unified room context menus (#7072)

Author: t3chguy

res/css/_components.scss

@@ -266,6 +266,7 @@
 @import "./views/settings/_UpdateCheckButton.scss";
 @import "./views/settings/tabs/_SettingsTab.scss";
 @import "./views/settings/tabs/room/_GeneralRoomSettingsTab.scss";
+@import "./views/settings/tabs/room/_NotificationSettingsTab.scss";
 @import "./views/settings/tabs/room/_RolesRoomSettingsTab.scss";
 @import "./views/settings/tabs/room/_SecurityRoomSettingsTab.scss";
 @import "./views/settings/tabs/user/_AppearanceUserSettingsTab.scss";

res/css/views/context_menus/_IconizedContextMenu.scss

@@ -17,6 +17,7 @@ limitations under the License.
 // A context menu that largely fits the | [icon]    [label] | format.
 .mx_IconizedContextMenu {
     min-width: 146px;
+    width: max-content;
 
     .mx_IconizedContextMenu_optionList {
         & > * {
@@ -119,7 +120,7 @@ limitations under the License.
             mask-position: center;
             mask-size: contain;
             mask-repeat: no-repeat;
-            background: $primary-content;
+            background-color: $secondary-content;
         }
     }
 
@@ -133,6 +134,14 @@ limitations under the License.
         }
     }
 
+    .mx_IconizedContextMenu_option_red {
+        color: $alert !important;
+
+        .mx_IconizedContextMenu_icon::before {
+            background-color: $alert;
+        }
+    }
+
     .mx_IconizedContextMenu_active {
         &.mx_AccessibleButton, .mx_AccessibleButton {
             color: $accent !important;
@@ -162,4 +171,9 @@ limitations under the License.
     .mx_IconizedContextMenu_unchecked::before {
         content: unset;
     }
+
+    .mx_IconizedContextMenu_sublabel {
+        margin-left: 20px;
+        color: $tertiary-content;
+    }
 }

res/css/views/right_panel/_BaseCard.scss

@@ -99,7 +99,7 @@ limitations under the License.
         }
 
         .mx_BaseCard_Button {
-            padding: 10px 38px 10px 12px;
+            padding: 10px 32px 10px 12px;
             margin: 0;
             position: relative;
             font-size: $font-13px;
@@ -109,6 +109,12 @@ limitations under the License.
             overflow: hidden;
             white-space: nowrap;
             text-overflow: ellipsis;
+            display: flex;
+
+            .mx_BaseCard_Button_sublabel {
+                color: $tertiary-content;
+                margin-left: auto;
+            }
 
             &:hover {
                 background-color: rgba(141, 151, 165, 0.1);

res/css/views/rooms/_RoomHeader.scss

@@ -33,12 +33,13 @@ limitations under the License.
 }
 
 .mx_RoomHeader_wrapper {
-    margin: auto;
-    height: 50px;
+    height: 44px;
     display: flex;
     align-items: center;
     min-width: 0;
-    padding: 0 10px 0 18px;
+    margin: 0 20px 0 16px;
+    padding-top: 8px;
+    border-bottom: 1px solid $system;
 
     .mx_InviteOnlyIcon_large {
         margin: 0;
@@ -85,40 +86,65 @@ limitations under the License.
 
 .mx_RoomHeader_simpleHeader {
     line-height: $font-52px;
-    color: $roomheader-color;
+    color: $primary-content;
     font-size: $font-18px;
-    font-weight: 600;
+    font-weight: $font-semi-bold;
     overflow: hidden;
     margin-left: 63px;
     text-overflow: ellipsis;
     width: 100%;
-}
 
-.mx_RoomHeader_simpleHeader .mx_RoomHeader_cancelButton {
-    float: right;
-}
+    .mx_RoomHeader_cancelButton {
+        float: right;
+    }
 
-.mx_RoomHeader_simpleHeader .mx_RoomHeader_icon {
-    margin-left: 14px;
-    margin-right: 24px;
-    vertical-align: -4px;
+    .mx_RoomHeader_icon {
+        margin-left: 14px;
+        margin-right: 24px;
+        vertical-align: -4px;
+    }
 }
 
 .mx_RoomHeader_name {
     flex: 0 1 auto;
     overflow: hidden;
-    color: $roomheader-color;
-    font-weight: 600;
+    color: $primary-content;
+    font-weight: $font-semi-bold;
     font-size: $font-18px;
+    border-radius: 6px;
     margin: 0 7px;
-    border-bottom: 1px solid transparent;
+    padding: 1px 4px;
     display: flex;
-}
+    user-select: none;
 
-.mx_RoomHeader_nametext {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
+    &:hover {
+        background-color: $quinary-content;
+    }
+
+    .mx_RoomHeader_nametext {
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
+
+    .mx_RoomHeader_chevron {
+        align-self: center;
+        width: 16px;
+        height: 16px;
+        mask-position: center;
+        mask-size: contain;
+        mask-repeat: no-repeat;
+        mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
+        background-color: $tertiary-content;
+    }
+
+    &[aria-expanded=true] {
+        background-color: $quinary-content;
+
+        .mx_RoomHeader_chevron {
+            transform: rotate(180deg);
+        }
+    }
 }
 
 .mx_RoomHeader_settingsHint {
@@ -131,46 +157,17 @@ limitations under the License.
 }
 
 .mx_RoomHeader_name,
-.mx_RoomHeader_avatar,
-.mx_RoomHeader_avatarPicker,
-.mx_RoomHeader_avatarPicker_edit,
-.mx_RoomHeader_avatarPicker_remove {
+.mx_RoomHeader_avatar {
     cursor: pointer;
 }
 
-.mx_RoomHeader_avatarPicker_remove {
-    position: absolute;
-    top: -11px;
-    right: -9px;
-}
-
-.mx_RoomHeader_name:hover div:not(.mx_RoomHeader_editable) {
-    color: $accent;
-}
-
-.mx_RoomHeader_placeholder {
-    color: $settings-grey-fg-color !important;
-}
-
-.mx_RoomHeader_editable {
-    border-bottom: 1px solid $strong-input-border-color !important;
-    min-width: 150px;
-    cursor: text;
-}
-
-.mx_RoomHeader_editable:focus {
-    border-bottom: 1px solid $accent !important;
-    outline: none;
-    box-shadow: none;
-}
-
 .mx_RoomHeader_topic {
     flex: 1;
     color: $roomtopic-color;
     font-weight: 400;
     font-size: $font-13px;
-    margin: 0 7px;
-    margin-top: 4px; // to align baseline of topic with room name
+    // to align baseline of topic with room name
+    margin: 4px 7px 0;
     overflow: hidden;
     text-overflow: ellipsis;
     border-bottom: 1px solid transparent;
@@ -188,24 +185,6 @@ limitations under the License.
     object-fit: cover;
 }
 
-.mx_RoomHeader_avatarPicker {
-    position: relative;
-}
-
-.mx_RoomHeader_avatarPicker_edit {
-    position: absolute;
-    left: 16px;
-    top: 18px;
-}
-
-.mx_RoomHeader_avatarPicker_edit > label {
-    cursor: pointer;
-}
-
-.mx_RoomHeader_avatarPicker_edit > input {
-    display: none;
-}
-
 .mx_RoomHeader_button {
     position: relative;
     margin-left: 1px;
@@ -265,21 +244,10 @@ limitations under the License.
     mask-image: url('$(res)/img/element-icons/call/video-call.svg');
 }
 
-.mx_RoomHeader_showPanel {
-    height: 16px;
-}
-
-.mx_RoomHeader_voipButton {
-    display: table-cell;
-}
-
-.mx_RoomHeader_voipButtons {
-    margin-top: 18px;
-}
-
 @media only screen and (max-width: 480px) {
     .mx_RoomHeader_wrapper {
         padding: 0;
+        margin: 0;
     }
     .mx_RoomHeader {
         overflow: hidden;

res/css/views/rooms/_RoomTile.scss

@@ -189,10 +189,42 @@ limitations under the License.
         mask-image: url('$(res)/img/element-icons/roomlist/low-priority.svg');
     }
 
+    .mx_RoomTile_iconNotificationsDefault::before {
+        mask-image: url('$(res)/img/element-icons/notifications.svg');
+    }
+
+    .mx_RoomTile_iconNotificationsAllMessages::before {
+        mask-image: url('$(res)/img/element-icons/roomlist/notifications-default.svg');
+    }
+
+    .mx_RoomTile_iconNotificationsMentionsKeywords::before {
+        mask-image: url('$(res)/img/element-icons/roomlist/notifications-dm.svg');
+    }
+
+    .mx_RoomTile_iconNotificationsNone::before {
+        mask-image: url('$(res)/img/element-icons/roomlist/notifications-off.svg');
+    }
+
+    .mx_RoomTile_iconPeople::before {
+        mask-image: url('$(res)/img/element-icons/room/members.svg');
+    }
+
+    .mx_RoomTile_iconFiles::before {
+        mask-image: url('$(res)/img/element-icons/room/files.svg');
+    }
+
+    .mx_RoomTile_iconWidgets::before {
+        mask-image: url('$(res)/img/element-icons/room/apps.svg');
+    }
+
     .mx_RoomTile_iconSettings::before {
         mask-image: url('$(res)/img/element-icons/settings.svg');
     }
 
+    .mx_RoomTile_iconExport::before {
+        mask-image: url('$(res)/img/element-icons/export.svg');
+    }
+
     .mx_RoomTile_iconCopyLink::before {
         mask-image: url('$(res)/img/element-icons/link.svg');
     }

res/css/views/settings/tabs/room/_NotificationSettingsTab.scss

@@ -0,0 +1,76 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_NotificationSettingsTab_notificationsSection {
+    width: 360px;
+
+    .mx_StyledRadioButton {
+        flex-direction: row-reverse;
+        color: $primary-content;
+        font-size: $font-15px;
+        line-height: $font-18px;
+        font-weight: $font-semi-bold;
+        margin-top: 16px;
+        position: relative;
+        padding-left: 8px;
+        align-items: center;
+
+        &::before {
+            content: "";
+            position: absolute;
+            height: 24px;
+            width: 24px;
+            left: 0;
+            mask-repeat: no-repeat;
+            mask-position: center;
+            mask-size: contain;
+            background-color: $secondary-content;
+        }
+
+        input + div {
+            margin-top: 8px;
+        }
+
+        .mx_NotificationSettingsTab_microCopy {
+            color: $secondary-content;
+            font-weight: normal;
+            font-size: $font-12px;
+            line-height: $font-15px;
+            margin-right: 32px;
+
+            .mx_AccessibleButton_kind_link {
+                padding: 0;
+                font-size: inherit;
+            }
+        }
+    }
+
+    .mx_NotificationSettingsTab_defaultEntry::before {
+        mask-image: url('$(res)/img/element-icons/notifications.svg');
+    }
+
+    .mx_NotificationSettingsTab_allMessagesEntry::before {
+        mask-image: url('$(res)/img/element-icons/roomlist/notifications-default.svg');
+    }
+
+    .mx_NotificationSettingsTab_mentionsKeywordsEntry::before {
+        mask-image: url('$(res)/img/element-icons/roomlist/notifications-dm.svg');
+    }
+
+    .mx_NotificationSettingsTab_noneEntry::before {
+        mask-image: url('$(res)/img/element-icons/roomlist/notifications-off.svg');
+    }
+}