mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web.git synced 2025-12-05 01:10:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

Tweak rendering of icons for a11y (#31358)

Browse Source 
* Tweak rendering of icons in legacy video feed

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Remove unused classes

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Tweak rendering of icons in face pile

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Tweak rendering of icons in overflow tile

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Tweak rendering of icons in room search view

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Tweak rendering of icons in top unread messages bar

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Tweak rendering of icons in space basic settings

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Tweak rendering of icons in thread summary tile

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Tweak rendering of icons in legacy room tile

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Tweak rendering of icons in incoming call toast

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Tweak rendering of icons in labs jump to date

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Tweak rendering of icons in field validation

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Tweak rendering of icons in mini avatar uploader

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Tweak rendering of icons in info tooltip

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Tweak rendering of icons in network dropdown

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski
2025-12-04 13:04:13 +00:00
committed by GitHub
parent 52d082aed6
commit d1f45da51a
33 changed files with 227 additions and 408 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
res/css/structures/_RoomView.pcss
View File

@@ -61,18 +61,13 @@ Please see LICENSE files in the repository root for full details.
background-repeat: no-repeat;
position: relative;
&::before {
background-color: $info-plinth-fg-color;
mask: url("@vector-im/compound-design-tokens/icons/search.svg");
mask-repeat: no-repeat;
mask-position: center;
mask-size: 50px;
content: "";
svg {
color: $info-plinth-fg-color;
width: 50px;
height: 50px;
position: absolute;
top: 286px;
left: 0;
right: 0;
height: 50px;
left: calc(50% - 25px);
}
}

12
res/css/structures/_SpaceHierarchy.pcss
View File

@@ -169,18 +169,6 @@ Please see LICENSE files in the repository root for full details.
color: $tertiary-content;
font-size: $font-12px;
line-height: $font-15px;
.mx_InfoTooltip_icon {
margin-right: 4px;
position: relative;
vertical-align: text-top;
&::before {
position: absolute;
top: 0;
left: 0;
}
}
}
.mx_InfoTooltip {

20
res/css/views/directory/_NetworkDropdown.pcss
View File

@@ -49,8 +49,9 @@ Please see LICENSE files in the repository root for full details.
.mx_NetworkDropdown_removeServer {
position: relative;
display: inline-block;
width: 16px;
height: 16px;
width: 14px;
height: 14px;
padding: 1px;
background: $quinary-content;
border-radius: 8px;
text-align: center;
@@ -58,19 +59,10 @@ Please see LICENSE files in the repository root for full details.
color: $secondary-content;
margin-left: auto;
&::before {
background-color: $secondary-content;
content: "";
mask-repeat: no-repeat;
mask-position: center;
mask-size: 14px;
width: inherit;
svg {
color: $secondary-content;
height: inherit;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
width: inherit;
}
}

19
res/css/views/elements/_FacePile.pcss
View File

@@ -13,23 +13,12 @@ Please see LICENSE files in the repository root for full details.
border-radius: 100%;
width: 28px;
height: 28px;
box-sizing: border-box;
padding: var(--cpd-space-1x);
background-color: $panels;
color: $tertiary-content;
display: inline-block;
&::before {
content: "";
z-index: 1;
position: absolute;
top: 0;
left: 0;
height: inherit;
width: inherit;
background: $tertiary-content;
mask-position: center;
mask-size: 20px;
mask-repeat: no-repeat;
mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
}
z-index: 1;
}
.mx_FacePile_summary {

21
res/css/views/elements/_InfoTooltip.pcss
View File

@@ -10,24 +10,15 @@ Please see LICENSE files in the repository root for full details.
width: 16px;
height: 16px;
display: inline-block;
svg {
height: inherit;
width: inherit;
color: $muted-fg-color;
}
}
.mx_InfoTooltip_icon::before {
display: inline-block;
background-color: $muted-fg-color;
mask-repeat: no-repeat;
mask-size: 16px;
width: 16px;
height: 16px;
mask-position: center;
content: "";
vertical-align: middle;
}
.mx_InfoTooltip_icon_info::before {
mask-image: url("@vector-im/compound-design-tokens/icons/info.svg");
}
.mx_InfoTooltip_icon_warning::before {
mask-image: url("@vector-im/compound-design-tokens/icons/error-solid.svg");
}

18
res/css/views/elements/_MiniAvatarUploader.pcss
View File

@@ -13,28 +13,22 @@ Please see LICENSE files in the repository root for full details.
.mx_MiniAvatarUploader_indicator {
position: absolute;
height: 26px;
width: 26px;
height: 16px;
width: 16px;
padding: 5px;
right: -6px;
bottom: -6px;
background-color: $background;
border-radius: 50%;
z-index: 1;
line-height: 0;
.mx_MiniAvatarUploader_cameraIcon {
height: 100%;
width: 100%;
background-color: $secondary-content;
mask-position: center;
mask-repeat: no-repeat;
mask-image: url("@vector-im/compound-design-tokens/icons/take-photo-solid.svg");
mask-size: 16px;
z-index: 2;
height: inherit;
width: inherit;
color: $secondary-content;
}
}
}

