From bef1f81ad23597bd0bbd740581afe579c86e2af2 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 2 Dec 2021 15:49:43 +0000 Subject: [PATCH] Iterate Spotlight --- .../views/avatars/_DecoratedRoomAvatar.scss | 1 + res/css/views/dialogs/_SpotlightDialog.scss | 60 +++++++++---------- src/components/structures/RoomView.tsx | 6 ++ .../views/dialogs/SpotlightDialog.tsx | 54 ++++++++++++----- src/dispatcher/actions.ts | 7 ++- src/i18n/strings/en_EN.json | 7 +++ 6 files changed, 89 insertions(+), 46 deletions(-) diff --git a/res/css/views/avatars/_DecoratedRoomAvatar.scss b/res/css/views/avatars/_DecoratedRoomAvatar.scss index 60cd18520a0..b93e2d602d4 100644 --- a/res/css/views/avatars/_DecoratedRoomAvatar.scss +++ b/res/css/views/avatars/_DecoratedRoomAvatar.scss @@ -39,6 +39,7 @@ limitations under the License. content: ''; width: 8px; height: 8px; + right: 0; position: absolute; border-radius: 8px; } diff --git a/res/css/views/dialogs/_SpotlightDialog.scss b/res/css/views/dialogs/_SpotlightDialog.scss index 091f255d923..400e2c2e99c 100644 --- a/res/css/views/dialogs/_SpotlightDialog.scss +++ b/res/css/views/dialogs/_SpotlightDialog.scss @@ -15,7 +15,7 @@ limitations under the License. */ .mx_SpotlightDialog_wrapper .mx_Dialog { - border-radius: 16px; + border-radius: 8px; overflow-y: initial; position: relative; height: 60%; @@ -54,12 +54,19 @@ limitations under the License. margin-bottom: 0; } - .mx_SearchBox { + .mx_SpotlightDialog_searchBox { margin: 0; border: none; + padding: 12px 16px; border-bottom: 1px solid $system; > input { + display: block; + box-sizing: border-box; + background-color: transparent; + width: 100%; + height: 32px; + padding: 0; color: $tertiary-content; font-weight: normal; font-size: $font-15px; @@ -86,30 +93,39 @@ limitations under the License. } } + .mx_SpotlightDialog_otherSearches { + .mx_AccessibleButton + .mx_AccessibleButton { + margin-left: 12px; + } + } + .mx_SpotlightDialog_recentlyViewed { > div { display: flex; white-space: nowrap; - overflow-x: auto; + overflow-x: hidden; } .mx_AccessibleButton { - border: 1px solid $quinary-content; border-radius: 8px; - padding: 6px 8px 4px 6px; + padding: 4px; color: $primary-content; - font-size: $font-15px; - line-height: $font-20px; + font-size: $font-12px; + line-height: $font-15px; display: inline-block; - - .mx_BaseAvatar { - margin-right: 8px; - display: inline-block; - height: 20px; + width: 50px; + min-width: 50px; + box-sizing: border-box; + text-align: center; + overflow: hidden; + text-overflow: ellipsis; + + .mx_DecoratedRoomAvatar { + margin: 0 5px; // maintain centering } & + .mx_AccessibleButton { - margin-left: 12px; + margin-left: 16px; } &:hover, &[aria-selected=true] { @@ -156,24 +172,6 @@ limitations under the License. .mx_SpotlightDialog_recentSearches { overflow-y: hidden; height: calc(100% - 100px); - - > h4 { - padding-left: 20px; - position: relative; - - &::before { - position: absolute; - content: ""; - width: 16px; - height: 16px; - left: 0; - mask-repeat: no-repeat; - mask-size: contain; - mask-position: center; - background-color: $secondary-content; - mask-image: url("$(res)/img/element-icons/recent.svg"); - } - } } .mx_SpotlightDialog_enterPrompt { diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index 9f4c291adf6..e89f728598b 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -931,6 +931,12 @@ export class RoomView extends React.Component { this.messagePanel?.jumpToLiveTimeline(); } break; + + case Action.SearchRoomTimeline: + this.setState({ + searching: true, + }); + break; } }; diff --git a/src/components/views/dialogs/SpotlightDialog.tsx b/src/components/views/dialogs/SpotlightDialog.tsx index 846b1b565c1..7a1866cfd20 100644 --- a/src/components/views/dialogs/SpotlightDialog.tsx +++ b/src/components/views/dialogs/SpotlightDialog.tsx @@ -15,6 +15,7 @@ limitations under the License. */ import React, { + ChangeEvent, ComponentProps, KeyboardEvent, useCallback, @@ -31,7 +32,6 @@ import { RoomHierarchy } from "matrix-js-sdk/src/room-hierarchy"; import { IDialogProps } from "./IDialogProps"; import { _t } from "../../../languageHandler"; import BaseDialog from "./BaseDialog"; -import SearchBox from "../../structures/SearchBox"; import { BreadcrumbsStore } from "../../../stores/BreadcrumbsStore"; import RoomAvatar from "../avatars/RoomAvatar"; import defaultDispatcher from "../../../dispatcher/dispatcher"; @@ -53,6 +53,8 @@ import { mediaFromMxc } from "../../../customisations/Media"; import BaseAvatar from "../avatars/BaseAvatar"; import Spinner from "../elements/Spinner"; import { roomContextDetailsText } from "../../../Rooms"; +import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar"; +import { Action } from "../../../dispatcher/actions"; const MAX_RECENT_SEARCHES = 10; const SECTION_LIMIT = 50; @@ -147,7 +149,7 @@ const useSpaceResults = (space?: Room, query?: string): [IHierarchyRoom[], boole const SpotlightDialog: React.FC = ({ initialText = "", onFinished }) => { const cli = MatrixClientPeg.get(); const rovingContext = useContext(RovingTabIndexContext); - const [query, _setQuery] = useState(""); + const [query, _setQuery] = useState(initialText); const recentSearches = useRecentSearches(); const results = useMemo(() => { @@ -165,7 +167,8 @@ const SpotlightDialog: React.FC = ({ initialText = "", onFinished }) => const activeSpace = SpaceStore.instance.activeSpaceRoom; const [spaceResults, spaceResultsLoading] = useSpaceResults(activeSpace, query); - const setQuery = (newQuery: string): void => { + const setQuery = (e: ChangeEvent): void => { + const newQuery = e.currentTarget.value; _setQuery(newQuery); if (!query !== !newQuery) { setImmediate(() => { @@ -285,10 +288,29 @@ const SpotlightDialog: React.FC = ({ initialText = "", onFinished }) => ; } else { content = <> +
+

{ _t("Search for") }

+
+ { + // TODO does not work when user is on Home, or a Space. + defaultDispatcher.fire(Action.SearchRoomTimeline); + onFinished(); + }}> + { _t("Messages") } + + { + defaultDispatcher.fire(Action.ViewRoomDirectory); + onFinished(); + }}> + { _t("Public Rooms") } + +
+
+

{ _t("Recently viewed") }

- { BreadcrumbsStore.instance.rooms.map(room => ( + { BreadcrumbsStore.instance.rooms.slice(0, 10).map(room => ( )) } @@ -383,15 +405,19 @@ const SpotlightDialog: React.FC = ({ initialText = "", onFinished }) => hasCancel={false} onKeyDown={onDialogKeyDown} > - +
+ +
{ content } diff --git a/src/dispatcher/actions.ts b/src/dispatcher/actions.ts index 6291e86a708..9446f506977 100644 --- a/src/dispatcher/actions.ts +++ b/src/dispatcher/actions.ts @@ -188,7 +188,7 @@ export enum Action { SwitchSpace = "switch_space", /** - * Signals to the visible space hierarchy that a change has occurred an that it should refresh. + * Signals to the visible space hierarchy that a change has occurred and that it should refresh. */ UpdateSpaceHierarchy = "update_space_hierarchy", @@ -203,4 +203,9 @@ export enum Action { * Fires when a user starts to edit event (e.g. up arrow in compositor) */ EditEvent = "edit_event", + + /** + * Searches the currently open room. No additional payload information required. + */ + SearchRoomTimeline = "search_room_timeline", } diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 547818bf87d..d74e5f60484 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -851,6 +851,7 @@ "New layout switcher (with message bubbles)": "New layout switcher (with message bubbles)", "Meta Spaces": "Meta Spaces", "Use new room breadcrumbs": "Use new room breadcrumbs", + "New spotlight search experience": "New spotlight search experience", "Don't send read receipts": "Don't send read receipts", "Font size": "Font size", "Use custom size": "Use custom size", @@ -2681,6 +2682,12 @@ "Command Help": "Command Help", "Space settings": "Space settings", "Settings - %(spaceName)s": "Settings - %(spaceName)s", + "Other rooms in %(spaceName)s": "Other rooms in %(spaceName)s", + "Search for": "Search for", + "Public Rooms": "Public Rooms", + "Recent searches": "Recent searches", + "Use to scroll results": "Use to scroll results", + "Search for anything": "Search for anything", "To help us prevent this in future, please send us logs.": "To help us prevent this in future, please send us logs.", "Missing session data": "Missing session data", "Some session data, including encrypted message keys, is missing. Sign out and sign in to fix this, restoring keys from backup.": "Some session data, including encrypted message keys, is missing. Sign out and sign in to fix this, restoring keys from backup.",