Fix composer button visibility in contrast colour mode (#31255)
* Fix composer button visibility in contrast colour mode Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshot Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update test Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Simplify Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update screenshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update screenshots 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
committed by
GitHub
GitHub
parent
d30e6f25d3
commit
4fda167c11
Binary file not shown.
|
Before Width: | Height: | Size: 49 KiB After Width: | Height: | Size: 49 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 91 KiB After Width: | Height: | Size: 91 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 77 KiB After Width: | Height: | Size: 77 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 71 KiB After Width: | Height: | Size: 72 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 33 KiB After Width: | Height: | Size: 33 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 33 KiB After Width: | Height: | Size: 33 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 54 KiB After Width: | Height: | Size: 55 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 48 KiB After Width: | Height: | Size: 49 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 48 KiB After Width: | Height: | Size: 49 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 62 KiB After Width: | Height: | Size: 62 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 56 KiB After Width: | Height: | Size: 57 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 64 KiB After Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 66 KiB After Width: | Height: | Size: 68 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 61 KiB After Width: | Height: | Size: 61 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 69 KiB After Width: | Height: | Size: 70 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 62 KiB After Width: | Height: | Size: 62 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 61 KiB After Width: | Height: | Size: 62 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 65 KiB After Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 57 KiB After Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 57 KiB After Width: | Height: | Size: 58 KiB |
@@ -896,53 +896,23 @@ legend {
|
||||
|
||||
@define-mixin composerButtonHighLight {
|
||||
background: var(--cpd-color-bg-subtle-primary);
|
||||
&::before {
|
||||
background-color: var(--cpd-color-icon-primary) !important;
|
||||
}
|
||||
color: var(--cpd-color-icon-primary) !important;
|
||||
}
|
||||
|
||||
@define-mixin composerButton $border-radius, $hover-color, $hover-bg {
|
||||
--size: 26px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
height: var(--size);
|
||||
line-height: var(--size);
|
||||
width: auto;
|
||||
padding-left: var(--size);
|
||||
border-radius: $border-radius;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 3px;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
background-color: $icon-button-color;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
mask-position: center;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 0;
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
border-radius: $border-radius;
|
||||
svg {
|
||||
color: $icon-button-color;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::after {
|
||||
background: $hover-bg;
|
||||
}
|
||||
background-color: $hover-bg;
|
||||
|
||||
&::before {
|
||||
background-color: $hover-color;
|
||||
svg {
|
||||
color: $hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -14,28 +14,16 @@ Please see LICENSE files in the repository root for full details.
|
||||
min-height: 32px; /* for when the button is used in a flexbox */
|
||||
border-radius: 32px;
|
||||
background-color: $system;
|
||||
padding: var(--cpd-space-1-5x);
|
||||
box-sizing: border-box;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute; /* sizing varies by icon */
|
||||
background-color: $secondary-content;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
top: 6px; /* center */
|
||||
left: 6px; /* center */
|
||||
svg {
|
||||
color: $secondary-content;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
&.mx_PlayPauseButton_disabled::before {
|
||||
&[disabled] svg {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&.mx_PlayPauseButton_play::before {
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/play-solid.svg");
|
||||
}
|
||||
|
||||
&.mx_PlayPauseButton_pause::before {
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/pause-solid.svg");
|
||||
}
|
||||
}
|
||||
|
||||
@@ -69,11 +69,16 @@ Please see LICENSE files in the repository root for full details.
|
||||
}
|
||||
|
||||
img,
|
||||
svg,
|
||||
.mx_IconizedContextMenu_icon {
|
||||
/* icons */
|
||||
width: 16px;
|
||||
min-width: 16px;
|
||||
max-width: 16px;
|
||||
|
||||
& + .mx_IconizedContextMenu_label {
|
||||
padding-left: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
span.mx_IconizedContextMenu_label {
|
||||
@@ -87,10 +92,6 @@ Please see LICENSE files in the repository root for full details.
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mx_IconizedContextMenu_icon + .mx_IconizedContextMenu_label {
|
||||
padding-left: 14px;
|
||||
}
|
||||
|
||||
.mx_BetaCard_betaPill {
|
||||
margin-left: 16px;
|
||||
}
|
||||
@@ -99,8 +100,6 @@ Please see LICENSE files in the repository root for full details.
|
||||
|
||||
.mx_IconizedContextMenu_icon {
|
||||
position: relative;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
@@ -119,6 +118,10 @@ Please see LICENSE files in the repository root for full details.
|
||||
color: $alert !important;
|
||||
}
|
||||
|
||||
svg {
|
||||
color: var(--cpd-color-icon-critical-primary);
|
||||
}
|
||||
|
||||
.mx_IconizedContextMenu_icon::before {
|
||||
background-color: var(--cpd-color-icon-critical-primary);
|
||||
}
|
||||
@@ -127,6 +130,10 @@ Please see LICENSE files in the repository root for full details.
|
||||
.mx_IconizedContextMenu_option_red {
|
||||
color: $alert !important;
|
||||
|
||||
svg {
|
||||
color: $alert;
|
||||
}
|
||||
|
||||
.mx_IconizedContextMenu_icon::before {
|
||||
background-color: $alert;
|
||||
}
|
||||
@@ -138,6 +145,10 @@ Please see LICENSE files in the repository root for full details.
|
||||
color: $accent !important;
|
||||
}
|
||||
|
||||
svg {
|
||||
color: $accent;
|
||||
}
|
||||
|
||||
.mx_IconizedContextMenu_icon::before {
|
||||
background-color: $accent;
|
||||
}
|
||||
|
||||
@@ -14,10 +14,6 @@ Please see LICENSE files in the repository root for full details.
|
||||
@mixin composerButtonHighLight;
|
||||
}
|
||||
|
||||
.mx_EmojiButton_icon::before {
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/reaction.svg");
|
||||
}
|
||||
|
||||
.mx_MessageComposer_wysiwyg {
|
||||
.mx_EmojiButton {
|
||||
@mixin composerButton 5px, $tertiary-content, $panels;
|
||||
|
||||
@@ -140,6 +140,9 @@ Please see LICENSE files in the repository root for full details.
|
||||
|
||||
.mx_MessageComposer_button {
|
||||
@mixin composerButton 50%, var(--cpd-color-icon-primary), var(--cpd-color-bg-subtle-primary);
|
||||
padding: 3px;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: auto;
|
||||
@@ -155,6 +158,11 @@ Please see LICENSE files in the repository root for full details.
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
}
|
||||
}
|
||||
.mx_MessageComposer_wysiwyg {
|
||||
.mx_MessageComposer_wrapper {
|
||||
@@ -193,60 +201,31 @@ Please see LICENSE files in the repository root for full details.
|
||||
}
|
||||
}
|
||||
|
||||
.mx_MessageComposer_upload::before {
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/attachment.svg");
|
||||
}
|
||||
.mx_MessageComposer_buttonMenu {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
padding: 1px;
|
||||
|
||||
.mx_MessageComposer_poll::before {
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/polls.svg");
|
||||
}
|
||||
|
||||
.mx_MessageComposer_voiceMessage::before {
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/mic-on-solid.svg");
|
||||
}
|
||||
|
||||
.mx_MessageComposer_plain_text::before {
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/text-formatting.svg");
|
||||
}
|
||||
|
||||
.mx_MessageComposer_rich_text::before {
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/text-formatting.svg");
|
||||
}
|
||||
|
||||
.mx_MessageComposer_location::before {
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/location-pin-solid.svg");
|
||||
}
|
||||
|
||||
.mx_MessageComposer_stickers::before {
|
||||
mask-image: url("$(res)/img/element-icons/room/composer/sticker.svg");
|
||||
}
|
||||
|
||||
.mx_MessageComposer_buttonMenu::before {
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
|
||||
svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_MessageComposer_sendMessage {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding: var(--cpd-space-2x);
|
||||
border-radius: 100%;
|
||||
background-color: var(--cpd-color-icon-accent-tertiary);
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
top: 8px;
|
||||
left: 9px;
|
||||
svg {
|
||||
height: inherit;
|
||||
width: inherit;
|
||||
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/send-solid.svg");
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
mask-position: center;
|
||||
|
||||
background-color: var(--cpd-color-icon-on-solid-primary);
|
||||
content: "";
|
||||
color: var(--cpd-color-icon-on-solid-primary);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -32,10 +32,12 @@ Please see LICENSE files in the repository root for full details.
|
||||
height: 24px;
|
||||
vertical-align: middle;
|
||||
margin-right: 2px; /* distance from left edge of waveform container (container has some margin too) */
|
||||
background-color: $voice-record-icon-color;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/delete.svg");
|
||||
|
||||
svg {
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
color: $voice-record-icon-color;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_VoiceRecordComposerTile_uploadingState {
|
||||
@@ -115,3 +117,9 @@ Please see LICENSE files in the repository root for full details.
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
.mx_VoiceMessagePrimaryContainer {
|
||||
outline: 1px solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,14 +6,12 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
|
||||
Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
import React, { type ReactNode } from "react";
|
||||
import classNames from "classnames";
|
||||
import React, { type HTMLAttributes, type ReactNode } from "react";
|
||||
import { PlayPauseButton as SharedPlayPauseButton } from "@element-hq/web-shared-components";
|
||||
|
||||
import { _t } from "../../../languageHandler";
|
||||
import { type Playback, PlaybackState } from "../../../audio/Playback";
|
||||
import AccessibleButton, { type ButtonProps } from "../elements/AccessibleButton";
|
||||
|
||||
type Props = Omit<ButtonProps<"div">, "title" | "onClick" | "disabled" | "element" | "ref"> & {
|
||||
type Props = HTMLAttributes<HTMLButtonElement> & {
|
||||
// Playback instance to manipulate. Cannot change during the component lifecycle.
|
||||
playback: Playback;
|
||||
|
||||
@@ -27,8 +25,7 @@ type Props = Omit<ButtonProps<"div">, "title" | "onClick" | "disabled" | "elemen
|
||||
*/
|
||||
export default class PlayPauseButton extends React.PureComponent<Props> {
|
||||
private onClick = (): void => {
|
||||
// noinspection JSIgnoredPromiseFromCall
|
||||
this.toggleState();
|
||||
void this.toggleState();
|
||||
};
|
||||
|
||||
public async toggleState(): Promise<void> {
|
||||
@@ -37,21 +34,14 @@ export default class PlayPauseButton extends React.PureComponent<Props> {
|
||||
|
||||
public render(): ReactNode {
|
||||
const { playback, playbackPhase, ...restProps } = this.props;
|
||||
const isPlaying = playback.isPlaying;
|
||||
const isDisabled = playbackPhase === PlaybackState.Decoding;
|
||||
const classes = classNames("mx_PlayPauseButton", {
|
||||
mx_PlayPauseButton_play: !isPlaying,
|
||||
mx_PlayPauseButton_pause: isPlaying,
|
||||
mx_PlayPauseButton_disabled: isDisabled,
|
||||
});
|
||||
|
||||
return (
|
||||
<AccessibleButton
|
||||
<SharedPlayPauseButton
|
||||
data-testid="play-pause-button"
|
||||
className={classes}
|
||||
title={isPlaying ? _t("action|pause") : _t("action|play")}
|
||||
onClick={this.onClick}
|
||||
disabled={isDisabled}
|
||||
className="mx_PlayPauseButton"
|
||||
togglePlay={this.onClick}
|
||||
playing={playback.isPlaying}
|
||||
disabled={playbackPhase === PlaybackState.Decoding}
|
||||
{...restProps}
|
||||
/>
|
||||
);
|
||||
|
||||
@@ -32,6 +32,7 @@ interface IOptionListProps {
|
||||
}
|
||||
|
||||
interface IOptionProps extends React.ComponentProps<typeof MenuItem> {
|
||||
icon?: ReactNode;
|
||||
iconClassName?: string;
|
||||
isDestructive?: boolean;
|
||||
}
|
||||
@@ -114,6 +115,7 @@ export const IconizedContextMenuOption: React.FC<IOptionProps> = ({
|
||||
label,
|
||||
className,
|
||||
iconClassName,
|
||||
icon,
|
||||
children,
|
||||
isDestructive,
|
||||
...props
|
||||
@@ -129,6 +131,7 @@ export const IconizedContextMenuOption: React.FC<IOptionProps> = ({
|
||||
label={label}
|
||||
>
|
||||
{iconClassName && <span className={classNames("mx_IconizedContextMenu_icon", iconClassName)} />}
|
||||
{icon}
|
||||
<span className="mx_IconizedContextMenu_label">{label}</span>
|
||||
{children}
|
||||
</MenuItem>
|
||||
|
||||
@@ -9,6 +9,7 @@ Please see LICENSE files in the repository root for full details.
|
||||
import React, { type ReactNode, type SyntheticEvent, useContext } from "react";
|
||||
import classNames from "classnames";
|
||||
import { type RoomMember, type IEventRelation } from "matrix-js-sdk/src/matrix";
|
||||
import { LocationPinSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
|
||||
|
||||
import { _t } from "../../../languageHandler";
|
||||
import { CollapsibleButton } from "../rooms/CollapsibleButton";
|
||||
@@ -54,13 +55,9 @@ const LocationButton: React.FC<IProps> = ({ roomId, sender, menuPosition, relati
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<CollapsibleButton
|
||||
className={className}
|
||||
iconClassName="mx_MessageComposer_location"
|
||||
onClick={openMenu}
|
||||
title={_t("common|location")}
|
||||
inputRef={button}
|
||||
/>
|
||||
<CollapsibleButton className={className} onClick={openMenu} title={_t("common|location")} inputRef={button}>
|
||||
<LocationPinSolidIcon />
|
||||
</CollapsibleButton>
|
||||
|
||||
{contextMenu}
|
||||
</React.Fragment>
|
||||
|
||||
@@ -7,7 +7,6 @@ Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
import React, { type RefObject, useContext } from "react";
|
||||
import classNames from "classnames";
|
||||
|
||||
import AccessibleButton, { type ButtonProps } from "../elements/AccessibleButton";
|
||||
import { OverflowMenuContext } from "./MessageComposerButtons";
|
||||
@@ -16,24 +15,16 @@ import { IconizedContextMenuOption } from "../context_menus/IconizedContextMenu"
|
||||
interface Props extends Omit<ButtonProps<"div">, "element"> {
|
||||
inputRef?: RefObject<HTMLElement | null>;
|
||||
title: string;
|
||||
iconClassName: string;
|
||||
}
|
||||
|
||||
export const CollapsibleButton: React.FC<Props> = ({
|
||||
title,
|
||||
children,
|
||||
className,
|
||||
iconClassName,
|
||||
inputRef,
|
||||
...props
|
||||
}) => {
|
||||
export const CollapsibleButton: React.FC<Props> = ({ title, children, className, inputRef, ...props }) => {
|
||||
const inOverflowMenu = !!useContext(OverflowMenuContext);
|
||||
if (inOverflowMenu) {
|
||||
return <IconizedContextMenuOption {...props} iconClassName={iconClassName} label={title} inputRef={inputRef} />;
|
||||
return <IconizedContextMenuOption {...props} icon={children} label={title} inputRef={inputRef} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<AccessibleButton {...props} title={title} className={classNames(className, iconClassName)} ref={inputRef}>
|
||||
<AccessibleButton {...props} title={title} className={className} ref={inputRef}>
|
||||
{children}
|
||||
</AccessibleButton>
|
||||
);
|
||||
|
||||
@@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.
|
||||
|
||||
import classNames from "classnames";
|
||||
import React, { type JSX, useContext } from "react";
|
||||
import { ReactionIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
|
||||
|
||||
import { _t } from "../../../languageHandler";
|
||||
import ContextMenu, { aboveLeftOf, type MenuProps, useContextMenu } from "../../structures/ContextMenu";
|
||||
@@ -50,11 +51,12 @@ export function EmojiButton({ addEmoji, menuPosition, className }: IEmojiButtonP
|
||||
<>
|
||||
<CollapsibleButton
|
||||
className={computedClassName}
|
||||
iconClassName="mx_EmojiButton_icon"
|
||||
onClick={openMenu}
|
||||
title={_t("common|emoji")}
|
||||
inputRef={button}
|
||||
/>
|
||||
>
|
||||
<ReactionIcon />
|
||||
</CollapsibleButton>
|
||||
|
||||
{contextMenu}
|
||||
</>
|
||||
|
||||
@@ -18,7 +18,7 @@ import {
|
||||
} from "matrix-js-sdk/src/matrix";
|
||||
import { Tooltip } from "@vector-im/compound-web";
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
import { LockOffIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
|
||||
import { LockOffIcon, SendSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
|
||||
|
||||
import { _t } from "../../../languageHandler";
|
||||
import { MatrixClientPeg } from "../../../MatrixClientPeg";
|
||||
@@ -72,7 +72,9 @@ function SendButton(props: ISendButtonProps): JSX.Element {
|
||||
onClick={props.onClick}
|
||||
title={props.title ?? _t("composer|send_button_title")}
|
||||
data-testid="sendmessagebtn"
|
||||
/>
|
||||
>
|
||||
<SendSolidIcon />
|
||||
</AccessibleButton>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -15,6 +15,13 @@ import {
|
||||
M_POLL_START,
|
||||
} from "matrix-js-sdk/src/matrix";
|
||||
import React, { type JSX, createContext, type ReactElement, type ReactNode, useContext, useRef } from "react";
|
||||
import {
|
||||
AttachmentIcon,
|
||||
MicOnSolidIcon,
|
||||
OverflowHorizontalIcon,
|
||||
PollsIcon,
|
||||
TextFormattingIcon,
|
||||
} from "@vector-im/compound-design-tokens/assets/web/icons";
|
||||
|
||||
import { _t } from "../../../languageHandler";
|
||||
import { CollapsibleButton } from "./CollapsibleButton";
|
||||
@@ -35,6 +42,7 @@ import { filterBoolean } from "../../../utils/arrays";
|
||||
import { useSettingValue } from "../../../hooks/useSettings";
|
||||
import AccessibleButton, { type ButtonEvent } from "../elements/AccessibleButton";
|
||||
import { useScopedRoomContext } from "../../../contexts/ScopedRoomContext.tsx";
|
||||
import { Icon as StickersIcon } from "../../../../res/img/element-icons/room/composer/sticker.svg";
|
||||
|
||||
interface IProps {
|
||||
addEmoji: (emoji: string) => boolean;
|
||||
@@ -125,7 +133,9 @@ const MessageComposerButtons: React.FC<IProps> = (props: IProps) => {
|
||||
className={moreOptionsClasses}
|
||||
onClick={props.toggleButtonMenu}
|
||||
title={_t("quick_settings|sidebar_settings")}
|
||||
/>
|
||||
>
|
||||
<OverflowHorizontalIcon />
|
||||
</AccessibleButton>
|
||||
)}
|
||||
{props.isMenuOpen && (
|
||||
<IconizedContextMenu
|
||||
@@ -235,12 +245,9 @@ const UploadButton: React.FC = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<CollapsibleButton
|
||||
className="mx_MessageComposer_button"
|
||||
iconClassName="mx_MessageComposer_upload"
|
||||
onClick={onClick}
|
||||
title={_t("common|attachment")}
|
||||
/>
|
||||
<CollapsibleButton className="mx_MessageComposer_button" onClick={onClick} title={_t("common|attachment")}>
|
||||
<AttachmentIcon />
|
||||
</CollapsibleButton>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -250,10 +257,11 @@ function showStickersButton(props: IProps): ReactElement | null {
|
||||
id="stickersButton"
|
||||
key="controls_stickers"
|
||||
className="mx_MessageComposer_button"
|
||||
iconClassName="mx_MessageComposer_stickers"
|
||||
onClick={() => props.setStickerPickerOpen(!props.isStickerPickerOpen)}
|
||||
title={props.isStickerPickerOpen ? _t("composer|close_sticker_picker") : _t("common|sticker")}
|
||||
/>
|
||||
>
|
||||
<StickersIcon />
|
||||
</CollapsibleButton>
|
||||
) : null;
|
||||
}
|
||||
|
||||
@@ -263,10 +271,11 @@ function voiceRecordingButton(props: IProps, narrow: boolean): ReactElement | nu
|
||||
<CollapsibleButton
|
||||
key="voice_message_send"
|
||||
className="mx_MessageComposer_button"
|
||||
iconClassName="mx_MessageComposer_voiceMessage"
|
||||
onClick={props.onRecordStartEndClick}
|
||||
title={_t("composer|voice_message_button")}
|
||||
/>
|
||||
>
|
||||
<MicOnSolidIcon />
|
||||
</CollapsibleButton>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -318,10 +327,11 @@ class PollButton extends React.PureComponent<IPollButtonProps> {
|
||||
return (
|
||||
<CollapsibleButton
|
||||
className="mx_MessageComposer_button"
|
||||
iconClassName="mx_MessageComposer_poll"
|
||||
onClick={this.onCreateClick}
|
||||
title={_t("composer|poll_button")}
|
||||
/>
|
||||
>
|
||||
<PollsIcon />
|
||||
</CollapsibleButton>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -349,15 +359,9 @@ function ComposerModeButton({ isRichTextEnabled, onClick }: WysiwygToggleButtonP
|
||||
const title = isRichTextEnabled ? _t("composer|mode_plain") : _t("composer|mode_rich_text");
|
||||
|
||||
return (
|
||||
<CollapsibleButton
|
||||
className="mx_MessageComposer_button"
|
||||
iconClassName={classNames({
|
||||
mx_MessageComposer_plain_text: !isRichTextEnabled,
|
||||
mx_MessageComposer_rich_text: isRichTextEnabled,
|
||||
})}
|
||||
onClick={onClick}
|
||||
title={title}
|
||||
/>
|
||||
<CollapsibleButton className="mx_MessageComposer_button" onClick={onClick} title={title}>
|
||||
<TextFormattingIcon />
|
||||
</CollapsibleButton>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -9,6 +9,7 @@ Please see LICENSE files in the repository root for full details.
|
||||
import React, { type ReactNode } from "react";
|
||||
import { type Room, type IEventRelation, type MatrixEvent } from "matrix-js-sdk/src/matrix";
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
import { DeleteIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
|
||||
|
||||
import { _t } from "../../../languageHandler";
|
||||
import { RecordingState } from "../../../audio/VoiceRecording";
|
||||
@@ -274,7 +275,9 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
|
||||
className="mx_VoiceRecordComposerTile_delete"
|
||||
title={_t("action|delete")}
|
||||
onClick={this.onCancel}
|
||||
/>
|
||||
>
|
||||
<DeleteIcon />
|
||||
</AccessibleButton>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -529,22 +529,61 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
|
||||
>
|
||||
<div
|
||||
aria-label="Emoji"
|
||||
class="mx_AccessibleButton mx_EmojiButton mx_MessageComposer_button mx_EmojiButton_icon"
|
||||
class="mx_AccessibleButton mx_EmojiButton mx_MessageComposer_button"
|
||||
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="M15.536 15.536a1 1 0 0 0-1.415-1.415 3 3 0 0 1-2.12.879 3 3 0 0 1-2.122-.879 1 1 0 1 0-1.414 1.415A5 5 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464M10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"
|
||||
/>
|
||||
<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"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
aria-label="Attachment"
|
||||
class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_upload"
|
||||
class="mx_AccessibleButton mx_MessageComposer_button"
|
||||
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="M11.5 22q-2.3 0-3.9-1.6T6 16.5V6q0-1.65 1.175-2.825T10 2t2.825 1.175T14 6v9.5q0 1.05-.725 1.775T11.5 18t-1.775-.725T9 15.5V6.75A.73.73 0 0 1 9.75 6a.73.73 0 0 1 .75.75v8.75q0 .424.287.712.288.288.713.288.424 0 .713-.288a.97.97 0 0 0 .287-.712V6q0-1.05-.725-1.775T10 3.5t-1.775.725T7.5 6v10.5q0 1.65 1.175 2.825T11.5 20.5t2.825-1.175T15.5 16.5V6.75a.73.73 0 0 1 .75-.75.73.73 0 0 1 .75.75v9.75q0 2.3-1.6 3.9T11.5 22"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
aria-label="More options"
|
||||
class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_buttonMenu"
|
||||
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>
|
||||
<input
|
||||
multiple=""
|
||||
style="display: none;"
|
||||
@@ -832,22 +871,61 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
|
||||
>
|
||||
<div
|
||||
aria-label="Emoji"
|
||||
class="mx_AccessibleButton mx_EmojiButton mx_MessageComposer_button mx_EmojiButton_icon"
|
||||
class="mx_AccessibleButton mx_EmojiButton mx_MessageComposer_button"
|
||||
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="M15.536 15.536a1 1 0 0 0-1.415-1.415 3 3 0 0 1-2.12.879 3 3 0 0 1-2.122-.879 1 1 0 1 0-1.414 1.415A5 5 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464M10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"
|
||||
/>
|
||||
<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"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
aria-label="Attachment"
|
||||
class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_upload"
|
||||
class="mx_AccessibleButton mx_MessageComposer_button"
|
||||
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="M11.5 22q-2.3 0-3.9-1.6T6 16.5V6q0-1.65 1.175-2.825T10 2t2.825 1.175T14 6v9.5q0 1.05-.725 1.775T11.5 18t-1.775-.725T9 15.5V6.75A.73.73 0 0 1 9.75 6a.73.73 0 0 1 .75.75v8.75q0 .424.287.712.288.288.713.288.424 0 .713-.288a.97.97 0 0 0 .287-.712V6q0-1.05-.725-1.775T10 3.5t-1.775.725T7.5 6v10.5q0 1.65 1.175 2.825T11.5 20.5t2.825-1.175T15.5 16.5V6.75a.73.73 0 0 1 .75-.75.73.73 0 0 1 .75.75v9.75q0 2.3-1.6 3.9T11.5 22"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
aria-label="More options"
|
||||
class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_buttonMenu"
|
||||
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>
|
||||
<input
|
||||
multiple=""
|
||||
style="display: none;"
|
||||
@@ -1404,22 +1482,61 @@ exports[`RoomView should hide the header when hideHeader=true 1`] = `
|
||||
>
|
||||
<div
|
||||
aria-label="Emoji"
|
||||
class="mx_AccessibleButton mx_EmojiButton mx_MessageComposer_button mx_EmojiButton_icon"
|
||||
class="mx_AccessibleButton mx_EmojiButton mx_MessageComposer_button"
|
||||
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="M15.536 15.536a1 1 0 0 0-1.415-1.415 3 3 0 0 1-2.12.879 3 3 0 0 1-2.122-.879 1 1 0 1 0-1.414 1.415A5 5 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464M10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"
|
||||
/>
|
||||
<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"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
aria-label="Attachment"
|
||||
class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_upload"
|
||||
class="mx_AccessibleButton mx_MessageComposer_button"
|
||||
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="M11.5 22q-2.3 0-3.9-1.6T6 16.5V6q0-1.65 1.175-2.825T10 2t2.825 1.175T14 6v9.5q0 1.05-.725 1.775T11.5 18t-1.775-.725T9 15.5V6.75A.73.73 0 0 1 9.75 6a.73.73 0 0 1 .75.75v8.75q0 .424.287.712.288.288.713.288.424 0 .713-.288a.97.97 0 0 0 .287-.712V6q0-1.05-.725-1.775T10 3.5t-1.775.725T7.5 6v10.5q0 1.65 1.175 2.825T11.5 20.5t2.825-1.175T15.5 16.5V6.75a.73.73 0 0 1 .75-.75.73.73 0 0 1 .75.75v9.75q0 2.3-1.6 3.9T11.5 22"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
aria-label="More options"
|
||||
class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_buttonMenu"
|
||||
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>
|
||||
<input
|
||||
multiple=""
|
||||
style="display: none;"
|
||||
@@ -1840,22 +1957,61 @@ exports[`RoomView should hide the pinned message banner when hidePinnedMessageBa
|
||||
>
|
||||
<div
|
||||
aria-label="Emoji"
|
||||
class="mx_AccessibleButton mx_EmojiButton mx_MessageComposer_button mx_EmojiButton_icon"
|
||||
class="mx_AccessibleButton mx_EmojiButton mx_MessageComposer_button"
|
||||
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="M15.536 15.536a1 1 0 0 0-1.415-1.415 3 3 0 0 1-2.12.879 3 3 0 0 1-2.122-.879 1 1 0 1 0-1.414 1.415A5 5 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464M10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"
|
||||
/>
|
||||
<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"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
aria-label="Attachment"
|
||||
class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_upload"
|
||||
class="mx_AccessibleButton mx_MessageComposer_button"
|
||||
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="M11.5 22q-2.3 0-3.9-1.6T6 16.5V6q0-1.65 1.175-2.825T10 2t2.825 1.175T14 6v9.5q0 1.05-.725 1.775T11.5 18t-1.775-.725T9 15.5V6.75A.73.73 0 0 1 9.75 6a.73.73 0 0 1 .75.75v8.75q0 .424.287.712.288.288.713.288.424 0 .713-.288a.97.97 0 0 0 .287-.712V6q0-1.05-.725-1.775T10 3.5t-1.775.725T7.5 6v10.5q0 1.65 1.175 2.825T11.5 20.5t2.825-1.175T15.5 16.5V6.75a.73.73 0 0 1 .75-.75.73.73 0 0 1 .75.75v9.75q0 2.3-1.6 3.9T11.5 22"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
aria-label="More options"
|
||||
class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_buttonMenu"
|
||||
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>
|
||||
<input
|
||||
multiple=""
|
||||
style="display: none;"
|
||||
@@ -2276,22 +2432,61 @@ exports[`RoomView should hide the right panel when hideRightPanel=true 1`] = `
|
||||
>
|
||||
<div
|
||||
aria-label="Emoji"
|
||||
class="mx_AccessibleButton mx_EmojiButton mx_MessageComposer_button mx_EmojiButton_icon"
|
||||
class="mx_AccessibleButton mx_EmojiButton mx_MessageComposer_button"
|
||||
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="M15.536 15.536a1 1 0 0 0-1.415-1.415 3 3 0 0 1-2.12.879 3 3 0 0 1-2.122-.879 1 1 0 1 0-1.414 1.415A5 5 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464M10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"
|
||||
/>
|
||||
<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"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
aria-label="Attachment"
|
||||
class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_upload"
|
||||
class="mx_AccessibleButton mx_MessageComposer_button"
|
||||
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="M11.5 22q-2.3 0-3.9-1.6T6 16.5V6q0-1.65 1.175-2.825T10 2t2.825 1.175T14 6v9.5q0 1.05-.725 1.775T11.5 18t-1.775-.725T9 15.5V6.75A.73.73 0 0 1 9.75 6a.73.73 0 0 1 .75.75v8.75q0 .424.287.712.288.288.713.288.424 0 .713-.288a.97.97 0 0 0 .287-.712V6q0-1.05-.725-1.775T10 3.5t-1.775.725T7.5 6v10.5q0 1.65 1.175 2.825T11.5 20.5t2.825-1.175T15.5 16.5V6.75a.73.73 0 0 1 .75-.75.73.73 0 0 1 .75.75v9.75q0 2.3-1.6 3.9T11.5 22"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
aria-label="More options"
|
||||
class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_buttonMenu"
|
||||
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>
|
||||
<input
|
||||
multiple=""
|
||||
style="display: none;"
|
||||
@@ -2936,22 +3131,61 @@ exports[`RoomView should not display the timeline when the room encryption is lo
|
||||
>
|
||||
<div
|
||||
aria-label="Emoji"
|
||||
class="mx_AccessibleButton mx_EmojiButton mx_MessageComposer_button mx_EmojiButton_icon"
|
||||
class="mx_AccessibleButton mx_EmojiButton mx_MessageComposer_button"
|
||||
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="M15.536 15.536a1 1 0 0 0-1.415-1.415 3 3 0 0 1-2.12.879 3 3 0 0 1-2.122-.879 1 1 0 1 0-1.414 1.415A5 5 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464M10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"
|
||||
/>
|
||||
<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"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
aria-label="Attachment"
|
||||
class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_upload"
|
||||
class="mx_AccessibleButton mx_MessageComposer_button"
|
||||
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="M11.5 22q-2.3 0-3.9-1.6T6 16.5V6q0-1.65 1.175-2.825T10 2t2.825 1.175T14 6v9.5q0 1.05-.725 1.775T11.5 18t-1.775-.725T9 15.5V6.75A.73.73 0 0 1 9.75 6a.73.73 0 0 1 .75.75v8.75q0 .424.287.712.288.288.713.288.424 0 .713-.288a.97.97 0 0 0 .287-.712V6q0-1.05-.725-1.775T10 3.5t-1.775.725T7.5 6v10.5q0 1.65 1.175 2.825T11.5 20.5t2.825-1.175T15.5 16.5V6.75a.73.73 0 0 1 .75-.75.73.73 0 0 1 .75.75v9.75q0 2.3-1.6 3.9T11.5 22"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
aria-label="More options"
|
||||
class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_buttonMenu"
|
||||
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>
|
||||
<input
|
||||
multiple=""
|
||||
style="display: none;"
|
||||
@@ -3442,22 +3676,61 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
|
||||
>
|
||||
<div
|
||||
aria-label="Emoji"
|
||||
class="mx_AccessibleButton mx_EmojiButton mx_MessageComposer_button mx_EmojiButton_icon"
|
||||
class="mx_AccessibleButton mx_EmojiButton mx_MessageComposer_button"
|
||||
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="M15.536 15.536a1 1 0 0 0-1.415-1.415 3 3 0 0 1-2.12.879 3 3 0 0 1-2.122-.879 1 1 0 1 0-1.414 1.415A5 5 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464M10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"
|
||||
/>
|
||||
<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"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
aria-label="Attachment"
|
||||
class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_upload"
|
||||
class="mx_AccessibleButton mx_MessageComposer_button"
|
||||
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="M11.5 22q-2.3 0-3.9-1.6T6 16.5V6q0-1.65 1.175-2.825T10 2t2.825 1.175T14 6v9.5q0 1.05-.725 1.775T11.5 18t-1.775-.725T9 15.5V6.75A.73.73 0 0 1 9.75 6a.73.73 0 0 1 .75.75v8.75q0 .424.287.712.288.288.713.288.424 0 .713-.288a.97.97 0 0 0 .287-.712V6q0-1.05-.725-1.775T10 3.5t-1.775.725T7.5 6v10.5q0 1.65 1.175 2.825T11.5 20.5t2.825-1.175T15.5 16.5V6.75a.73.73 0 0 1 .75-.75.73.73 0 0 1 .75.75v9.75q0 2.3-1.6 3.9T11.5 22"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
aria-label="More options"
|
||||
class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_buttonMenu"
|
||||
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>
|
||||
<input
|
||||
multiple=""
|
||||
style="display: none;"
|
||||
|
||||
@@ -82,7 +82,6 @@ describe("<RecordingPlayback />", () => {
|
||||
it("disables play button while playback is decoding", async () => {
|
||||
const playback = new Playback(new ArrayBuffer(8));
|
||||
const component = getComponent({ playback });
|
||||
expect(getPlayButton(component)).toHaveAttribute("disabled");
|
||||
expect(getPlayButton(component)).toHaveAttribute("aria-disabled", "true");
|
||||
});
|
||||
|
||||
@@ -90,7 +89,6 @@ describe("<RecordingPlayback />", () => {
|
||||
const playback = new Playback(new ArrayBuffer(8));
|
||||
const component = getComponent({ playback });
|
||||
await flushPromises();
|
||||
expect(getPlayButton(component)).not.toHaveAttribute("disabled");
|
||||
expect(getPlayButton(component)).not.toHaveAttribute("aria-disabled", "true");
|
||||
});
|
||||
|
||||
@@ -110,7 +108,6 @@ describe("<RecordingPlayback />", () => {
|
||||
await playback.prepare();
|
||||
const component = getComponent({ playback });
|
||||
// playback already decoded, button is not disabled
|
||||
expect(getPlayButton(component)).not.toHaveAttribute("disabled");
|
||||
expect(getPlayButton(component)).not.toHaveAttribute("aria-disabled", "true");
|
||||
expect(component.container.querySelector(".text-warning")).toBeFalsy();
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user