Unified room context menus (#7072)

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');
     }