parent f40291d

author Michael Telatynski <7t3chguy@gmail.com> 1636561426 +0000
committer Michael Telatynski <7t3chguy@gmail.com> 1638456183 +0000

parent f40291d
author Michael Telatynski <7t3chguy@gmail.com> 1636561426 +0000
committer Michael Telatynski <7t3chguy@gmail.com> 1638456101 +0000

Initial Spotlight Dialog work

Iterate Spotlight

i18n

post-merge fix

iterate pr

Remove unused state

update copy

Iterate spotlight

Iterate spotlight

Iterate spotlight to show search results

Fix spotlight behaviour

Show parent spaces in Spotlight

Clip the recent searches list

Spotlight show MXID for DM results

delint

Fix spotlight search normalization

tweak normalization some more

separate people from rooms in spotlight results

show results from selected space in spotlight

Extract reusable room context details code

Iterate spotlight implementation

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

i18n

Iterate space panel colours to match Figma

Iterate PR

delint

Fix feedback submission with object setting values

res/css/_components.scss

@@ -112,6 +112,7 @@
 @import "./views/dialogs/_ShareDialog.scss";
 @import "./views/dialogs/_SlashCommandHelpDialog.scss";
 @import "./views/dialogs/_SpaceSettingsDialog.scss";
+@import "./views/dialogs/_SpotlightDialog.scss";
 @import "./views/dialogs/_TabbedIntegrationManagerDialog.scss";
 @import "./views/dialogs/_TermsDialog.scss";
 @import "./views/dialogs/_UntrustedDeviceDialog.scss";

res/css/views/dialogs/_SpotlightDialog.scss

@@ -0,0 +1,190 @@
+/*
+Copyright 2021 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.
+*/
+
+.mx_SpotlightDialog_wrapper .mx_Dialog {
+    border-radius: 16px;
+    overflow-y: initial;
+    position: relative;
+    height: 60%;
+    padding: 0;
+
+    .mx_SpotlightDialog_keyboardPrompt {
+        position: absolute;
+        padding: 8px;
+        border-radius: 8px;
+        background-color: $background;
+        top: -60px;
+        left: 50%;
+        transform: translateX(-50%);
+        font-size: $font-12px;
+        line-height: $font-15px;
+        color: $secondary-content;
+
+        > span > div {
+            display: inline-block;
+            padding: 2px 4px;
+            margin: 0 4px;
+            border-radius: 6px;
+            background-color: $quinary-content;
+            vertical-align: middle;
+            color: $tertiary-content;
+        }
+    }
+}
+
+.mx_SpotlightDialog {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    .mx_Dialog_header {
+        margin-bottom: 0;
+    }
+
+    .mx_SearchBox {
+        margin: 0;
+        border: none;
+        border-bottom: 1px solid $system;
+
+        > input {
+            color: $tertiary-content;
+            font-weight: normal;
+            font-size: $font-15px;
+            line-height: $font-24px;
+        }
+    }
+
+    #mx_SpotlightDialog_content {
+        margin: 16px;
+        height: 100%;
+        overflow-y: auto;
+
+        .mx_SpotlightDialog_section {
+            > h4 {
+                font-weight: $font-semi-bold;
+                font-size: $font-12px;
+                line-height: $font-15px;
+                color: $secondary-content;
+                margin-top: 0;
+            }
+
+            & + .mx_SpotlightDialog_section {
+                margin-top: 24px;
+            }
+        }
+
+        .mx_SpotlightDialog_recentlyViewed {
+            > div {
+                display: flex;
+                white-space: nowrap;
+                overflow-x: auto;
+            }
+
+            .mx_AccessibleButton {
+                border: 1px solid $quinary-content;
+                border-radius: 8px;
+                padding: 6px 8px 4px 6px;
+                color: $primary-content;
+                font-size: $font-15px;
+                line-height: $font-20px;
+                display: inline-block;
+
+                .mx_BaseAvatar {
+                    margin-right: 8px;
+                    display: inline-block;
+                    height: 20px;
+                }
+
+                & + .mx_AccessibleButton {
+                    margin-left: 12px;
+                }
+
+                &:hover, &[aria-selected=true] {
+                    background-color: $quinary-content;
+                }
+            }
+        }
+
+        .mx_SpotlightDialog_results,
+        .mx_SpotlightDialog_recentSearches {
+            .mx_AccessibleButton {
+                padding: 6px 4px;
+                border-radius: 8px;
+                font-size: $font-15px;
+                line-height: $font-24px;
+                color: $primary-content;
+                position: relative;
+                display: flex;
+                align-items: center;
+
+                .mx_BaseAvatar {
+                    margin-right: 8px;
+                    display: inline-block;
+                    height: 20px;
+                }
+
+                &:hover, &[aria-selected=true] {
+                    background-color: $system;
+
+                    .mx_SpotlightDialog_enterPrompt {
+                        display: inline-block;
+                    }
+                }
+            }
+        }
+
+        .mx_SpotlightDialog_result_details {
+            margin-left: 8px;
+            color: $tertiary-content;
+            font-size: $font-12px;
+            line-height: $font-15px;
+        }
+
+        .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 {
+            padding: 2px 4px;
+            font-size: $font-12px;
+            line-height: $font-15px;
+            color: $tertiary-content;
+            border-radius: 6px;
+            background-color: $quinary-content;
+            margin: 0 4px 0 auto;
+            display: none;
+        }
+    }
+}

src/accessibility/RovingTabIndex.tsx