24
res/css/views/elements/_Validation.pcss
View File

@@ -11,7 +11,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_Validation_details {
padding-left: 20px;
padding-left: 0;
margin: 0;
}
@@ -20,7 +20,6 @@ Please see LICENSE files in the repository root for full details.
}
.mx_Validation_detail {
position: relative;
font-weight: normal;
list-style: none;
margin-bottom: 0.5em;
@@ -29,33 +28,18 @@ Please see LICENSE files in the repository root for full details.
margin-bottom: 0;
}
&::before {
content: "";
position: absolute;
svg {
width: 14px;
height: 14px;
top: 0;
left: -18px;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
margin-right: var(--cpd-space-1x);
vertical-align: text-bottom;
}
&.mx_Validation_valid {
color: $accent;
&::before {
mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
background-color: $accent;
}
}
&.mx_Validation_invalid {
color: $alert;
&::before {
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
background-color: $alert;
}
}
}

6
res/css/views/messages/_DateSeparator.pcss
View File

@@ -27,9 +27,5 @@ Please see LICENSE files in the repository root for full details.
align-self: center;
width: 16px;
height: 16px;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
background-color: var(--cpd-color-icon-secondary);
color: var(--cpd-color-icon-secondary);
}

21
res/css/views/rooms/_OverflowTile.pcss
View File

