Deduplicate icons using Compound (#28239)

* Deduplicate icons using Compound

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

* Update snapshots

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

* Update e2e tests

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>
This commit is contained in:
Michael Telatynski 2024-10-21 11:36:31 +01:00 committed by GitHub
parent c278d2f31e
commit 02e0aca98d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
48 changed files with 156 additions and 203 deletions

View file

@ -16,7 +16,12 @@ 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 {
OverflowHorizontalIcon,
MinusIcon,
ExpandIcon,
CollapseIcon,
} from "@vector-im/compound-design-tokens/assets/web/icons";
import AccessibleButton from "./AccessibleButton";
import { _t } from "../../../languageHandler";
@ -34,10 +39,7 @@ import { showContextMenu, WidgetContextMenu } from "../context_menus/WidgetConte
import WidgetAvatar from "../avatars/WidgetAvatar";
import LegacyCallHandler from "../../../LegacyCallHandler";
import { IApp, isAppWidget } from "../../../stores/WidgetStore";
import { Icon as CollapseIcon } from "../../../../res/img/element-icons/minimise-collapse.svg";
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 PopoutIcon } from "../../../../res/img/external-link.svg";
import { Container, WidgetLayoutStore } from "../../../stores/widgets/WidgetLayoutStore";
import { OwnProfileStore } from "../../../stores/OwnProfileStore";
import { UPDATE_EVENT } from "../../../stores/AsyncStore";
@ -762,7 +764,7 @@ export default class AppTile extends React.Component<IProps, IState> {
{isMaximised ? (
<CollapseIcon className="mx_Icon mx_Icon_12" />
) : (
<MaximiseIcon className="mx_Icon mx_Icon_12" />
<ExpandIcon className="mx_Icon mx_Icon_12" />
)}
</AccessibleButton>,
);
@ -774,7 +776,7 @@ export default class AppTile extends React.Component<IProps, IState> {
title={_t("action|minimise")}
onClick={this.onMinimiseClicked}
>
<MinimiseIcon className="mx_Icon mx_Icon_12" />
<MinusIcon className="mx_Icon mx_Icon_16" />
</AccessibleButton>,
);
}
@ -809,7 +811,7 @@ export default class AppTile extends React.Component<IProps, IState> {
ref={this.contextMenuButton}
onClick={this.onContextMenuClick}
>
<EllipsisIcon className="mx_Icon mx_Icon_12" />
<OverflowHorizontalIcon className="mx_Icon mx_Icon_12" />
</ContextMenuButton>
)}
</span>

View file

@ -8,11 +8,10 @@ Please see LICENSE files in the repository root for full details.
import React from "react";
import * as maplibregl from "maplibre-gl";
import { PlusIcon, MinusIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
import { _t } from "../../../languageHandler";
import AccessibleButton from "../elements/AccessibleButton";
import { Icon as PlusIcon } from "../../../../res/img/element-icons/plus-button.svg";
import { Icon as MinusIcon } from "../../../../res/img/element-icons/minus-button.svg";
interface Props {
map: maplibregl.Map;

View file

@ -9,6 +9,7 @@ Please see LICENSE files in the repository root for full details.
import React from "react";
import { MatrixEvent, MatrixEventEvent } from "matrix-js-sdk/src/matrix";
import classNames from "classnames";
import { CollapseIcon, ExpandIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
import { MatrixClientPeg } from "../../../MatrixClientPeg";
import { _t } from "../../../languageHandler";
@ -73,7 +74,9 @@ export default class ViewSourceEvent extends React.PureComponent<IProps, IState>
title={_t("devtools|toggle_event")}
className="mx_ViewSourceEvent_toggle"
onClick={this.onToggle}
/>
>
{expanded ? <CollapseIcon /> : <ExpandIcon />}
</AccessibleButton>
</span>
);
}