Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit b661aa9

Browse files
t3chguyt3chguy
committed
parent f40291d
author Michael Telatynski <[email protected]> 1636561426 +0000 committer Michael Telatynski <[email protected]> 1638456183 +0000 parent f40291d author Michael Telatynski <[email protected]> 1636561426 +0000 committer Michael Telatynski <[email protected]> 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
1 parent f40291d commit b661aa9

File tree

9 files changed

+644
-11
lines changed

9 files changed

+644
-11
lines changed

‎res/css/_components.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,7 @@
112112
@import "./views/dialogs/_ShareDialog.scss";
113113
@import "./views/dialogs/_SlashCommandHelpDialog.scss";
114114
@import "./views/dialogs/_SpaceSettingsDialog.scss";
115+
@import "./views/dialogs/_SpotlightDialog.scss";
115116
@import "./views/dialogs/_TabbedIntegrationManagerDialog.scss";
116117
@import "./views/dialogs/_TermsDialog.scss";
117118
@import "./views/dialogs/_UntrustedDeviceDialog.scss";

‎res/css/views/dialogs/_SpotlightDialog.scss‎

Lines changed: 190 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,190 @@
1+
/*
2+
Copyright 2021 The Matrix.org Foundation C.I.C.
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
.mx_SpotlightDialog_wrapper .mx_Dialog {
18+
border-radius: 16px;
19+
overflow-y: initial;
20+
position: relative;
21+
height: 60%;
22+
padding: 0;
23+
24+
.mx_SpotlightDialog_keyboardPrompt {
25+
position: absolute;
26+
padding: 8px;
27+
border-radius: 8px;
28+
background-color: $background;
29+
top: -60px;
30+
left: 50%;
31+
transform: translateX(-50%);
32+
font-size: $font-12px;
33+
line-height: $font-15px;
34+
color: $secondary-content;
35+
36+
> span > div {
37+
display: inline-block;
38+
padding: 2px 4px;
39+
margin: 0 4px;
40+
border-radius: 6px;
41+
background-color: $quinary-content;
42+
vertical-align: middle;
43+
color: $tertiary-content;
44+
}
45+
}
46+
}
47+
48+
.mx_SpotlightDialog {
49+
height: 100%;
50+
display: flex;
51+
flex-direction: column;
52+
53+
.mx_Dialog_header {
54+
margin-bottom: 0;
55+
}
56+
57+
.mx_SearchBox {
58+
margin: 0;
59+
border: none;
60+
border-bottom: 1px solid $system;
61+
62+
> input {
63+
color: $tertiary-content;
64+
font-weight: normal;
65+
font-size: $font-15px;
66+
line-height: $font-24px;
67+
}
68+
}
69+
70+
#mx_SpotlightDialog_content {
71+
margin: 16px;
72+
height: 100%;
73+
overflow-y: auto;
74+
75+
.mx_SpotlightDialog_section {
76+
> h4 {
77+
font-weight: $font-semi-bold;
78+
font-size: $font-12px;
79+
line-height: $font-15px;
80+
color: $secondary-content;
81+
margin-top: 0;
82+
}
83+
84+
& + .mx_SpotlightDialog_section {
85+
margin-top: 24px;
86+
}
87+
}
88+
89+
.mx_SpotlightDialog_recentlyViewed {
90+
> div {
91+
display: flex;
92+
white-space: nowrap;
93+
overflow-x: auto;
94+
}
95+
96+
.mx_AccessibleButton {
97+
border: 1px solid $quinary-content;
98+
border-radius: 8px;
99+
padding: 6px 8px 4px 6px;
100+
color: $primary-content;
101+
font-size: $font-15px;
102+
line-height: $font-20px;
103+
display: inline-block;
104+
105+
.mx_BaseAvatar {
106+
margin-right: 8px;
107+
display: inline-block;
108+
height: 20px;
109+
}
110+
111+
& + .mx_AccessibleButton {
112+
margin-left: 12px;
113+
}
114+
115+
&:hover, &[aria-selected=true] {
116+
background-color: $quinary-content;
117+
}
118+
}
119+
}
120+
121+
.mx_SpotlightDialog_results,
122+
.mx_SpotlightDialog_recentSearches {
123+
.mx_AccessibleButton {
124+
padding: 6px 4px;
125+
border-radius: 8px;
126+
font-size: $font-15px;
127+
line-height: $font-24px;
128+
color: $primary-content;
129+
position: relative;
130+
display: flex;
131+
align-items: center;
132+
133+
.mx_BaseAvatar {
134+
margin-right: 8px;
135+
display: inline-block;
136+
height: 20px;
137+
}
138+
139+
&:hover, &[aria-selected=true] {
140+
background-color: $system;
141+
142+
.mx_SpotlightDialog_enterPrompt {
143+
display: inline-block;
144+
}
145+
}
146+
}
147+
}
148+
149+
.mx_SpotlightDialog_result_details {
150+
margin-left: 8px;
151+
color: $tertiary-content;
152+
font-size: $font-12px;
153+
line-height: $font-15px;
154+
}
155+
156+
.mx_SpotlightDialog_recentSearches {
157+
overflow-y: hidden;
158+
height: calc(100% - 100px);
159+
160+
> h4 {
161+
padding-left: 20px;
162+
position: relative;
163+
164+
&::before {
165+
position: absolute;
166+
content: "";
167+
width: 16px;
168+
height: 16px;
169+
left: 0;
170+
mask-repeat: no-repeat;
171+
mask-size: contain;
172+
mask-position: center;
173+
background-color: $secondary-content;
174+
mask-image: url("$(res)/img/element-icons/recent.svg");
175+
}
176+
}
177+
}
178+
179+
.mx_SpotlightDialog_enterPrompt {
180+
padding: 2px 4px;
181+
font-size: $font-12px;
182+
line-height: $font-15px;
183+
color: $tertiary-content;
184+
border-radius: 6px;
185+
background-color: $quinary-content;
186+
margin: 0 4px 0 auto;
187+
display: none;
188+
}
189+
}
190+
}

‎res/img/element-icons/ia-design-changes.png‎

24.5 KB
Loading

‎res/img/element-icons/recent.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎src/accessibility/RovingTabIndex.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ interface IContext {
5555
dispatch: Dispatch<IAction>;
5656
}
5757

58-
const RovingTabIndexContext = createContext<IContext>({
58+
export const RovingTabIndexContext = createContext<IContext>({
5959
state: {
6060
activeRef: null,
6161
refs: [], // list of refs in DOM order

‎src/components/structures/RoomSearch.tsx‎

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,9 @@ import { replaceableComponent } from "../../utils/replaceableComponent";
3030
import SpaceStore from "../../stores/spaces/SpaceStore";
3131
import { UPDATE_SELECTED_SPACE } from "../../stores/spaces";
3232
import { isMac } from "../../Keyboard";
33+
import SettingsStore from "../../settings/SettingsStore";
34+
import Modal from "../../Modal";
35+
import SpotlightDialog from "../views/dialogs/SpotlightDialog";
3336

3437
interface IProps {
3538
isMinimized: boolean;
@@ -81,13 +84,22 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
8184
public componentWillUnmount() {
8285
defaultDispatcher.unregister(this.dispatcherRef);
8386
SpaceStore.instance.off(UPDATE_SELECTED_SPACE, this.clearInput);
87+
SpaceStore.instance.off(UPDATE_TOP_LEVEL_SPACES, this.onSpaces);
88+
}
89+
90+
private openSpotlight() {
91+
Modal.createTrackedDialog("Spotlight", "", SpotlightDialog, {}, "mx_SpotlightDialog_wrapper");
8492
}
8593

8694
private onAction = (payload: ActionPayload) => {
8795
if (payload.action === Action.ViewRoom && payload.clear_search) {
8896
this.clearInput();
8997
} else if (payload.action === 'focus_room_filter' && this.inputRef.current) {
90-
this.inputRef.current.focus();
98+
if (SettingsStore.getValue("feature_spotlight")) {
99+
this.openSpotlight();
100+
} else {
101+
this.inputRef.current.focus();
102+
}
91103
}
92104
};
93105

@@ -107,6 +119,14 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
107119
this.setState({ query: this.inputRef.current.value });
108120
};
109121

122+
private onMouseDown = (ev: React.MouseEvent<HTMLInputElement>) => {
123+
if (SettingsStore.getValue("feature_spotlight")) {
124+
ev.preventDefault();
125+
ev.stopPropagation();
126+
this.openSpotlight();
127+
}
128+
};
129+
110130
private onFocus = (ev: React.FocusEvent<HTMLInputElement>) => {
111131
this.setState({ focused: true });
112132
ev.target.select();
@@ -162,11 +182,12 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
162182
ref={this.inputRef}
163183
className={inputClasses}
164184
value={this.state.query}
185+
onMouseDown={this.onMouseDown}
165186
onFocus={this.onFocus}
166187
onBlur={this.onBlur}
167188
onChange={this.onChange}
168189
onKeyDown={this.onKeyDown}
169-
placeholder={_t("Filter")}
190+
placeholder={SettingsStore.getValue("feature_spotlight") ? _t("Search") : _t("Filter")}
170191
autoComplete="off"
171192
/>
172193
);

‎src/components/structures/SearchBox.tsx‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
1515
limitations under the License.
1616
*/
1717

