mirror of
https://github.com/vector-im/element-web.git
synced 2026-05-04 19:56:45 +02:00
Switch from svg masks to svg rendering in more places (#31650)
* Replace icons with Compound alternatives Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Remove unused icon Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Replace more icons with Compound alternatives Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Swap for outline icons in spotlight & update screenshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch emoji picker to use emoji for header icons Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update screenshot Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update football emoji Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch from svg masks to svg rendering in ExtensionsCard Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch from svg masks to svg rendering in BaseCard Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch from svg masks to svg rendering in EmojiPicker Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch from svg masks to svg rendering in Spotlight Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshot Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update screenshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Tweak emoji and fix disabled state Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Revert size change Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Delint Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Add test Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski
GitHub
parent
15c409491d
commit
edd4eab195
@ -345,10 +345,10 @@ test.describe("Spotlight", () => {
|
||||
await expect(resultLocator).toHaveCount(1);
|
||||
await expect(resultLocator.first()).toContainText(bot2.credentials.displayName);
|
||||
|
||||
await expect(spotlight.dialog.locator(".mx_SpotlightDialog_startGroupChat")).toContainText(
|
||||
await expect(spotlight.dialog.locator("#mx_SpotlightDialog_button_startGroupChat")).toContainText(
|
||||
"Start a group chat",
|
||||
);
|
||||
await spotlight.dialog.locator(".mx_SpotlightDialog_startGroupChat").click();
|
||||
await spotlight.dialog.locator("#mx_SpotlightDialog_button_startGroupChat").click();
|
||||
await expect(page.getByRole("dialog")).toContainText("Direct Messages");
|
||||
});
|
||||
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 43 KiB After Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 27 KiB |
@ -79,12 +79,8 @@ Please see LICENSE files in the repository root for full details.
|
||||
position: relative;
|
||||
padding: $spacing-4 $spacing-8 $spacing-4 37px;
|
||||
|
||||
&::before {
|
||||
background-color: $secondary-content;
|
||||
content: "";
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
> svg {
|
||||
color: $secondary-content;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
position: absolute;
|
||||
@ -93,23 +89,11 @@ Please see LICENSE files in the repository root for full details.
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
&.mx_SpotlightDialog_filterPeople::before {
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/user-profile.svg");
|
||||
}
|
||||
|
||||
&.mx_SpotlightDialog_filterPublicRooms::before {
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/room.svg");
|
||||
}
|
||||
|
||||
&.mx_SpotlightDialog_filterPublicSpaces::before {
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/space.svg");
|
||||
}
|
||||
|
||||
.mx_SpotlightDialog_filter--close {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
padding: 1px;
|
||||
background: $system;
|
||||
border-radius: 8px;
|
||||
margin-left: $spacing-8;
|
||||
@ -117,17 +101,10 @@ Please see LICENSE files in the repository root for full details.
|
||||
line-height: 16px;
|
||||
color: $secondary-content;
|
||||
|
||||
&::before {
|
||||
background-color: $secondary-content;
|
||||
content: "";
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: 14px;
|
||||
svg {
|
||||
color: $secondary-content;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -386,45 +363,24 @@ Please see LICENSE files in the repository root for full details.
|
||||
margin: 0;
|
||||
padding: 3px $spacing-8 3px $spacing-28;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
svg {
|
||||
display: block;
|
||||
position: absolute;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
left: $spacing-8;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: var(--cpd-color-icon-primary);
|
||||
color: var(--cpd-color-icon-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SpotlightDialog_inviteLink .mx_AccessibleButton::before {
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/link.svg");
|
||||
}
|
||||
|
||||
.mx_SpotlightDialog_createRoom .mx_AccessibleButton::before {
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/room.svg");
|
||||
}
|
||||
|
||||
.mx_SpotlightDialog_otherSearches {
|
||||
.mx_SpotlightDialog_startChat,
|
||||
.mx_SpotlightDialog_joinRoomAlias,
|
||||
.mx_SpotlightDialog_explorePublicRooms,
|
||||
.mx_SpotlightDialog_explorePublicSpaces,
|
||||
.mx_SpotlightDialog_startGroupChat,
|
||||
.mx_SpotlightDialog_searchMessages {
|
||||
.mx_SpotlightDialog_option {
|
||||
padding-left: $spacing-32;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
background-color: $secondary-content;
|
||||
content: "";
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
svg {
|
||||
color: $secondary-content;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
position: absolute;
|
||||
@ -434,30 +390,6 @@ Please see LICENSE files in the repository root for full details.
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SpotlightDialog_startChat::before {
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/user-profile.svg");
|
||||
}
|
||||
|
||||
.mx_SpotlightDialog_joinRoomAlias::before {
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/room.svg");
|
||||
}
|
||||
|
||||
.mx_SpotlightDialog_explorePublicRooms::before {
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/room.svg");
|
||||
}
|
||||
|
||||
.mx_SpotlightDialog_explorePublicSpaces::before {
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/space.svg");
|
||||
}
|
||||
|
||||
.mx_SpotlightDialog_startGroupChat::before {
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/group.svg");
|
||||
}
|
||||
|
||||
.mx_SpotlightDialog_searchMessages::before {
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/chat.svg");
|
||||
}
|
||||
|
||||
.mx_SpotlightDialog_otherSearches_messageSearchText {
|
||||
font-size: $font-15px;
|
||||
line-height: $font-24px;
|
||||
@ -496,27 +428,10 @@ Please see LICENSE files in the repository root for full details.
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mx_SpotlightDialog_metaspaceResult {
|
||||
background-color: $secondary-content;
|
||||
mask-position: center;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
|
||||
&.mx_SpotlightDialog_metaspaceResult_home-space {
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/home.svg");
|
||||
}
|
||||
|
||||
&.mx_SpotlightDialog_metaspaceResult_favourites-space {
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/favourite.svg");
|
||||
}
|
||||
|
||||
&.mx_SpotlightDialog_metaspaceResult_people-space {
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/user-profile.svg");
|
||||
}
|
||||
|
||||
&.mx_SpotlightDialog_metaspaceResult_orphans-space {
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/room.svg");
|
||||
}
|
||||
.mx_SpotlightDialog_metaspaceResult svg {
|
||||
color: $secondary-content;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -87,34 +87,24 @@ Please see LICENSE files in the repository root for full details.
|
||||
align-self: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
cursor: pointer;
|
||||
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_EmojiPicker_search_clear {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mx_EmojiPicker_search_icon {
|
||||
width: 20px;
|
||||
width: 18px;
|
||||
margin: 8px;
|
||||
}
|
||||
|
||||
.mx_EmojiPicker_search_icon:not(.mx_EmojiPicker_search_clear) {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.mx_EmojiPicker_search_icon::after {
|
||||
mask: url("@vector-im/compound-design-tokens/icons/search.svg") no-repeat;
|
||||
mask-size: 100%;
|
||||
background-color: $primary-content;
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.mx_EmojiPicker_search_clear::after {
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: $primary-content;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_EmojiPicker_category {
|
||||
|
||||
@ -58,7 +58,13 @@ Please see LICENSE files in the repository root for full details.
|
||||
width: 24px;
|
||||
padding: var(--cpd-space-3x) var(--cpd-space-1x);
|
||||
box-sizing: border-box;
|
||||
min-width: 24px; /* prevent flexbox crushing */
|
||||
flex-shrink: 0;
|
||||
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: $icon-button-color;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::after {
|
||||
@ -72,32 +78,14 @@ Please see LICENSE files in the repository root for full details.
|
||||
background-color: rgb(141, 151, 165, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: 16px;
|
||||
background-color: $icon-button-color;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_ExtensionsCard_app_pinToggle {
|
||||
right: 8px;
|
||||
|
||||
&::before {
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/pin-solid.svg");
|
||||
}
|
||||
}
|
||||
|
||||
.mx_ExtensionsCard_app_options {
|
||||
right: 32px; /* 24 + 8 */
|
||||
&::before {
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_ExtensionsCard_Button_pinned {
|
||||
@ -105,8 +93,8 @@ Please see LICENSE files in the repository root for full details.
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.mx_ExtensionsCard_app_pinToggle::before {
|
||||
background-color: $accent;
|
||||
.mx_ExtensionsCard_app_pinToggle svg {
|
||||
color: $accent;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -160,12 +160,8 @@ $accent-1400: var(--cpd-color-green-1400);
|
||||
background-color: $quinary-content !important;
|
||||
color: $background !important;
|
||||
|
||||
&.mx_SpotlightDialog_startChat::before,
|
||||
&.mx_SpotlightDialog_joinRoomAlias::before,
|
||||
&.mx_SpotlightDialog_explorePublicRooms::before,
|
||||
&.mx_SpotlightDialog_startGroupChat::before,
|
||||
&.mx_SpotlightDialog_searchMessages::before {
|
||||
background-color: $background !important;
|
||||
svg {
|
||||
color: $background !important;
|
||||
}
|
||||
|
||||
.mx_DecoratedRoomAvatar_icon::before {
|
||||
|
||||
@ -7,22 +7,21 @@ Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
import { type WebSearch as WebSearchEvent } from "@matrix-org/analytics-events/types/typescript/WebSearch";
|
||||
import classNames from "classnames";
|
||||
import { capitalize, sum } from "lodash";
|
||||
import {
|
||||
type HierarchyRoom,
|
||||
type IPublicRoomsChunkRoom,
|
||||
JoinRule,
|
||||
type MatrixClient,
|
||||
type Room,
|
||||
RoomMember,
|
||||
RoomType,
|
||||
type Room,
|
||||
type HierarchyRoom,
|
||||
JoinRule,
|
||||
} from "matrix-js-sdk/src/matrix";
|
||||
import { KnownMembership } from "matrix-js-sdk/src/types";
|
||||
import { normalize } from "matrix-js-sdk/src/utils";
|
||||
import React, {
|
||||
type JSX,
|
||||
type ChangeEvent,
|
||||
type JSX,
|
||||
useCallback,
|
||||
useContext,
|
||||
useEffect,
|
||||
@ -31,6 +30,17 @@ import React, {
|
||||
useState,
|
||||
} from "react";
|
||||
import sanitizeHtml from "sanitize-html";
|
||||
import {
|
||||
ChatIcon,
|
||||
RoomIcon,
|
||||
SpaceIcon,
|
||||
UserProfileIcon,
|
||||
FavouriteIcon,
|
||||
HomeIcon,
|
||||
GroupIcon,
|
||||
CloseIcon,
|
||||
LinkIcon,
|
||||
} from "@vector-im/compound-design-tokens/assets/web/icons";
|
||||
|
||||
import { KeyBindingAction } from "../../../../accessibility/KeyboardShortcuts";
|
||||
import {
|
||||
@ -62,7 +72,7 @@ import { type RoomNotificationState } from "../../../../stores/notifications/Roo
|
||||
import { RoomNotificationStateStore } from "../../../../stores/notifications/RoomNotificationStateStore";
|
||||
import { RecentAlgorithm } from "../../../../stores/room-list/algorithms/tag-sorting/RecentAlgorithm";
|
||||
import { SdkContextClass } from "../../../../contexts/SDKContext";
|
||||
import { getMetaSpaceName } from "../../../../stores/spaces";
|
||||
import { getMetaSpaceName, MetaSpace } from "../../../../stores/spaces";
|
||||
import SpaceStore from "../../../../stores/spaces/SpaceStore";
|
||||
import { DirectoryMember, type Member, startDmOnFirstMessage } from "../../../../utils/direct-messages";
|
||||
import DMRoomMap from "../../../../utils/DMRoomMap";
|
||||
@ -131,6 +141,30 @@ function filterToLabel(filter: Filter): string {
|
||||
}
|
||||
}
|
||||
|
||||
function filterToIcon(filter: Filter): JSX.Element {
|
||||
switch (filter) {
|
||||
case Filter.People:
|
||||
return <UserProfileIcon />;
|
||||
case Filter.PublicRooms:
|
||||
return <RoomIcon />;
|
||||
case Filter.PublicSpaces:
|
||||
return <SpaceIcon />;
|
||||
}
|
||||
}
|
||||
|
||||
function metaspaceToIcon(key: MetaSpace): JSX.Element | undefined {
|
||||
switch (key) {
|
||||
case MetaSpace.Home:
|
||||
return <HomeIcon />;
|
||||
case MetaSpace.Favourites:
|
||||
return <FavouriteIcon />;
|
||||
case MetaSpace.People:
|
||||
return <UserProfileIcon />;
|
||||
case MetaSpace.Orphans:
|
||||
return <RoomIcon />;
|
||||
}
|
||||
}
|
||||
|
||||
interface IBaseResult {
|
||||
section: Section;
|
||||
filter: Filter[];
|
||||
@ -396,14 +430,7 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
|
||||
...SpaceStore.instance.enabledMetaSpaces.map((spaceKey) => ({
|
||||
section: Section.Spaces,
|
||||
filter: [] as Filter[],
|
||||
avatar: (
|
||||
<div
|
||||
className={classNames(
|
||||
"mx_SpotlightDialog_metaspaceResult",
|
||||
`mx_SpotlightDialog_metaspaceResult_${spaceKey}`,
|
||||
)}
|
||||
/>
|
||||
),
|
||||
avatar: <div className="mx_SpotlightDialog_metaspaceResult">{metaspaceToIcon(spaceKey)}</div>,
|
||||
name: getMetaSpaceName(spaceKey, SpaceStore.instance.allRoomsInHome),
|
||||
onClick() {
|
||||
SpaceStore.instance.setActiveSpace(spaceKey);
|
||||
@ -584,34 +611,30 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
|
||||
{filter !== Filter.PublicSpaces && supportsSpaceFiltering && (
|
||||
<Option
|
||||
id="mx_SpotlightDialog_button_explorePublicSpaces"
|
||||
className="mx_SpotlightDialog_explorePublicSpaces"
|
||||
onClick={() => setFilter(Filter.PublicSpaces)}
|
||||
>
|
||||
{filterToIcon(Filter.PublicSpaces)}
|
||||
{filterToLabel(Filter.PublicSpaces)}
|
||||
</Option>
|
||||
)}
|
||||
{filter !== Filter.PublicRooms && (
|
||||
<Option
|
||||
id="mx_SpotlightDialog_button_explorePublicRooms"
|
||||
className="mx_SpotlightDialog_explorePublicRooms"
|
||||
onClick={() => setFilter(Filter.PublicRooms)}
|
||||
>
|
||||
{filterToIcon(Filter.PublicRooms)}
|
||||
{filterToLabel(Filter.PublicRooms)}
|
||||
</Option>
|
||||
)}
|
||||
{filter !== Filter.People && (
|
||||
<Option
|
||||
id="mx_SpotlightDialog_button_startChat"
|
||||
className="mx_SpotlightDialog_startChat"
|
||||
onClick={() => setFilter(Filter.People)}
|
||||
>
|
||||
<Option id="mx_SpotlightDialog_button_startChat" onClick={() => setFilter(Filter.People)}>
|
||||
{filterToIcon(Filter.People)}
|
||||
{filterToLabel(Filter.People)}
|
||||
</Option>
|
||||
)}
|
||||
{filter === null && (
|
||||
<Option
|
||||
id="mx_SpotlightDialog_button_searchMessages"
|
||||
className="mx_SpotlightDialog_searchMessages"
|
||||
onClick={() => {
|
||||
defaultDispatcher.dispatch({
|
||||
action: Action.FocusMessageSearch,
|
||||
@ -620,6 +643,7 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
|
||||
onFinished();
|
||||
}}
|
||||
>
|
||||
<ChatIcon />
|
||||
{_t("spotlight_dialog|messages_label")}
|
||||
</Option>
|
||||
)}
|
||||
@ -919,7 +943,6 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
|
||||
<div>
|
||||
<Option
|
||||
id="mx_SpotlightDialog_button_joinRoomAlias"
|
||||
className="mx_SpotlightDialog_joinRoomAlias"
|
||||
onClick={(ev) => {
|
||||
defaultDispatcher.dispatch<ViewRoomPayload>({
|
||||
action: Action.ViewRoom,
|
||||
@ -931,6 +954,7 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
|
||||
onFinished();
|
||||
}}
|
||||
>
|
||||
<RoomIcon />
|
||||
{_t("spotlight_dialog|join_button_text", {
|
||||
roomAddress: trimmedQuery,
|
||||
})}
|
||||
@ -961,6 +985,7 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
|
||||
title={inviteLinkCopied ? _t("common|copied") : _t("action|copy")}
|
||||
>
|
||||
<span className="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline">
|
||||
<LinkIcon />
|
||||
{_t("spotlight_dialog|copy_link_text")}
|
||||
</span>
|
||||
</TooltipOption>
|
||||
@ -985,6 +1010,7 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
|
||||
}
|
||||
>
|
||||
<span className="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline">
|
||||
<RoomIcon />
|
||||
{_t("spotlight_dialog|create_new_room_button")}
|
||||
</span>
|
||||
</Option>
|
||||
@ -1003,9 +1029,9 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
|
||||
<h4 id="mx_SpotlightDialog_section_groupChat">{_t("spotlight_dialog|group_chat_section_title")}</h4>
|
||||
<Option
|
||||
id="mx_SpotlightDialog_button_startGroupChat"
|
||||
className="mx_SpotlightDialog_startGroupChat"
|
||||
onClick={() => showStartChatInviteDialog(trimmedQuery)}
|
||||
>
|
||||
<GroupIcon />
|
||||
{_t("spotlight_dialog|start_group_chat_button")}
|
||||
</Option>
|
||||
</div>
|
||||
@ -1244,13 +1270,8 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
|
||||
>
|
||||
<div className="mx_SpotlightDialog_searchBox mx_textinput">
|
||||
{filter !== null && (
|
||||
<div
|
||||
className={classNames("mx_SpotlightDialog_filter", {
|
||||
mx_SpotlightDialog_filterPeople: filter === Filter.People,
|
||||
mx_SpotlightDialog_filterPublicRooms: filter === Filter.PublicRooms,
|
||||
mx_SpotlightDialog_filterPublicSpaces: filter === Filter.PublicSpaces,
|
||||
})}
|
||||
>
|
||||
<div className="mx_SpotlightDialog_filter">
|
||||
{filterToIcon(filter)}
|
||||
<span>{filterToLabel(filter)}</span>
|
||||
<AccessibleButton
|
||||
tabIndex={-1}
|
||||
@ -1259,7 +1280,9 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
|
||||
})}
|
||||
className="mx_SpotlightDialog_filter--close"
|
||||
onClick={() => setFilter(null)}
|
||||
/>
|
||||
>
|
||||
<CloseIcon />
|
||||
</AccessibleButton>
|
||||
</div>
|
||||
)}
|
||||
<input
|
||||
|
||||
@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
import React, { type JSX } from "react";
|
||||
import { CloseIcon, SearchIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
|
||||
|
||||
import { _t } from "../../../languageHandler";
|
||||
import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
|
||||
@ -52,12 +53,18 @@ class Search extends React.PureComponent<IProps> {
|
||||
rightButton = (
|
||||
<button
|
||||
onClick={() => this.props.onChange("")}
|
||||
className="mx_EmojiPicker_search_icon mx_EmojiPicker_search_clear"
|
||||
className="mx_EmojiPicker_search_clear"
|
||||
title={_t("emoji_picker|cancel_search_label")}
|
||||
/>
|
||||
>
|
||||
<CloseIcon />
|
||||
</button>
|
||||
);
|
||||
} else {
|
||||
rightButton = <span className="mx_EmojiPicker_search_icon" />;
|
||||
rightButton = (
|
||||
<span className="mx_EmojiPicker_search_icon">
|
||||
<SearchIcon />
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
@ -10,8 +10,12 @@ import React, { type JSX, useEffect, useMemo, useState } from "react";
|
||||
import { type Room } from "matrix-js-sdk/src/matrix";
|
||||
import classNames from "classnames";
|
||||
import { Button, Link, Separator, Text } from "@vector-im/compound-web";
|
||||
import PlusIcon from "@vector-im/compound-design-tokens/assets/web/icons/plus";
|
||||
import ExtensionsIcon from "@vector-im/compound-design-tokens/assets/web/icons/extensions";
|
||||
import {
|
||||
PlusIcon,
|
||||
ExtensionsIcon,
|
||||
OverflowHorizontalIcon,
|
||||
PinSolidIcon,
|
||||
} from "@vector-im/compound-design-tokens/assets/web/icons";
|
||||
|
||||
import BaseCard from "./BaseCard";
|
||||
import WidgetUtils, { useWidgets } from "../../../utils/WidgetUtils";
|
||||
@ -124,7 +128,9 @@ const AppRow: React.FC<IAppRowProps> = ({ app, room }) => {
|
||||
isExpanded={menuDisplayed}
|
||||
onClick={openMenu}
|
||||
title={_t("common|options")}
|
||||
/>
|
||||
>
|
||||
<OverflowHorizontalIcon />
|
||||
</ContextMenuTooltipButton>
|
||||
)}
|
||||
|
||||
<AccessibleButton
|
||||
@ -132,7 +138,9 @@ const AppRow: React.FC<IAppRowProps> = ({ app, room }) => {
|
||||
onClick={togglePin}
|
||||
title={pinTitle}
|
||||
disabled={cannotPin}
|
||||
/>
|
||||
>
|
||||
<PinSolidIcon />
|
||||
</AccessibleButton>
|
||||
|
||||
{contextMenu}
|
||||
</div>
|
||||
|
||||
@ -33,6 +33,8 @@ import { SettingLevel } from "../../../../../src/settings/SettingLevel";
|
||||
import defaultDispatcher from "../../../../../src/dispatcher/dispatcher";
|
||||
import SdkConfig from "../../../../../src/SdkConfig";
|
||||
import { Action } from "../../../../../src/dispatcher/actions";
|
||||
import { MetaSpace } from "../../../../../src/stores/spaces";
|
||||
import SpaceStore from "../../../../../src/stores/spaces/SpaceStore.ts";
|
||||
|
||||
jest.useFakeTimers();
|
||||
|
||||
@ -699,4 +701,29 @@ describe("Spotlight Dialog", () => {
|
||||
expect(keyboardPrompt?.textContent).not.toContain("→");
|
||||
});
|
||||
});
|
||||
|
||||
describe("metaspaces", () => {
|
||||
beforeEach(() => {
|
||||
jest.spyOn(SpaceStore.instance, "enabledMetaSpaces", "get").mockReturnValue([
|
||||
MetaSpace.Home,
|
||||
MetaSpace.Favourites,
|
||||
MetaSpace.People,
|
||||
MetaSpace.Orphans,
|
||||
]);
|
||||
});
|
||||
|
||||
it.each([MetaSpace.Home, MetaSpace.Favourites, MetaSpace.People])(
|
||||
"should show metaspace %s",
|
||||
async (metaSpace) => {
|
||||
const onFinished = jest.fn();
|
||||
const { asFragment, container } = render(
|
||||
<SpotlightDialog initialText={metaSpace.split("-")[0]} onFinished={onFinished} />,
|
||||
);
|
||||
await waitFor(() =>
|
||||
expect(container.querySelector(".mx_SpotlightDialog_metaspaceResult")).toBeInTheDocument(),
|
||||
);
|
||||
expect(asFragment()).toMatchSnapshot();
|
||||
},
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
@ -0,0 +1,759 @@
|
||||
// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
|
||||
|
||||
exports[`Spotlight Dialog metaspaces should show metaspace favourites-space 1`] = `
|
||||
<DocumentFragment>
|
||||
<div
|
||||
id="mx_SpotlightDialog_keyboardPrompt"
|
||||
>
|
||||
<span>
|
||||
Use
|
||||
<kbd>
|
||||
↓
|
||||
</kbd>
|
||||
<kbd>
|
||||
↑
|
||||
</kbd>
|
||||
to scroll
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
data-focus-guard="true"
|
||||
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
|
||||
tabindex="0"
|
||||
/>
|
||||
<div
|
||||
aria-label="Search Dialog"
|
||||
class="mx_SpotlightDialog mx_Dialog_fixedWidth"
|
||||
data-focus-lock-disabled="false"
|
||||
role="dialog"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
class="mx_Dialog_header"
|
||||
/>
|
||||
<div
|
||||
class="mx_SpotlightDialog_searchBox mx_textinput"
|
||||
>
|
||||
<input
|
||||
aria-activedescendant="mx_SpotlightDialog_button_result_Favourites"
|
||||
aria-describedby="mx_SpotlightDialog_keyboardPrompt"
|
||||
aria-label="Search"
|
||||
aria-owns="mx_SpotlightDialog_content"
|
||||
autocapitalize="off"
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
placeholder="Search"
|
||||
spellcheck="false"
|
||||
type="text"
|
||||
value="favourites"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
aria-activedescendant="mx_SpotlightDialog_button_result_Favourites"
|
||||
aria-describedby="mx_SpotlightDialog_keyboardPrompt"
|
||||
id="mx_SpotlightDialog_content"
|
||||
role="listbox"
|
||||
>
|
||||
<div
|
||||
aria-labelledby="mx_SpotlightDialog_section_spaces"
|
||||
class="mx_SpotlightDialog_section mx_SpotlightDialog_results"
|
||||
role="group"
|
||||
>
|
||||
<h4
|
||||
id="mx_SpotlightDialog_section_spaces"
|
||||
>
|
||||
Spaces you're in
|
||||
</h4>
|
||||
<div>
|
||||
<li
|
||||
aria-selected="true"
|
||||
class="mx_AccessibleButton mx_SpotlightDialog_option"
|
||||
id="mx_SpotlightDialog_button_result_Favourites"
|
||||
role="option"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
class="mx_SpotlightDialog_metaspaceResult"
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M13.905 9.378 12 5.52l-1.905 3.86-4.259.618 3.082 3.004-.727 4.242L12 15.24l3.81 2.003-.728-4.242 3.082-3.004zM8.767 7.55l2.336-4.733a1 1 0 0 1 1.794 0l2.336 4.733 5.223.76a1 1 0 0 1 .555 1.705L17.23 13.7l.892 5.202a1 1 0 0 1-1.45 1.054L12 17.5l-4.672 2.456a1 1 0 0 1-1.451-1.054l.892-5.202-3.78-3.685a1 1 0 0 1 .555-1.706z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
Favourites
|
||||
<div
|
||||
class="mx_SpotlightDialog_option--endAdornment"
|
||||
>
|
||||
<kbd
|
||||
aria-hidden="true"
|
||||
class="mx_SpotlightDialog_enterPrompt"
|
||||
>
|
||||
↵
|
||||
</kbd>
|
||||
</div>
|
||||
</li>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
aria-labelledby="mx_SpotlightDialog_section_otherSearches"
|
||||
class="mx_SpotlightDialog_section mx_SpotlightDialog_otherSearches"
|
||||
role="group"
|
||||
>
|
||||
<h4
|
||||
id="mx_SpotlightDialog_section_otherSearches"
|
||||
>
|
||||
Use "favourites" to search
|
||||
</h4>
|
||||
<div>
|
||||
<li
|
||||
aria-selected="false"
|
||||
class="mx_AccessibleButton mx_SpotlightDialog_option"
|
||||
id="mx_SpotlightDialog_button_explorePublicSpaces"
|
||||
role="option"
|
||||
tabindex="-1"
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M6 21q-1.65 0-2.825-1.175T2 17t1.175-2.825T6 13t2.825 1.175T10 17t-1.175 2.825T6 21m12 0q-1.65 0-2.825-1.175T14 17t1.175-2.825T18 13t2.825 1.175T22 17t-1.175 2.825T18 21M6 19q.824 0 1.412-.587Q8 17.825 8 17t-.588-1.412A1.93 1.93 0 0 0 6 15q-.824 0-1.412.588A1.93 1.93 0 0 0 4 17q0 .824.588 1.413Q5.175 19 6 19m12 0q.824 0 1.413-.587Q20 17.825 20 17t-.587-1.412A1.93 1.93 0 0 0 18 15q-.824 0-1.413.588A1.93 1.93 0 0 0 16 17q0 .824.587 1.413Q17.176 19 18 19m-6-8q-1.65 0-2.825-1.175T8 7t1.175-2.825T12 3t2.825 1.175T16 7t-1.175 2.825T12 11m0-2q.825 0 1.412-.588Q14 7.826 14 7q0-.824-.588-1.412A1.93 1.93 0 0 0 12 5q-.825 0-1.412.588A1.93 1.93 0 0 0 10 7q0 .824.588 1.412Q11.175 9 12 9"
|
||||
/>
|
||||
</svg>
|
||||
Public spaces
|
||||
<div
|
||||
class="mx_SpotlightDialog_option--endAdornment"
|
||||
>
|
||||
<kbd
|
||||
aria-hidden="true"
|
||||
class="mx_SpotlightDialog_enterPrompt"
|
||||
>
|
||||
↵
|
||||
</kbd>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
aria-selected="false"
|
||||
class="mx_AccessibleButton mx_SpotlightDialog_option"
|
||||
id="mx_SpotlightDialog_button_explorePublicRooms"
|
||||
role="option"
|
||||
tabindex="-1"
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="m8.566 17-.944 4.094q-.086.406-.372.656t-.687.25q-.543 0-.887-.469a1.18 1.18 0 0 1-.2-1.031l.801-3.5H3.158q-.572 0-.916-.484a1.27 1.27 0 0 1-.2-1.078 1.12 1.12 0 0 1 1.116-.938H6.85l1.145-5h-3.12q-.57 0-.915-.484a1.27 1.27 0 0 1-.2-1.078A1.12 1.12 0 0 1 4.875 7h3.691l.945-4.094q.085-.406.372-.656.286-.25.686-.25.544 0 .887.469.345.468.2 1.031l-.8 3.5h4.578l.944-4.094q.085-.406.372-.656.286-.25.687-.25.543 0 .887.469t.2 1.031L17.723 7h3.119q.573 0 .916.484.343.485.2 1.079a1.12 1.12 0 0 1-1.116.937H17.15l-1.145 5h3.12q.57 0 .915.484.343.485.2 1.079a1.12 1.12 0 0 1-1.116.937h-3.691l-.944 4.094q-.087.406-.373.656t-.686.25q-.544 0-.887-.469a1.18 1.18 0 0 1-.2-1.031l.8-3.5zm.573-2.5h4.578l1.144-5h-4.578z"
|
||||
/>
|
||||
</svg>
|
||||
Public rooms
|
||||
<div
|
||||
class="mx_SpotlightDialog_option--endAdornment"
|
||||
>
|
||||
<kbd
|
||||
aria-hidden="true"
|
||||
class="mx_SpotlightDialog_enterPrompt"
|
||||
>
|
||||
↵
|
||||
</kbd>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
aria-selected="false"
|
||||
class="mx_AccessibleButton mx_SpotlightDialog_option"
|
||||
id="mx_SpotlightDialog_button_startChat"
|
||||
role="option"
|
||||
tabindex="-1"
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M9.175 13.825Q10.35 15 12 15t2.825-1.175T16 11t-1.175-2.825T12 7 9.175 8.175 8 11t1.175 2.825m4.237-1.412A1.93 1.93 0 0 1 12 13q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 11q0-.825.588-1.412A1.93 1.93 0 0 1 12 9q.825 0 1.412.588Q14 10.175 14 11t-.588 1.412"
|
||||
/>
|
||||
<path
|
||||
d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10m-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0"
|
||||
/>
|
||||
<path
|
||||
d="M16.23 18.792a13 13 0 0 0-1.455-.455 11.6 11.6 0 0 0-5.55 0q-.73.18-1.455.455a8 8 0 0 1-1.729-1.454q1.336-.618 2.709-.95A13.8 13.8 0 0 1 12 16q1.65 0 3.25.387 1.373.333 2.709.95a8 8 0 0 1-1.73 1.455"
|
||||
/>
|
||||
</svg>
|
||||
People
|
||||
<div
|
||||
class="mx_SpotlightDialog_option--endAdornment"
|
||||
>
|
||||
<kbd
|
||||
aria-hidden="true"
|
||||
class="mx_SpotlightDialog_enterPrompt"
|
||||
>
|
||||
↵
|
||||
</kbd>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
aria-selected="false"
|
||||
class="mx_AccessibleButton mx_SpotlightDialog_option"
|
||||
id="mx_SpotlightDialog_button_searchMessages"
|
||||
role="option"
|
||||
tabindex="-1"
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="m1.5 21.25 1.45-4.95a10.2 10.2 0 0 1-.712-2.1A10.2 10.2 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22q-1.125 0-2.2-.238a10.2 10.2 0 0 1-2.1-.712L2.75 22.5a.94.94 0 0 1-1-.25.94.94 0 0 1-.25-1m2.45-1.2 3.2-.95a1 1 0 0 1 .275-.062q.15-.013.275-.013.225 0 .438.038.212.036.412.137a7.4 7.4 0 0 0 1.675.6Q11.1 20 12 20q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4 6.325 6.325 4 12q0 .9.2 1.775t.6 1.675q.176.325.188.688t-.088.712z"
|
||||
/>
|
||||
</svg>
|
||||
Messages
|
||||
<div
|
||||
class="mx_SpotlightDialog_option--endAdornment"
|
||||
>
|
||||
<kbd
|
||||
aria-hidden="true"
|
||||
class="mx_SpotlightDialog_enterPrompt"
|
||||
>
|
||||
↵
|
||||
</kbd>
|
||||
</div>
|
||||
</li>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
data-focus-guard="true"
|
||||
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
|
||||
tabindex="0"
|
||||
/>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
exports[`Spotlight Dialog metaspaces should show metaspace home-space 1`] = `
|
||||
<DocumentFragment>
|
||||
<div
|
||||
id="mx_SpotlightDialog_keyboardPrompt"
|
||||
>
|
||||
<span>
|
||||
Use
|
||||
<kbd>
|
||||
↓
|
||||
</kbd>
|
||||
<kbd>
|
||||
↑
|
||||
</kbd>
|
||||
to scroll
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
data-focus-guard="true"
|
||||
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
|
||||
tabindex="0"
|
||||
/>
|
||||
<div
|
||||
aria-label="Search Dialog"
|
||||
class="mx_SpotlightDialog mx_Dialog_fixedWidth"
|
||||
data-focus-lock-disabled="false"
|
||||
role="dialog"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
class="mx_Dialog_header"
|
||||
/>
|
||||
<div
|
||||
class="mx_SpotlightDialog_searchBox mx_textinput"
|
||||
>
|
||||
<input
|
||||
aria-activedescendant="mx_SpotlightDialog_button_result_Home"
|
||||
aria-describedby="mx_SpotlightDialog_keyboardPrompt"
|
||||
aria-label="Search"
|
||||
aria-owns="mx_SpotlightDialog_content"
|
||||
autocapitalize="off"
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
placeholder="Search"
|
||||
spellcheck="false"
|
||||
type="text"
|
||||
value="home"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
aria-activedescendant="mx_SpotlightDialog_button_result_Home"
|
||||
aria-describedby="mx_SpotlightDialog_keyboardPrompt"
|
||||
id="mx_SpotlightDialog_content"
|
||||
role="listbox"
|
||||
>
|
||||
<div
|
||||
aria-labelledby="mx_SpotlightDialog_section_spaces"
|
||||
class="mx_SpotlightDialog_section mx_SpotlightDialog_results"
|
||||
role="group"
|
||||
>
|
||||
<h4
|
||||
id="mx_SpotlightDialog_section_spaces"
|
||||
>
|
||||
Spaces you're in
|
||||
</h4>
|
||||
<div>
|
||||
<li
|
||||
aria-selected="true"
|
||||
class="mx_AccessibleButton mx_SpotlightDialog_option"
|
||||
id="mx_SpotlightDialog_button_result_Home"
|
||||
role="option"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
class="mx_SpotlightDialog_metaspaceResult"
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
clip-rule="evenodd"
|
||||
d="M16 11v8h3V9.177l-7-3.889-7 3.889V19h3v-8zm-6 10H5a2 2 0 0 1-2-2V9.177a2 2 0 0 1 1.029-1.748l7-3.89a2 2 0 0 1 1.942 0l7 3.89A2 2 0 0 1 21 9.177V19a2 2 0 0 1-2 2h-5v-8h-4z"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
Home
|
||||
<div
|
||||
class="mx_SpotlightDialog_option--endAdornment"
|
||||
>
|
||||
<kbd
|
||||
aria-hidden="true"
|
||||
class="mx_SpotlightDialog_enterPrompt"
|
||||
>
|
||||
↵
|
||||
</kbd>
|
||||
</div>
|
||||
</li>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
aria-labelledby="mx_SpotlightDialog_section_otherSearches"
|
||||
class="mx_SpotlightDialog_section mx_SpotlightDialog_otherSearches"
|
||||
role="group"
|
||||
>
|
||||
<h4
|
||||
id="mx_SpotlightDialog_section_otherSearches"
|
||||
>
|
||||
Use "home" to search
|
||||
</h4>
|
||||
<div>
|
||||
<li
|
||||
aria-selected="false"
|
||||
class="mx_AccessibleButton mx_SpotlightDialog_option"
|
||||
id="mx_SpotlightDialog_button_explorePublicSpaces"
|
||||
role="option"
|
||||
tabindex="-1"
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M6 21q-1.65 0-2.825-1.175T2 17t1.175-2.825T6 13t2.825 1.175T10 17t-1.175 2.825T6 21m12 0q-1.65 0-2.825-1.175T14 17t1.175-2.825T18 13t2.825 1.175T22 17t-1.175 2.825T18 21M6 19q.824 0 1.412-.587Q8 17.825 8 17t-.588-1.412A1.93 1.93 0 0 0 6 15q-.824 0-1.412.588A1.93 1.93 0 0 0 4 17q0 .824.588 1.413Q5.175 19 6 19m12 0q.824 0 1.413-.587Q20 17.825 20 17t-.587-1.412A1.93 1.93 0 0 0 18 15q-.824 0-1.413.588A1.93 1.93 0 0 0 16 17q0 .824.587 1.413Q17.176 19 18 19m-6-8q-1.65 0-2.825-1.175T8 7t1.175-2.825T12 3t2.825 1.175T16 7t-1.175 2.825T12 11m0-2q.825 0 1.412-.588Q14 7.826 14 7q0-.824-.588-1.412A1.93 1.93 0 0 0 12 5q-.825 0-1.412.588A1.93 1.93 0 0 0 10 7q0 .824.588 1.412Q11.175 9 12 9"
|
||||
/>
|
||||
</svg>
|
||||
Public spaces
|
||||
<div
|
||||
class="mx_SpotlightDialog_option--endAdornment"
|
||||
>
|
||||
<kbd
|
||||
aria-hidden="true"
|
||||
class="mx_SpotlightDialog_enterPrompt"
|
||||
>
|
||||
↵
|
||||
</kbd>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
aria-selected="false"
|
||||
class="mx_AccessibleButton mx_SpotlightDialog_option"
|
||||
id="mx_SpotlightDialog_button_explorePublicRooms"
|
||||
role="option"
|
||||
tabindex="-1"
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="m8.566 17-.944 4.094q-.086.406-.372.656t-.687.25q-.543 0-.887-.469a1.18 1.18 0 0 1-.2-1.031l.801-3.5H3.158q-.572 0-.916-.484a1.27 1.27 0 0 1-.2-1.078 1.12 1.12 0 0 1 1.116-.938H6.85l1.145-5h-3.12q-.57 0-.915-.484a1.27 1.27 0 0 1-.2-1.078A1.12 1.12 0 0 1 4.875 7h3.691l.945-4.094q.085-.406.372-.656.286-.25.686-.25.544 0 .887.469.345.468.2 1.031l-.8 3.5h4.578l.944-4.094q.085-.406.372-.656.286-.25.687-.25.543 0 .887.469t.2 1.031L17.723 7h3.119q.573 0 .916.484.343.485.2 1.079a1.12 1.12 0 0 1-1.116.937H17.15l-1.145 5h3.12q.57 0 .915.484.343.485.2 1.079a1.12 1.12 0 0 1-1.116.937h-3.691l-.944 4.094q-.087.406-.373.656t-.686.25q-.544 0-.887-.469a1.18 1.18 0 0 1-.2-1.031l.8-3.5zm.573-2.5h4.578l1.144-5h-4.578z"
|
||||
/>
|
||||
</svg>
|
||||
Public rooms
|
||||
<div
|
||||
class="mx_SpotlightDialog_option--endAdornment"
|
||||
>
|
||||
<kbd
|
||||
aria-hidden="true"
|
||||
class="mx_SpotlightDialog_enterPrompt"
|
||||
>
|
||||
↵
|
||||
</kbd>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
aria-selected="false"
|
||||
class="mx_AccessibleButton mx_SpotlightDialog_option"
|
||||
id="mx_SpotlightDialog_button_startChat"
|
||||
role="option"
|
||||
tabindex="-1"
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M9.175 13.825Q10.35 15 12 15t2.825-1.175T16 11t-1.175-2.825T12 7 9.175 8.175 8 11t1.175 2.825m4.237-1.412A1.93 1.93 0 0 1 12 13q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 11q0-.825.588-1.412A1.93 1.93 0 0 1 12 9q.825 0 1.412.588Q14 10.175 14 11t-.588 1.412"
|
||||
/>
|
||||
<path
|
||||
d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10m-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0"
|
||||
/>
|
||||
<path
|
||||
d="M16.23 18.792a13 13 0 0 0-1.455-.455 11.6 11.6 0 0 0-5.55 0q-.73.18-1.455.455a8 8 0 0 1-1.729-1.454q1.336-.618 2.709-.95A13.8 13.8 0 0 1 12 16q1.65 0 3.25.387 1.373.333 2.709.95a8 8 0 0 1-1.73 1.455"
|
||||
/>
|
||||
</svg>
|
||||
People
|
||||
<div
|
||||
class="mx_SpotlightDialog_option--endAdornment"
|
||||
>
|
||||
<kbd
|
||||
aria-hidden="true"
|
||||
class="mx_SpotlightDialog_enterPrompt"
|
||||
>
|
||||
↵
|
||||
</kbd>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
aria-selected="false"
|
||||
class="mx_AccessibleButton mx_SpotlightDialog_option"
|
||||
id="mx_SpotlightDialog_button_searchMessages"
|
||||
role="option"
|
||||
tabindex="-1"
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="m1.5 21.25 1.45-4.95a10.2 10.2 0 0 1-.712-2.1A10.2 10.2 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22q-1.125 0-2.2-.238a10.2 10.2 0 0 1-2.1-.712L2.75 22.5a.94.94 0 0 1-1-.25.94.94 0 0 1-.25-1m2.45-1.2 3.2-.95a1 1 0 0 1 .275-.062q.15-.013.275-.013.225 0 .438.038.212.036.412.137a7.4 7.4 0 0 0 1.675.6Q11.1 20 12 20q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4 6.325 6.325 4 12q0 .9.2 1.775t.6 1.675q.176.325.188.688t-.088.712z"
|
||||
/>
|
||||
</svg>
|
||||
Messages
|
||||
<div
|
||||
class="mx_SpotlightDialog_option--endAdornment"
|
||||
>
|
||||
<kbd
|
||||
aria-hidden="true"
|
||||
class="mx_SpotlightDialog_enterPrompt"
|
||||
>
|
||||
↵
|
||||
</kbd>
|
||||
</div>
|
||||
</li>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
data-focus-guard="true"
|
||||
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
|
||||
tabindex="0"
|
||||
/>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
exports[`Spotlight Dialog metaspaces should show metaspace people-space 1`] = `
|
||||
<DocumentFragment>
|
||||
<div
|
||||
id="mx_SpotlightDialog_keyboardPrompt"
|
||||
>
|
||||
<span>
|
||||
Use
|
||||
<kbd>
|
||||
↓
|
||||
</kbd>
|
||||
<kbd>
|
||||
↑
|
||||
</kbd>
|
||||
to scroll
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
data-focus-guard="true"
|
||||
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
|
||||
tabindex="0"
|
||||
/>
|
||||
<div
|
||||
aria-label="Search Dialog"
|
||||
class="mx_SpotlightDialog mx_Dialog_fixedWidth"
|
||||
data-focus-lock-disabled="false"
|
||||
role="dialog"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
class="mx_Dialog_header"
|
||||
/>
|
||||
<div
|
||||
class="mx_SpotlightDialog_searchBox mx_textinput"
|
||||
>
|
||||
<input
|
||||
aria-activedescendant="mx_SpotlightDialog_button_result_People"
|
||||
aria-describedby="mx_SpotlightDialog_keyboardPrompt"
|
||||
aria-label="Search"
|
||||
aria-owns="mx_SpotlightDialog_content"
|
||||
autocapitalize="off"
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
placeholder="Search"
|
||||
spellcheck="false"
|
||||
type="text"
|
||||
value="people"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
aria-activedescendant="mx_SpotlightDialog_button_result_People"
|
||||
aria-describedby="mx_SpotlightDialog_keyboardPrompt"
|
||||
id="mx_SpotlightDialog_content"
|
||||
role="listbox"
|
||||
>
|
||||
<div
|
||||
aria-labelledby="mx_SpotlightDialog_section_spaces"
|
||||
class="mx_SpotlightDialog_section mx_SpotlightDialog_results"
|
||||
role="group"
|
||||
>
|
||||
<h4
|
||||
id="mx_SpotlightDialog_section_spaces"
|
||||
>
|
||||
Spaces you're in
|
||||
</h4>
|
||||
<div>
|
||||
<li
|
||||
aria-selected="true"
|
||||
class="mx_AccessibleButton mx_SpotlightDialog_option"
|
||||
id="mx_SpotlightDialog_button_result_People"
|
||||
role="option"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
class="mx_SpotlightDialog_metaspaceResult"
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M9.175 13.825Q10.35 15 12 15t2.825-1.175T16 11t-1.175-2.825T12 7 9.175 8.175 8 11t1.175 2.825m4.237-1.412A1.93 1.93 0 0 1 12 13q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 11q0-.825.588-1.412A1.93 1.93 0 0 1 12 9q.825 0 1.412.588Q14 10.175 14 11t-.588 1.412"
|
||||
/>
|
||||
<path
|
||||
d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10m-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0"
|
||||
/>
|
||||
<path
|
||||
d="M16.23 18.792a13 13 0 0 0-1.455-.455 11.6 11.6 0 0 0-5.55 0q-.73.18-1.455.455a8 8 0 0 1-1.729-1.454q1.336-.618 2.709-.95A13.8 13.8 0 0 1 12 16q1.65 0 3.25.387 1.373.333 2.709.95a8 8 0 0 1-1.73 1.455"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
People
|
||||
<div
|
||||
class="mx_SpotlightDialog_option--endAdornment"
|
||||
>
|
||||
<kbd
|
||||
aria-hidden="true"
|
||||
class="mx_SpotlightDialog_enterPrompt"
|
||||
>
|
||||
↵
|
||||
</kbd>
|
||||
</div>
|
||||
</li>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
aria-labelledby="mx_SpotlightDialog_section_otherSearches"
|
||||
class="mx_SpotlightDialog_section mx_SpotlightDialog_otherSearches"
|
||||
role="group"
|
||||
>
|
||||
<h4
|
||||
id="mx_SpotlightDialog_section_otherSearches"
|
||||
>
|
||||
Use "people" to search
|
||||
</h4>
|
||||
<div>
|
||||
<li
|
||||
aria-selected="false"
|
||||
class="mx_AccessibleButton mx_SpotlightDialog_option"
|
||||
id="mx_SpotlightDialog_button_explorePublicSpaces"
|
||||
role="option"
|
||||
tabindex="-1"
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M6 21q-1.65 0-2.825-1.175T2 17t1.175-2.825T6 13t2.825 1.175T10 17t-1.175 2.825T6 21m12 0q-1.65 0-2.825-1.175T14 17t1.175-2.825T18 13t2.825 1.175T22 17t-1.175 2.825T18 21M6 19q.824 0 1.412-.587Q8 17.825 8 17t-.588-1.412A1.93 1.93 0 0 0 6 15q-.824 0-1.412.588A1.93 1.93 0 0 0 4 17q0 .824.588 1.413Q5.175 19 6 19m12 0q.824 0 1.413-.587Q20 17.825 20 17t-.587-1.412A1.93 1.93 0 0 0 18 15q-.824 0-1.413.588A1.93 1.93 0 0 0 16 17q0 .824.587 1.413Q17.176 19 18 19m-6-8q-1.65 0-2.825-1.175T8 7t1.175-2.825T12 3t2.825 1.175T16 7t-1.175 2.825T12 11m0-2q.825 0 1.412-.588Q14 7.826 14 7q0-.824-.588-1.412A1.93 1.93 0 0 0 12 5q-.825 0-1.412.588A1.93 1.93 0 0 0 10 7q0 .824.588 1.412Q11.175 9 12 9"
|
||||
/>
|
||||
</svg>
|
||||
Public spaces
|
||||
<div
|
||||
class="mx_SpotlightDialog_option--endAdornment"
|
||||
>
|
||||
<kbd
|
||||
aria-hidden="true"
|
||||
class="mx_SpotlightDialog_enterPrompt"
|
||||
>
|
||||
↵
|
||||
</kbd>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
aria-selected="false"
|
||||
class="mx_AccessibleButton mx_SpotlightDialog_option"
|
||||
id="mx_SpotlightDialog_button_explorePublicRooms"
|
||||
role="option"
|
||||
tabindex="-1"
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="m8.566 17-.944 4.094q-.086.406-.372.656t-.687.25q-.543 0-.887-.469a1.18 1.18 0 0 1-.2-1.031l.801-3.5H3.158q-.572 0-.916-.484a1.27 1.27 0 0 1-.2-1.078 1.12 1.12 0 0 1 1.116-.938H6.85l1.145-5h-3.12q-.57 0-.915-.484a1.27 1.27 0 0 1-.2-1.078A1.12 1.12 0 0 1 4.875 7h3.691l.945-4.094q.085-.406.372-.656.286-.25.686-.25.544 0 .887.469.345.468.2 1.031l-.8 3.5h4.578l.944-4.094q.085-.406.372-.656.286-.25.687-.25.543 0 .887.469t.2 1.031L17.723 7h3.119q.573 0 .916.484.343.485.2 1.079a1.12 1.12 0 0 1-1.116.937H17.15l-1.145 5h3.12q.57 0 .915.484.343.485.2 1.079a1.12 1.12 0 0 1-1.116.937h-3.691l-.944 4.094q-.087.406-.373.656t-.686.25q-.544 0-.887-.469a1.18 1.18 0 0 1-.2-1.031l.8-3.5zm.573-2.5h4.578l1.144-5h-4.578z"
|
||||
/>
|
||||
</svg>
|
||||
Public rooms
|
||||
<div
|
||||
class="mx_SpotlightDialog_option--endAdornment"
|
||||
>
|
||||
<kbd
|
||||
aria-hidden="true"
|
||||
class="mx_SpotlightDialog_enterPrompt"
|
||||
>
|
||||
↵
|
||||
</kbd>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
aria-selected="false"
|
||||
class="mx_AccessibleButton mx_SpotlightDialog_option"
|
||||
id="mx_SpotlightDialog_button_startChat"
|
||||
role="option"
|
||||
tabindex="-1"
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M9.175 13.825Q10.35 15 12 15t2.825-1.175T16 11t-1.175-2.825T12 7 9.175 8.175 8 11t1.175 2.825m4.237-1.412A1.93 1.93 0 0 1 12 13q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 11q0-.825.588-1.412A1.93 1.93 0 0 1 12 9q.825 0 1.412.588Q14 10.175 14 11t-.588 1.412"
|
||||
/>
|
||||
<path
|
||||
d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10m-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0"
|
||||
/>
|
||||
<path
|
||||
d="M16.23 18.792a13 13 0 0 0-1.455-.455 11.6 11.6 0 0 0-5.55 0q-.73.18-1.455.455a8 8 0 0 1-1.729-1.454q1.336-.618 2.709-.95A13.8 13.8 0 0 1 12 16q1.65 0 3.25.387 1.373.333 2.709.95a8 8 0 0 1-1.73 1.455"
|
||||
/>
|
||||
</svg>
|
||||
People
|
||||
<div
|
||||
class="mx_SpotlightDialog_option--endAdornment"
|
||||
>
|
||||
<kbd
|
||||
aria-hidden="true"
|
||||
class="mx_SpotlightDialog_enterPrompt"
|
||||
>
|
||||
↵
|
||||
</kbd>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
aria-selected="false"
|
||||
class="mx_AccessibleButton mx_SpotlightDialog_option"
|
||||
id="mx_SpotlightDialog_button_searchMessages"
|
||||
role="option"
|
||||
tabindex="-1"
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="m1.5 21.25 1.45-4.95a10.2 10.2 0 0 1-.712-2.1A10.2 10.2 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22q-1.125 0-2.2-.238a10.2 10.2 0 0 1-2.1-.712L2.75 22.5a.94.94 0 0 1-1-.25.94.94 0 0 1-.25-1m2.45-1.2 3.2-.95a1 1 0 0 1 .275-.062q.15-.013.275-.013.225 0 .438.038.212.036.412.137a7.4 7.4 0 0 0 1.675.6Q11.1 20 12 20q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4 6.325 6.325 4 12q0 .9.2 1.775t.6 1.675q.176.325.188.688t-.088.712z"
|
||||
/>
|
||||
</svg>
|
||||
Messages
|
||||
<div
|
||||
class="mx_SpotlightDialog_option--endAdornment"
|
||||
>
|
||||
<kbd
|
||||
aria-hidden="true"
|
||||
class="mx_SpotlightDialog_enterPrompt"
|
||||
>
|
||||
↵
|
||||
</kbd>
|
||||
</div>
|
||||
</li>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
data-focus-guard="true"
|
||||
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
|
||||
tabindex="0"
|
||||
/>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
@ -216,7 +216,19 @@ exports[`<ExtensionsCard /> should render widgets 1`] = `
|
||||
class="mx_AccessibleButton mx_ExtensionsCard_app_pinToggle"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
/>
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M5.769 2.857A.5.5 0 0 1 6.119 2h11.762a.5.5 0 0 1 .35.857L16.15 4.9a.5.5 0 0 0-.15.357v4.487a.5.5 0 0 0 .15.356l3.7 3.644a.5.5 0 0 1 .15.356v1.4a.5.5 0 0 1-.5.5H13v6a1 1 0 1 1-2 0v-6H4.5a.5.5 0 0 1-.5-.5v-1.4a.5.5 0 0 1 .15-.356l3.7-3.644A.5.5 0 0 0 8 9.744V5.257a.5.5 0 0 0-.15-.357z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mx_BaseCard_Button mx_ExtensionsCard_Button"
|
||||
@ -257,7 +269,19 @@ exports[`<ExtensionsCard /> should render widgets 1`] = `
|
||||
class="mx_AccessibleButton mx_ExtensionsCard_app_pinToggle"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
/>
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M5.769 2.857A.5.5 0 0 1 6.119 2h11.762a.5.5 0 0 1 .35.857L16.15 4.9a.5.5 0 0 0-.15.357v4.487a.5.5 0 0 0 .15.356l3.7 3.644a.5.5 0 0 1 .15.356v1.4a.5.5 0 0 1-.5.5H13v6a1 1 0 1 1-2 0v-6H4.5a.5.5 0 0 1-.5-.5v-1.4a.5.5 0 0 1 .15-.356l3.7-3.644A.5.5 0 0 0 8 9.744V5.257a.5.5 0 0 0-.15-.357z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user