From 825d3f46fbaa90bf013809f953e6aa10e83d1f94 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 17 Oct 2024 10:53:34 +0100 Subject: [PATCH] Deduplicate icons using Compound Design Tokens Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- res/css/structures/_GenericDropdownMenu.pcss | 2 +- res/css/structures/_RoomStatusBar.pcss | 2 +- .../views/context_menus/_MessageContextMenu.pcss | 4 ++-- res/css/views/dialogs/_InviteDialog.pcss | 2 +- .../security/_AccessSecretStorageDialog.pcss | 2 +- res/css/views/elements/_AccessibleButton.pcss | 2 +- res/css/views/elements/_ImageView.pcss | 2 +- res/css/views/elements/_StyledCheckbox.pcss | 2 +- res/css/views/elements/_Validation.pcss | 2 +- res/css/views/messages/_RedactedBody.pcss | 2 +- res/css/views/right_panel/_ThreadPanel.pcss | 2 +- res/css/views/rooms/_MessageComposer.pcss | 2 +- .../views/rooms/_VoiceRecordComposerTile.pcss | 2 +- .../tabs/user/_SecurityUserSettingsTab.pcss | 2 +- .../LegacyCallView/_LegacyCallViewButtons.pcss | 2 +- res/img/compound/thread-16px.svg | 3 --- res/img/compound/user.svg | 7 ------- res/img/element-icons/trashcan.svg | 3 --- res/img/feather-customised/check.svg | 3 --- res/img/feather-customised/trash.custom.svg | 7 ------- res/img/feather-customised/warning-triangle.svg | 13 ------------- res/img/format/bold.svg | 3 --- res/img/format/code.svg | 7 ------- res/img/format/italics.svg | 3 --- res/img/format/quote.svg | 5 ----- res/img/format/strikethrough.svg | 6 ------ res/img/image-view/more.svg | 3 --- res/img/voip/call-view/more.svg | 3 --- src/components/structures/RoomStatusBar.tsx | 2 +- src/components/views/elements/Pill.tsx | 3 +-- .../views/messages/MessageActionBar.tsx | 16 +++++++++------- src/components/views/rooms/RoomKnocksBar.tsx | 3 +-- src/components/views/rooms/RoomTileSubtitle.tsx | 4 ++-- .../settings/tabs/room/PeopleRoomSettingsTab.tsx | 3 +-- src/vector/index.html | 2 +- 35 files changed, 32 insertions(+), 99 deletions(-) delete mode 100644 res/img/compound/thread-16px.svg delete mode 100644 res/img/compound/user.svg delete mode 100644 res/img/element-icons/trashcan.svg delete mode 100644 res/img/feather-customised/check.svg delete mode 100644 res/img/feather-customised/trash.custom.svg delete mode 100644 res/img/feather-customised/warning-triangle.svg delete mode 100644 res/img/format/bold.svg delete mode 100644 res/img/format/code.svg delete mode 100644 res/img/format/italics.svg delete mode 100644 res/img/format/quote.svg delete mode 100644 res/img/format/strikethrough.svg delete mode 100644 res/img/image-view/more.svg delete mode 100644 res/img/voip/call-view/more.svg diff --git a/res/css/structures/_GenericDropdownMenu.pcss b/res/css/structures/_GenericDropdownMenu.pcss index 7f7342416fe..89f2a002062 100644 --- a/res/css/structures/_GenericDropdownMenu.pcss +++ b/res/css/structures/_GenericDropdownMenu.pcss @@ -103,7 +103,7 @@ Please see LICENSE files in the repository root for full details. height: 12px; margin-left: -20px; margin-right: 8px; - mask-image: url("$(res)/img/feather-customised/check.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/check.svg"); mask-size: 100%; mask-repeat: no-repeat; background-color: $primary-content; diff --git a/res/css/structures/_RoomStatusBar.pcss b/res/css/structures/_RoomStatusBar.pcss index 2e5af46389c..b131009868b 100644 --- a/res/css/structures/_RoomStatusBar.pcss +++ b/res/css/structures/_RoomStatusBar.pcss @@ -118,7 +118,7 @@ Please see LICENSE files in the repository root for full details. } &.mx_RoomStatusBar_unsentCancelAllBtn::before { - mask-image: url("$(res)/img/element-icons/trashcan.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/delete.svg"); } &.mx_RoomStatusBar_unsentRetry { diff --git a/res/css/views/context_menus/_MessageContextMenu.pcss b/res/css/views/context_menus/_MessageContextMenu.pcss index 268280f08da..85b415ae2ba 100644 --- a/res/css/views/context_menus/_MessageContextMenu.pcss +++ b/res/css/views/context_menus/_MessageContextMenu.pcss @@ -57,7 +57,7 @@ Please see LICENSE files in the repository root for full details. } .mx_MessageContextMenu_iconRedact::before { - mask-image: url("$(res)/img/element-icons/trashcan.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/delete.svg"); } .mx_MessageContextMenu_iconResend::before { @@ -92,7 +92,7 @@ Please see LICENSE files in the repository root for full details. } .mx_MessageContextMenu_iconReply::before { - mask-image: url("$(res)/img/element-icons/room/message-bar/reply.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/reply.svg"); } .mx_MessageContextMenu_iconReplyInThread::before { diff --git a/res/css/views/dialogs/_InviteDialog.pcss b/res/css/views/dialogs/_InviteDialog.pcss index 7a3ca6bd3c4..753e4155cf6 100644 --- a/res/css/views/dialogs/_InviteDialog.pcss +++ b/res/css/views/dialogs/_InviteDialog.pcss @@ -351,7 +351,7 @@ Please see LICENSE files in the repository root for full details. height: 24px; grid-column: 1; grid-row: 1; - mask-image: url("$(res)/img/feather-customised/check.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/check.svg"); mask-size: 100%; mask-repeat: no-repeat; position: absolute; diff --git a/res/css/views/dialogs/security/_AccessSecretStorageDialog.pcss b/res/css/views/dialogs/security/_AccessSecretStorageDialog.pcss index 372b41042ba..0b42281e3ef 100644 --- a/res/css/views/dialogs/security/_AccessSecretStorageDialog.pcss +++ b/res/css/views/dialogs/security/_AccessSecretStorageDialog.pcss @@ -80,7 +80,7 @@ Please see LICENSE files in the repository root for full details. color: $accent; &::before { - mask-image: url("$(res)/img/feather-customised/check.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/check.svg"); background-color: $accent; } } diff --git a/res/css/views/elements/_AccessibleButton.pcss b/res/css/views/elements/_AccessibleButton.pcss index 3101520bd4c..27219d06b56 100644 --- a/res/css/views/elements/_AccessibleButton.pcss +++ b/res/css/views/elements/_AccessibleButton.pcss @@ -64,7 +64,7 @@ Please see LICENSE files in the repository root for full details. background-color: var(--cpd-color-bg-action-primary-rest); &::before { - mask-image: url("$(res)/img/feather-customised/check.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/check.svg"); } } diff --git a/res/css/views/elements/_ImageView.pcss b/res/css/views/elements/_ImageView.pcss index 2d48dea9941..d2355378a5f 100644 --- a/res/css/views/elements/_ImageView.pcss +++ b/res/css/views/elements/_ImageView.pcss @@ -129,7 +129,7 @@ $button-gap: 24px; } .mx_ImageView_button_more::before { - mask-image: url("$(res)/img/image-view/more.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg"); } .mx_ImageView_button_close { diff --git a/res/css/views/elements/_StyledCheckbox.pcss b/res/css/views/elements/_StyledCheckbox.pcss index 1ea3c4d3f3d..986889c6dc1 100644 --- a/res/css/views/elements/_StyledCheckbox.pcss +++ b/res/css/views/elements/_StyledCheckbox.pcss @@ -43,7 +43,7 @@ Please see LICENSE files in the repository root for full details. height: 100%; width: 100%; - mask-image: url("$(res)/img/feather-customised/check.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/check.svg"); mask-position: center; mask-size: 100%; mask-repeat: no-repeat; diff --git a/res/css/views/elements/_Validation.pcss b/res/css/views/elements/_Validation.pcss index 24953216df3..1f7c22ff05d 100644 --- a/res/css/views/elements/_Validation.pcss +++ b/res/css/views/elements/_Validation.pcss @@ -44,7 +44,7 @@ Please see LICENSE files in the repository root for full details. color: $accent; &::before { - mask-image: url("$(res)/img/feather-customised/check.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/check.svg"); background-color: $accent; } } diff --git a/res/css/views/messages/_RedactedBody.pcss b/res/css/views/messages/_RedactedBody.pcss index 65027ffb975..7939cc6d098 100644 --- a/res/css/views/messages/_RedactedBody.pcss +++ b/res/css/views/messages/_RedactedBody.pcss @@ -18,7 +18,7 @@ Please see LICENSE files in the repository root for full details. height: 14px; width: 14px; background-color: $icon-button-color; - mask-image: url("$(res)/img/feather-customised/trash.custom.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/delete.svg"); mask-repeat: no-repeat; mask-position: center; mask-size: contain; diff --git a/res/css/views/right_panel/_ThreadPanel.pcss b/res/css/views/right_panel/_ThreadPanel.pcss index c350a450ade..a9743d945b6 100644 --- a/res/css/views/right_panel/_ThreadPanel.pcss +++ b/res/css/views/right_panel/_ThreadPanel.pcss @@ -191,7 +191,7 @@ Please see LICENSE files in the repository root for full details. width: 12px; height: 12px; margin-right: 8px; - mask-image: url("$(res)/img/feather-customised/check.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/check.svg"); mask-size: 100%; mask-repeat: no-repeat; background-color: $primary-content; diff --git a/res/css/views/rooms/_MessageComposer.pcss b/res/css/views/rooms/_MessageComposer.pcss index 5e3e8b03035..af59295e512 100644 --- a/res/css/views/rooms/_MessageComposer.pcss +++ b/res/css/views/rooms/_MessageComposer.pcss @@ -277,7 +277,7 @@ Please see LICENSE files in the repository root for full details. } .mx_MessageComposer_buttonMenu::before { - mask-image: url("$(res)/img/image-view/more.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg"); } .mx_MessageComposer_sendMessage { diff --git a/res/css/views/rooms/_VoiceRecordComposerTile.pcss b/res/css/views/rooms/_VoiceRecordComposerTile.pcss index 92a06f93f01..9e51dbea6c2 100644 --- a/res/css/views/rooms/_VoiceRecordComposerTile.pcss +++ b/res/css/views/rooms/_VoiceRecordComposerTile.pcss @@ -35,7 +35,7 @@ Please see LICENSE files in the repository root for full details. background-color: $voice-record-icon-color; mask-repeat: no-repeat; mask-size: contain; - mask-image: url("$(res)/img/element-icons/trashcan.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/delete.svg"); } .mx_VoiceRecordComposerTile_uploadingState { diff --git a/res/css/views/settings/tabs/user/_SecurityUserSettingsTab.pcss b/res/css/views/settings/tabs/user/_SecurityUserSettingsTab.pcss index 94cc7d949b3..55052144cf0 100644 --- a/res/css/views/settings/tabs/user/_SecurityUserSettingsTab.pcss +++ b/res/css/views/settings/tabs/user/_SecurityUserSettingsTab.pcss @@ -35,6 +35,6 @@ Please see LICENSE files in the repository root for full details. top: 0; left: 0; background-color: $alert; - mask-image: url("$(res)/img/feather-customised/alert-triangle.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/warning.svg"); } } diff --git a/res/css/views/voip/LegacyCallView/_LegacyCallViewButtons.pcss b/res/css/views/voip/LegacyCallView/_LegacyCallViewButtons.pcss index d17e05bb05a..369527b79f6 100644 --- a/res/css/views/voip/LegacyCallView/_LegacyCallViewButtons.pcss +++ b/res/css/views/voip/LegacyCallView/_LegacyCallViewButtons.pcss @@ -161,7 +161,7 @@ Please see LICENSE files in the repository root for full details. } &.mx_LegacyCallViewButtons_button_more::before { - mask-image: url("$(res)/img/voip/call-view/more.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg"); } /* Stateless buttons */ diff --git a/res/img/compound/thread-16px.svg b/res/img/compound/thread-16px.svg deleted file mode 100644 index f1a678ebc9a..00000000000 --- a/res/img/compound/thread-16px.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/img/compound/user.svg b/res/img/compound/user.svg deleted file mode 100644 index fa8bb87cd1f..00000000000 --- a/res/img/compound/user.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/res/img/element-icons/trashcan.svg b/res/img/element-icons/trashcan.svg deleted file mode 100644 index 4d0c4a6065c..00000000000 --- a/res/img/element-icons/trashcan.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/img/feather-customised/check.svg b/res/img/feather-customised/check.svg deleted file mode 100644 index 85cd1965117..00000000000 --- a/res/img/feather-customised/check.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/img/feather-customised/trash.custom.svg b/res/img/feather-customised/trash.custom.svg deleted file mode 100644 index dc1985ddb2b..00000000000 --- a/res/img/feather-customised/trash.custom.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/res/img/feather-customised/warning-triangle.svg b/res/img/feather-customised/warning-triangle.svg deleted file mode 100644 index 4d7bfe0798e..00000000000 --- a/res/img/feather-customised/warning-triangle.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - - - diff --git a/res/img/format/bold.svg b/res/img/format/bold.svg deleted file mode 100644 index 634d735031e..00000000000 --- a/res/img/format/bold.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/img/format/code.svg b/res/img/format/code.svg deleted file mode 100644 index 0a29bcd7bdc..00000000000 --- a/res/img/format/code.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/res/img/format/italics.svg b/res/img/format/italics.svg deleted file mode 100644 index 841afadffd8..00000000000 --- a/res/img/format/italics.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/img/format/quote.svg b/res/img/format/quote.svg deleted file mode 100644 index 82d34033148..00000000000 --- a/res/img/format/quote.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/res/img/format/strikethrough.svg b/res/img/format/strikethrough.svg deleted file mode 100644 index fc02b0aae21..00000000000 --- a/res/img/format/strikethrough.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/res/img/image-view/more.svg b/res/img/image-view/more.svg deleted file mode 100644 index 4f5fa6f9b93..00000000000 --- a/res/img/image-view/more.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/img/voip/call-view/more.svg b/res/img/voip/call-view/more.svg deleted file mode 100644 index af15cf16304..00000000000 --- a/res/img/voip/call-view/more.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/components/structures/RoomStatusBar.tsx b/src/components/structures/RoomStatusBar.tsx index a3f8ac51653..bd236f2286a 100644 --- a/src/components/structures/RoomStatusBar.tsx +++ b/src/components/structures/RoomStatusBar.tsx @@ -17,8 +17,8 @@ import { SyncState, SyncStateData, } from "matrix-js-sdk/src/matrix"; +import { WarningIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; -import { Icon as WarningIcon } from "../../../res/img/feather-customised/warning-triangle.svg"; import { _t, _td } from "../../languageHandler"; import Resend from "../../Resend"; import dis from "../../dispatcher/dispatcher"; diff --git a/src/components/views/elements/Pill.tsx b/src/components/views/elements/Pill.tsx index 12cec19a425..909f16ef251 100644 --- a/src/components/views/elements/Pill.tsx +++ b/src/components/views/elements/Pill.tsx @@ -10,7 +10,7 @@ import React, { ReactElement } from "react"; import classNames from "classnames"; import { Room, RoomMember } from "matrix-js-sdk/src/matrix"; import { Tooltip } from "@vector-im/compound-web"; -import LinkIcon from "@vector-im/compound-design-tokens/assets/web/icons/link"; +import { LinkIcon, UserIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; import { MatrixClientPeg } from "../../../MatrixClientPeg"; import MatrixClientContext from "../../../contexts/MatrixClientContext"; @@ -18,7 +18,6 @@ import { usePermalink } from "../../../hooks/usePermalink"; import RoomAvatar from "../avatars/RoomAvatar"; import MemberAvatar from "../avatars/MemberAvatar"; import { _t } from "../../../languageHandler"; -import { Icon as UserIcon } from "../../../../res/img/compound/user.svg"; export enum PillType { UserMention = "TYPE_USER_MENTION", diff --git a/src/components/views/messages/MessageActionBar.tsx b/src/components/views/messages/MessageActionBar.tsx index a38a26ecb57..ddf637dee26 100644 --- a/src/components/views/messages/MessageActionBar.tsx +++ b/src/components/views/messages/MessageActionBar.tsx @@ -21,16 +21,18 @@ import { EventType, } from "matrix-js-sdk/src/matrix"; import classNames from "classnames"; -import PinIcon from "@vector-im/compound-design-tokens/assets/web/icons/pin"; -import UnpinIcon from "@vector-im/compound-design-tokens/assets/web/icons/unpin"; -import ContextMenuIcon from "@vector-im/compound-design-tokens/assets/web/icons/overflow-horizontal"; +import { + PinIcon, + UnpinIcon, + OverflowHorizontalIcon, + ReplyIcon, + DeleteIcon, +} from "@vector-im/compound-design-tokens/assets/web/icons"; 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 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/matrix"; @@ -130,7 +132,7 @@ const OptionsButton: React.FC = ({ tabIndex={isActive ? 0 : -1} placement="left" > - + {contextMenu} @@ -454,7 +456,7 @@ export default class MessageActionBar extends React.PureComponent - + ); diff --git a/src/components/views/rooms/RoomKnocksBar.tsx b/src/components/views/rooms/RoomKnocksBar.tsx index 9bffe6c6540..0ff9ce3e275 100644 --- a/src/components/views/rooms/RoomKnocksBar.tsx +++ b/src/components/views/rooms/RoomKnocksBar.tsx @@ -9,9 +9,8 @@ Please see LICENSE files in the repository root for full details. import { EventTimeline, JoinRule, MatrixError, Room, RoomStateEvent } from "matrix-js-sdk/src/matrix"; import { KnownMembership } from "matrix-js-sdk/src/types"; import React, { ReactElement, ReactNode, useCallback, useState, VFC } from "react"; -import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close"; +import { CloseIcon, CheckIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; -import { Icon as CheckIcon } from "../../../../res/img/feather-customised/check.svg"; import dis from "../../../dispatcher/dispatcher"; import { useTypedEventEmitterState } from "../../../hooks/useEventEmitter"; import { _t } from "../../../languageHandler"; diff --git a/src/components/views/rooms/RoomTileSubtitle.tsx b/src/components/views/rooms/RoomTileSubtitle.tsx index 2295fbe6a07..ea4a96d2593 100644 --- a/src/components/views/rooms/RoomTileSubtitle.tsx +++ b/src/components/views/rooms/RoomTileSubtitle.tsx @@ -8,12 +8,12 @@ Please see LICENSE files in the repository root for full details. import React from "react"; import classNames from "classnames"; +import { ThreadsIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; import { MessagePreview } from "../../../stores/room-list/MessagePreviewStore"; import { Call } from "../../../models/Call"; import { RoomTileCallSummary } from "./RoomTileCallSummary"; import { VoiceBroadcastRoomSubtitle } from "../../../voice-broadcast"; -import { Icon as ThreadIcon } from "../../../../res/img/compound/thread-16px.svg"; interface Props { call: Call | null; @@ -49,7 +49,7 @@ export const RoomTileSubtitle: React.FC = ({ "mx_RoomTile_subtitle--thread-reply": messagePreview.isThreadReply, }); - const icon = messagePreview.isThreadReply ? : null; + const icon = messagePreview.isThreadReply ? : null; return (
diff --git a/src/components/views/settings/tabs/room/PeopleRoomSettingsTab.tsx b/src/components/views/settings/tabs/room/PeopleRoomSettingsTab.tsx index 8de8bad7e7a..768d35890a2 100644 --- a/src/components/views/settings/tabs/room/PeopleRoomSettingsTab.tsx +++ b/src/components/views/settings/tabs/room/PeopleRoomSettingsTab.tsx @@ -9,9 +9,8 @@ Please see LICENSE files in the repository root for full details. import { EventTimeline, MatrixError, Room, RoomMember, RoomStateEvent } from "matrix-js-sdk/src/matrix"; import { KnownMembership } from "matrix-js-sdk/src/types"; import React, { useCallback, useState, VFC } from "react"; -import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close"; +import { CloseIcon, CheckIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; -import { Icon as CheckIcon } from "../../../../../../res/img/feather-customised/check.svg"; import { formatRelativeTime } from "../../../../../DateUtils"; import { useTypedEventEmitterState } from "../../../../../hooks/useEventEmitter"; import { _t } from "../../../../../languageHandler"; diff --git a/src/vector/index.html b/src/vector/index.html index 3c4d51dc41d..0c21a0791b6 100644 --- a/src/vector/index.html +++ b/src/vector/index.html @@ -74,7 +74,7 @@ - +