From a4d11cc19056027d745e63e46682e777dccfa60b Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 17 Aug 2020 16:59:29 +0100 Subject: [PATCH 1/5] Change highlighting around the room list filter --- res/css/structures/_LeftPanel.scss | 20 ++++++++++--------- res/css/structures/_RoomSearch.scss | 15 +++++++++++++- res/themes/dark/css/_dark.scss | 1 + res/themes/legacy-dark/css/_legacy-dark.scss | 1 + .../legacy-light/css/_legacy-light.scss | 1 + res/themes/light/css/_light.scss | 1 + src/components/structures/RoomSearch.tsx | 3 ++- 7 files changed, 31 insertions(+), 11 deletions(-) diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.scss index 3c3c5f4444..380cce50fa 100644 --- a/res/css/structures/_LeftPanel.scss +++ b/res/css/structures/_LeftPanel.scss @@ -97,16 +97,18 @@ $tagPanelWidth: 56px; // only applies in this file, used for calculations display: flex; align-items: center; - .mx_RoomSearch_expanded + .mx_LeftPanel_exploreButton { - // Cheaty way to return the occupied space to the filter input - flex-basis: 0; - margin: 0; - width: 0; + .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; + width: 0; - // Don't forget to hide the masked ::before icon, - // using display:none or visibility:hidden would break accessibility - &::before { - content: none; + // Don't forget to hide the masked ::before icon, + // using display:none or visibility:hidden would break accessibility + &::before { + content: none; + } } } diff --git a/res/css/structures/_RoomSearch.scss b/res/css/structures/_RoomSearch.scss index 031ac37f9c..c33a3c0ff9 100644 --- a/res/css/structures/_RoomSearch.scss +++ b/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; diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index 8175e7d33d..d48abf6a4c 100644 --- a/res/themes/dark/css/_dark.scss +++ b/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; diff --git a/res/themes/legacy-dark/css/_legacy-dark.scss b/res/themes/legacy-dark/css/_legacy-dark.scss index fe1103a529..4ab5f99942 100644 --- a/res/themes/legacy-dark/css/_legacy-dark.scss +++ b/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; diff --git a/res/themes/legacy-light/css/_legacy-light.scss b/res/themes/legacy-light/css/_legacy-light.scss index 0aa9bd0394..6e66964fdf 100644 --- a/res/themes/legacy-light/css/_legacy-light.scss +++ b/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; diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index 5a86a29248..ceb8d5677c 100644 --- a/res/themes/light/css/_light.scss +++ b/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; diff --git a/src/components/structures/RoomSearch.tsx b/src/components/structures/RoomSearch.tsx index 69504e9ab8..f6b8d42c30 100644 --- a/src/components/structures/RoomSearch.tsx +++ b/src/components/structures/RoomSearch.tsx @@ -126,7 +126,8 @@ export default class RoomSearch extends React.PureComponent { 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, }); From e20b3754339e77eff3add18ca10854c830bb32c4 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 17 Aug 2020 18:20:00 +0100 Subject: [PATCH 2/5] Add filter results count and explore prompt --- res/css/structures/_LeftPanel.scss | 8 ++++ res/css/views/rooms/_RoomList.scss | 34 +++++++++++++++ src/components/structures/LeftPanel.tsx | 2 + src/components/views/rooms/RoomList.tsx | 20 ++++++++- .../views/rooms/RoomListNumResults.tsx | 41 +++++++++++++++++++ src/i18n/strings/en_EN.json | 3 ++ 6 files changed, 107 insertions(+), 1 deletion(-) create mode 100644 src/components/views/rooms/RoomListNumResults.tsx diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.scss index 380cce50fa..69fff53444 100644 --- a/res/css/structures/_LeftPanel.scss +++ b/res/css/structures/_LeftPanel.scss @@ -136,6 +136,14 @@ $tagPanelWidth: 56px; // only applies in this file, used for calculations } } + .mx_LeftPanel_roomListFilterCount { + font-size: $font-13px; + font-weight: 500; + margin-left: 12px; + margin-top: 16px; + 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 diff --git a/res/css/views/rooms/_RoomList.scss b/res/css/views/rooms/_RoomList.scss index d210e118a2..2335bd5e18 100644 --- a/res/css/views/rooms/_RoomList.scss +++ b/res/css/views/rooms/_RoomList.scss @@ -24,3 +24,37 @@ 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 #8D99A5; + font-size: $font-13px; + + div:first-child { + font-weight: 500; + margin-bottom: 8px; + } + + .mx_AccessibleButton { + color: $secondary-fg-color; + position: relative; + margin-left: 24px; + padding: 0; + font-size: inherit; + + &::before { + content: ''; + width: 16px; + height: 16px; + position: absolute; + top: 0; + left: -24px; + background: $secondary-fg-color; + mask-position: center; + mask-size: contain; + mask-repeat: no-repeat; + mask-image: url('$(res)/img/element-icons/roomlist/explore.svg'); + } + } +} diff --git a/src/components/structures/LeftPanel.tsx b/src/components/structures/LeftPanel.tsx index bc17bbe23f..dff6b47bfc 100644 --- a/src/components/structures/LeftPanel.tsx +++ b/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 { {this.renderHeader()} {this.renderSearchExplore()} {this.renderBreadcrumbs()} +
void; @@ -278,6 +279,10 @@ export default class RoomList extends React.PureComponent { } }; + 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 { } public render() { + let explorePrompt: JSX.Element; + if (RoomListStore.instance.getFirstNameFilterCondition()) { + explorePrompt =
+
{_t("Can't see what you’re looking for?")}
+ + {_t("Explore all public rooms")} + +
; + } + const sublists = this.renderSublists(); return ( @@ -370,7 +385,10 @@ export default class RoomList extends React.PureComponent { className="mx_RoomList" role="tree" aria-label={_t("Rooms")} - >{sublists}
+ > + {sublists} + {explorePrompt} +
)} ); diff --git a/src/components/views/rooms/RoomListNumResults.tsx b/src/components/views/rooms/RoomListNumResults.tsx new file mode 100644 index 0000000000..fcac91a56a --- /dev/null +++ b/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(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
+ {_t("%(count)s results", { count })} +
; +}; + +export default RoomListNumResults; diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index e82581de8d..eb41b2b64c 100644 --- a/src/i18n/strings/en_EN.json +++ b/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 …", From 2caee2eadd6eb9d90c4df5a86a41d82f581de97d Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 17 Aug 2020 18:20:57 +0100 Subject: [PATCH 3/5] TypeScript: enable es2019 lib for newer definitions --- src/@types/global.d.ts | 5 ----- tsconfig.json | 5 +++++ 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/@types/global.d.ts b/src/@types/global.d.ts index 13520e218d..86ee995a13 100644 --- a/src/@types/global.d.ts +++ b/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; diff --git a/tsconfig.json b/tsconfig.json index db040d1f31..b139e8e8d1 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -17,6 +17,11 @@ "react", "flux", "react-transition-group" + ], + "lib": [ + "es2019", + "dom", + "dom.iterable" ] }, "include": [ From 3fe6f0a792abab9a97a85e445a423a2a0d6f3bc1 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 17 Aug 2020 18:26:42 +0100 Subject: [PATCH 4/5] delint css --- res/css/views/rooms/_RoomList.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/rooms/_RoomList.scss b/res/css/views/rooms/_RoomList.scss index 2335bd5e18..9a6c47ad31 100644 --- a/res/css/views/rooms/_RoomList.scss +++ b/res/css/views/rooms/_RoomList.scss @@ -28,7 +28,7 @@ limitations under the License. .mx_RoomList_explorePrompt { margin: 4px 12px 4px; padding-top: 12px; - border-top: 1px solid #8D99A5; + border-top: 1px solid $tertiary-fg-color; font-size: $font-13px; div:first-child { From 24a088e2341b2921eb2f865290fa18cd9b172aba Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 18 Aug 2020 12:00:56 +0100 Subject: [PATCH 5/5] Iterate PR, tweak margins --- res/css/_components.scss | 1 + res/css/_font-weights.scss | 17 +++++++++++++++++ res/css/structures/_LeftPanel.scss | 4 ++-- res/css/views/rooms/_RoomList.scss | 7 +++---- 4 files changed, 23 insertions(+), 6 deletions(-) create mode 100644 res/css/_font-weights.scss diff --git a/res/css/_components.scss b/res/css/_components.scss index a2d0e1ceb5..7e56942764 100644 --- a/res/css/_components.scss +++ b/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"; diff --git a/res/css/_font-weights.scss b/res/css/_font-weights.scss new file mode 100644 index 0000000000..3e2b19d516 --- /dev/null +++ b/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; diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.scss index 69fff53444..5112d07c46 100644 --- a/res/css/structures/_LeftPanel.scss +++ b/res/css/structures/_LeftPanel.scss @@ -138,9 +138,9 @@ $tagPanelWidth: 56px; // only applies in this file, used for calculations .mx_LeftPanel_roomListFilterCount { font-size: $font-13px; - font-weight: 500; + font-weight: $font-semi-bold; margin-left: 12px; - margin-top: 16px; + margin-top: 14px; margin-bottom: -4px; // to counteract the normal roomListWrapper margin-top } diff --git a/res/css/views/rooms/_RoomList.scss b/res/css/views/rooms/_RoomList.scss index 9a6c47ad31..78e7307bc0 100644 --- a/res/css/views/rooms/_RoomList.scss +++ b/res/css/views/rooms/_RoomList.scss @@ -32,15 +32,14 @@ limitations under the License. font-size: $font-13px; div:first-child { - font-weight: 500; + font-weight: $font-semi-bold; margin-bottom: 8px; } .mx_AccessibleButton { color: $secondary-fg-color; position: relative; - margin-left: 24px; - padding: 0; + padding: 0 0 0 24px; font-size: inherit; &::before { @@ -49,7 +48,7 @@ limitations under the License. height: 16px; position: absolute; top: 0; - left: -24px; + left: 0; background: $secondary-fg-color; mask-position: center; mask-size: contain;