From 594439222dd13eea20fb6a8f837fe82c8665db8b Mon Sep 17 00:00:00 2001 From: Kerry Date: Mon, 25 Jul 2022 12:43:41 +0200 Subject: [PATCH] Replace mask-images with svg components in MessageActionBar (#9088) * Use svg components in messageactionbar * highlight options button in pinned messages mock buttons --- res/css/structures/_MatrixChat.pcss | 4 +- res/css/views/messages/_MessageActionBar.pcss | 94 +++++-------------- .../right_panel/_PinnedMessagesCard.pcss | 5 +- res/css/views/rooms/_RoomSublist.pcss | 3 +- res/img/download.svg | 2 +- res/img/element-icons/collapse-message.svg | 2 +- res/img/element-icons/context-menu.svg | 6 +- res/img/element-icons/expand-message.svg | 2 +- res/img/element-icons/link.svg | 2 +- res/img/element-icons/message/thread.svg | 2 +- res/img/element-icons/retry.svg | 2 +- .../element-icons/room/message-bar/edit.svg | 4 +- .../element-icons/room/message-bar/emoji.svg | 2 +- .../element-icons/room/message-bar/reply.svg | 4 +- .../element-icons/room/message-bar/star.svg | 2 +- res/img/element-icons/trashcan.svg | 2 +- res/img/element-icons/view-in-room.svg | 2 +- .../views/messages/DownloadActionButton.tsx | 4 +- .../views/messages/MessageActionBar.tsx | 69 +++++++++----- .../views/right_panel/PinnedMessagesCard.tsx | 15 ++- src/components/views/rooms/EventTile.tsx | 14 ++- 21 files changed, 119 insertions(+), 123 deletions(-) diff --git a/res/css/structures/_MatrixChat.pcss b/res/css/structures/_MatrixChat.pcss index 9f1ce94b98..74d0f8fb4f 100644 --- a/res/css/structures/_MatrixChat.pcss +++ b/res/css/structures/_MatrixChat.pcss @@ -86,7 +86,9 @@ limitations under the License. // (IF there is NO margin on the leftPanel_wrapper) // The resizeHandle does not change the gap between the left panel and the room view: // the resizeHandle width is: - // 11px = 10px (padding) + 1px (width) and the total negative margin is -12px -> the handle requires no space + // 11px = 10px (padding) + 1px (width) + // and the total negative margin is -12px -> + // the handle requires no space // right: -6px left: -6px positions the element exactly on the edge of leftPanel. // left+=1 and right-=1 => resizeHandle moves 1px to the right closer to the center of the gap. // We want the handle to be in the middle of the gap so it is shifted by ($container-gap-width / 2) diff --git a/res/css/views/messages/_MessageActionBar.pcss b/res/css/views/messages/_MessageActionBar.pcss index 4aa44d1ad2..6ed2405d34 100644 --- a/res/css/views/messages/_MessageActionBar.pcss +++ b/res/css/views/messages/_MessageActionBar.pcss @@ -89,9 +89,20 @@ limitations under the License. } } - .mx_MessageActionBar_maskButton { + .mx_MessageActionBar_iconButton { + --MessageActionBar-icon-size: 18px; width: var(--MessageActionBar-size-button); height: var(--MessageActionBar-size-button); + color: $secondary-content; + display: flex; + align-items: center; + justify-content: center; + + svg { + height: var(--MessageActionBar-icon-size); + width: var(--MessageActionBar-icon-size); + flex: 0 0 var(--MessageActionBar-icon-size); + } &:disabled, &[disabled] { @@ -99,35 +110,11 @@ limitations under the License. opacity: .75; } - &::after { - content: ''; - position: absolute; - top: 0; - left: 0; - height: 100%; - width: 100%; - mask-size: 18px; - mask-repeat: no-repeat; - mask-position: center; - background-color: $secondary-content; - } - - &:hover::after { - background-color: $primary-content; - } - - &.mx_MessageActionBar_reactButton::after { - mask-image: url('$(res)/img/element-icons/room/message-bar/emoji.svg'); - } - - &.mx_MessageActionBar_replyButton::after { - mask-image: url('$(res)/img/element-icons/room/message-bar/reply.svg'); + &:hover { + color: $primary-content; } &.mx_MessageActionBar_threadButton { - &::after { - mask-image: url('$(res)/img/element-icons/message/thread.svg'); - } .mx_Indicator { background: $links; @@ -135,57 +122,22 @@ limitations under the License. } } - &.mx_MessageActionBar_favouriteButton::after { - mask-image: url('$(res)/img/element-icons/room/message-bar/star.svg'); - } - - &.mx_MessageActionBar_favouriteButton_fillstar::after { - background-color: var(--MessageActionBar-star-button-color); - } - - &.mx_MessageActionBar_editButton::after { - mask-image: url('$(res)/img/element-icons/room/message-bar/edit.svg'); - } - - &.mx_MessageActionBar_optionsButton::after { - mask-image: url('$(res)/img/element-icons/context-menu.svg'); - } - - &.mx_MessageActionBar_resendButton::after { - mask-image: url('$(res)/img/element-icons/retry.svg'); - } - - &.mx_MessageActionBar_cancelButton::after { - mask-image: url('$(res)/img/element-icons/trashcan.svg'); + &.mx_MessageActionBar_favouriteButton_fillstar { + color: var(--MessageActionBar-star-button-color); } &.mx_MessageActionBar_downloadButton { - &::after { - mask-size: 14px; - mask-image: url('$(res)/img/download.svg'); - } + --MessageActionBar-icon-size: 14px; - &.mx_MessageActionBar_downloadSpinnerButton::after { - background-color: transparent; // hide the download icon mask + &.mx_MessageActionBar_downloadSpinnerButton { + svg { + display: none; // hide the download icon + } } } - &.mx_MessageActionBar_expandMessageButton::after { - mask-size: 12px; - mask-image: url('$(res)/img/element-icons/expand-message.svg'); - } - - &.mx_MessageActionBar_collapseMessageButton::after { - mask-size: 12px; - mask-image: url('$(res)/img/element-icons/collapse-message.svg'); - } - - &.mx_MessageActionBar_viewInRoomButton::after { - mask-image: url('$(res)/img/element-icons/view-in-room.svg'); - } - - &.mx_MessageActionBar_copyLinkButton::after { - mask-image: url('$(res)/img/element-icons/link.svg'); + &.mx_MessageActionBar_expandCollapseMessageButton { + --MessageActionBar-icon-size: 12px; } } } diff --git a/res/css/views/right_panel/_PinnedMessagesCard.pcss b/res/css/views/right_panel/_PinnedMessagesCard.pcss index ac76cf6754..3c753f2d86 100644 --- a/res/css/views/right_panel/_PinnedMessagesCard.pcss +++ b/res/css/views/right_panel/_PinnedMessagesCard.pcss @@ -42,10 +42,7 @@ limitations under the License. background: var(--MessageActionBar-item-hover-background); border-radius: var(--MessageActionBar-item-hover-borderRadius); z-index: var(--MessageActionBar-item-hover-zIndex); - - &::after { - background-color: $primary-content; - } + color: $primary-content; } } diff --git a/res/css/views/rooms/_RoomSublist.pcss b/res/css/views/rooms/_RoomSublist.pcss index 5cd4d99673..84cc8d7618 100644 --- a/res/css/views/rooms/_RoomSublist.pcss +++ b/res/css/views/rooms/_RoomSublist.pcss @@ -213,7 +213,8 @@ limitations under the License. } &.mx_RoomSublist_resizeBox_forceExpanded .mx_RoomSublist_tiles { - // in this state the div can collapse its height entirely in Chromium, so prevent that by allowing overflow + // in this state the div can collapse its height entirely in Chromium, + // so prevent that by allowing overflow overflow: visible; // clear the min-height to make it not collapse entirely in a state with no active resizer min-height: unset; diff --git a/res/img/download.svg b/res/img/download.svg index d0ea090d8a..bdc8dd507b 100644 --- a/res/img/download.svg +++ b/res/img/download.svg @@ -5,7 +5,7 @@ Created with Sketch. - + diff --git a/res/img/element-icons/collapse-message.svg b/res/img/element-icons/collapse-message.svg index 91b0713f43..da8bfb76b6 100644 --- a/res/img/element-icons/collapse-message.svg +++ b/res/img/element-icons/collapse-message.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/res/img/element-icons/context-menu.svg b/res/img/element-icons/context-menu.svg index 76a28d50d0..1cededd2ad 100644 --- a/res/img/element-icons/context-menu.svg +++ b/res/img/element-icons/context-menu.svg @@ -1,5 +1,5 @@ - - - + + + diff --git a/res/img/element-icons/expand-message.svg b/res/img/element-icons/expand-message.svg index a1c5149718..c3abd0c471 100644 --- a/res/img/element-icons/expand-message.svg +++ b/res/img/element-icons/expand-message.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/res/img/element-icons/link.svg b/res/img/element-icons/link.svg index ab3d54b838..07dbdc0ccc 100644 --- a/res/img/element-icons/link.svg +++ b/res/img/element-icons/link.svg @@ -1,3 +1,3 @@ - + diff --git a/res/img/element-icons/message/thread.svg b/res/img/element-icons/message/thread.svg index cd1271b513..dc23d8c14a 100644 --- a/res/img/element-icons/message/thread.svg +++ b/res/img/element-icons/message/thread.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/res/img/element-icons/retry.svg b/res/img/element-icons/retry.svg index 09448d6458..54e9f9c580 100644 --- a/res/img/element-icons/retry.svg +++ b/res/img/element-icons/retry.svg @@ -1,3 +1,3 @@ - + diff --git a/res/img/element-icons/room/message-bar/edit.svg b/res/img/element-icons/room/message-bar/edit.svg index d4a7e8eaaf..3d823b165e 100644 --- a/res/img/element-icons/room/message-bar/edit.svg +++ b/res/img/element-icons/room/message-bar/edit.svg @@ -1,4 +1,4 @@ - - + + diff --git a/res/img/element-icons/room/message-bar/emoji.svg b/res/img/element-icons/room/message-bar/emoji.svg index 07fee5b834..d34a88ed50 100644 --- a/res/img/element-icons/room/message-bar/emoji.svg +++ b/res/img/element-icons/room/message-bar/emoji.svg @@ -1,3 +1,3 @@ - + diff --git a/res/img/element-icons/room/message-bar/reply.svg b/res/img/element-icons/room/message-bar/reply.svg index 9900d4d19d..c32848a0b0 100644 --- a/res/img/element-icons/room/message-bar/reply.svg +++ b/res/img/element-icons/room/message-bar/reply.svg @@ -1,4 +1,4 @@ - - + + diff --git a/res/img/element-icons/room/message-bar/star.svg b/res/img/element-icons/room/message-bar/star.svg index ecfeb242d6..73898d9a45 100644 --- a/res/img/element-icons/room/message-bar/star.svg +++ b/res/img/element-icons/room/message-bar/star.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/res/img/element-icons/trashcan.svg b/res/img/element-icons/trashcan.svg index 4106f0bd60..4d0c4a6065 100644 --- a/res/img/element-icons/trashcan.svg +++ b/res/img/element-icons/trashcan.svg @@ -1,3 +1,3 @@ - + diff --git a/res/img/element-icons/view-in-room.svg b/res/img/element-icons/view-in-room.svg index 27758b10f6..abaee191f4 100644 --- a/res/img/element-icons/view-in-room.svg +++ b/res/img/element-icons/view-in-room.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/components/views/messages/DownloadActionButton.tsx b/src/components/views/messages/DownloadActionButton.tsx index e9152579d7..2e092743e8 100644 --- a/src/components/views/messages/DownloadActionButton.tsx +++ b/src/components/views/messages/DownloadActionButton.tsx @@ -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 + { spinner } ; } diff --git a/src/components/views/messages/MessageActionBar.tsx b/src/components/views/messages/MessageActionBar.tsx index 4451d8d06a..9d51c61074 100644 --- a/src/components/views/messages/MessageActionBar.tsx +++ b/src/components/views/messages/MessageActionBar.tsx @@ -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 = ({ return - + > + + { contextMenu } ; }; @@ -144,7 +155,7 @@ const ReactButton: React.FC = ({ mxEvent, reactions, onFocusC return { openMenu(); @@ -157,7 +168,9 @@ const ReactButton: React.FC = ({ mxEvent, reactions, onFocusC inputRef={ref} onFocus={onFocus} tabIndex={isActive ? 0 : -1} - /> + > + + { contextMenu } ; @@ -209,8 +222,7 @@ const ReplyInThreadButton = ({ mxEvent }: IReplyInThreadButton) => { }; return
@@ -234,6 +246,7 @@ const ReplyInThreadButton = ({ mxEvent }: IReplyInThreadButton) => { onClick={onClick} > + { firstTimeSeeingThreads && !threadsEnabled && (
) } @@ -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} - />; + > + + ; }; interface IMessageActionBarProps { @@ -405,19 +420,23 @@ export default class MessageActionBar extends React.PureComponent); + > + + ); } const cancelSendingButton = ; + > + + ; const threadTooltipButton = ; @@ -431,11 +450,13 @@ export default class MessageActionBar extends React.PureComponent); + > + + ); // 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 + > + + )); } if (this.context.canReact) { @@ -494,9 +517,8 @@ export default class MessageActionBar extends React.PureComponent
@@ -512,7 +534,12 @@ export default class MessageActionBar extends React.PureComponent); + > + { this.props.isQuoteExpanded + ? + : + } + ); } // The menu button should be last, so dump it there. diff --git a/src/components/views/right_panel/PinnedMessagesCard.tsx b/src/components/views/right_panel/PinnedMessagesCard.tsx index 1c14828e70..cff65b0deb 100644 --- a/src/components/views/right_panel/PinnedMessagesCard.tsx +++ b/src/components/views/right_panel/PinnedMessagesCard.tsx @@ -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) => {
{ /* XXX: We reuse the classes for simplicity, but deliberately not the components for non-interactivity. */ }
-
-
-
+
+ +
+
+ +
+
+ +
{ _t("Nothing pinned, yet") } diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index 881366f408..95477a6e7f 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -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 {
+ > + + + > + + { msgOption } )