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

Deduplicate more icons using Compound Design Tokens (#132)

Browse source 
* Deduplicate more icons using Compound Design Tokens

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

* Iterate

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

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
(cherry picked from commit 7448bd52e2ff354917d6e5f769ca052961c13aa0)
This commit is contained in:
Michael Telatynski 2024-10-15 11:19:06 +01:00
parent a22e9e8f13
commit 146968da2c
No known key found for this signature in database
GPG key ID: A2B008A5F49F5D0D
68 changed files with 358 additions and 210 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/views/context_menus/KebabContextMenu.tsx
View file

@ -7,8 +7,8 @@ Please see LICENSE files in the repository root for full details.
*/
import React from "react";
import ContextMenuIcon from "@vector-im/compound-design-tokens/assets/web/icons/overflow-horizontal";
import { Icon as ContextMenuIcon } from "../../../../res/img/element-icons/context-menu.svg";
import { ChevronFace, ContextMenuButton, MenuProps, useContextMenu } from "../../structures/ContextMenu";
import { ButtonProps } from "../elements/AccessibleButton";
import IconizedContextMenu, { IconizedContextMenuOptionList } from "./IconizedContextMenu";

6
src/components/views/dialogs/ForwardDialog.tsx
View file

@ -279,7 +279,11 @@ const ForwardDialog: React.FC<IProps> = ({ matrixClient: cli, event, permalinkCr
<EntityTile
className="mx_EntityTile_ellipsis"
avatarJsx={
<BaseAvatar url={require("../../../../res/img/ellipsis.svg").default} name="..." size="36px" />
<BaseAvatar
url={require("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg").default}
name="..."
size="36px"
/>
}
name={text}
showPresence={false}

4
src/components/views/elements/AppTile.tsx
View file

@ -16,6 +16,7 @@ import { Room, RoomEvent } from "matrix-js-sdk/src/matrix";
import { KnownMembership } from "matrix-js-sdk/src/types";
import { logger } from "matrix-js-sdk/src/logger";
import { ApprovalOpts, WidgetLifecycle } from "@matrix-org/react-sdk-module-api/lib/lifecycles/WidgetLifecycle";
import EllipsisIcon from "@vector-im/compound-design-tokens/assets/web/icons/overflow-horizontal";
import AccessibleButton from "./AccessibleButton";
import { _t } from "../../../languageHandler";
@ -37,7 +38,6 @@ import { Icon as CollapseIcon } from "../../../../res/img/element-icons/minimise
import { Icon as MaximiseIcon } from "../../../../res/img/element-icons/maximise-expand.svg";
import { Icon as MinimiseIcon } from "../../../../res/img/element-icons/minus-button.svg";
import { Icon as PopoutIcon } from "../../../../res/img/feather-customised/widget/external-link.svg";
import { Icon as MenuIcon } from "../../../../res/img/element-icons/room/ellipsis.svg";
import { Container, WidgetLayoutStore } from "../../../stores/widgets/WidgetLayoutStore";
import { OwnProfileStore } from "../../../stores/OwnProfileStore";
import { UPDATE_EVENT } from "../../../stores/AsyncStore";
@ -806,7 +806,7 @@ export default class AppTile extends React.Component<IProps, IState> {
ref={this.contextMenuButton}
onClick={this.onContextMenuClick}
>
<MenuIcon className="mx_Icon mx_Icon_12" />
<EllipsisIcon className="mx_Icon mx_Icon_12" />
</ContextMenuButton>
)}
</span>

2
src/components/views/elements/FilterDropdown.tsx
View file

@ -8,8 +8,8 @@ Please see LICENSE files in the repository root for full details.
import React, { ReactElement } from "react";
import classNames from "classnames";
import CheckmarkIcon from "@vector-im/compound-design-tokens/assets/web/icons/check";
import { Icon as CheckmarkIcon } from "../../../../res/img/element-icons/roomlist/checkmark.svg";
import Dropdown, { DropdownProps } from "./Dropdown";
import { NonEmptyArray } from "../../../@types/common";

4
src/components/views/elements/Tag.tsx
View file

@ -7,9 +7,9 @@ Please see LICENSE files in the repository root for full details.
*/
import React, { DetailedHTMLProps, HTMLAttributes } from "react";
import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";
import AccessibleButton from "./AccessibleButton";
import { Icon as CancelRounded } from "../../../../res/img/element-icons/cancel-rounded.svg";
interface IProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
icon?: () => JSX.Element;
@ -30,7 +30,7 @@ export const Tag: React.FC<IProps> = ({ icon, label, onDeleteClick, disabled = f
onClick={onDeleteClick}
disabled={disabled}
>
<CancelRounded />
<CloseIcon />
</AccessibleButton>
)}
</div>

4
src/components/views/location/ShareDialogButtons.tsx
View file

@ -7,10 +7,10 @@ Please see LICENSE files in the repository root for full details.
*/
import React from "react";
import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";
import BackIcon from "@vector-im/compound-design-tokens/assets/web/icons/chevron-left";
import AccessibleButton from "../elements/AccessibleButton";
import { Icon as BackIcon } from "../../../../res/img/element-icons/caret-left.svg";
import { Icon as CloseIcon } from "../../../../res/img/element-icons/cancel-rounded.svg";
import { _t } from "../../../languageHandler";
interface Props {

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

@ -23,8 +23,8 @@ import {
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 { 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";

2
src/components/views/pips/WidgetPip.tsx
View file

@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.
import React, { FC, MutableRefObject, useCallback, useMemo } from "react";
import { Room, RoomEvent } from "matrix-js-sdk/src/matrix";
import BackIcon from "@vector-im/compound-design-tokens/assets/web/icons/arrow-left";
import PersistentApp from "../elements/PersistentApp";
import defaultDispatcher from "../../../dispatcher/dispatcher";
@ -19,7 +20,6 @@ import { Container, WidgetLayoutStore } from "../../../stores/widgets/WidgetLayo
import { useTypedEventEmitterState } from "../../../hooks/useEventEmitter";
import Toolbar from "../../../accessibility/Toolbar";
import { RovingAccessibleButton } from "../../../accessibility/RovingTabIndex";
import { Icon as BackIcon } from "../../../../res/img/element-icons/back.svg";
import { Icon as HangupIcon } from "../../../../res/img/element-icons/call/hangup.svg";
import { _t } from "../../../languageHandler";
import { WidgetType } from "../../../widgets/WidgetType";

2
src/components/views/polls/pollHistory/PollDetailHeader.tsx
View file

@ -7,8 +7,8 @@ Please see LICENSE files in the repository root for full details.
*/
import React from "react";
import LeftCaretIcon from "@vector-im/compound-design-tokens/assets/web/icons/chevron-left";
import { Icon as LeftCaretIcon } from "../../../../../res/img/element-icons/caret-left.svg";
import { _t } from "../../../../languageHandler";
import AccessibleButton from "../../elements/AccessibleButton";
import { PollHistoryFilter } from "./types";

11
src/components/views/rooms/LinkPreviewGroup.tsx
View file

@ -9,6 +9,7 @@ Please see LICENSE files in the repository root for full details.
import React, { useContext, useEffect } from "react";
import { MatrixEvent, MatrixError, IPreviewUrlResponse, MatrixClient } from "matrix-js-sdk/src/matrix";
import { logger } from "matrix-js-sdk/src/logger";
import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";
import { useStateToggle } from "../../../hooks/useStateToggle";
import LinkPreviewWidget from "./LinkPreviewWidget";
@ -66,15 +67,7 @@ const LinkPreviewGroup: React.FC<IProps> = ({ links, mxEvent, onCancelClick, onH
onClick={onCancelClick}
aria-label={_t("timeline|url_preview|close")}
>
<img
className="mx_filterFlipColor"
alt=""
role="presentation"
src={require("../../../../res/img/cancel.svg").default}
width="18"
height="18"
draggable="false"
/>
<CloseIcon width="20px" height="20px" />
</AccessibleButton>
) : undefined}
</LinkPreviewWidget>

6
src/components/views/rooms/MemberList.tsx
View file

@ -238,7 +238,11 @@ export default class MemberList extends React.Component<IProps, IState> {
<EntityTile
className="mx_EntityTile_ellipsis"
avatarJsx={
<BaseAvatar url={require("../../../../res/img/ellipsis.svg").default} name="..." size="36px" />
<BaseAvatar
url={require("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg").default}
name="..."
size="36px"
/>
}
name={text}
showPresence={false}

2
src/components/views/spaces/QuickSettingsButton.tsx
View file

@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.
import React from "react";
import classNames from "classnames";
import EllipsisIcon from "@vector-im/compound-design-tokens/assets/web/icons/overflow-horizontal";
import { _t } from "../../../languageHandler";
import ContextMenu, { alwaysAboveRightOf, ChevronFace, useContextMenu } from "../../structures/ContextMenu";
@ -21,7 +22,6 @@ import { Action } from "../../../dispatcher/actions";
import { UserTab } from "../dialogs/UserTab";
import QuickThemeSwitcher from "./QuickThemeSwitcher";
import { Icon as PinUprightIcon } from "../../../../res/img/element-icons/room/pin-upright.svg";
import { Icon as EllipsisIcon } from "../../../../res/img/element-icons/room/ellipsis.svg";
import { Icon as MembersIcon } from "../../../../res/img/element-icons/room/members.svg";
import { Icon as FavoriteIcon } from "../../../../res/img/element-icons/roomlist/favorite.svg";
import Modal from "../../../Modal";