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

Commit bef1f81

Browse files
committed
Iterate Spotlight
1 parent b661aa9 commit bef1f81

File tree

6 files changed

+89
-46
lines changed

6 files changed

+89
-46
lines changed

res/css/views/avatars/_DecoratedRoomAvatar.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ limitations under the License.
3939
content: '';
4040
width: 8px;
4141
height: 8px;
42+
right: 0;
4243
position: absolute;
4344
border-radius: 8px;
4445
}

res/css/views/dialogs/_SpotlightDialog.scss

Lines changed: 29 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ limitations under the License.
1515
*/
1616

1717
.mx_SpotlightDialog_wrapper .mx_Dialog {
18-
border-radius: 16px;
18+
border-radius: 8px;
1919
overflow-y: initial;
2020
position: relative;
2121
height: 60%;
@@ -54,12 +54,19 @@ limitations under the License.
5454
margin-bottom: 0;
5555
}
5656

57-
.mx_SearchBox {
57+
.mx_SpotlightDialog_searchBox {
5858
margin: 0;
5959
border: none;
60+
padding: 12px 16px;
6061
border-bottom: 1px solid $system;
6162

6263
> input {
64+
display: block;
65+
box-sizing: border-box;
66+
background-color: transparent;
67+
width: 100%;
68+
height: 32px;
69+
padding: 0;
6370
color: $tertiary-content;
6471
font-weight: normal;
6572
font-size: $font-15px;
@@ -86,30 +93,39 @@ limitations under the License.
8693
}
8794
}
8895

96+
.mx_SpotlightDialog_otherSearches {
97+
.mx_AccessibleButton + .mx_AccessibleButton {
98+
margin-left: 12px;
99+
}
100+
}
101+
89102
.mx_SpotlightDialog_recentlyViewed {
90103
> div {
91104
display: flex;
92105
white-space: nowrap;
93-
overflow-x: auto;
106+
overflow-x: hidden;
94107
}
95108

96109
.mx_AccessibleButton {
97-
border: 1px solid $quinary-content;
98110
border-radius: 8px;
99-
padding: 6px 8px 4px 6px;
111+
padding: 4px;
100112
color: $primary-content;
101-
font-size: $font-15px;
102-
line-height: $font-20px;
113+
font-size: $font-12px;
114+
line-height: $font-15px;
103115
display: inline-block;
104-
105-
.mx_BaseAvatar {
106-
margin-right: 8px;
107-
display: inline-block;
108-
height: 20px;
116+
width: 50px;
117+
min-width: 50px;
118+
box-sizing: border-box;
119+
text-align: center;
120+
overflow: hidden;
121+
text-overflow: ellipsis;
122+
123+
.mx_DecoratedRoomAvatar {
124+
margin: 0 5px; // maintain centering
109125
}
110126

111127
& + .mx_AccessibleButton {
112-
margin-left: 12px;
128+
margin-left: 16px;
113129
}
114130

115131
&:hover, &[aria-selected=true] {
@@ -156,24 +172,6 @@ limitations under the License.
156172
.mx_SpotlightDialog_recentSearches {
157173
overflow-y: hidden;
158174
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-
}
177175
}
178176

179177
.mx_SpotlightDialog_enterPrompt {

src/components/structures/RoomView.tsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -931,6 +931,12 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
931931
this.messagePanel?.jumpToLiveTimeline();
932932
}
933933
break;
934+
935+
case Action.SearchRoomTimeline:
936+
this.setState({
937+
searching: true,
938+
});
939+
break;
934940
}
935941
};
936942

src/components/views/dialogs/SpotlightDialog.tsx

Lines changed: 40 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ limitations under the License.
1515
*/
1616

1717
import React, {
18+
ChangeEvent,
1819
ComponentProps,
1920
KeyboardEvent,
2021
useCallback,
@@ -31,7 +32,6 @@ import { RoomHierarchy } from "matrix-js-sdk/src/room-hierarchy";
3132
import { IDialogProps } from "./IDialogProps";
3233
import { _t } from "../../../languageHandler";
3334
import BaseDialog from "./BaseDialog";
34-
import SearchBox from "../../structures/SearchBox";
3535
import { BreadcrumbsStore } from "../../../stores/BreadcrumbsStore";
3636
import RoomAvatar from "../avatars/RoomAvatar";
3737
import defaultDispatcher from "../../../dispatcher/dispatcher";
@@ -53,6 +53,8 @@ import { mediaFromMxc } from "../../../customisations/Media";
5353
import BaseAvatar from "../avatars/BaseAvatar";
5454
import Spinner from "../elements/Spinner";
5555
import { roomContextDetailsText } from "../../../Rooms";
56+
import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
57+
import { Action } from "../../../dispatcher/actions";
5658

5759
const MAX_RECENT_SEARCHES = 10;
5860
const SECTION_LIMIT = 50;
@@ -147,7 +149,7 @@ const useSpaceResults = (space?: Room, query?: string): [IHierarchyRoom[], boole
147149
const SpotlightDialog: React.FC<IProps> = ({ initialText = "", onFinished }) => {
148150
const cli = MatrixClientPeg.get();
149151
const rovingContext = useContext(RovingTabIndexContext);
150-
const [query, _setQuery] = useState("");
152+
const [query, _setQuery] = useState(initialText);
151153
const recentSearches = useRecentSearches();
152154

153155
const results = useMemo<Room[] | null>(() => {
@@ -165,7 +167,8 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", onFinished }) =>
165167
const activeSpace = SpaceStore.instance.activeSpaceRoom;
166168
const [spaceResults, spaceResultsLoading] = useSpaceResults(activeSpace, query);
167169

168-
const setQuery = (newQuery: string): void => {
170+
const setQuery = (e: ChangeEvent<HTMLInputElement>): void => {
171+
const newQuery = e.currentTarget.value;
169172
_setQuery(newQuery);
170173
if (!query !== !newQuery) {
171174
setImmediate(() => {
@@ -285,18 +288,37 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", onFinished }) =>
285288
</>;
286289
} else {
287290
content = <>
291+
<div className="mx_SpotlightDialog_section mx_SpotlightDialog_otherSearches" role="group">
292+
<h4>{ _t("Search for") }</h4>
293+
<div>
294+
<AccessibleButton kind="primary_outline" onClick={() => {
295+
// TODO does not work when user is on Home, or a Space.
296+
defaultDispatcher.fire(Action.SearchRoomTimeline);
297+
onFinished();
298+
}}>
299+
{ _t("Messages") }
300+
</AccessibleButton>
301+
<AccessibleButton kind="primary_outline" onClick={() => {
302+
defaultDispatcher.fire(Action.ViewRoomDirectory);
303+
onFinished();
304+
}}>
305+
{ _t("Public Rooms") }
306+
</AccessibleButton>
307+
</div>
308+
</div>
309+
288310
<div className="mx_SpotlightDialog_section mx_SpotlightDialog_recentlyViewed" role="group">
289311
<h4>{ _t("Recently viewed") }</h4>
290312
<div>
291-
{ BreadcrumbsStore.instance.rooms.map(room => (
313+
{ BreadcrumbsStore.instance.rooms.slice(0, 10).map(room => (
292314
<Option
293315
id={`mx_SpotlightDialog_button_recentlyViewed_${room.roomId}`}
294316
key={room.roomId}
295317
onClick={() => {
296318
viewRoom(room.roomId);
297319
}}
298320
>
299-
<RoomAvatar room={room} width={20} height={20} />
321+
<DecoratedRoomAvatar room={room} avatarSize={32} />
300322
{ room.name }
301323
</Option>
302324
)) }
@@ -383,15 +405,19 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", onFinished }) =>
383405
hasCancel={false}
384406
onKeyDown={onDialogKeyDown}
385407
>
386-
<SearchBox
387-
autoFocus
388-
placeholder={_t("Search for anything")}
389-
initialValue={initialText}
390-
onSearch={setQuery}
391-
onKeyDown={onKeyDown}
392-
aria-owns="mx_SpotlightDialog_content"
393-
aria-activedescendant={activeDescendant}
394-
/>
408+
<div className="mx_SpotlightDialog_searchBox mx_textinput">
409+
<input
410+
autoFocus
411+
type="text"
412+
autoComplete="off"
413+
placeholder={_t("Search for anything")}
414+
value={query}
415+
onChange={setQuery}
416+
onKeyDown={onKeyDown}
417+
aria-owns="mx_SpotlightDialog_content"
418+
aria-activedescendant={activeDescendant}
419+
/>
420+
</div>
395421

396422
<div id="mx_SpotlightDialog_content" role="listbox" aria-activedescendant={activeDescendant}>
397423
{ content }

src/dispatcher/actions.ts

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -188,7 +188,7 @@ export enum Action {
188188
SwitchSpace = "switch_space",
189189

190190
/**
191-
* Signals to the visible space hierarchy that a change has occurred an that it should refresh.
191+
* Signals to the visible space hierarchy that a change has occurred and that it should refresh.
192192
*/
193193
UpdateSpaceHierarchy = "update_space_hierarchy",
194194

@@ -203,4 +203,9 @@ export enum Action {
203203
* Fires when a user starts to edit event (e.g. up arrow in compositor)
204204
*/
205205
EditEvent = "edit_event",
206+
207+
/**
208+
* Searches the currently open room. No additional payload information required.
209+
*/
210+
SearchRoomTimeline = "search_room_timeline",
206211
}

src/i18n/strings/en_EN.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -851,6 +851,7 @@
851851
"New layout switcher (with message bubbles)": "New layout switcher (with message bubbles)",
852852
"Meta Spaces": "Meta Spaces",
853853
"Use new room breadcrumbs": "Use new room breadcrumbs",
854+
"New spotlight search experience": "New spotlight search experience",
854855
"Don't send read receipts": "Don't send read receipts",
855856
"Font size": "Font size",
856857
"Use custom size": "Use custom size",
@@ -2681,6 +2682,12 @@
26812682
"Command Help": "Command Help",
26822683
"Space settings": "Space settings",
26832684
"Settings - %(spaceName)s": "Settings - %(spaceName)s",
2685+
"Other rooms in %(spaceName)s": "Other rooms in %(spaceName)s",
2686+
"Search for": "Search for",
2687+
"Public Rooms": "Public Rooms",
2688+
"Recent searches": "Recent searches",
2689+
"Use <arrows/> to scroll results": "Use <arrows/> to scroll results",
2690+
"Search for anything": "Search for anything",
26842691
"To help us prevent this in future, please <a>send us logs</a>.": "To help us prevent this in future, please <a>send us logs</a>.",
26852692
"Missing session data": "Missing session data",
26862693
"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.",

0 commit comments

Comments
 (0)