@@ -55,7 +55,7 @@ interface IContext {
     dispatch: Dispatch<IAction>;
 }
 
-const RovingTabIndexContext = createContext<IContext>({
+export const RovingTabIndexContext = createContext<IContext>({
     state: {
         activeRef: null,
         refs: [], // list of refs in DOM order

src/components/structures/RoomSearch.tsx

@@ -30,6 +30,9 @@ import { replaceableComponent } from "../../utils/replaceableComponent";
 import SpaceStore from "../../stores/spaces/SpaceStore";
 import { UPDATE_SELECTED_SPACE } from "../../stores/spaces";
 import { isMac } from "../../Keyboard";
+import SettingsStore from "../../settings/SettingsStore";
+import Modal from "../../Modal";
+import SpotlightDialog from "../views/dialogs/SpotlightDialog";
 
 interface IProps {
     isMinimized: boolean;
@@ -81,13 +84,22 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
     public componentWillUnmount() {
         defaultDispatcher.unregister(this.dispatcherRef);
         SpaceStore.instance.off(UPDATE_SELECTED_SPACE, this.clearInput);
+        SpaceStore.instance.off(UPDATE_TOP_LEVEL_SPACES, this.onSpaces);
+    }
+
+    private openSpotlight() {
+        Modal.createTrackedDialog("Spotlight", "", SpotlightDialog, {}, "mx_SpotlightDialog_wrapper");
     }
 
     private onAction = (payload: ActionPayload) => {
         if (payload.action === Action.ViewRoom && payload.clear_search) {
             this.clearInput();
         } else if (payload.action === 'focus_room_filter' && this.inputRef.current) {
-            this.inputRef.current.focus();
+            if (SettingsStore.getValue("feature_spotlight")) {
+                this.openSpotlight();
+            } else {
+                this.inputRef.current.focus();
+            }
         }
     };
 
@@ -107,6 +119,14 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
         this.setState({ query: this.inputRef.current.value });
     };
 
+    private onMouseDown = (ev: React.MouseEvent<HTMLInputElement>) => {
+        if (SettingsStore.getValue("feature_spotlight")) {
+            ev.preventDefault();
+            ev.stopPropagation();
+            this.openSpotlight();
+        }
+    };
+
     private onFocus = (ev: React.FocusEvent<HTMLInputElement>) => {
         this.setState({ focused: true });
         ev.target.select();
@@ -162,11 +182,12 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
                 ref={this.inputRef}
                 className={inputClasses}
                 value={this.state.query}
+                onMouseDown={this.onMouseDown}
                 onFocus={this.onFocus}
                 onBlur={this.onBlur}
                 onChange={this.onChange}
                 onKeyDown={this.onKeyDown}
-                placeholder={_t("Filter")}
+                placeholder={SettingsStore.getValue("feature_spotlight") ? _t("Search") : _t("Filter")}
                 autoComplete="off"
             />
         );

src/components/structures/SearchBox.tsx

@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { createRef } from 'react';
+import React, { createRef, HTMLProps } from 'react';
 import { Key } from '../../Keyboard';
 import dis from '../../dispatcher/dispatcher';
 import { throttle } from 'lodash';
@@ -24,7 +24,7 @@ import classNames from 'classnames';
 import { replaceableComponent } from "../../utils/replaceableComponent";
 import { Action } from '../../dispatcher/actions';
 
-interface IProps {
+interface IProps extends HTMLProps<HTMLInputElement> {
     onSearch?: (query: string) => void;
     onCleared?: (source?: string) => void;
     onKeyDown?: (ev: React.KeyboardEvent) => void;
@@ -134,11 +134,15 @@ export default class SearchBox extends React.Component<IProps, IState> {
     }
 
     public render(): JSX.Element {
+        /* eslint @typescript-eslint/no-unused-vars: ["error", { "ignoreRestSiblings": true }] */
+        const { onSearch, onCleared, onKeyDown, onFocus, onBlur, className = "", placeholder, blurredPlaceholder,
+            autoFocus, initialValue, collapsed, enableRoomSearchFocus, ...props } = this.props;
+
         // check for collapsed here and
         // not at parent so we keep
         // searchTerm in our state
         // when collapsing and expanding
-        if (this.props.collapsed) {
+        if (collapsed) {
             return null;
         }
         const clearButton = (!this.state.blurred || this.state.searchTerm) ?
@@ -152,13 +156,10 @@ export default class SearchBox extends React.Component<IProps, IState> {
         // show a shorter placeholder when blurred, if requested
         // this is used for the room filter field that has
         // the explore button next to it when blurred
-        const placeholder = this.state.blurred ?
-            (this.props.blurredPlaceholder || this.props.placeholder) :
-            this.props.placeholder;
-        const className = this.props.className || "";
         return (
             <div className={classNames("mx_SearchBox", "mx_textinput", { "mx_SearchBox_blurred": this.state.blurred })}>
                 <input
+                    {...props}
                     key="searchfield"
                     type="text"
                     ref={this.search}
@@ -168,7 +169,7 @@ export default class SearchBox extends React.Component<IProps, IState> {
                     onChange={this.onChange}
                     onKeyDown={this.onKeyDown}
                     onBlur={this.onBlur}
-                    placeholder={placeholder}
+                    placeholder={this.state.blurred ? (blurredPlaceholder || placeholder) : placeholder}
                     autoComplete="off"
                     autoFocus={this.props.autoFocus}
                 />