Tweaks to informational architecture 1.1 (#7052)

* Move user avatar to Space panel * Add room list header for 'Home' or 'Space Name' to room list Add existing Space context menus to room list header * Re-add pending room join spinner * Iterate RoomListHeader plus context menu * Iterate space context menu * Iterate room list + interactions * Move DND to new iA model * Replace composer custom status management with usermenu one * Cull Quick Actions * Iterate minimized room list state * delint * Merge the RoomListNumResults into the RoomListHeader * Make the search shortcut prompt semi-bold * Iterate RoomListHeader based on design review * Iterate UserMenu based on feedback * Add name to expanded spacepanel usermenu button * i18n * Make room sub list aux button components more generic * Change left panel explore button to only refer to room directory * Iterate RoomListHeader * Fix custom user status input field width in Chrome * Bring back Notification settings button * delint * i18n * post-merge fix * iterate pr * Remove unused state * update copy * Apply suggestions from PR review * delint * Update invite iconography * Iterate Space context menu to match Figma * Fix chevron alignment * Fix edge case for RoomListHeader on metaspaces * Wire up general rageshake-driven feedback mechanism * Add IA1.1 info toast * add missing alt attribute * delint * delint * tweak ia toast priority * e2e test account for new toast * autofocus feedback field and remove old subheading * tweak copy * Iterate space panel colours to match Figma * Iterate PR * delint * Fix feedback submission with object setting values * iterate based on review * Tweak colours and update splash image * Tweaks based on review * Remove room list prompt, made redundant by the big fat `+` * Fix edge cases around User Menu positioning and dnd * Add missing import, bad merge? * Update aria label in e2e test * Fix room list space rooms context menu explore button behaviour * Tweak copy * Revert order of options in the UserMenu * Tweak copy * i18n
matrix-org · Nov 30, 2021 · 8fe582b · 8fe582b
1 parent c09e0ef
commit 8fe582b
Show file tree

Hide file tree

Showing 49 changed files with 1,435 additions and 1,485 deletions.
diff --git a/res/css/_common.scss b/res/css/_common.scss
@@ -482,6 +482,15 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
     overflow-y: hidden;
 }
 
+.mx_DialogDesignChanges_wrapper .mx_Dialog_fixedWidth {
+    max-width: 636px; // match splash image width
+
+    .mx_AccessibleButton_kind_link {
+        font-size: inherit;
+        padding: 0;
+    }
+}
+
 // TODO: Review mx_GeneralButton usage to see if it can use a different class
 // These classes were brought in from the old UserSettings and are included here to avoid
 // breaking the app.

diff --git a/res/css/_components.scss b/res/css/_components.scss
@@ -60,13 +60,11 @@
 @import "./views/auth/_Welcome.scss";
 @import "./views/avatars/_BaseAvatar.scss";
 @import "./views/avatars/_DecoratedRoomAvatar.scss";
-@import "./views/avatars/_MemberStatusMessageAvatar.scss";
 @import "./views/avatars/_WidgetAvatar.scss";
 @import "./views/beta/_BetaCard.scss";
 @import "./views/context_menus/_CallContextMenu.scss";
 @import "./views/context_menus/_IconizedContextMenu.scss";
 @import "./views/context_menus/_MessageContextMenu.scss";
-@import "./views/context_menus/_StatusMessageContextMenu.scss";
 @import "./views/context_menus/_TagTileContextMenu.scss";
 @import "./views/dialogs/_AddExistingToSpaceDialog.scss";
 @import "./views/dialogs/_AddressPickerDialog.scss";
@@ -237,6 +235,7 @@
 @import "./views/rooms/_RoomBreadcrumbs.scss";
 @import "./views/rooms/_RoomHeader.scss";
 @import "./views/rooms/_RoomList.scss";
+@import "./views/rooms/_RoomListHeader.scss";
 @import "./views/rooms/_RoomPreviewBar.scss";
 @import "./views/rooms/_RoomSublist.scss";
 @import "./views/rooms/_RoomTile.scss";

diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.scss
@@ -101,16 +101,38 @@ $roomListCollapsedWidth: 68px;
         }
 
         .mx_LeftPanel_filterContainer {
-            margin-left: 12px;
-            margin-right: 12px;
+            margin: 0 12px;
+            padding: 12px 0 8px;
+            border-bottom: 1px solid $quinary-content;
 
             flex-shrink: 0; // to convince safari's layout engine the flexbox is fine
 
             // Create a flexbox to organize the inputs
             display: flex;
             align-items: center;
 
+            & + .mx_RoomListHeader {
+                margin-top: 12px;
+            }
+
+            .mx_RoomSearch_shortcutPrompt {
+                border-radius: 6px;
+                background-color: $panel-actions;
+                padding: 2px 4px;
+                user-select: none;
+                pointer-events: none;
+                font-size: $font-12px;
+                line-height: $font-15px;
+                font-weight: $font-semi-bold;
+                color: $light-fg-color;
+                margin-right: 6px;
+            }
+
             .mx_RoomSearch_focused, .mx_RoomSearch_hasQuery {
+                .mx_RoomSearch_shortcutPrompt {
+                    display: none;
+                }
+
                 & + .mx_LeftPanel_exploreButton {
                     // Cheaty way to return the occupied space to the filter input
                     flex-basis: 0;
@@ -170,8 +192,12 @@ $roomListCollapsedWidth: 68px;
                     background: $secondary-content;
                 }
 
-                &.mx_LeftPanel_exploreButton_space::before {
-                    mask-image: url('$(res)/img/element-icons/roomlist/browse.svg');
+                &:hover {
+                    background-color: $tertiary-content;
+
+                    &::before {
+                        background-color: $background;
+                    }
                 }
             }
         }
@@ -234,7 +260,6 @@ $roomListCollapsedWidth: 68px;
                 .mx_LeftPanel_exploreButton {
                     margin-left: 0;
                     margin-top: 8px;
-                    background-color: transparent;
                 }
             }
         }

diff --git a/res/css/structures/_RoomSearch.scss b/res/css/structures/_RoomSearch.scss
@@ -67,12 +67,22 @@ limitations under the License.
         .mx_RoomSearch_clearButton {
             width: 16px;
             height: 16px;
-            mask-image: url('$(res)/img/element-icons/roomlist/search-clear.svg');
-            mask-position: center;
-            mask-size: contain;
-            mask-repeat: no-repeat;
-            background-color: $secondary-content;
             margin-right: 8px;
+            background-color: $quinary-content;
+            border-radius: 50%;
+            position: relative;
+
+            &::before {
+                content: "";
+                position: absolute;
+                width: inherit;
+                height: inherit;
+                mask-image: url('$(res)/img/feather-customised/x.svg');
+                mask-position: center;
+                mask-size: 12px;
+                mask-repeat: no-repeat;
+                background-color: $secondary-content;
+            }
         }
     }
 
@@ -82,13 +92,20 @@ limitations under the License.
     }
 
     &.mx_RoomSearch_minimized {
-        border-radius: 32px;
         height: auto;
         width: auto;
-        padding: 8px;
+        padding: 5px;
 
         .mx_RoomSearch_icon {
             margin-left: 0;
         }
+
+        &:hover {
+            background-color: $tertiary-content;
+
+            .mx_RoomSearch_icon {
+                background-color: $background;
+            }
+        }
     }
 }
diff --git a/res/css/structures/_SpacePanel.scss b/res/css/structures/_SpacePanel.scss
@@ -20,7 +20,7 @@ $gutterSize: 16px;
 $activeBorderTransparentGap: 1px;
 
 $activeBackgroundColor: $panel-actions;
-$activeBorderColor: $secondary-content;
+$activeBorderColor: $primary-content;
 
 .mx_SpacePanel {
     background-color: $groupFilterPanel-bg-color;
@@ -37,7 +37,7 @@ $activeBorderColor: $secondary-content;
 
     .mx_SpacePanel_spaceTreeWrapper {
         flex: 1;
-        padding: 8px 8px 16px 0;
+        padding: 12px 8px 16px 0;
     }
 
     .mx_SpacePanel_toggleCollapse {
@@ -92,13 +92,6 @@ $activeBorderColor: $secondary-content;
         }
     }
 
