Merge remote-tracking branch 'origin/develop' into palid/19609/fix-room-alias

* origin/develop: (29 commits)
  Tweak roving tab index focus behaviour (#7254)
  Fix textual message stripping new line (#7239)
  Fix broken i18n in Forgot & Change password (#7252)
  Fix setBotPower to not use `.content` (#7179)
  Break long words in pinned messages to prevent overflow (#7251)
  Send read receipts for events in thread's timeline (#7229)
  Autofocus device panel entry when renaming device (#7249)
  Fix user menu bottom stroke (#7248)
  Disallow sending empty feedbacks (#7240)
  Fix wrongly sized default sub-space icons in space panel (#7243)
  Hide clear cache and reload button if crash is before client init (#7242)
  Don't show edit button for hidden edit events (#7226)
  Update Space Panel scrollable region (#7245)
  Replace breadcrumbs with recently viewed menu (#7073)
  Fix automatic space switching wrongly going via Home for room aliases (#7247)
  Make e2e tests pass in CI by using an older Synapse version (#7246)
  Make `CallHandler` more `EventEmitter`y (#6704)
  Fix links being parsed as markdown links improperly (#7200)
  Tweaks to informational architecture 1.1 (#7052)
  Upgrade allchange to 1.0.6 (#7238)
  ...

Author: Dariusz Niemczyk

package.json

@@ -154,7 +154,7 @@
     "@typescript-eslint/eslint-plugin": "^4.17.0",
     "@typescript-eslint/parser": "^4.17.0",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.1",
-    "allchange": "^1.0.5",
+    "allchange": "^1.0.6",
     "babel-jest": "^26.6.3",
     "chokidar": "^3.5.1",
     "concurrently": "^5.3.0",

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.

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";
@@ -145,6 +143,7 @@
 @import "./views/elements/_ImageView.scss";
 @import "./views/elements/_InfoTooltip.scss";
 @import "./views/elements/_InlineSpinner.scss";
+@import "./views/elements/_InteractiveTooltip.scss";
 @import "./views/elements/_InviteReason.scss";
 @import "./views/elements/_ManageIntegsButton.scss";
 @import "./views/elements/_MiniAvatarUploader.scss";
@@ -232,11 +231,13 @@
 @import "./views/rooms/_NotificationBadge.scss";
 @import "./views/rooms/_PinnedEventTile.scss";
 @import "./views/rooms/_PresenceLabel.scss";
+@import "./views/rooms/_RecentlyViewedButton.scss";
 @import "./views/rooms/_ReplyPreview.scss";
 @import "./views/rooms/_ReplyTile.scss";
 @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";

res/css/structures/_ContextualMenu.scss

@@ -27,7 +27,6 @@ limitations under the License.
     width: 100%;
     height: 100%;
     opacity: 1.0;
-    z-index: 5000;
 }
 
 .mx_ContextualMenu {
@@ -38,6 +37,7 @@ limitations under the License.
     position: absolute;
     font-size: $font-14px;
     z-index: 5001;
+    width: max-content;
 }
 
 .mx_ContextualMenu_right {

res/css/structures/_LeftPanel.scss

@@ -101,17 +101,40 @@ $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_LeftPanel_exploreButton {
+                .mx_RoomSearch_shortcutPrompt {
+                    display: none;
+                }
+
+                & + .mx_LeftPanel_exploreButton,
+                & + .mx_LeftPanel_recentsButton {
                     // Cheaty way to return the occupied space to the filter input
                     flex-basis: 0;
                     margin: 0;
@@ -144,11 +167,12 @@ $roomListCollapsedWidth: 68px;
                     mask-position: center;
                     mask-size: contain;
                     mask-repeat: no-repeat;
-                    background: $secondary-content;
+                    background-color: $secondary-content;
                 }
             }
 
-            .mx_LeftPanel_exploreButton {
+            .mx_LeftPanel_exploreButton,
+            .mx_LeftPanel_recentsButton {
                 width: 32px;
                 height: 32px;
                 border-radius: 8px;
@@ -163,17 +187,28 @@ $roomListCollapsedWidth: 68px;
                     left: 8px;
                     width: 16px;
                     height: 16px;
-                    mask-image: url('$(res)/img/element-icons/roomlist/explore.svg');
                     mask-position: center;
                     mask-size: contain;
                     mask-repeat: no-repeat;
-                    background: $secondary-content;
+                    background-color: $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;
+                    }
                 }
             }
+
+            .mx_LeftPanel_exploreButton::before {
+                mask-image: url('$(res)/img/element-icons/roomlist/explore.svg');
+            }
+
+            .mx_LeftPanel_recentsButton::before {
+                mask-image: url('$(res)/img/element-icons/clock.svg');
+            }
         }
 
         .mx_LeftPanel_roomListFilterCount {
@@ -231,10 +266,10 @@ $roomListCollapsedWidth: 68px;
                     background-color: transparent;
                 }
 
-                .mx_LeftPanel_exploreButton {
+                .mx_LeftPanel_exploreButton,
+                .mx_LeftPanel_recentsButton {
                     margin-left: 0;
                     margin-top: 8px;
-                    background-color: transparent;
                 }
             }
         }

res/css/structures/_QuickSettingsButton.scss

@@ -16,25 +16,34 @@ limitations under the License.
 
 .mx_QuickSettingsButton {
     flex: 0 0 auto;
-    width: 32px;
-    height: 32px;
     border-radius: 8px;
     position: relative;
     margin: 12px auto;
+    color: $secondary-content;
+    min-width: 32px;
+    min-height: 32px;
+    line-height: 32px;
+
+    &.expanded {
+        margin-left: 20px;
+        padding-left: 44px; // align with toggle collapse button text
+        padding-right: 8px;
+    }
 
     &::before {
         content: "";
         position: absolute;
-        width: inherit;
-        height: inherit;
+        width: 32px;
+        height: 32px;
+        left: 0;
         mask-image: url('$(res)/img/element-icons/settings.svg');
         mask-repeat: no-repeat;
         mask-position: center;
         mask-size: 16px;
         background: $secondary-content;
     }
 
-    &:hover {
+    &:not(.expanded):hover {
         background-color: $quaternary-content;
 
         &::before {

res/css/structures/_RightPanel.scss

@@ -103,44 +103,61 @@ limitations under the License.
     mask-position: center;
 }
 
-$dot-size: 8px;
+$dot-size: 7px;
 $pulse-color: $alert;
 
 .mx_RightPanel_pinnedMessagesButton {
     &::before {
         mask-image: url('$(res)/img/element-icons/room/pin.svg');
         mask-position: center;
     }
+}
+.mx_RightPanel_headerButton_unreadIndicator_bg {
+    position: absolute;
+    right: 0;
+    top: 0;
+    margin: 4px;
+    width: $dot-size;
+    height: $dot-size;
+    border-radius: 50%;
+    transform: scale(1.6);
+    transform-origin: center center;
+    background: rgba($background, 1);
+}
 
-    .mx_RightPanel_pinnedMessagesButton_unreadIndicator {
+.mx_RightPanel_headerButton_unreadIndicator {
+    position: absolute;
+    right: 0;
+    top: 0;
+    margin: 4px;
+    width: $dot-size;
+    height: $dot-size;
+    border-radius: 50%;
+    transform: scale(1);
+    background: rgba($pulse-color, 1);
+    box-shadow: 0 0 0 0 rgba($pulse-color, 1);
+    animation: mx_RightPanel_indicator_pulse 2s infinite;
+    animation-iteration-count: 1;
+
+    &.mx_Indicator_gray {
+        background: rgba($input-darker-fg-color, 1);
+        box-shadow: rgba($input-darker-fg-color, 1);
+    }
+
+    &::after {
+        content: "";
         position: absolute;
-        right: 0;
+        width: inherit;
+        height: inherit;
         top: 0;
-        margin: 4px;
-        width: $dot-size;
-        height: $dot-size;
-        border-radius: 50%;
+        left: 0;
         transform: scale(1);
-        background: rgba($pulse-color, 1);
-        box-shadow: 0 0 0 0 rgba($pulse-color, 1);
-        animation: mx_RightPanel_indicator_pulse 2s infinite;
-        animation-iteration-count: 1;
-
-        &::after {
-            content: "";
-            position: absolute;
-            width: inherit;
-            height: inherit;
-            top: 0;
-            left: 0;
-            transform: scale(1);
-            transform-origin: center center;
-            animation-name: mx_RightPanel_indicator_pulse_shadow;
-            animation-duration: inherit;
-            animation-iteration-count: inherit;
-            border-radius: 50%;
-            background: rgba($pulse-color, 1);
-        }
+        transform-origin: center center;
+        animation-name: mx_RightPanel_indicator_pulse_shadow;
+        animation-duration: inherit;
+        animation-iteration-count: inherit;
+        border-radius: 50%;
+        background: inherit;
     }
 }
 

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;
+            }
+        }
     }
 }