From b7cd1f00fc7cf40ed4df695df731246a8bba0cf0 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Mon, 22 May 2023 07:48:40 +0000 Subject: [PATCH] Use `Icon` component for icons on AppTile's menu bar (#10955) * Use icon component for buttons on mx_AppTileMenuBar_widgets * Remove redundant declarations * Add a Percy snapshot test * Set color value to mx_Icon, fill and stroke with currentColor * Iterate --- cypress/e2e/widgets/layout.spec.ts | 4 ++ res/css/views/rooms/_AppsDrawer.pcss | 70 ++++++------------- res/img/element-icons/maximise-expand.svg | 2 +- res/img/element-icons/minimise-collapse.svg | 2 +- res/img/element-icons/room/ellipsis.svg | 6 +- .../widget/external-link.svg | 2 +- src/components/views/elements/AppTile.tsx | 39 +++++++---- .../__snapshots__/AppTile-test.tsx.snap | 24 +++++-- 8 files changed, 76 insertions(+), 73 deletions(-) diff --git a/cypress/e2e/widgets/layout.spec.ts b/cypress/e2e/widgets/layout.spec.ts index 16bee8d2222..0f18ce85c22 100644 --- a/cypress/e2e/widgets/layout.spec.ts +++ b/cypress/e2e/widgets/layout.spec.ts @@ -95,6 +95,10 @@ describe("Widget Layout", () => { cy.stopWebServers(); }); + it("should be set properly", () => { + cy.get(".mx_AppsDrawer").percySnapshotElement("Widgets drawer on the timeline (AppsDrawer)"); + }); + it("manually resize the height of the top container layout", () => { cy.get('iframe[title="widget"]').invoke("height").should("be.lessThan", 250); diff --git a/res/css/views/rooms/_AppsDrawer.pcss b/res/css/views/rooms/_AppsDrawer.pcss index 6738ed0fa45..5ec32423f9e 100644 --- a/res/css/views/rooms/_AppsDrawer.pcss +++ b/res/css/views/rooms/_AppsDrawer.pcss @@ -222,60 +222,34 @@ limitations under the License. } .mx_AppTileMenuBar_widgets { - float: right; display: flex; - flex-direction: row; align-items: center; - } - - .mx_AppTileMenuBar_iconButton { - --size: 24px; /* Size of the button. Its height and width values should be same */ - margin: 0 4px; - position: relative; - height: var(--size); - width: var(--size); + .mx_AppTileMenuBar_widgets_button { + --size: 24px; /* Size of the button. Its height and width values should be same */ - &::before, - &:hover::after { - content: ""; - position: absolute; + margin: 0 4px; + position: relative; height: var(--size); width: var(--size); - } - - &::before { - background-color: $muted-fg-color; - mask-position: center; - mask-repeat: no-repeat; - mask-size: 12px; - } - - &:hover::after { - background-color: $panel-actions; - border-radius: 50%; - left: 0; - top: 0; - } - - &.mx_AppTileMenuBar_iconButton--collapse::before { - mask-image: url("$(res)/img/element-icons/minimise-collapse.svg"); - } - - &.mx_AppTileMenuBar_iconButton--maximise::before { - mask-image: url("$(res)/img/element-icons/maximise-expand.svg"); - } - - &.mx_AppTileMenuBar_iconButton--minimise::before { - mask-image: url("$(res)/img/element-icons/minus-button.svg"); - } - - &.mx_AppTileMenuBar_iconButton--popout::before { - mask-image: url("$(res)/img/feather-customised/widget/external-link.svg"); - } - - &.mx_AppTileMenuBar_iconButton--menu::before { - mask-image: url("$(res)/img/element-icons/room/ellipsis.svg"); + display: flex; + align-items: center; + justify-content: center; + + &:hover::after { + content: ""; + position: absolute; + height: var(--size); + width: var(--size); + background-color: $panel-actions; + border-radius: 50%; + left: 0; + top: 0; + } + + .mx_Icon { + color: $muted-fg-color; + } } } } diff --git a/res/img/element-icons/maximise-expand.svg b/res/img/element-icons/maximise-expand.svg index 06c44e2acdd..a63f7e0022a 100644 --- a/res/img/element-icons/maximise-expand.svg +++ b/res/img/element-icons/maximise-expand.svg @@ -1,3 +1,3 @@ - + diff --git a/res/img/element-icons/minimise-collapse.svg b/res/img/element-icons/minimise-collapse.svg index e941d41276f..535c56a36bb 100644 --- a/res/img/element-icons/minimise-collapse.svg +++ b/res/img/element-icons/minimise-collapse.svg @@ -1,3 +1,3 @@ - + diff --git a/res/img/element-icons/room/ellipsis.svg b/res/img/element-icons/room/ellipsis.svg index db1db6ec8be..e7fcca8f944 100644 --- a/res/img/element-icons/room/ellipsis.svg +++ b/res/img/element-icons/room/ellipsis.svg @@ -1,5 +1,5 @@ - - - + + + diff --git a/res/img/feather-customised/widget/external-link.svg b/res/img/feather-customised/widget/external-link.svg index 6732f298f4e..e2df9883fa8 100644 --- a/res/img/feather-customised/widget/external-link.svg +++ b/res/img/feather-customised/widget/external-link.svg @@ -1,5 +1,5 @@ - + diff --git a/src/components/views/elements/AppTile.tsx b/src/components/views/elements/AppTile.tsx index 043d50d1d70..6f153a2b755 100644 --- a/src/components/views/elements/AppTile.tsx +++ b/src/components/views/elements/AppTile.tsx @@ -40,6 +40,11 @@ import { WidgetContextMenu } from "../context_menus/WidgetContextMenu"; 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 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"; @@ -714,27 +719,31 @@ export default class AppTile extends React.Component { const isMaximised = this.props.room && WidgetLayoutStore.instance.isInContainer(this.props.room, this.props.app, Container.Center); - const maximisedClasses = classNames({ - "mx_AppTileMenuBar_iconButton": true, - "mx_AppTileMenuBar_iconButton--collapse": isMaximised, - "mx_AppTileMenuBar_iconButton--maximise": !isMaximised, - }); + layoutButtons.push( , + > + {isMaximised ? ( + + ) : ( + + )} + , ); layoutButtons.push( , + > + + , ); } @@ -753,18 +762,22 @@ export default class AppTile extends React.Component { {layoutButtons} {this.props.showPopout && !this.state.requiresClient && ( + > + + )} + > + + )} diff --git a/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap b/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap index e5a7251d4e3..4d8264b2275 100644 --- a/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap +++ b/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap @@ -120,26 +120,38 @@ exports[`AppTile for a pinned widget should render 1`] = ` class="mx_AppTileMenuBar_widgets" >
+ > +
+
+ > +
+