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

Commit

Permalink
Improve widet buttons behaviour and layout
Browse files Browse the repository at this point in the history 
Relates to element-hq/element-web#20506
See PSC-79

Signed-off-by: Michael Weimann <michaelw@matrix.org>
  • Loading branch information
@weeman1337
weeman1337 committed Jun 1, 2022
1 parent 23cc1af commit 5e7ea03
Show file tree
Hide file tree
Showing 3 changed files with 48 additions and 48 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
37 changes: 12 additions & 25 deletions src/components/views/elements/AppTile.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -510,18 +510,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 @@ -658,37 +654,28 @@ export default class AppTile extends React.Component<IProps, IState> {

const layoutButtons: React.ReactNodeArray = [];
if (this.props.showLayoutButtons) {
layoutButtons.push(<AccessibleButton
key="minimise"
className="mx_AppTileMenuBar_iconButton mx_AppTileMenuBar_iconButton_minimise"
title={_t("Minimise to room info")}
onClick={this.onMinimiseClicked}
/>);

const isMaximised = WidgetLayoutStore.instance.
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("Minimise to top") : _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}
/>);
}

return <React.Fragment>
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",
"Minimise to room info": "Minimise to room info",
"Minimise to top": "Minimise to top",
"Popout widget": "Popout widget",
"Copy": "Copy",
"Share entire screen": "Share entire screen",
Expand Down

0 comments on commit 5e7ea03

Please sign in to comment.