Merge pull request #5123 from matrix-org/t3chguy/room-list/14466

Room List filtering visual tweaks

res/css/_components.scss

@@ -1,6 +1,7 @@
 // autogenerated by rethemendex.sh
 @import "./_common.scss";
 @import "./_font-sizes.scss";
+@import "./_font-weights.scss";
 @import "./structures/_AutoHideScrollbar.scss";
 @import "./structures/_CompatibilityPage.scss";
 @import "./structures/_ContextualMenu.scss";

res/css/_font-weights.scss

@@ -0,0 +1,17 @@
+/*
+Copyright 2020 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.
+*/
+
+$font-semi-bold: 600;

res/css/structures/_LeftPanel.scss

@@ -97,7 +97,8 @@ $tagPanelWidth: 56px; // only applies in this file, used for calculations
             display: flex;
             align-items: center;
 
-            .mx_RoomSearch_expanded + .mx_LeftPanel_exploreButton {
+            .mx_RoomSearch_focused, .mx_RoomSearch_hasQuery {
+                & + .mx_LeftPanel_exploreButton {
                     // Cheaty way to return the occupied space to the filter input
                     flex-basis: 0;
                     margin: 0;
@@ -109,6 +110,7 @@ $tagPanelWidth: 56px; // only applies in this file, used for calculations
                         content: none;
                     }
                 }
+            }
 
             .mx_LeftPanel_exploreButton {
                 width: 32px;
@@ -134,6 +136,14 @@ $tagPanelWidth: 56px; // only applies in this file, used for calculations
             }
         }
 
+        .mx_LeftPanel_roomListFilterCount {
+            font-size: $font-13px;
+            font-weight: $font-semi-bold;
+            margin-left: 12px;
+            margin-top: 14px;
+            margin-bottom: -4px; // to counteract the normal roomListWrapper margin-top
+        }
+
         .mx_LeftPanel_roomListWrapper {
             overflow: hidden;
             margin-top: 10px; // so we're not up against the search/filter

res/css/structures/_RoomSearch.scss

@@ -19,6 +19,8 @@ limitations under the License.
     flex: 1;
     border-radius: 8px;
     background-color: $roomlist-button-bg-color;
+    // keep border thickness consistent to prevent movement
+    border: 1px solid transparent;
     height: 28px;
     padding: 2px;
 
@@ -50,7 +52,18 @@ limitations under the License.
         }
     }
 
