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

Move new search experience to a Beta #7718

Merged
merged 24 commits into from
Feb 8, 2022
Merged
Show file tree
Hide file tree
Changes from 15 commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 38 additions & 2 deletions res/css/structures/_RoomSearch.scss
Original file line number Diff line number Diff line change
Expand Up @@ -44,14 +44,18 @@ limitations under the License.
padding: 0;
height: 100%;
width: 100%;
font-size: $font-12px;
line-height: $font-16px;

&:not(.mx_RoomSearch_inputExpanded)::placeholder {
color: $tertiary-content !important; // !important to override default app-wide styles
}
}

.mx_RoomSearch_input,
.mx_RoomSearch_spotlightTriggerText {
font-size: $font-12px;
line-height: $font-16px;
}

&.mx_RoomSearch_hasQuery {
border-color: $secondary-content;
}
Expand Down Expand Up @@ -108,4 +112,36 @@ limitations under the License.
}
}
}

&.mx_RoomSearch_spotlightTrigger {
cursor: pointer;
min-width: 0;

.mx_RoomSearch_spotlightTriggerText {
color: $tertiary-content;
flex: 1;
min-width: 0;
// the following rules are to match that of a real input field
overflow: hidden;
margin: 9px;
font-weight: $font-semi-bold;
}

&:hover {
background-color: $tertiary-content;

.mx_RoomSearch_spotlightTriggerText {
color: $background;
}

.mx_RoomSearch_shortcutPrompt {
background-color: $background;
color: $secondary-content;
}

.mx_RoomSearch_icon {
background-color: $background;
}
}
}
}
10 changes: 10 additions & 0 deletions res/css/views/beta/_BetaCard.scss
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,14 @@ limitations under the License.
line-height: $font-15px;
color: $secondary-content;
margin-top: 20px;

> h4 {
margin: 0;
}

> p {
margin-top: 0;
}
}
}

Expand All @@ -64,6 +72,7 @@ limitations under the License.
width: 300px;
object-fit: contain;
height: 100%;
border-radius: 4px;
}
}

Expand All @@ -90,6 +99,7 @@ limitations under the License.
border-radius: 8px;
text-transform: uppercase;
font-size: 12px;
font-weight: $font-semi-bold;
line-height: 15px;
color: #FFFFFF;
display: inline-block;
Expand Down
23 changes: 7 additions & 16 deletions res/css/views/dialogs/_SpotlightDialog.scss
Original file line number Diff line number Diff line change
Expand Up @@ -253,28 +253,19 @@ limitations under the License.
font-size: $font-12px;
line-height: $font-15px;
color: $secondary-content;
padding: 16px 16px 20px;
padding: 12px 16px 16px;
display: flex;
border-top: 1px solid $quinary-content;

.mx_BetaCard_betaPill {
margin-right: 12px;
}