-    .mx_SpaceTreeLevel {
-        display: flex;
-        flex-direction: column;
-        max-width: 250px;
-        flex-grow: 1;
-    }
-
     .mx_SpaceItem {
         display: inline-flex;
         flex-flow: wrap;
@@ -209,10 +202,10 @@ $activeBorderColor: $secondary-content;
         &.mx_SpaceButton_people,
         &.mx_SpaceButton_orphans {
             .mx_SpaceButton_icon {
-                background-color: #ffffff;
+                background-color: $panel-actions;
 
                 &::before {
-                    background-color: #3f3d3d;
+                    background-color: $secondary-content;
                 }
             }
         }
@@ -234,8 +227,6 @@ $activeBorderColor: $secondary-content;
         }
 
         &.mx_SpaceButton_new .mx_SpaceButton_icon {
-            background-color: $panel-actions;
-
             &::before {
                 background-color: $primary-content;
                 mask-image: url('$(res)/img/element-icons/plus.svg');
@@ -261,7 +252,7 @@ $activeBorderColor: $secondary-content;
             position: relative;
 
             &::before {
-                top: 2px;
+                top: 3px;
                 left: 2px;
                 content: '';
                 width: 16px;
@@ -276,6 +267,35 @@ $activeBorderColor: $secondary-content;
         }
     }
 
+    .mx_SpaceTreeLevel {
+        display: flex;
+        flex-direction: column;
+        max-width: 250px;
+        flex-grow: 1;
+
+        .mx_BaseAvatar:not(.mx_UserMenu_userAvatar_BaseAvatar) .mx_BaseAvatar_initial {
+            color: $secondary-content;
+            width: 32px;
+            height: 32px;
+            border-radius: 8px;
+            background-color: $panel-actions;
+            font-size: $font-15px !important; // override inline style
+            font-weight: $font-semi-bold;
+            line-height: $font-18px;
+
+            & + .mx_BaseAvatar_image {
+                visibility: hidden;
+            }
+        }
+
+        .mx_SpaceTreeLevel {
+            .mx_BaseAvatar_initial {
+                width: 24px;
+                height: 24px;
+            }
+        }
+    }
+
     .mx_SpaceButton_avatarWrapper {
         position: relative;
     }
@@ -338,13 +358,8 @@ $activeBorderColor: $secondary-content;
         line-height: $font-18px;
     }
 
-    .mx_IconizedContextMenu_optionList .mx_AccessibleButton.mx_SpacePanel_contextMenu_inviteButton {
-        color: $accent;
-
-        .mx_SpacePanel_iconInvite::before {
-            background-color: $accent;
-            mask-image: url('$(res)/img/element-icons/room/invite.svg');
-        }
+    .mx_SpacePanel_iconInvite::before {
+        mask-image: url('$(res)/img/element-icons/room/invite.svg');
     }
 
     .mx_SpacePanel_iconSettings::before {
@@ -360,15 +375,11 @@ $activeBorderColor: $secondary-content;
     }
 
     .mx_SpacePanel_iconPlus::before {
-        mask-image: url('$(res)/img/element-icons/roomlist/plus-circle.svg');
-    }
-
-    .mx_SpacePanel_iconHash::before {
-        mask-image: url('$(res)/img/element-icons/roomlist/hash-circle.svg');
+        mask-image: url('$(res)/img/element-icons/plus.svg');
     }
 
     .mx_SpacePanel_iconExplore::before {
-        mask-image: url('$(res)/img/element-icons/roomlist/browse.svg');
+        mask-image: url('$(res)/img/element-icons/roomlist/search.svg');
     }
 
     .mx_SpacePanel_noIcon {
@@ -378,6 +389,14 @@ $activeBorderColor: $secondary-content;
             padding-left: 5px !important; // override default iconized label style to align with header
         }
     }
+
+    .mx_SpacePanel_contextMenu_separatorLabel {
+        color: $tertiary-content;
+        font-size: $font-10px;
+        line-height: $font-12px;
+        font-weight: $font-semi-bold;
+        //margin-left: 8px;
+    }
 }
 
 .mx_SpacePanel_sharePublicSpace {

diff --git a/res/css/structures/_ToastContainer.scss b/res/css/structures/_ToastContainer.scss
@@ -85,6 +85,11 @@ limitations under the License.
                 background-color: $primary-content;
             }
 
+            &.mx_Toast_icon_labs::after {
+                mask-image: url('$(res)/img/element-icons/flask.svg');
+                background-color: $secondary-content;
+            }
+
             .mx_Toast_title, .mx_Toast_body {
                 grid-column: 2;
             }