@@ -26,19 +26,20 @@ Please see LICENSE files in the repository root for full details.
.mx_OverflowTileView:hover {
padding-right: 30px;
position: relative; /* to keep the chevron aligned */
.mx_OverflowTileView_chevron {
display: inline;
}
}
.mx_OverflowTileView:hover::before {
content: "";
.mx_OverflowTileView_chevron {
position: absolute;
top: calc(50% - 8px); /* center */
right: -8px;
mask: url("@vector-im/compound-design-tokens/icons/chevron-right.svg");
mask-repeat: no-repeat;
mask-position: center;
width: 16px;
height: 16px;
background-color: $header-panel-text-primary-color;
top: calc(50% - 12px); /* center */
right: 0;
width: 24px;
height: 24px;
color: $header-panel-text-primary-color;
display: none;
}
.mx_OverflowTileView_icon {

29
res/css/views/rooms/_RoomTile.pcss
View File

@@ -113,29 +113,32 @@ Please see LICENSE files in the repository root for full details.
position: relative;
display: none;
&::before {
top: 2px;
left: 2px;
content: "";
svg {
width: 16px;
height: 16px;
position: absolute;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: var(--cpd-color-icon-primary);
padding: var(--cpd-space-0-5x);
color: var(--cpd-color-icon-primary);
}
}
.mx_RoomTile_notificationsButton::before {
top: 2px;
left: 2px;
content: "";
width: 16px;
height: 16px;
position: absolute;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: var(--cpd-color-icon-primary);
}
/* If the room has an overriden notification setting then we always show the notifications menu button */
.mx_RoomTile_notificationsButton.mx_RoomTile_notificationsButton_show {
display: block;
}
.mx_RoomTile_menuButton::before {
mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
}
&:not(.mx_RoomTile_minimized, .mx_RoomTile_sticky) {
&:hover,
&:focus-within,

9
res/css/views/rooms/_ThreadSummary.pcss
View File

@@ -49,19 +49,14 @@ Please see LICENSE files in the repository root for full details.
transform: translateX(60px);
transition: all 0.1s ease-in-out;
&::before {
content: "";
svg {
position: absolute;
top: 50%;
right: var(--cpd-space-1x);
transform: translateY(-50%);
width: 24px;
height: 24px;
mask-image: url("@vector-im/compound-design-tokens/icons/chevron-right.svg");
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background-color: $secondary-content;
color: $secondary-content;
}
}

35
res/css/views/rooms/_TopUnreadMessagesBar.pcss
View File

@@ -29,23 +29,19 @@ Please see LICENSE files in the repository root for full details.
.mx_TopUnreadMessagesBar_scrollUp {
height: 38px;
width: 38px;
border-radius: 19px;
box-sizing: border-box;
background: $background;
border: 1.3px solid var(--cpd-color-icon-tertiary);
cursor: pointer;
}
.mx_TopUnreadMessagesBar_scrollUp::before {
content: "";
position: absolute;
width: 36px;
height: 36px;
mask-image: url("@vector-im/compound-design-tokens/icons/chevron-up.svg");
mask-repeat: no-repeat;
mask-size: 24px;
mask-position: center;
background: var(--cpd-color-icon-tertiary);
svg {
width: 24px;
height: 24px;
padding: 6px;
color: var(--cpd-color-icon-tertiary);
}
}
.mx_TopUnreadMessagesBar_markAsRead {
@@ -56,16 +52,11 @@ Please see LICENSE files in the repository root for full details.
border: 1.3px solid var(--cpd-color-icon-tertiary);
border-radius: 10px;
margin: 5px auto;
}
.mx_TopUnreadMessagesBar_markAsRead::before {
content: "";
position: absolute;
width: 18px;
height: 18px;
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
mask-repeat: no-repeat;
mask-size: 16px;
mask-position: center;
background: var(--cpd-color-icon-tertiary);
svg {
width: 16px;
height: 16px;
padding: 1px;
color: var(--cpd-color-icon-tertiary);
}
}

29
res/css/views/spaces/_SpaceBasicSettings.pcss
View File

@@ -16,36 +16,17 @@ Please see LICENSE files in the repository root for full details.
margin-top: 24px;
.mx_SpaceBasicSettings_avatar {
position: relative;
height: 80px;
width: 80px;
background-color: $tertiary-content;
border-radius: 16px;
}
img.mx_SpaceBasicSettings_avatar {
width: 80px;
height: 80px;
object-fit: cover;
border-radius: 16px;
}
/* only show it when the button is a div and not an img (has avatar) */
div.mx_SpaceBasicSettings_avatar {
cursor: pointer;
&::before {
content: "";
position: absolute;
height: 80px;
width: 80px;
top: 0;
left: 0;
background-color: #ffffff; /* white icon fill */
mask-repeat: no-repeat;
mask-position: center;
mask-size: 20px;
mask-image: url("@vector-im/compound-design-tokens/icons/take-photo-solid.svg");
svg {
width: 20px;
height: 20px;
padding: 30px;
color: #ffffff; /* white icon fill */
}
}

11
res/css/views/toasts/_IncomingCallToast.pcss
View File

@@ -62,17 +62,10 @@ Please see LICENSE files in the repository root for full details.
height: $closeButtonSize;
width: $closeButtonSize;
&::before {
content: "";
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
svg {
height: inherit;
width: inherit;
background-color: $secondary-content;
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center;
color: $secondary-content;
}
}
.mx_IncomingCallToast_toggleWithLabel {

164
res/css/views/voip/_CallView.pcss
View File

@@ -22,168 +22,4 @@ Please see LICENSE files in the repository root for full details.
border-radius: inherit;
background-color: $call-background;
}
/* While the lobby is shown, the widget needs to stay loaded but hidden in the background */
.mx_CallView_lobby ~ .mx_AppTile {
display: none;
}
.mx_CallView_lobby {
min-height: 0;
flex-grow: 1;
padding: $spacing-12;
color: $call-primary-content;
background-color: $call-background;
--facepile-background: $call-background;
border-radius: 8px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: $spacing-32;
.mx_FacePile {
width: fit-content;
margin: $spacing-8 auto 0;
}
.mx_CallView_preview {
position: relative;
width: 100%;
max-width: 800px;
aspect-ratio: 1.5;
background-color: $call-system;
border-radius: 20px;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.mx_BaseAvatar {
margin: $spacing-20;
/* Override the explicit dimensions on the element so that this gets sized responsively */
width: unset !important;
height: unset !important;
min-width: 0;
min-height: 0;
flex: 0 1 200px;
}
video {
position: absolute;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transform: scaleX(-1); /* flip the image */
background-color: black;
}
.mx_CallView_controls {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: $info-plinth-fg-color;
display: flex;
justify-content: center;
gap: $spacing-24;
.mx_CallView_deviceButtonWrapper {
position: relative;
margin: 6px 0 10px;
.mx_CallView_deviceButton {
$size: 50px;
width: $size;
height: $size;
background-color: $call-system;
border-radius: calc($size / 2);
&::before {
content: "";
display: inline-block;
mask-repeat: no-repeat;
mask-size: 20px;
mask-position: center;
background-color: $call-primary-content;
height: 100%;
width: 100%;
}
&.mx_CallView_deviceButton_audio::before {
mask-image: url("@vector-im/compound-design-tokens/icons/mic-on-solid.svg");
mask-size: 14px;
}
&.mx_CallView_deviceButton_video::before {
mask-image: url("@vector-im/compound-design-tokens/icons/video-call-solid.svg");
}
}
.mx_CallView_deviceListButton {
$size: 15px;
position: absolute;
bottom: 0;
right: -2.5px;
width: $size;
height: $size;
background-color: $call-system;
border-radius: calc($size / 2);
&::before {
content: "";
display: inline-block;
mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
mask-size: 20px;
mask-position: center;
background-color: $call-primary-content;
height: 100%;
width: 100%;
}
}
&.mx_CallView_deviceButtonWrapper_muted {
.mx_CallView_deviceButton,
.mx_CallView_deviceListButton {
background-color: $call-primary-content;
&::before {
background-color: $call-system;
}
}
.mx_CallView_deviceButton {
&.mx_CallView_deviceButton_audio::before {
mask-image: url("@vector-im/compound-design-tokens/icons/mic-off-solid.svg");
mask-size: 18px;
}
&.mx_CallView_deviceButton_video::before {
mask-image: url("@vector-im/compound-design-tokens/icons/video-call-off-solid.svg");
}
}
}
}
}
}
.mx_CallView_connectButton {
padding-left: 50px;
padding-right: 50px;
}
}
}

27
res/css/views/voip/_VideoFeed.pcss
View File

@@ -49,9 +49,7 @@ Please see LICENSE files in the repository root for full details.
position: absolute;
left: 6px;
bottom: 6px;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
width: 24px;
height: 24px;
@@ -59,24 +57,11 @@ Please see LICENSE files in the repository root for full details.
background-color: rgb(0, 0, 0, 0.5); /* Same on both themes */
border-radius: 100%;
&::before {
position: absolute;
content: "";
width: 17px;
height: 17px;
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center;
background-color: white; /* Same on both themes */
border-radius: 7px;
}
&.mx_VideoFeed_mic_muted::before {
mask-image: url("@vector-im/compound-design-tokens/icons/mic-off-solid.svg");
}
&.mx_VideoFeed_mic_unmuted::before {
mask-image: url("@vector-im/compound-design-tokens/icons/mic-on-solid.svg");
svg {
width: 16px;
height: 16px;
padding: 4px;
color: white; /* Same on both themes */
}
}
}

5
src/components/structures/RoomSearchView.tsx
View File

@@ -14,6 +14,7 @@ import {
THREAD_RELATION_TYPE,
} from "matrix-js-sdk/src/matrix";
import { logger } from "matrix-js-sdk/src/logger";
import { SearchIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
import ScrollPanel from "./ScrollPanel";
import Spinner from "../views/elements/Spinner";
@@ -153,7 +154,9 @@ export const RoomSearchView = ({
<div
className="mx_RoomView_messagePanel mx_RoomView_messagePanelSearchSpinner"
data-testid="messagePanelSearchSpinner"
/>
>
<SearchIcon />
</div>
);
}

5
src/components/views/directory/NetworkDropdown.tsx
View File

@@ -9,6 +9,7 @@ Please see LICENSE files in the repository root for full details.
import { without } from "lodash";
import React, { useCallback, useEffect, useState } from "react";
import { MatrixError } from "matrix-js-sdk/src/matrix";
import { CloseIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
import { _t } from "../../../languageHandler";
import { MatrixClientPeg } from "../../../MatrixClientPeg";
@@ -190,7 +191,9 @@ export const NetworkDropdown: React.FC<IProps> = ({ protocols, config, setConfig
className="mx_NetworkDropdown_removeServer"
title={_t("spotlight|public_rooms|network_dropdown_remove_server_adornment", { roomServer })}
onClick={() => setUserDefinedServers(without(userDefinedServers, roomServer))}
/>
>
<CloseIcon />
</AccessibleButton>
),
}
: {}),

3
src/components/views/elements/FacePile.tsx
View File

@@ -10,6 +10,7 @@ import React, { type FC, type HTMLAttributes, type ReactNode } from "react";
import { type RoomMember } from "matrix-js-sdk/src/matrix";
import { AvatarStack, Tooltip } from "@vector-im/compound-web";
import classNames from "classnames";
import { OverflowHorizontalIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
import MemberAvatar from "../avatars/MemberAvatar";
import AccessibleButton, { type ButtonEvent } from "./AccessibleButton";
@@ -56,7 +57,7 @@ const FacePile: FC<IProps> = ({
const pileContents = (
<>
{faces}
{overflow ? <span className="mx_FacePile_more" /> : null}
{overflow ? <OverflowHorizontalIcon className="mx_FacePile_more" /> : null}
</>
);

7
src/components/views/elements/InfoTooltip.tsx
View File

@@ -10,6 +10,7 @@ Please see LICENSE files in the repository root for full details.
import React, { type ReactNode } from "react";
import classNames from "classnames";
import { Tooltip } from "@vector-im/compound-web";
import { ErrorSolidIcon, InfoIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
import { _t } from "../../../languageHandler";
@@ -30,14 +31,14 @@ export default class InfoTooltip extends React.PureComponent<TooltipProps> {
public render(): React.ReactNode {
const { tooltip, children, className, kind } = this.props;
const title = _t("info_tooltip_title");
const iconClassName =
kind !== InfoTooltipKind.Warning ? "mx_InfoTooltip_icon_info" : "mx_InfoTooltip_icon_warning";
// Tooltip are forced on the right for a more natural feel to them on info icons
return (
<Tooltip description={tooltip || title} placement="right">
<div className={classNames("mx_InfoTooltip", className)} tabIndex={this.props.tabIndex ?? 0}>
<span className={classNames("mx_InfoTooltip_icon", iconClassName)} aria-label={title} />
<span className="mx_InfoTooltip_icon" aria-label={title}>
{kind !== InfoTooltipKind.Warning ? <InfoIcon /> : <ErrorSolidIcon />}
</span>
{children}
</div>
</Tooltip>

7
src/components/views/elements/MiniAvatarUploader.tsx
View File

@@ -9,6 +9,7 @@ Please see LICENSE files in the repository root for full details.
import classNames from "classnames";
import { EventType } from "matrix-js-sdk/src/matrix";
import React, { useContext, useRef, useState, type MouseEvent, type ReactNode } from "react";
import { TakePhotoSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
import MatrixClientContext from "../../../contexts/MatrixClientContext";
import { chromeFileInputFix } from "../../../utils/BrowserWorkarounds";
@@ -86,7 +87,11 @@ const MiniAvatarUploader: React.FC<IProps> = ({
{children}
<div className="mx_MiniAvatarUploader_indicator">
{busy ? <Spinner w={20} h={20} /> : <div className="mx_MiniAvatarUploader_cameraIcon" />}
{busy ? (
<Spinner w={20} h={20} />
) : (
<TakePhotoSolidIcon className="mx_MiniAvatarUploader_cameraIcon" />
)}
</div>
</AccessibleButton>
</React.Fragment>

2
src/components/views/elements/Validation.tsx
View File

@@ -10,6 +10,7 @@ Please see LICENSE files in the repository root for full details.
import React, { type JSX, type ReactNode } from "react";
import classNames from "classnames";
import memoizeOne from "memoize-one";
import { CheckIcon, CloseIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
type Data = Pick<IFieldState, "value" | "allowEmpty">;
@@ -173,6 +174,7 @@ export default function withValidation<T = void, D = void>({
});
return (
<li key={result.key} className={classes}>
{result.valid ? <CheckIcon /> : <CloseIcon />}
{result.text}
</li>
);

3
src/components/views/messages/DateSeparator.tsx
View File

@@ -11,6 +11,7 @@ import React, { type JSX } from "react";
import { Direction, ConnectionError, MatrixError, HTTPError } from "matrix-js-sdk/src/matrix";
import { logger } from "matrix-js-sdk/src/logger";
import { capitalize } from "lodash";
import { ChevronDownIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
import { _t, getUserLanguage } from "../../../languageHandler";
import { formatFullDateNoDay, formatFullDateNoTime, getDaysArray } from "../../../DateUtils";
@@ -312,7 +313,7 @@ export default class DateSeparator extends React.Component<IProps, IState> {
<h2 className="mx_DateSeparator_dateHeading" aria-hidden="true">
{this.getLabel()}
</h2>
<div className="mx_DateSeparator_chevron" />
<ChevronDownIcon className="mx_DateSeparator_chevron" />
{contextMenu}
</ContextMenuTooltipButton>
);

5
src/components/views/rooms/OverflowTileView.tsx
View File

@@ -6,7 +6,7 @@ Please see LICENSE files in the repository root for full details.
*/
import React from "react";
import Icon from "@vector-im/compound-design-tokens/assets/web/icons/overflow-horizontal";
import { ChevronRightIcon, OverflowHorizontalIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
import { _t } from "../../../languageHandler";
import AccessibleButton from "../elements/AccessibleButton";
@@ -24,9 +24,10 @@ export const OverflowTileView: React.FC<Props> = ({ remaining, onClick }) => {
return (
<AccessibleButton onClick={onClick} className="mx_OverflowTileView">
<div className="mx_OverflowTileView_icon">
<Icon height="36px" width="36px" />
<OverflowHorizontalIcon height="36px" width="36px" />
</div>
<div className="mx_OverflowTileView_text">{_t("common|and_n_others", { count: remaining })}</div>
<ChevronRightIcon className="mx_OverflowTileView_chevron" />
</AccessibleButton>
);
};

5
src/components/views/rooms/RoomTile.tsx
View File

@@ -11,6 +11,7 @@ import React, { createRef } from "react";
import { type Room, RoomEvent } from "matrix-js-sdk/src/matrix";
import { KnownMembership } from "matrix-js-sdk/src/types";
import classNames from "classnames";
import { OverflowHorizontalIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
import type { Call } from "../../../models/Call";
import { RovingTabIndexWrapper } from "../../../accessibility/RovingTabIndex";
@@ -332,7 +333,9 @@ class RoomTile extends React.PureComponent<Props, State> {
onClick={this.onGeneralMenuOpenClick}
title={_t("room|context_menu|title")}
isExpanded={!!this.state.generalMenuPosition}
/>
>
<OverflowHorizontalIcon />
</ContextMenuTooltipButton>
{this.state.generalMenuPosition && (
<RoomGeneralContextMenu
{...contextMenuBelow(this.state.generalMenuPosition)}

8
src/components/views/rooms/ThreadSummary.tsx
View File

@@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
import React, { useContext } from "react";
import { type Thread, ThreadEvent, type MatrixEvent } from "matrix-js-sdk/src/matrix";
import { IndicatorIcon } from "@vector-im/compound-web";
import ThreadIconSolid from "@vector-im/compound-design-tokens/assets/web/icons/threads-solid";
import { ThreadsSolidIcon, ChevronRightIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
import { _t } from "../../../languageHandler";
import { CardContext } from "../right_panel/context";
@@ -58,11 +58,13 @@ const ThreadSummary: React.FC<IProps> = ({ mxEvent, thread, ...props }) => {
aria-label={_t("threads|open_thread")}
>
<IndicatorIcon size="24px" indicator={notificationLevelToIndicator(level)}>
<ThreadIconSolid />
<ThreadsSolidIcon />
</IndicatorIcon>
<span className="mx_ThreadSummary_replies_amount">{countSection}</span>
<ThreadMessagePreview thread={thread} showDisplayname={!roomContext.narrow} />
<div className="mx_ThreadSummary_chevron" />
<div className="mx_ThreadSummary_chevron">
<ChevronRightIcon />
</div>
</AccessibleButton>
);
};

9
src/components/views/rooms/TopUnreadMessagesBar.tsx
View File

@@ -7,6 +7,7 @@ Please see LICENSE files in the repository root for full details.
*/
import React from "react";
import { ChevronUpIcon, CloseIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
import { _t } from "../../../languageHandler";
import AccessibleButton, { type ButtonEvent } from "../elements/AccessibleButton";
@@ -24,12 +25,16 @@ export default class TopUnreadMessagesBar extends React.PureComponent<IProps> {
className="mx_TopUnreadMessagesBar_scrollUp"
title={_t("room|jump_read_marker")}
onClick={this.props.onScrollUpClick}
/>
>
<ChevronUpIcon />
</AccessibleButton>
<AccessibleButton
className="mx_TopUnreadMessagesBar_markAsRead"
title={_t("notifications|mark_all_read")}
onClick={this.props.onCloseClick}
/>
>
<CloseIcon />
</AccessibleButton>
</div>
);
}

5
src/components/views/spaces/SpaceBasicSettings.tsx
View File

@@ -7,6 +7,7 @@ Please see LICENSE files in the repository root for full details.
*/
import React, { type ChangeEvent, useRef, useState } from "react";
import { TakePhotoSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
import { _t } from "../../../languageHandler";
import AccessibleButton from "../elements/AccessibleButton";
@@ -71,7 +72,9 @@ export const SpaceAvatar: React.FC<Pick<IProps, "avatarUrl" | "avatarDisabled" |
<AccessibleButton
className="mx_SpaceBasicSettings_avatar"
onClick={() => avatarUploadRef.current?.click()}
/>
>
<TakePhotoSolidIcon />
</AccessibleButton>
<AccessibleButton
onClick={() => avatarUploadRef.current?.click()}
kind="link"

11
src/components/views/voip/VideoFeed.tsx
View File

@@ -13,6 +13,7 @@ import React from "react";
import { type CallFeed, CallFeedEvent } from "matrix-js-sdk/src/webrtc/callFeed";
import { logger } from "matrix-js-sdk/src/logger";
import { SDPStreamMetadataPurpose } from "matrix-js-sdk/src/webrtc/callEventTypes";
import { MicOffSolidIcon, MicOnSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
import SettingsStore from "../../../settings/SettingsStore";
import LegacyCallHandler from "../../../LegacyCallHandler";
@@ -179,14 +180,14 @@ export default class VideoFeed extends React.PureComponent<IProps, IState> {
mx_VideoFeed_secondary: secondary,
mx_VideoFeed_voice: this.state.videoMuted,
});
const micIconClasses = classnames("mx_VideoFeed_mic", {
mx_VideoFeed_mic_muted: this.state.audioMuted,
mx_VideoFeed_mic_unmuted: !this.state.audioMuted,
});
let micIcon;
if (feed.purpose !== SDPStreamMetadataPurpose.Screenshare && !pipMode) {
micIcon = <div className={micIconClasses} />;
micIcon = (
<div className="mx_VideoFeed_mic">
{this.state.audioMuted ? <MicOffSolidIcon /> : <MicOnSolidIcon />}
</div>
);
}
let content;

10
src/toasts/IncomingCallToast.tsx
View File

@@ -10,11 +10,9 @@ import React, { type JSX, useCallback, useEffect, useRef, useState } from "react
import { type Room, type MatrixEvent, type RoomMember, RoomEvent, EventType } from "matrix-js-sdk/src/matrix";
import { Button, ToggleInput, Tooltip, TooltipProvider } from "@vector-im/compound-web";
import VideoCallIcon from "@vector-im/compound-design-tokens/assets/web/icons/video-call-solid";
import CheckIcon from "@vector-im/compound-design-tokens/assets/web/icons/check";
import CrossIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";
import { logger } from "matrix-js-sdk/src/logger";
import { type IRTCNotificationContent } from "matrix-js-sdk/src/matrixrtc";
import { VoiceCallIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
import { CheckIcon, VoiceCallIcon, CloseIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
import { AvatarWithDetails } from "@element-hq/web-shared-components";
import { _t } from "../languageHandler";
@@ -127,7 +125,7 @@ function DeclineCallButtonWithNotificationEvent({
kind="primary"
destructive
disabled={declining}
Icon={CrossIcon}
Icon={CloseIcon}
size="sm"
>
{_t("action|decline")}
@@ -332,7 +330,9 @@ export function IncomingCallToast({ notificationEvent }: Props): JSX.Element {
className="mx_IncomingCallToast_closeButton"
onClick={onCloseClick}
title={_t("action|close")}
/>
>
<CloseIcon />
</AccessibleButton>
</>
</TooltipProvider>
);

21
test/unit-tests/components/views/elements/__snapshots__/InfoTooltip-test.tsx.snap
View File

@@ -9,8 +9,25 @@ exports[`InfoTooltip should show tooltip on hover 1`] = `
>
<span
aria-label="Information"
class="mx_InfoTooltip_icon mx_InfoTooltip_icon_info"
/>
class="mx_InfoTooltip_icon"
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.288 7.288A.97.97 0 0 1 12 7q.424 0 .713.287Q13 7.576 13 8t-.287.713A.97.97 0 0 1 12 9a.97.97 0 0 1-.713-.287A.97.97 0 0 1 11 8q0-.424.287-.713m.001 4.001A.97.97 0 0 1 12 11q.424 0 .713.287.287.288.287.713v4q0 .424-.287.712A.97.97 0 0 1 12 17a.97.97 0 0 1-.713-.288A.97.97 0 0 1 11 16v-4q0-.424.287-.713"
/>
<path
clip-rule="evenodd"
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 1-16 0 8 8 0 0 1 16 0"
fill-rule="evenodd"
/>
</svg>
</span>
Trigger text
</div>
</DocumentFragment>

13
test/unit-tests/components/views/messages/__snapshots__/DateSeparator-test.tsx.snap
View File

@@ -79,9 +79,18 @@ exports[`DateSeparator when feature_jump_to_date is enabled renders the date sep
>
Fri, Dec 17, 2021
</h2>
<div
<svg
class="mx_DateSeparator_chevron"
/>
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 14.95q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-4.6-4.6a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l3.9 3.9 3.9-3.9a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-4.6 4.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
/>
</svg>
</div>
<hr
role="none"

56
test/unit-tests/components/views/rooms/__snapshots__/RoomTile-test.tsx.snap
View File

@@ -61,7 +61,19 @@ exports[`RoomTile when message previews are enabled and there is a message in a
class="mx_AccessibleButton mx_RoomTile_menuButton"
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="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
/>
</svg>
</div>
<div
aria-expanded="false"
aria-haspopup="true"
@@ -143,7 +155,19 @@ exports[`RoomTile when message previews are enabled and there is a message in th
class="mx_AccessibleButton mx_RoomTile_menuButton"
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="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
/>
</svg>
</div>
<div
aria-expanded="false"
aria-haspopup="true"
@@ -206,7 +230,19 @@ exports[`RoomTile when message previews are enabled should render a room without
class="mx_AccessibleButton mx_RoomTile_menuButton"
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="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
/>
</svg>
</div>
<div
aria-expanded="false"
aria-haspopup="true"
@@ -268,7 +304,19 @@ exports[`RoomTile when message previews are not enabled should render the room 1
class="mx_AccessibleButton mx_RoomTile_menuButton"
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="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
/>
</svg>
</div>
<div
aria-expanded="false"
aria-haspopup="true"