diff --git a/res/css/views/rooms/_AppsDrawer.scss b/res/css/views/rooms/_AppsDrawer.scss index 47aa9a9d2a..0665fc5019 100644 --- a/res/css/views/rooms/_AppsDrawer.scss +++ b/res/css/views/rooms/_AppsDrawer.scss @@ -194,8 +194,8 @@ $MinWidth: 240px; align-items: center; justify-content: space-between; width: 100%; - padding-top: 2px; - padding-bottom: 8px; + padding-top: 3px; + padding-bottom: 6px; } .mx_AppTileMenuBarTitle { @@ -221,39 +221,50 @@ $MinWidth: 240px; } .mx_AppTileMenuBar_iconButton { - width: 12px; - height: 12px; - mask-repeat: no-repeat; - mask-position: 0 center; - mask-size: auto 12px; - background-color: $topleftmenu-color; - margin: 0 5px; + height: 24px; + margin: 0 4px; + position: relative; + width: 24px; - &.mx_AppTileMenuBar_iconButton_close { - mask-size: auto 10px; - mask-image: url("$(res)/img/element-icons/maximise-expand.svg"); - background-color: $accent; + &::before { + background-color: $muted-fg-color; + content: ''; + height: 24px; + mask-position: center; + mask-repeat: no-repeat; + mask-size: 12px; + position: absolute; + width: 24px; } - &.mx_AppTileMenuBar_iconButton_maximise { - mask-size: auto 10px; + &:hover::after { + background-color: $panel-actions; + border-radius: 50%; + content: ''; + height: 24px; + left: 0; + position: absolute; + top: 0; + width: 24px; + } + + &.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_unpin { - mask-image: url("$(res)/img/element-icons/room/pin-upright.svg"); - background-color: $accent; + &.mx_AppTileMenuBar_iconButton_minimise::before { + mask-image: url("$(res)/img/element-icons/minus-button.svg"); } - &.mx_AppTileMenuBar_iconButton_pin { - mask-image: url("$(res)/img/element-icons/room/pin-upright.svg"); - } - - &.mx_AppTileMenuBar_iconButton_popout { + &.mx_AppTileMenuBar_iconButton_popout::before { mask-image: url('$(res)/img/feather-customised/widget/external-link.svg'); } - &.mx_AppTileMenuBar_iconButton_menu { + &.mx_AppTileMenuBar_iconButton_menu::before { mask-image: url('$(res)/img/element-icons/room/ellipsis.svg'); } } diff --git a/src/components/views/elements/AppTile.tsx b/src/components/views/elements/AppTile.tsx index bdb591fe19..6f7267b3d8 100644 --- a/src/components/views/elements/AppTile.tsx +++ b/src/components/views/elements/AppTile.tsx @@ -512,18 +512,14 @@ export default class AppTile extends React.Component { if (!this.props.room) return; // ignore action - it shouldn't even be visible const targetContainer = WidgetLayoutStore.instance.isInContainer(this.props.room, this.props.app, Container.Center) - ? Container.Right + ? Container.Top : Container.Center; WidgetLayoutStore.instance.moveToContainer(this.props.room, this.props.app, targetContainer); }; - private onTogglePinnedClick = (): void => { + private onMinimiseClicked = (): void => { if (!this.props.room) return; // ignore action - it shouldn't even be visible - const targetContainer = - WidgetLayoutStore.instance.isInContainer(this.props.room, this.props.app, Container.Top) - ? Container.Right - : Container.Top; - WidgetLayoutStore.instance.moveToContainer(this.props.room, this.props.app, targetContainer); + WidgetLayoutStore.instance.moveToContainer(this.props.room, this.props.app, Container.Right); }; private onContextMenuClick = (): void => { @@ -668,32 +664,23 @@ export default class AppTile extends React.Component { isInContainer(this.props.room, this.props.app, Container.Center); const maximisedClasses = classNames({ "mx_AppTileMenuBar_iconButton": true, - "mx_AppTileMenuBar_iconButton_close": isMaximised, + "mx_AppTileMenuBar_iconButton_collapse": isMaximised, "mx_AppTileMenuBar_iconButton_maximise": !isMaximised, }); layoutButtons.push(); - const isPinned = WidgetLayoutStore.instance. - isInContainer(this.props.room, this.props.app, Container.Top); - const pinnedClasses = classNames({ - "mx_AppTileMenuBar_iconButton": true, - "mx_AppTileMenuBar_iconButton_unpin": isPinned, - "mx_AppTileMenuBar_iconButton_pin": !isPinned, - }); layoutButtons.push(); } diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 71157585d9..9b5f83c7b8 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -2251,6 +2251,8 @@ "Loading...": "Loading...", "Error loading Widget": "Error loading Widget", "Error - Mixed content": "Error - Mixed content", + "Un-maximise": "Un-maximise", + "Minimise": "Minimise", "Popout widget": "Popout widget", "Copy": "Copy", "Share entire screen": "Share entire screen", diff --git a/test/components/views/elements/AppTile-test.tsx b/test/components/views/elements/AppTile-test.tsx index 7850442d32..207623833f 100644 --- a/test/components/views/elements/AppTile-test.tsx +++ b/test/components/views/elements/AppTile-test.tsx @@ -19,6 +19,8 @@ import TestRenderer from "react-test-renderer"; import { jest } from "@jest/globals"; import { Room } from "matrix-js-sdk/src/models/room"; import { MatrixWidgetType } from "matrix-widget-api"; +import { mount, ReactWrapper } from "enzyme"; +import { Optional } from "matrix-events-sdk"; import RightPanel from "../../../../src/components/structures/RightPanel"; import { MatrixClientPeg } from "../../../../src/MatrixClientPeg"; @@ -307,4 +309,51 @@ describe("AppTile", () => { await RightPanelStore.instance.onNotReady(); jest.restoreAllMocks(); }); + + describe("for a pinned widget", () => { + let wrapper: ReactWrapper; + let moveToContainerSpy; + + beforeEach(() => { + wrapper = mount(( + + + + )); + + moveToContainerSpy = jest.spyOn(WidgetLayoutStore.instance, 'moveToContainer'); + }); + + it("clicking 'minimise' should send the widget to the right", () => { + const minimiseButton = wrapper.find('.mx_AppTileMenuBar_iconButton_minimise'); + minimiseButton.first().simulate('click'); + expect(moveToContainerSpy).toHaveBeenCalledWith(r1, app1, Container.Right); + }); + + it("clicking 'maximise' should send the widget to the center", () => { + const minimiseButton = wrapper.find('.mx_AppTileMenuBar_iconButton_maximise'); + minimiseButton.first().simulate('click'); + expect(moveToContainerSpy).toHaveBeenCalledWith(r1, app1, Container.Center); + }); + + describe("for a maximised (centered) widget", () => { + beforeEach(() => { + jest.spyOn(WidgetLayoutStore.instance, 'isInContainer').mockImplementation( + (room: Optional, widget: IApp, container: Container) => { + return room === r1 && widget === app1 && container === Container.Center; + }, + ); + }); + + it("clicking 'un-maximise' should send the widget to the top", () => { + const unMaximiseButton = wrapper.find('.mx_AppTileMenuBar_iconButton_collapse'); + unMaximiseButton.first().simulate('click'); + expect(moveToContainerSpy).toHaveBeenCalledWith(r1, app1, Container.Top); + }); + }); + }); });