18-
import React, { createRef } from 'react';
18+
import React, { createRef, HTMLProps } from 'react';
1919
import { Key } from '../../Keyboard';
2020
import dis from '../../dispatcher/dispatcher';
2121
import { throttle } from 'lodash';
@@ -24,7 +24,7 @@ import classNames from 'classnames';
2424
import { replaceableComponent } from "../../utils/replaceableComponent";
2525
import { Action } from '../../dispatcher/actions';
2626

27-
interface IProps {
27+
interface IProps extends HTMLProps<HTMLInputElement> {
2828
onSearch?: (query: string) => void;
2929
onCleared?: (source?: string) => void;
3030
onKeyDown?: (ev: React.KeyboardEvent) => void;
@@ -134,11 +134,15 @@ export default class SearchBox extends React.Component<IProps, IState> {
134134
}
135135

136136
public render(): JSX.Element {
137+
/* eslint @typescript-eslint/no-unused-vars: ["error", { "ignoreRestSiblings": true }] */
138+
const { onSearch, onCleared, onKeyDown, onFocus, onBlur, className = "", placeholder, blurredPlaceholder,
139+
autoFocus, initialValue, collapsed, enableRoomSearchFocus, ...props } = this.props;
140+
137141
// check for collapsed here and
138142
// not at parent so we keep
139143
// searchTerm in our state
140144
// when collapsing and expanding
141-
if (this.props.collapsed) {
145+
if (collapsed) {
142146
return null;
143147
}
144148
const clearButton = (!this.state.blurred || this.state.searchTerm) ?
@@ -152,13 +156,10 @@ export default class SearchBox extends React.Component<IProps, IState> {
152156
// show a shorter placeholder when blurred, if requested
153157
// this is used for the room filter field that has
154158
// the explore button next to it when blurred
155-
const placeholder = this.state.blurred ?
156-
(this.props.blurredPlaceholder || this.props.placeholder) :
157-
this.props.placeholder;
158-
const className = this.props.className || "";
159159
return (
160160
<div className={classNames("mx_SearchBox", "mx_textinput", { "mx_SearchBox_blurred": this.state.blurred })}>
161161
<input
162+
{...props}
162163
key="searchfield"
163164
type="text"
164165
ref={this.search}
@@ -168,7 +169,7 @@ export default class SearchBox extends React.Component<IProps, IState> {
168169
onChange={this.onChange}
169170
onKeyDown={this.onKeyDown}
170171
onBlur={this.onBlur}
171-
placeholder={placeholder}
172+
placeholder={this.state.blurred ? (blurredPlaceholder || placeholder) : placeholder}
172173
autoComplete="off"
173174
autoFocus={this.props.autoFocus}
174175
/>

0 commit comments

Comments
 (0)