Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Commit

Permalink
Improve widget buttons behaviour and layout (#8734)
Browse files Browse the repository at this point in the history 
* Improve widet buttons behaviour and layout

Relates to element-hq/element-web#20506
See PSC-79

Signed-off-by: Michael Weimann <michaelw@matrix.org>

* Add AppTile tests
  • Loading branch information
@weeman1337
weeman1337 committed Jun 3, 2022
1 parent 91cbd4d commit 3174cf2
Show file tree
Hide file tree
Showing 4 changed files with 94 additions and 45 deletions.
57 changes: 34 additions & 23 deletions res/css/views/rooms/_AppsDrawer.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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;

&::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_close {
mask-size: auto 10px;
mask-image: url("$(res)/img/element-icons/maximise-expand.svg");
background-color: $accent;
&:hover::after {
background-color: $panel-actions;
border-radius: 50%;
content: '';
height: 24px;
left: 0;
position: absolute;
top: 0;
width: 24px;
}

&.mx_AppTileMenuBar_iconButton_maximise {
mask-size: auto 10px;
mask-image: url("$(res)/img/element-icons/maximise-expand.svg");
&.mx_AppTileMenuBar_iconButton_collapse::before {
mask-image: url("$(res)/img/element-icons/minimise-collapse.svg");
}

&.mx_AppTileMenuBar_iconButton_unpin {
mask-image: url("$(res)/img/element-icons/room/pin-upright.svg");
background-color: $accent;
&.mx_AppTileMenuBar_iconButton_maximise::before {
mask-image: url("$(res)/img/element-icons/maximise-expand.svg");
}

&.mx_AppTileMenuBar_iconButton_pin {
mask-image: url("$(res)/img/element-icons/room/pin-upright.svg");
&.mx_AppTileMenuBar_iconButton_minimise::before {
mask-image: url("$(res)/img/element-icons/minus-button.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');
}
}
Expand Down
31 changes: 9 additions & 22 deletions src/components/views/elements/AppTile.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -512,18 +512,14 @@ export default class AppTile extends React.Component<IProps, IState> {
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 => {
Expand Down Expand Up @@ -668,32 +664,23 @@ export default class AppTile extends React.Component<IProps, IState> {
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(<AccessibleButton
key="toggleMaximised"
className={maximisedClasses}
title={
isMaximised ? _t("Close") : _t("Maximise")
isMaximised ? _t("Un-maximise") : _t("Maximise")
}
onClick={this.onToggleMaximisedClick}
/>);

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(<AccessibleButton
key="togglePinned"
className={pinnedClasses}
title={
isPinned ? _t("Unpin") : _t("Pin")
}
onClick={this.onTogglePinnedClick}
key="minimise"
className="mx_AppTileMenuBar_iconButton mx_AppTileMenuBar_iconButton_minimise"
title={_t("Minimise")}
onClick={this.onMinimiseClicked}
/>);
}

Expand Down
2 changes: 2 additions & 0 deletions src/i18n/strings/en_EN.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
49 changes: 49 additions & 0 deletions test/components/views/elements/AppTile-test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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((
<MatrixClientContext.Provider value={cli}>
<AppTile
key={app1.id}
app={app1}
room={r1}
/>
</MatrixClientContext.Provider>
));

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<Room>, 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);
});
});
});
});

0 comments on commit 3174cf2

Please sign in to comment.