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

Commit

Permalink
Iterate Spotlight
Browse files Browse the repository at this point in the history
  • Loading branch information
@t3chguy
t3chguy committed Dec 2, 2021
1 parent b661aa9 commit bef1f81
Show file tree
Hide file tree
Showing 6 changed files with 89 additions and 46 deletions.
1 change: 1 addition & 0 deletions res/css/views/avatars/_DecoratedRoomAvatar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ limitations under the License.
content: '';
width: 8px;
height: 8px;
right: 0;
position: absolute;
border-radius: 8px;
}
Expand Down
60 changes: 29 additions & 31 deletions res/css/views/dialogs/_SpotlightDialog.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
Expand Down Expand Up @@ -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;
Expand All @@ -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] {
Expand Down Expand Up @@ -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 {
Expand Down
6 changes: 6 additions & 0 deletions src/components/structures/RoomView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -931,6 +931,12 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
this.messagePanel?.jumpToLiveTimeline();
}
break;

case Action.SearchRoomTimeline:
this.setState({
searching: true,
});
break;
}
};

Expand Down
54 changes: 40 additions & 14 deletions src/components/views/dialogs/SpotlightDialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ limitations under the License.
*/

import React, {
ChangeEvent,
ComponentProps,
KeyboardEvent,
useCallback,
Expand All @@ -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";
Expand All @@ -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;
Expand Down Expand Up @@ -147,7 +149,7 @@ const useSpaceResults = (space?: Room, query?: string): [IHierarchyRoom[], boole
const SpotlightDialog: React.FC<IProps> = ({ 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<Room[] | null>(() => {
Expand All @@ -165,7 +167,8 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", onFinished }) =>
const activeSpace = SpaceStore.instance.activeSpaceRoom;
const [spaceResults, spaceResultsLoading] = useSpaceResults(activeSpace, query);

const setQuery = (newQuery: string): void => {
const setQuery = (e: ChangeEvent<HTMLInputElement>): void => {
const newQuery = e.currentTarget.value;
_setQuery(newQuery);
if (!query !== !newQuery) {
setImmediate(() => {
Expand Down Expand Up @@ -285,18 +288,37 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", onFinished }) =>
</>;
} else {
content = <>
<div className="mx_SpotlightDialog_section mx_SpotlightDialog_otherSearches" role="group">
<h4>{ _t("Search for") }</h4>
<div>
<AccessibleButton kind="primary_outline" onClick={() => {
// TODO does not work when user is on Home, or a Space.
defaultDispatcher.fire(Action.SearchRoomTimeline);
onFinished();
}}>
{ _t("Messages") }
</AccessibleButton>
<AccessibleButton kind="primary_outline" onClick={() => {
defaultDispatcher.fire(Action.ViewRoomDirectory);
onFinished();
}}>
{ _t("Public Rooms") }
</AccessibleButton>
</div>
</div>

<div className="mx_SpotlightDialog_section mx_SpotlightDialog_recentlyViewed" role="group">
<h4>{ _t("Recently viewed") }</h4>
<div>
{ BreadcrumbsStore.instance.rooms.map(room => (
{ BreadcrumbsStore.instance.rooms.slice(0, 10).map(room => (
<Option
id={`mx_SpotlightDialog_button_recentlyViewed_${room.roomId}`}
key={room.roomId}
onClick={() => {
viewRoom(room.roomId);
}}
>
<RoomAvatar room={room} width={20} height={20} />
<DecoratedRoomAvatar room={room} avatarSize={32} />
{ room.name }
</Option>
)) }
Expand Down Expand Up @@ -383,15 +405,19 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", onFinished }) =>
hasCancel={false}
onKeyDown={onDialogKeyDown}
>
<SearchBox
autoFocus
placeholder={_t("Search for anything")}
initialValue={initialText}
onSearch={setQuery}
onKeyDown={onKeyDown}
aria-owns="mx_SpotlightDialog_content"
aria-activedescendant={activeDescendant}
/>
<div className="mx_SpotlightDialog_searchBox mx_textinput">
<input
autoFocus
type="text"
autoComplete="off"
placeholder={_t("Search for anything")}
value={query}
onChange={setQuery}
onKeyDown={onKeyDown}
aria-owns="mx_SpotlightDialog_content"
aria-activedescendant={activeDescendant}
/>
</div>

<div id="mx_SpotlightDialog_content" role="listbox" aria-activedescendant={activeDescendant}>
{ content }
Expand Down
7 changes: 6 additions & 1 deletion src/dispatcher/actions.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",

Expand All @@ -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",
}
7 changes: 7 additions & 0 deletions src/i18n/strings/en_EN.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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 <arrows/> to scroll results": "Use <arrows/> to scroll results",
"Search for anything": "Search for anything",
"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>.",
"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.",
Expand Down

0 comments on commit bef1f81

Please sign in to comment.