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 all 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
41 changes: 39 additions & 2 deletions res/css/structures/_RoomSearch.scss
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ limitations under the License.
mask-repeat: no-repeat;
background-color: $secondary-content;
margin-left: 7px;
margin-bottom: 2px;
}

.mx_RoomSearch_input {
Expand All @@ -44,14 +45,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 +113,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
44 changes: 16 additions & 28 deletions res/css/views/dialogs/_SpotlightDialog.scss
Original file line number Diff line number Diff line change
Expand Up @@ -223,18 +223,13 @@ limitations under the License.
text-overflow: ellipsis;
}

.mx_SpotlightDialog_recentSearches {
overflow-y: hidden;
height: calc(100% - 190px);

> h4 > .mx_AccessibleButton_kind_link {
padding: 0;
float: right;
font-weight: normal;
font-size: $font-12px;
line-height: $font-15px;
color: $secondary-content;
}
.mx_SpotlightDialog_recentSearches > h4 > .mx_AccessibleButton_kind_link {
padding: 0;
float: right;
font-weight: normal;
font-size: $font-12px;
line-height: $font-15px;
color: $secondary-content;
}

.mx_SpotlightDialog_enterPrompt {
Expand All @@ -253,28 +248,21 @@ 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;
height: min-content;
align-self: center;
}

> 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
2 changes: 1 addition & 1 deletion res/css/views/dialogs/_UserSettingsDialog.scss
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ limitations under the License.
}

.mx_UserSettingsDialog_labsIcon::before {
mask-image: url('$(res)/img/element-icons/settings/lab-flags.svg');
mask-image: url('$(res)/img/element-icons/settings/flask.svg');
}

.mx_UserSettingsDialog_mjolnirIcon::before {
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.
3 changes: 3 additions & 0 deletions res/img/element-icons/settings/flask.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 0 additions & 4 deletions res/img/element-icons/settings/lab-flags.svg

This file was deleted.

14 changes: 14 additions & 0 deletions src/Rooms.ts
Original file line number Diff line number Diff line change
Expand Up @@ -158,6 +158,20 @@ function guessDMRoomTargetId(room: Room, myUserId: string): string {
return oldestUser.userId;
}

export function spaceContextDetailsText(space: Room): string {
if (!space.isSpaceRoom()) return undefined;

const [parent, ...otherParents] = SpaceStore.instance.getKnownParents(space.roomId);
if (parent) {
return _t("%(spaceName)s and %(count)s others", {
spaceName: space.client.getRoom(parent).name,
count: otherParents.length,
});
}

return space.getCanonicalAlias();
}

export function roomContextDetailsText(room: Room): string {
if (room.isSpaceRoom()) return undefined;

Expand Down
39 changes: 38 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,42 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
showNotificationsToast(false);
}

if (!localStorage.getItem("mx_seen_feature_spotlight_toast")) {
setTimeout(() => {
// Skip the toast if the beta is already enabled or the user has changed the setting from default
if (SettingsStore.getValue("feature_spotlight") ||
SettingsStore.getValue("feature_spotlight", null, true) !== null) {
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
Loading