mirror of
https://github.com/vector-im/element-web.git
synced 2026-05-04 19:56:45 +02:00
Update notification icons using Compound icons (#31671)
* Update notification icons using Compound icons For https://element-io.atlassian.net/browse/PSB-968 This removes icons in places where we only have on/off variants rather than the previous 4 Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update screenshot 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
6e9d168dd2
commit
d060b77e8f
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 15 KiB |
@ -17,21 +17,8 @@ Please see LICENSE files in the repository root for full details.
|
||||
font-weight: var(--cpd-font-weight-semibold);
|
||||
margin-top: 16px;
|
||||
position: relative;
|
||||
padding-left: 8px;
|
||||
align-items: center;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
left: 0;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
background-color: $secondary-content;
|
||||
}
|
||||
|
||||
input + div {
|
||||
margin-top: 8px;
|
||||
}
|
||||
@ -44,22 +31,6 @@ Please see LICENSE files in the repository root for full details.
|
||||
margin-right: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_NotificationSettingsTab_defaultEntry::before {
|
||||
mask-image: url("$(res)/img/element-icons/notifications.svg");
|
||||
}
|
||||
|
||||
.mx_NotificationSettingsTab_allMessagesEntry::before {
|
||||
mask-image: url("$(res)/img/element-icons/roomlist/notifications-default.svg");
|
||||
}
|
||||
|
||||
.mx_NotificationSettingsTab_mentionsKeywordsEntry::before {
|
||||
mask-image: url("$(res)/img/element-icons/roomlist/notifications-dm.svg");
|
||||
}
|
||||
|
||||
.mx_NotificationSettingsTab_noneEntry::before {
|
||||
mask-image: url("$(res)/img/element-icons/roomlist/notifications-off.svg");
|
||||
}
|
||||
}
|
||||
|
||||
input[type="file"].mx_NotificationSound_soundUpload {
|
||||
|
||||
@ -1,5 +0,0 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.2375 19.5C10.1625 19.7 10.125 19.9 10.125 20.125C10.125 21.1625 10.9625 22 12 22C13.0375 22 13.875 21.1625 13.875 20.125C13.875 19.9 13.825 19.7 13.7625 19.5H10.2375Z" fill="currentColor"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.6125 16.0625C18.8625 15.625 18.25 14.8875 18.25 13.75V9.5C18.25 6.05 15.3 3.25 12 3.25C8.7 3.25 5.75 6.05 5.75 9.5V13.75C5.75 14.875 5.125 15.625 4.3875 16.0625C3.8875 16.3625 3.25 16.775 3.25 17.275C3.25 17.85 3.6125 18.2375 4.3625 18.2375H12H19.6375C20.3875 18.2375 20.75 17.8375 20.75 17.275C20.75 16.775 20.125 16.3625 19.6125 16.0625Z" fill="currentColor"/>
|
||||
<path d="M12 4.5C12.6904 4.5 13.25 3.94036 13.25 3.25C13.25 2.55964 12.6904 2 12 2C11.3096 2 10.75 2.55964 10.75 3.25C10.75 3.94036 11.3096 4.5 12 4.5Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 937 B |
@ -1,5 +0,0 @@
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.59 15C7.53 15.16 7.5 15.32 7.5 15.5C7.5 16.33 8.17 17 9 17C9.83 17 10.5 16.33 10.5 15.5C10.5 15.32 10.46 15.16 10.41 15H7.59Z" fill="currentColor"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M14 10.4C14 11.31 14.49 11.9 15.09 12.25C15.5 12.49 16 12.82 16 13.22C16 13.67 15.71 13.99 15.11 13.99H9H2.89C2.29 13.99 2 13.68 2 13.22C2 12.82 2.51 12.49 2.91 12.25C3.5 11.9 4 11.3 4 10.4V7C4 4.24 6.36 2 9 2C11.64 2 14 4.24 14 7V10.4ZM11.2402 6.1226C11.4223 5.9515 11.7099 5.96101 11.8824 6.14162C12.0358 6.31272 12.0358 6.56938 11.9016 6.74048L8.92075 10.685L8.892 10.723C8.62358 11.0462 8.13469 11.0938 7.80875 10.8276C7.7798 10.8132 7.75632 10.7881 7.73417 10.7643C7.72698 10.7566 7.71994 10.749 7.71289 10.7421L6.13071 8.99336C5.93899 8.76522 5.95816 8.42302 6.18823 8.2329C6.37995 8.0618 6.65795 8.0618 6.85926 8.19488L8.21138 9.012L11.2402 6.1226Z" fill="currentColor"/>
|
||||
<path d="M9 3C9.55228 3 10 2.55228 10 2C10 1.44772 9.55228 1 9 1C8.44772 1 8 1.44772 8 2C8 2.55228 8.44772 3 9 3Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.1 KiB |
@ -1,3 +0,0 @@
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M13 7C14.6569 7 16 5.65685 16 4C16 2.34315 14.6569 1 13 1C11.3431 1 10 2.34315 10 4C10 5.65685 11.3431 7 13 7ZM8.9677 2C6.34078 2.01817 4 4.25115 4 6.99989V10.3999C4 11.2999 3.5 11.8999 2.91 12.2499C2.51 12.4899 2 12.8199 2 13.2199C2 13.6799 2.29 13.9899 2.89 13.9899H9H15.11C15.71 13.9899 16 13.6699 16 13.2199C16 12.8199 15.5 12.4899 15.09 12.2499C14.49 11.8999 14 11.3099 14 10.3999V8.38838C13.6784 8.46136 13.3437 8.49989 13 8.49989C10.5147 8.49989 8.5 6.48517 8.5 3.99989C8.5 3.28151 8.66833 2.60245 8.9677 2ZM7.59 15C7.53 15.16 7.5 15.32 7.5 15.5C7.5 16.33 8.17 17 9 17C9.83 17 10.5 16.33 10.5 15.5C10.5 15.32 10.46 15.16 10.41 15H7.59Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 818 B |
@ -1,7 +0,0 @@
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.59 15C7.53 15.16 7.5 15.32 7.5 15.5C7.5 16.33 8.17 17 9 17C9.83 17 10.5 16.33 10.5 15.5C10.5 15.32 10.46 15.16 10.41 15H7.59Z" fill="currentColor"/>
|
||||
<path d="M9 3C9.55228 3 10 2.55228 10 2C10 1.44772 9.55228 1 9 1C8.44772 1 8 1.44772 8 2C8 2.55228 8.44772 3 9 3Z" fill="currentColor"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.08 10.9698C14.03 10.7998 14 10.6098 14 10.4098V7.00977C14 4.24977 11.64 2.00977 8.99998 2.00977C7.93998 2.00977 6.92998 2.37977 6.09998 2.98977L14.08 10.9698Z" fill="currentColor"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.38 5.14978C4.14 5.72978 4 6.34978 4 6.99978V10.3998C4 11.2998 3.5 11.8998 2.91 12.2498C2.51 12.4898 2 12.8198 2 13.2198C2 13.6798 2.29 13.9898 2.89 13.9898H9H13.22L4.38 5.14978Z" fill="currentColor"/>
|
||||
<path d="M1 1L17 17" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.0 KiB |
@ -15,6 +15,7 @@ import {
|
||||
QrCodeIcon,
|
||||
SettingsSolidIcon,
|
||||
LeaveIcon,
|
||||
NotificationsSolidIcon,
|
||||
} from "@vector-im/compound-design-tokens/assets/web/icons";
|
||||
|
||||
import { MatrixClientPeg } from "../../MatrixClientPeg";
|
||||
@ -51,7 +52,6 @@ import { type ViewHomePagePayload } from "../../dispatcher/payloads/ViewHomePage
|
||||
import { SDKContext } from "../../contexts/SDKContext";
|
||||
import { shouldShowFeedback } from "../../utils/Feedback";
|
||||
import { Icon as DarkLightModeSvg } from "../../../res/img/element-icons/roomlist/dark-light-mode.svg";
|
||||
import { Icon as NotificationsIcon } from "../../../res/img/element-icons/notifications.svg";
|
||||
|
||||
interface IProps {
|
||||
isPanelCollapsed: boolean;
|
||||
@ -337,7 +337,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
|
||||
{homeButton}
|
||||
{linkNewDeviceButton}
|
||||
<IconizedContextMenuOption
|
||||
icon={<NotificationsIcon />}
|
||||
icon={<NotificationsSolidIcon />}
|
||||
label={_t("notifications|enable_prompt_toast_title")}
|
||||
onClick={(e) => this.onSettingsOpen(e, UserTab.Notifications)}
|
||||
/>
|
||||
|
||||
@ -20,10 +20,6 @@ import IconizedContextMenu, {
|
||||
IconizedContextMenuRadio,
|
||||
} from "../context_menus/IconizedContextMenu";
|
||||
import { type ButtonEvent } from "../elements/AccessibleButton";
|
||||
import { Icon as NotificationsIcon } from "../../../../res/img/element-icons/notifications.svg";
|
||||
import { Icon as NotificationsDefaultIcon } from "../../../../res/img/element-icons/roomlist/notifications-default.svg";
|
||||
import { Icon as NotificationsDmIcon } from "../../../../res/img/element-icons/roomlist/notifications-dm.svg";
|
||||
import { Icon as NotificationsOffIcon } from "../../../../res/img/element-icons/roomlist/notifications-off.svg";
|
||||
|
||||
interface IProps extends IContextMenuProps {
|
||||
room: Room;
|
||||
@ -50,7 +46,6 @@ export const RoomNotificationContextMenu: React.FC<IProps> = ({ room, onFinished
|
||||
<IconizedContextMenuRadio
|
||||
label={_t("room|context_menu|notifications_default")}
|
||||
active={notificationState === RoomNotifState.AllMessages}
|
||||
icon={<NotificationsIcon />}
|
||||
onClick={wrapHandler(() => setNotificationState(RoomNotifState.AllMessages))}
|
||||
/>
|
||||
);
|
||||
@ -59,7 +54,6 @@ export const RoomNotificationContextMenu: React.FC<IProps> = ({ room, onFinished
|
||||
<IconizedContextMenuRadio
|
||||
label={_t("notifications|all_messages")}
|
||||
active={notificationState === RoomNotifState.AllMessagesLoud}
|
||||
icon={<NotificationsDefaultIcon />}
|
||||
onClick={wrapHandler(() => setNotificationState(RoomNotifState.AllMessagesLoud))}
|
||||
/>
|
||||
);
|
||||
@ -68,7 +62,6 @@ export const RoomNotificationContextMenu: React.FC<IProps> = ({ room, onFinished
|
||||
<IconizedContextMenuRadio
|
||||
label={_t("notifications|mentions_keywords")}
|
||||
active={notificationState === RoomNotifState.MentionsOnly}
|
||||
icon={<NotificationsDmIcon />}
|
||||
onClick={wrapHandler(() => setNotificationState(RoomNotifState.MentionsOnly))}
|
||||
/>
|
||||
);
|
||||
@ -77,7 +70,6 @@ export const RoomNotificationContextMenu: React.FC<IProps> = ({ room, onFinished
|
||||
<IconizedContextMenuRadio
|
||||
label={_t("room|context_menu|notifications_mute")}
|
||||
active={notificationState === RoomNotifState.Mute}
|
||||
icon={<NotificationsOffIcon />}
|
||||
onClick={wrapHandler(() => setNotificationState(RoomNotifState.Mute))}
|
||||
/>
|
||||
);
|
||||
|
||||
@ -7,8 +7,12 @@ Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
import { type Room } from "matrix-js-sdk/src/matrix";
|
||||
import React, { type JSX, Fragment, useState, type ReactNode } from "react";
|
||||
import { OverflowHorizontalIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
|
||||
import React, { Fragment, type JSX, type ReactNode, useState } from "react";
|
||||
import {
|
||||
NotificationsOffSolidIcon,
|
||||
OverflowHorizontalIcon,
|
||||
NotificationsSolidIcon,
|
||||
} from "@vector-im/compound-design-tokens/assets/web/icons";
|
||||
|
||||
import { ContextMenuTooltipButton } from "../../../../accessibility/context_menu/ContextMenuTooltipButton";
|
||||
import { useNotificationState } from "../../../../hooks/useRoomNotificationState";
|
||||
@ -21,23 +25,18 @@ import { type ButtonEvent } from "../../elements/AccessibleButton";
|
||||
import { contextMenuBelow } from "../../rooms/RoomTile";
|
||||
import { shouldShowComponent } from "../../../../customisations/helpers/UIComponents";
|
||||
import { UIComponent } from "../../../../settings/UIFeature";
|
||||
import { Icon as NotificationsIcon } from "../../../../../res/img/element-icons/notifications.svg";
|
||||
import { Icon as NotificationsDefaultIcon } from "../../../../../res/img/element-icons/roomlist/notifications-default.svg";
|
||||
import { Icon as NotificationsDmIcon } from "../../../../../res/img/element-icons/roomlist/notifications-dm.svg";
|
||||
import { Icon as NotificationsOffIcon } from "../../../../../res/img/element-icons/roomlist/notifications-off.svg";
|
||||
|
||||
interface Props {
|
||||
room: Room;
|
||||
}
|
||||
|
||||
export function getNotificationIcon(state: RoomNotifState): ReactNode {
|
||||
const icons: Record<RoomNotifState, JSX.Element> = {
|
||||
[RoomNotifState.AllMessages]: <NotificationsIcon />,
|
||||
[RoomNotifState.AllMessagesLoud]: <NotificationsDefaultIcon />,
|
||||
[RoomNotifState.MentionsOnly]: <NotificationsDmIcon />,
|
||||
[RoomNotifState.Mute]: <NotificationsOffIcon />,
|
||||
};
|
||||
return icons[state];
|
||||
switch (state) {
|
||||
case RoomNotifState.Mute:
|
||||
return <NotificationsOffSolidIcon />;
|
||||
default:
|
||||
return <NotificationsSolidIcon />;
|
||||
}
|
||||
}
|
||||
|
||||
export function RoomResultContextMenus({ room }: Props): JSX.Element {
|
||||
|
||||
@ -6,13 +6,15 @@
|
||||
*/
|
||||
|
||||
import React, { type HTMLProps, type JSX } from "react";
|
||||
import MentionIcon from "@vector-im/compound-design-tokens/assets/web/icons/mention";
|
||||
import ErrorIcon from "@vector-im/compound-design-tokens/assets/web/icons/error-solid";
|
||||
import NotificationOffIcon from "@vector-im/compound-design-tokens/assets/web/icons/notifications-off-solid";
|
||||
import VideoCallIcon from "@vector-im/compound-design-tokens/assets/web/icons/video-call-solid";
|
||||
import EmailIcon from "@vector-im/compound-design-tokens/assets/web/icons/email-solid";
|
||||
import {
|
||||
MentionIcon,
|
||||
ErrorIcon,
|
||||
NotificationsOffSolidIcon,
|
||||
VideoCallSolidIcon,
|
||||
EmailSolidIcon,
|
||||
VoiceCallSolidIcon,
|
||||
} from "@vector-im/compound-design-tokens/assets/web/icons";
|
||||
import { UnreadCounter, Unread } from "@vector-im/compound-web";
|
||||
import VoiceCallIcon from "@vector-im/compound-design-tokens/assets/web/icons/voice-call-solid";
|
||||
import { CallType } from "matrix-js-sdk/src/webrtc/call";
|
||||
import { Flex } from "@element-hq/web-shared-components";
|
||||
|
||||
@ -72,16 +74,16 @@ export function NotificationDecoration({
|
||||
>
|
||||
{isUnsentMessage && <ErrorIcon width="20px" height="20px" fill="var(--cpd-color-icon-critical-primary)" />}
|
||||
{callType === CallType.Video && (
|
||||
<VideoCallIcon width="20px" height="20px" fill="var(--cpd-color-icon-accent-primary)" />
|
||||
<VideoCallSolidIcon width="20px" height="20px" fill="var(--cpd-color-icon-accent-primary)" />
|
||||
)}
|
||||
{callType === CallType.Voice && (
|
||||
<VoiceCallIcon width="20px" height="20px" fill="var(--cpd-color-icon-accent-primary)" />
|
||||
<VoiceCallSolidIcon width="20px" height="20px" fill="var(--cpd-color-icon-accent-primary)" />
|
||||
)}
|
||||
{invited && <EmailIcon width="20px" height="20px" fill="var(--cpd-color-icon-accent-primary)" />}
|
||||
{invited && <EmailSolidIcon width="20px" height="20px" fill="var(--cpd-color-icon-accent-primary)" />}
|
||||
{isMention && <MentionIcon width="20px" height="20px" fill="var(--cpd-color-icon-accent-primary)" />}
|
||||
{(isMention || isNotification) && <UnreadCounter count={count || null} />}
|
||||
{isActivityNotification && <Unread />}
|
||||
{muted && <NotificationOffIcon width="20px" height="20px" fill="var(--cpd-color-icon-tertiary)" />}
|
||||
{muted && <NotificationsOffSolidIcon width="20px" height="20px" fill="var(--cpd-color-icon-tertiary)" />}
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
||||
@ -7,17 +7,19 @@
|
||||
|
||||
import React, { type JSX, useState } from "react";
|
||||
import { IconButton, Menu, MenuItem, Separator, ToggleMenuItem } from "@vector-im/compound-web";
|
||||
import MarkAsReadIcon from "@vector-im/compound-design-tokens/assets/web/icons/mark-as-read";
|
||||
import MarkAsUnreadIcon from "@vector-im/compound-design-tokens/assets/web/icons/mark-as-unread";
|
||||
import FavouriteIcon from "@vector-im/compound-design-tokens/assets/web/icons/favourite";
|
||||
import ArrowDownIcon from "@vector-im/compound-design-tokens/assets/web/icons/arrow-down";
|
||||
import UserAddIcon from "@vector-im/compound-design-tokens/assets/web/icons/user-add";
|
||||
import LinkIcon from "@vector-im/compound-design-tokens/assets/web/icons/link";
|
||||
import LeaveIcon from "@vector-im/compound-design-tokens/assets/web/icons/leave";
|
||||
import OverflowIcon from "@vector-im/compound-design-tokens/assets/web/icons/overflow-horizontal";
|
||||
import NotificationIcon from "@vector-im/compound-design-tokens/assets/web/icons/notifications-solid";
|
||||
import NotificationOffIcon from "@vector-im/compound-design-tokens/assets/web/icons/notifications-off-solid";
|
||||
import CheckIcon from "@vector-im/compound-design-tokens/assets/web/icons/check";
|
||||
import {
|
||||
MarkAsReadIcon,
|
||||
MarkAsUnreadIcon,
|
||||
FavouriteIcon,
|
||||
ArrowDownIcon,
|
||||
UserAddIcon,
|
||||
LinkIcon,
|
||||
LeaveIcon,
|
||||
OverflowHorizontalIcon,
|
||||
NotificationsSolidIcon,
|
||||
NotificationsOffSolidIcon,
|
||||
CheckIcon,
|
||||
} from "@vector-im/compound-design-tokens/assets/web/icons";
|
||||
import { type Room } from "matrix-js-sdk/src/matrix";
|
||||
import { Flex } from "@element-hq/web-shared-components";
|
||||
import classNames from "classnames";
|
||||
@ -81,7 +83,7 @@ function MoreOptionsMenu({ vm }: MoreOptionsMenuProps): JSX.Element {
|
||||
aria-label={_t("room_list|room|more_options")}
|
||||
size="24px"
|
||||
>
|
||||
<OverflowIcon />
|
||||
<OverflowHorizontalIcon />
|
||||
</IconButton>
|
||||
}
|
||||
>
|
||||
@ -190,7 +192,7 @@ function NotificationMenu({ vm }: NotificationMenuProps): JSX.Element {
|
||||
tooltip={_t("room_list|notification_options")}
|
||||
aria-label={_t("room_list|notification_options")}
|
||||
>
|
||||
{vm.isNotificationMute ? <NotificationOffIcon /> : <NotificationIcon />}
|
||||
{vm.isNotificationMute ? <NotificationsOffSolidIcon /> : <NotificationsSolidIcon />}
|
||||
</IconButton>
|
||||
}
|
||||
>
|
||||
|
||||
@ -170,7 +170,6 @@ export default class NotificationsSettingsTab extends React.Component<IProps, IS
|
||||
definitions={[
|
||||
{
|
||||
value: RoomNotifState.AllMessages,
|
||||
className: "mx_NotificationSettingsTab_defaultEntry",
|
||||
label: (
|
||||
<>
|
||||
{_t("notifications|default")}
|
||||
@ -195,7 +194,6 @@ export default class NotificationsSettingsTab extends React.Component<IProps, IS
|
||||
},
|
||||
{
|
||||
value: RoomNotifState.AllMessagesLoud,
|
||||
className: "mx_NotificationSettingsTab_allMessagesEntry",
|
||||
label: (
|
||||
<>
|
||||
{_t("notifications|all_messages")}
|
||||
@ -207,7 +205,6 @@ export default class NotificationsSettingsTab extends React.Component<IProps, IS
|
||||
},
|
||||
{
|
||||
value: RoomNotifState.MentionsOnly,
|
||||
className: "mx_NotificationSettingsTab_mentionsKeywordsEntry",
|
||||
label: (
|
||||
<>
|
||||
{_t("notifications|mentions_and_keywords")}
|
||||
@ -232,7 +229,6 @@ export default class NotificationsSettingsTab extends React.Component<IProps, IS
|
||||
},
|
||||
{
|
||||
value: RoomNotifState.Mute,
|
||||
className: "mx_NotificationSettingsTab_noneEntry",
|
||||
label: (
|
||||
<>
|
||||
{_t("common|off")}
|
||||
|
||||
@ -157,7 +157,7 @@ exports[`<NotificationDecoration /> should render the unset message decoration 1
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 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 22"
|
||||
d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 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 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4 6.325 6.325 4 12t2.325 5.675T12 20"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
@ -81,7 +81,19 @@ exports[`RoomTile when message previews are enabled and there is a message in a
|
||||
class="mx_AccessibleButton mx_RoomTile_notificationsButton"
|
||||
role="button"
|
||||
tabindex="-1"
|
||||
/>
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
@ -175,7 +187,19 @@ exports[`RoomTile when message previews are enabled and there is a message in th
|
||||
class="mx_AccessibleButton mx_RoomTile_notificationsButton"
|
||||
role="button"
|
||||
tabindex="-1"
|
||||
/>
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
@ -250,7 +274,19 @@ exports[`RoomTile when message previews are enabled should render a room without
|
||||
class="mx_AccessibleButton mx_RoomTile_notificationsButton"
|
||||
role="button"
|
||||
tabindex="-1"
|
||||
/>
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
@ -324,7 +360,19 @@ exports[`RoomTile when message previews are not enabled should render the room 1
|
||||
class="mx_AccessibleButton mx_RoomTile_notificationsButton"
|
||||
role="button"
|
||||
tabindex="-1"
|
||||
/>
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
import React from "react";
|
||||
import { render, type RenderResult, screen } from "jest-matrix-react";
|
||||
import { render, type RenderResult, screen, within } from "jest-matrix-react";
|
||||
import { type MatrixClient } from "matrix-js-sdk/src/matrix";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
|
||||
@ -19,7 +19,7 @@ import { type RoomEchoChamber } from "../../../../../../../src/stores/local-echo
|
||||
import SettingsStore from "../../../../../../../src/settings/SettingsStore";
|
||||
import { SettingLevel } from "../../../../../../../src/settings/SettingLevel";
|
||||
|
||||
describe("NotificatinSettingsTab", () => {
|
||||
describe("NotificationSettingsTab", () => {
|
||||
const roomId = "!room:example.com";
|
||||
let cli: MatrixClient;
|
||||
let roomProps: RoomEchoChamber;
|
||||
@ -45,9 +45,7 @@ describe("NotificatinSettingsTab", () => {
|
||||
const tab = renderTab();
|
||||
|
||||
// settings link of mentions_only volume
|
||||
const settingsLink = tab.container.querySelector(
|
||||
"label.mx_NotificationSettingsTab_mentionsKeywordsEntry div.mx_AccessibleButton",
|
||||
);
|
||||
const settingsLink = within(tab.getByText("@mentions & keywords")).getByRole("button", { name: "settings" });
|
||||
if (!settingsLink) throw new Error("settings link does not exist.");
|
||||
|
||||
await userEvent.click(settingsLink);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user