imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Replace mask-images with svg components in MessageActionBar (#9088)

Browse source 
* Use svg components in messageactionbar

* highlight options button in pinned messages mock buttons
This commit is contained in:
Kerry 2022-07-25 12:43:41 +02:00 • committed by GitHub
parent bc30713b5e
commit 594439222d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
21 changed files with 119 additions and 123 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/components/views/messages/DownloadActionButton.tsx
View file

@ -18,6 +18,7 @@ import { MatrixEvent } from "matrix-js-sdk/src/matrix";
import React from "react";
import classNames from "classnames";
import { Icon as DownloadIcon } from "../../../../res/img/download.svg";
import { MediaEventHelper } from "../../../utils/MediaEventHelper";
import { RovingAccessibleTooltipButton } from "../../../accessibility/RovingTabIndex";
import Spinner from "../elements/Spinner";
@ -85,7 +86,7 @@ export default class DownloadActionButton extends React.PureComponent<IProps, IS
}
const classes = classNames({
'mx_MessageActionBar_maskButton': true,
'mx_MessageActionBar_iconButton': true,
'mx_MessageActionBar_downloadButton': true,
'mx_MessageActionBar_downloadSpinnerButton': !!spinner,
});
@ -96,6 +97,7 @@ export default class DownloadActionButton extends React.PureComponent<IProps, IS
onClick={this.onDownloadClick}
disabled={!!spinner}
>
<DownloadIcon />
{ spinner }
</RovingAccessibleTooltipButton>;
}

69
src/components/views/messages/MessageActionBar.tsx
View file