-    &.mx_RoomSearch_expanded {
+    &.mx_RoomSearch_hasQuery {
+        border-color: $secondary-fg-color;
+    }
+
+    &.mx_RoomSearch_focused {
+        box-shadow: 0 0 4px 4px rgba(0, 132, 255, 0.5);
+        border-color: transparent;
+    }
+
+    &.mx_RoomSearch_focused, &.mx_RoomSearch_hasQuery {
+        background-color: $roomlist-filter-active-bg-color;
+
         .mx_RoomSearch_clearButton {
             width: 16px;
             height: 16px;

res/css/views/rooms/_RoomList.scss

@@ -24,3 +24,36 @@ limitations under the License.
 .mx_RoomList_iconExplore::before {
     mask-image: url('$(res)/img/element-icons/roomlist/explore.svg');
 }
+
+.mx_RoomList_explorePrompt {
+    margin: 4px 12px 4px;
+    padding-top: 12px;
+    border-top: 1px solid $tertiary-fg-color;
+    font-size: $font-13px;
+
+    div:first-child {
+        font-weight: $font-semi-bold;
+        margin-bottom: 8px;
+    }
+
+    .mx_AccessibleButton {
+        color: $secondary-fg-color;
+        position: relative;
+        padding: 0 0 0 24px;
+        font-size: inherit;
+
+        &::before {
+            content: '';
+            width: 16px;
+            height: 16px;
+            position: absolute;
+            top: 0;
+            left: 0;
+            background: $secondary-fg-color;
+            mask-position: center;
+            mask-size: contain;
+            mask-repeat: no-repeat;
+            mask-image: url('$(res)/img/element-icons/roomlist/explore.svg');
+        }
+    }
+}

res/themes/dark/css/_dark.scss

@@ -114,6 +114,7 @@ $composer-e2e-icon-color: $header-panel-text-primary-color;
 $theme-button-bg-color: #e3e8f0;
 
 $roomlist-button-bg-color: rgba(141, 151, 165, 0.2); // Buttons include the filter box, explore button, and sublist buttons
+$roomlist-filter-active-bg-color: $bg-color;
 $roomlist-bg-color: rgba(33, 38, 44, 0.90);
 $roomlist-header-color: $tertiary-fg-color;
 $roomsublist-divider-color: $primary-fg-color;

res/themes/legacy-dark/css/_legacy-dark.scss

@@ -111,6 +111,7 @@ $composer-e2e-icon-color: $header-panel-text-primary-color;
 $theme-button-bg-color: #e3e8f0;
 
 $roomlist-button-bg-color: #1A1D23; // Buttons include the filter box, explore button, and sublist buttons
+$roomlist-filter-active-bg-color: $roomlist-button-bg-color;
 $roomlist-bg-color: $header-panel-bg-color;
 
 $roomsublist-divider-color: $primary-fg-color;

res/themes/legacy-light/css/_legacy-light.scss

@@ -178,6 +178,7 @@ $header-divider-color: #91a1c0;
 $theme-button-bg-color: #e3e8f0;
 
 $roomlist-button-bg-color: #fff; // Buttons include the filter box, explore button, and sublist buttons
+$roomlist-filter-active-bg-color: $roomlist-button-bg-color;
 $roomlist-bg-color: $header-panel-bg-color;
 $roomlist-header-color: $primary-fg-color;
 $roomsublist-divider-color: $primary-fg-color;

res/themes/light/css/_light.scss

@@ -172,6 +172,7 @@ $header-divider-color: #91A1C0;
 $theme-button-bg-color: #e3e8f0;
 
 $roomlist-button-bg-color: rgba(141, 151, 165, 0.2); // Buttons include the filter box, explore button, and sublist buttons
+$roomlist-filter-active-bg-color: #ffffff;
 $roomlist-bg-color: rgba(245, 245, 245, 0.90);
 $roomlist-header-color: $tertiary-fg-color;
 $roomsublist-divider-color: $primary-fg-color;

src/@types/global.d.ts

@@ -49,11 +49,6 @@ declare global {
         mxNotifier: typeof Notifier;
     }
 
-    // workaround for https://github.com/microsoft/TypeScript/issues/30933
-    interface ObjectConstructor {
-        fromEntries?(xs: [string|number|symbol, any][]): object;
-    }
-
     interface Document {
         // https://developer.mozilla.org/en-US/docs/Web/API/Document/hasStorageAccess
         hasStorageAccess?: () => Promise<boolean>;

src/components/structures/LeftPanel.tsx

@@ -37,6 +37,7 @@ import IndicatorScrollbar from "../structures/IndicatorScrollbar";
 import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton";
 import { OwnProfileStore } from "../../stores/OwnProfileStore";
 import { MatrixClientPeg } from "../../MatrixClientPeg";
+import RoomListNumResults from "../views/rooms/RoomListNumResults";
 
 interface IProps {
     isMinimized: boolean;
@@ -409,6 +410,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
                     {this.renderHeader()}
                     {this.renderSearchExplore()}
                     {this.renderBreadcrumbs()}
+                    <RoomListNumResults />
                     <div className="mx_LeftPanel_roomListWrapper">
                         <div
                             className={roomListClasses}

src/components/structures/RoomSearch.tsx

@@ -126,7 +126,8 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
     public render(): React.ReactNode {
         const classes = classNames({
             'mx_RoomSearch': true,
-            'mx_RoomSearch_expanded': this.state.query || this.state.focused,
+            'mx_RoomSearch_hasQuery': this.state.query,
+            'mx_RoomSearch_focused': this.state.focused,
             'mx_RoomSearch_minimized': this.props.isMinimized,
         });
 

src/components/views/rooms/RoomList.tsx

@@ -44,6 +44,7 @@ import CustomRoomTagStore from "../../../stores/CustomRoomTagStore";
 import { arrayFastClone, arrayHasDiff } from "../../../utils/arrays";
 import { objectShallowClone, objectWithOnly } from "../../../utils/objects";
 import { IconizedContextMenuOption, IconizedContextMenuOptionList } from "../context_menus/IconizedContextMenu";
+import AccessibleButton from "../elements/AccessibleButton";
 
 interface IProps {
     onKeyDown: (ev: React.KeyboardEvent) => void;
@@ -278,6 +279,10 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
         }
     };
 
+    private onExplore = () => {
+        dis.fire(Action.ViewRoomDirectory);
+    };
+
     private renderCommunityInvites(): TemporaryTile[] {
         // TODO: Put community invites in a more sensible place (not in the room list)
         // See https://github.com/vector-im/element-web/issues/14456
@@ -359,6 +364,16 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
     }
 
     public render() {
+        let explorePrompt: JSX.Element;
+        if (RoomListStore.instance.getFirstNameFilterCondition()) {
+            explorePrompt = <div className="mx_RoomList_explorePrompt">
+                <div>{_t("Can't see what you’re looking for?")}</div>
+                <AccessibleButton kind="link" onClick={this.onExplore}>
+                    {_t("Explore all public rooms")}
+                </AccessibleButton>
+            </div>;
+        }
+
         const sublists = this.renderSublists();
         return (
             <RovingTabIndexProvider handleHomeEnd={true} onKeyDown={this.props.onKeyDown}>
@@ -370,7 +385,10 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
                         className="mx_RoomList"
                         role="tree"
                         aria-label={_t("Rooms")}
-                    >{sublists}</div>
+                    >
+                        {sublists}
+                        {explorePrompt}
+                    </div>
                 )}
             </RovingTabIndexProvider>
         );

src/components/views/rooms/RoomListNumResults.tsx

@@ -0,0 +1,41 @@
+/*
+Copyright 2020 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.
+*/
+
+import React, {useState} from "react";
+
+import { _t } from "../../../languageHandler";
+import RoomListStore, { LISTS_UPDATE_EVENT } from "../../../stores/room-list/RoomListStore";
+import {useEventEmitter} from "../../../hooks/useEventEmitter";
+
+const RoomListNumResults: React.FC = () => {
+    const [count, setCount] = useState<number>(null);
+    useEventEmitter(RoomListStore.instance, LISTS_UPDATE_EVENT, () => {
+        if (RoomListStore.instance.getFirstNameFilterCondition()) {
+            const numRooms = Object.values(RoomListStore.instance.orderedLists).flat(1).length;
+            setCount(numRooms);
+        } else {
+            setCount(null);
+        }
+    });
+
+    if (typeof count !== "number") return null;
+
+    return <div className="mx_LeftPanel_roomListFilterCount">
+        {_t("%(count)s results", { count })}
+    </div>;
+};
+
+export default RoomListNumResults;

src/i18n/strings/en_EN.json

@@ -1120,6 +1120,9 @@
     "System Alerts": "System Alerts",
     "Historical": "Historical",
     "Custom Tag": "Custom Tag",
+    "Can't see what you’re looking for?": "Can't see what you’re looking for?",
+    "Explore all public rooms": "Explore all public rooms",
+    "%(count)s results|other": "%(count)s results",
     "This room": "This room",
     "Joining room …": "Joining room …",
     "Loading …": "Loading …",

tsconfig.json

@@ -17,6 +17,11 @@
       "react",
       "flux",
       "react-transition-group"
+    ],
+    "lib": [
+      "es2019",
+      "dom",
+      "dom.iterable"
     ]
   },
   "include": [