> span {
position: relative;
padding-left: 20px;
align-self: center;

&::before {
background-color: $secondary-content;
content: "";
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
mask-image: url('$(res)/img/element-icons/room/room-summary.svg');
width: 16px;
height: 16px;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
.mx_AccessibleButton_kind_link_inline {
padding: 0;
}
}

Expand Down
Binary file added res/img/betas/new_search_experience.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
35 changes: 34 additions & 1 deletion src/components/structures/MatrixChat.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ import { RoomUpdateCause } from "../../stores/room-list/models";
import SecurityCustomisations from "../../customisations/Security";
import Spinner from "../views/elements/Spinner";
import QuestionDialog from "../views/dialogs/QuestionDialog";
import UserSettingsDialog from '../views/dialogs/UserSettingsDialog';
import UserSettingsDialog, { UserTab } from '../views/dialogs/UserSettingsDialog';
import CreateGroupDialog from '../views/dialogs/CreateGroupDialog';
import CreateRoomDialog from '../views/dialogs/CreateRoomDialog';
import RoomDirectory from './RoomDirectory';
Expand All @@ -117,6 +117,7 @@ import { showSpaceInvite } from "../../utils/space";
import AccessibleButton from "../views/elements/AccessibleButton";
import { ActionPayload } from "../../dispatcher/payloads";
import { SummarizedNotificationState } from "../../stores/notifications/SummarizedNotificationState";
import GenericToast from '../views/toasts/GenericToast';

/** constants for MatrixChat.state.view */
export enum Views {
Expand Down Expand Up @@ -1551,6 +1552,38 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
showNotificationsToast(false);
}

if (!localStorage.getItem("mx_seen_feature_spotlight_toast")) {
setTimeout(() => {
if (SettingsStore.getValue("feature_spotlight")) return;

const key = "BETA_SPOTLIGHT_TOAST";
ToastStore.sharedInstance().addOrReplaceToast({
key,
title: _t("New search beta available"),
props: {
description: _t("We're testing a new search to make finding what you want quicker.\n"),
acceptLabel: _t("Learn more"),
onAccept: () => {
dis.dispatch({
action: Action.ViewUserSettings,
initialTabId: UserTab.Labs,
});
localStorage.setItem("mx_seen_feature_spotlight_toast", "true");
ToastStore.sharedInstance().dismissToast(key);
},
rejectLabel: _t("Dismiss"),
onReject: () => {
localStorage.setItem("mx_seen_feature_spotlight_toast", "true");
ToastStore.sharedInstance().dismissToast(key);
},
},
icon: "labs",
component: GenericToast,
priority: 9,
});
}, 5 * 60 * 1000); // show after 5 minutes to not overload user with toasts on launch
}

dis.fire(Action.FocusSendMessageComposer);
this.setState({
ready: true,
Expand Down
61 changes: 39 additions & 22 deletions src/components/structures/RoomSearch.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import classNames from "classnames";
import defaultDispatcher from "../../dispatcher/dispatcher";
import { _t } from "../../languageHandler";
import { ActionPayload } from "../../dispatcher/payloads";
import AccessibleButton from "../views/elements/AccessibleButton";
import AccessibleButton, { ButtonEvent } from "../views/elements/AccessibleButton";
import { Action } from "../../dispatcher/actions";
import RoomListStore from "../../stores/room-list/RoomListStore";
import { NameFilterCondition } from "../../stores/room-list/filters/NameFilterCondition";
Expand All @@ -46,11 +46,13 @@ interface IProps {
interface IState {
query: string;
focused: boolean;
spotlightBetaEnabled: boolean;
}

@replaceableComponent("structures.RoomSearch")
export default class RoomSearch extends React.PureComponent<IProps, IState> {
private readonly dispatcherRef: string;
private readonly betaRef: string;
private inputRef: React.RefObject<HTMLInputElement> = createRef();
private searchFilter: NameFilterCondition = new NameFilterCondition();

Expand All @@ -60,11 +62,13 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
this.state = {
query: "",
focused: false,
spotlightBetaEnabled: SettingsStore.getValue("feature_spotlight"),
};

this.dispatcherRef = defaultDispatcher.register(this.onAction);
// clear filter when changing spaces, in future we may wish to maintain a filter per-space
SpaceStore.instance.on(UPDATE_SELECTED_SPACE, this.clearInput);
this.betaRef = SettingsStore.watchSetting("feature_spotlight", null, this.onSpotlightChange);
}

public componentDidUpdate(prevProps: Readonly<IProps>, prevState: Readonly<IState>): void {
Expand All @@ -85,8 +89,16 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
public componentWillUnmount() {
defaultDispatcher.unregister(this.dispatcherRef);
SpaceStore.instance.off(UPDATE_SELECTED_SPACE, this.clearInput);
SettingsStore.unwatchSetting(this.betaRef);
}

private onSpotlightChange = () => {
const spotlightBetaEnabled = SettingsStore.getValue("feature_spotlight");
if (this.state.spotlightBetaEnabled !== spotlightBetaEnabled) {
this.setState({ spotlightBetaEnabled });
}
};

private openSpotlight() {
Modal.createTrackedDialog("Spotlight", "", SpotlightDialog, {}, "mx_SpotlightDialog_wrapper", false, true);
}
Expand All @@ -95,25 +107,22 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
if (payload.action === Action.ViewRoom && payload.clear_search) {
this.clearInput();
} else if (payload.action === 'focus_room_filter') {
if (SettingsStore.getValue("feature_spotlight")) {
this.openSpotlight();
} else {
this.inputRef.current?.focus();
}
this.focus();
}
};

private clearInput = () => {
private clearInput = (ev?: ButtonEvent) => {
ev.stopPropagation();
if (!this.inputRef.current) return;
this.inputRef.current.value = "";
this.onChange();
};

private openSearch = () => {
if (SettingsStore.getValue("feature_spotlight")) {
if (this.state.spotlightBetaEnabled) {
this.openSpotlight();
} else {
defaultDispatcher.dispatch({ action: "show_left_panel" });
// dispatched as it needs handling by MatrixChat too
defaultDispatcher.dispatch({ action: "focus_room_filter" });
}
};
Expand All @@ -124,14 +133,8 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
};

private onFocus = (ev: React.FocusEvent<HTMLInputElement>) => {
if (SettingsStore.getValue("feature_spotlight")) {
ev.preventDefault();
ev.stopPropagation();
this.openSpotlight();
} else {
this.setState({ focused: true });
ev.target.select();
}
this.setState({ focused: true });
ev.target.select();
};

private onBlur = (ev: React.FocusEvent<HTMLInputElement>) => {
Expand Down Expand Up @@ -159,7 +162,7 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
};

public focus = (): void => {
if (SettingsStore.getValue("feature_spotlight")) {
if (this.state.spotlightBetaEnabled) {
this.openSpotlight();
} else {
this.inputRef.current?.focus();
Expand All @@ -172,6 +175,7 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
'mx_RoomSearch_hasQuery': this.state.query,
'mx_RoomSearch_focused': this.state.focused,
'mx_RoomSearch_minimized': this.props.isMinimized,
'mx_RoomSearch_spotlightTrigger': this.state.spotlightBetaEnabled,
});

const inputClasses = classNames({
Expand All @@ -180,8 +184,9 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
});

let icon = (
<div className="mx_RoomSearch_icon" onClick={this.focus} />
<div className="mx_RoomSearch_icon" />
);

let input = (
<input
type="text"
Expand All @@ -192,10 +197,11 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
onBlur={this.onBlur}
onChange={this.onChange}
onKeyDown={this.onKeyDown}
placeholder={SettingsStore.getValue("feature_spotlight") ? _t("Search") : _t("Filter")}
placeholder={_t("Filter")}
autoComplete="off"
/>
);

let clearButton = (
<AccessibleButton
tabIndex={-1}
Expand All @@ -204,7 +210,8 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
onClick={this.clearInput}
/>
);
let shortcutPrompt = <div className="mx_RoomSearch_shortcutPrompt" onClick={this.focus}>

let shortcutPrompt = <div className="mx_RoomSearch_shortcutPrompt">
{ isMac ? "⌘ K" : _t(ALTERNATE_KEY_NAME[Key.CONTROL]) + " K" }
</div>;

Expand All @@ -221,8 +228,18 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
shortcutPrompt = null;
}

if (this.state.spotlightBetaEnabled) {
return <AccessibleButton onClick={this.openSpotlight} className={classes}>
{ icon }
{ input && <div className="mx_RoomSearch_spotlightTriggerText">
{ _t("Search") }
</div> }
{ shortcutPrompt }
</AccessibleButton>;
}

return (
<div className={classes}>
<div className={classes} onClick={this.focus}>
{ icon }
{ input }
{ shortcutPrompt }
Expand Down
Loading