@ -23,6 +23,16 @@ import { MsgType, RelationType } from 'matrix-js-sdk/src/@types/event';
import { Thread } from 'matrix-js-sdk/src/models/thread';
import { M_BEACON_INFO } from 'matrix-js-sdk/src/@types/beacon';
import { Icon as ContextMenuIcon } from '../../../../res/img/element-icons/context-menu.svg';
import { Icon as EditIcon } from '../../../../res/img/element-icons/room/message-bar/edit.svg';
import { Icon as EmojiIcon } from '../../../../res/img/element-icons/room/message-bar/emoji.svg';
import { Icon as ResendIcon } from '../../../../res/img/element-icons/retry.svg';
import { Icon as ThreadIcon } from '../../../../res/img/element-icons/message/thread.svg';
import { Icon as TrashcanIcon } from '../../../../res/img/element-icons/trashcan.svg';
import { Icon as StarIcon } from '../../../../res/img/element-icons/room/message-bar/star.svg';
import { Icon as ReplyIcon } from '../../../../res/img/element-icons/room/message-bar/reply.svg';
import { Icon as ExpandMessageIcon } from '../../../../res/img/element-icons/expand-message.svg';
import { Icon as CollapseMessageIcon } from '../../../../res/img/element-icons/collapse-message.svg';
import type { Relations } from 'matrix-js-sdk/src/models/relations';
import { _t } from '../../../languageHandler';
import dis, { defaultDispatcher } from '../../../dispatcher/dispatcher';
@ -108,15 +118,16 @@ const OptionsButton: React.FC<IOptionsButtonProps> = ({
return <React.Fragment>
<ContextMenuTooltipButton
className="mx_MessageActionBar_maskButton mx_MessageActionBar_optionsButton"
className="mx_MessageActionBar_iconButton mx_MessageActionBar_optionsButton"
title={_t("Options")}
onClick={onOptionsClick}
isExpanded={menuDisplayed}
inputRef={ref}
onFocus={onFocus}
tabIndex={isActive ? 0 : -1}
/>
>
<ContextMenuIcon />
</ContextMenuTooltipButton>
{ contextMenu }
</React.Fragment>;
};
@ -144,7 +155,7 @@ const ReactButton: React.FC<IReactButtonProps> = ({ mxEvent, reactions, onFocusC
return <React.Fragment>
<ContextMenuTooltipButton
className="mx_MessageActionBar_maskButton mx_MessageActionBar_reactButton"
className="mx_MessageActionBar_iconButton"
title={_t("React")}
onClick={() => {
openMenu();
@ -157,7 +168,9 @@ const ReactButton: React.FC<IReactButtonProps> = ({ mxEvent, reactions, onFocusC
inputRef={ref}
onFocus={onFocus}
tabIndex={isActive ? 0 : -1}
/>
>
<EmojiIcon />
</ContextMenuTooltipButton>
{ contextMenu }
</React.Fragment>;
@ -209,8 +222,7 @@ const ReplyInThreadButton = ({ mxEvent }: IReplyInThreadButton) => {
};
return <RovingAccessibleTooltipButton
className="mx_MessageActionBar_maskButton mx_MessageActionBar_threadButton"
className="mx_MessageActionBar_iconButton mx_MessageActionBar_threadButton"
disabled={hasARelation}
tooltip={<>
<div className="mx_Tooltip_title">
@ -234,6 +246,7 @@ const ReplyInThreadButton = ({ mxEvent }: IReplyInThreadButton) => {
onClick={onClick}
>
<ThreadIcon />
{ firstTimeSeeingThreads && !threadsEnabled && (
<div className="mx_Indicator" />
) }
@ -248,7 +261,7 @@ const FavouriteButton = ({ mxEvent }: IFavouriteButtonProp) => {
const { isFavourite, toggleFavourite } = useFavouriteMessages();
const eventId = mxEvent.getId();
const classes = classNames("mx_MessageActionBar_maskButton mx_MessageActionBar_favouriteButton", {
const classes = classNames("mx_MessageActionBar_iconButton mx_MessageActionBar_favouriteButton", {
'mx_MessageActionBar_favouriteButton_fillstar': isFavourite(eventId),
});
@ -257,7 +270,9 @@ const FavouriteButton = ({ mxEvent }: IFavouriteButtonProp) => {
title={_t("Favourite")}
onClick={() => toggleFavourite(eventId)}
data-testid={eventId}
/>;
>
<StarIcon />
</RovingAccessibleTooltipButton>;
};
interface IMessageActionBarProps {
@ -405,19 +420,23 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
const toolbarOpts = [];
if (canEditContent(this.props.mxEvent)) {
toolbarOpts.push(<RovingAccessibleTooltipButton
className="mx_MessageActionBar_maskButton mx_MessageActionBar_editButton"
className="mx_MessageActionBar_iconButton"
title={_t("Edit")}
onClick={this.onEditClick}
key="edit"
/>);
>
<EditIcon />
</RovingAccessibleTooltipButton>);
}
const cancelSendingButton = <RovingAccessibleTooltipButton
className="mx_MessageActionBar_maskButton mx_MessageActionBar_cancelButton"
className="mx_MessageActionBar_iconButton"
title={_t("Delete")}
onClick={this.onCancelClick}
key="cancel"
/>;
>
<TrashcanIcon />
</RovingAccessibleTooltipButton>;
const threadTooltipButton = <ReplyInThreadButton mxEvent={this.props.mxEvent} key="reply_thread" />;
@ -431,11 +450,13 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
// The resend button needs to appear ahead of the edit button, so insert to the
// start of the opts
toolbarOpts.splice(0, 0, <RovingAccessibleTooltipButton
className="mx_MessageActionBar_maskButton mx_MessageActionBar_resendButton"
className="mx_MessageActionBar_iconButton"
title={_t("Retry")}
onClick={this.onResendClick}
key="resend"
/>);
>
<ResendIcon />
</RovingAccessibleTooltipButton>);
// The delete button should appear last, so we can just drop it at the end
toolbarOpts.push(cancelSendingButton);
@ -451,11 +472,13 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
}
toolbarOpts.splice(0, 0, (
<RovingAccessibleTooltipButton
className="mx_MessageActionBar_maskButton mx_MessageActionBar_replyButton"
className="mx_MessageActionBar_iconButton"
title={_t("Reply")}
onClick={this.onReplyClick}
key="reply"
/>
>
<ReplyIcon />
</RovingAccessibleTooltipButton>
));
}
if (this.context.canReact) {
@ -494,9 +517,8 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
if (this.props.isQuoteExpanded !== undefined && shouldDisplayReply(this.props.mxEvent)) {
const expandClassName = classNames({
'mx_MessageActionBar_maskButton': true,
'mx_MessageActionBar_expandMessageButton': !this.props.isQuoteExpanded,
'mx_MessageActionBar_collapseMessageButton': this.props.isQuoteExpanded,
'mx_MessageActionBar_iconButton': true,
'mx_MessageActionBar_expandCollapseMessageButton': true,
});
const tooltip = <>
<div className="mx_Tooltip_title">
@ -512,7 +534,12 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
tooltip={tooltip}
onClick={this.props.toggleThreadExpanded}
key="expand"
/>);
>
{ this.props.isQuoteExpanded
? <CollapseMessageIcon />
: <ExpandMessageIcon />
}
</RovingAccessibleTooltipButton>);
}
// The menu button should be last, so dump it there.

15
src/components/views/right_panel/PinnedMessagesCard.tsx
View file

@ -21,6 +21,9 @@ import { EventType, RelationType } from 'matrix-js-sdk/src/@types/event';
import { logger } from "matrix-js-sdk/src/logger";
import { RoomStateEvent } from "matrix-js-sdk/src/models/room-state";
import { Icon as ContextMenuIcon } from '../../../../res/img/element-icons/context-menu.svg';
import { Icon as EmojiIcon } from "../../../../res/img/element-icons/room/message-bar/emoji.svg";
import { Icon as ReplyIcon } from '../../../../res/img/element-icons/room/message-bar/reply.svg';
import { _t } from "../../../languageHandler";
import BaseCard from "./BaseCard";
import Spinner from "../elements/Spinner";
@ -162,9 +165,15 @@ const PinnedMessagesCard = ({ room, onClose, permalinkCreator }: IProps) => {
<div className="mx_PinnedMessagesCard_empty">
{ /* XXX: We reuse the classes for simplicity, but deliberately not the components for non-interactivity. */ }
<div className="mx_MessageActionBar mx_PinnedMessagesCard_MessageActionBar">
<div className="mx_MessageActionBar_maskButton mx_MessageActionBar_reactButton" />
<div className="mx_MessageActionBar_maskButton mx_MessageActionBar_replyButton" />
<div className="mx_MessageActionBar_maskButton mx_MessageActionBar_optionsButton" />
<div className="mx_MessageActionBar_iconButton">
<EmojiIcon />
</div>
<div className="mx_MessageActionBar_iconButton">
<ReplyIcon />
</div>
<div className="mx_MessageActionBar_iconButton mx_MessageActionBar_optionsButton">
<ContextMenuIcon />
</div>
</div>
<Heading size="h4" className="mx_PinnedMessagesCard_empty_header">{ _t("Nothing pinned, yet") }</Heading>

14
src/components/views/rooms/EventTile.tsx
View file

@ -28,6 +28,8 @@ import { CallErrorCode } from "matrix-js-sdk/src/webrtc/call";
import { CryptoEvent } from "matrix-js-sdk/src/crypto";
import { UserTrustLevel } from 'matrix-js-sdk/src/crypto/CrossSigning';
import { Icon as LinkIcon } from '../../../../res/img/element-icons/link.svg';
import { Icon as ViewInRoomIcon } from '../../../../res/img/element-icons/view-in-room.svg';
import ReplyChain from "../elements/ReplyChain";
import { _t } from '../../../languageHandler';
import dis from '../../../dispatcher/dispatcher';
@ -1384,17 +1386,21 @@ export class UnwrappedEventTile extends React.Component<IProps, IState> {
</div>
<Toolbar className="mx_MessageActionBar" aria-label={_t("Message Actions")} aria-live="off">
<RovingAccessibleTooltipButton
className="mx_MessageActionBar_maskButton mx_MessageActionBar_viewInRoomButton"
className="mx_MessageActionBar_iconButton"
onClick={this.viewInRoom}
title={_t("View in room")}
key="view_in_room"
/>
>
<ViewInRoomIcon />
</RovingAccessibleTooltipButton>
<RovingAccessibleTooltipButton
className="mx_MessageActionBar_maskButton mx_MessageActionBar_copyLinkButton"
className="mx_MessageActionBar_iconButton"
onClick={this.copyLinkToThread}
title={_t("Copy link to thread")}
key="copy_link_to_thread"
/>
>
<LinkIcon />
</RovingAccessibleTooltipButton>
</Toolbar>
{ msgOption }
</>)