From 59cdd3edc07ccbc74fead184d510b2cac907de84 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Wed, 9 Feb 2022 10:47:41 +0000 Subject: [PATCH] Unify widget header actions with those in right panel (#7734) --- .../views/right_panel/_RoomSummaryCard.scss | 28 +++++----- res/css/views/rooms/_AppsDrawer.scss | 22 +++++--- src/components/views/elements/AppTile.tsx | 52 ++++++++++++++----- .../views/right_panel/RoomSummaryCard.tsx | 15 +++--- src/components/views/rooms/Stickerpicker.tsx | 2 +- src/i18n/strings/en_EN.json | 2 +- 6 files changed, 77 insertions(+), 44 deletions(-) diff --git a/res/css/views/right_panel/_RoomSummaryCard.scss b/res/css/views/right_panel/_RoomSummaryCard.scss index 9c93a885c5..59b3588283 100644 --- a/res/css/views/right_panel/_RoomSummaryCard.scss +++ b/res/css/views/right_panel/_RoomSummaryCard.scss @@ -133,8 +133,7 @@ limitations under the License. } .mx_RoomSummaryCard_app_pinToggle, - .mx_RoomSummaryCard_app_maximise, - .mx_RoomSummaryCard_app_minimise, + .mx_RoomSummaryCard_app_maximiseToggle, .mx_RoomSummaryCard_app_options { position: absolute; top: 0; @@ -176,7 +175,7 @@ limitations under the License. mask-image: url('$(res)/img/element-icons/room/pin-upright.svg'); } } - .mx_RoomSummaryCard_app_maximise { + .mx_RoomSummaryCard_app_maximiseToggle { right: 32px; //24 + 8 &::before { @@ -184,25 +183,14 @@ limitations under the License. mask-image: url("$(res)/img/element-icons/maximise-expand.svg"); } } - .mx_RoomSummaryCard_app_minimise { - right: 32px; //24 + 8 - &::before { - mask-size: 14px; - mask-image: url("$(res)/img/element-icons/minimise-collapse.svg"); - background-color: $accent; - } - } .mx_RoomSummaryCard_app_options { - right: 32px; //24 + 8 + right: 56px; //2*24 + 8 display: none; &::before { mask-image: url('$(res)/img/element-icons/room/ellipsis.svg'); } - &.mx_RoomSummaryCard_maximised_widget { - right: 56px; //2*24 + 8 - } } &.mx_RoomSummaryCard_Button_pinned { @@ -215,6 +203,16 @@ limitations under the License. } } + &.mx_RoomSummaryCard_Button_maximised { + &::after { + opacity: 0.2; + } + + .mx_RoomSummaryCard_app_maximiseToggle::before { + background-color: $accent; + } + } + &:hover { .mx_RoomSummaryCard_icon_app { padding-right: 72px; diff --git a/res/css/views/rooms/_AppsDrawer.scss b/res/css/views/rooms/_AppsDrawer.scss index 047de3a6b8..1b008d76aa 100644 --- a/res/css/views/rooms/_AppsDrawer.scss +++ b/res/css/views/rooms/_AppsDrawer.scss @@ -231,14 +231,24 @@ $MinWidth: 240px; background-color: $topleftmenu-color; margin: 0 5px; - &.mx_AppTileMenuBar_iconButton_minWidget { - mask-size: auto 10px; - mask-image: url("$(res)/img/element-icons/minimise-collapse.svg"); - } - - &.mx_AppTileMenuBar_iconButton_maxWidget { + &.mx_AppTileMenuBar_iconButton_close { mask-size: auto 10px; mask-image: url("$(res)/img/element-icons/maximise-expand.svg"); + background-color: $accent; + } + + &.mx_AppTileMenuBar_iconButton_maximise { + mask-size: auto 10px; + 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_pin { + mask-image: url("$(res)/img/element-icons/room/pin-upright.svg"); } &.mx_AppTileMenuBar_iconButton_popout { diff --git a/src/components/views/elements/AppTile.tsx b/src/components/views/elements/AppTile.tsx index ae66bcab00..cc6ae80a38 100644 --- a/src/components/views/elements/AppTile.tsx +++ b/src/components/views/elements/AppTile.tsx @@ -83,7 +83,7 @@ interface IProps { // sets the pointer-events property on the iframe pointerEvents?: string; widgetPageTitle?: string; - hideMaximiseButton?: boolean; + showLayoutButtons?: boolean; } interface IState { @@ -115,6 +115,7 @@ export default class AppTile extends React.Component { userWidget: false, miniMode: false, threadId: null, + showLayoutButtons: true, }; private contextMenuButton = createRef(); @@ -507,7 +508,7 @@ export default class AppTile extends React.Component { { target: '_blank', href: this.sgWidget.popoutUrl, rel: 'noreferrer noopener' }).click(); }; - private onMaxMinWidgetClick = (): void => { + private onToggleMaximisedClick = (): void => { const targetContainer = WidgetLayoutStore.instance.isInContainer(this.props.room, this.props.app, Container.Center) ? Container.Right @@ -515,6 +516,14 @@ export default class AppTile extends React.Component { WidgetLayoutStore.instance.moveToContainer(this.props.room, this.props.app, targetContainer); }; + private onTogglePinnedClick = (): void => { + 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); + }; + private onContextMenuClick = (): void => { this.setState({ menuDisplayed: true }); }; @@ -647,22 +656,37 @@ export default class AppTile extends React.Component { ); } - let maxMinButton; - if (!this.props.hideMaximiseButton) { - const widgetIsMaximised = WidgetLayoutStore.instance. + const layoutButtons: React.ReactNodeArray = []; + if (this.props.showLayoutButtons) { + const isMaximised = WidgetLayoutStore.instance. isInContainer(this.props.room, this.props.app, Container.Center); - const className = classNames({ + const maximisedClasses = classNames({ "mx_AppTileMenuBar_iconButton": true, - "mx_AppTileMenuBar_iconButton_minWidget": widgetIsMaximised, - "mx_AppTileMenuBar_iconButton_maxWidget": !widgetIsMaximised, + "mx_AppTileMenuBar_iconButton_close": isMaximised, + "mx_AppTileMenuBar_iconButton_maximise": !isMaximised, }); - maxMinButton = ; + 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(); } return @@ -673,7 +697,7 @@ export default class AppTile extends React.Component { { this.props.showTitle && this.getTileTitle() } - { maxMinButton } + { layoutButtons } { (this.props.showPopout && !this.state.requiresClient) && = ({ app, room }) => { pinTitle = isPinned ? _t("Unpin") : _t("Pin"); } - const classes = classNames("mx_BaseCard_Button mx_RoomSummaryCard_Button", { - mx_RoomSummaryCard_Button_pinned: isPinned, - }); - const isMaximised = WidgetLayoutStore.instance.isInContainer(room, app, Container.Center); const toggleMaximised = isMaximised ? () => { WidgetLayoutStore.instance.moveToContainer(room, app, Container.Right); } : () => { WidgetLayoutStore.instance.moveToContainer(room, app, Container.Center); }; - const maximiseTitle = isMaximised ? _t("Close") : _t("Maximise widget"); + const maximiseTitle = isMaximised ? _t("Close") : _t("Maximise"); let openTitle = ""; if (isPinned) { @@ -153,6 +149,11 @@ const AppRow: React.FC = ({ app, room }) => { openTitle =_t("Close this widget to view it in this panel"); } + const classes = classNames("mx_BaseCard_Button mx_RoomSummaryCard_Button", { + mx_RoomSummaryCard_Button_pinned: isPinned, + mx_RoomSummaryCard_Button_maximised: isMaximised, + }); + return
= ({ app, room }) => { { canModifyWidget && = ({ app, room }) => { yOffset={-24} /> { showPopout={false} handleMinimisePointerEvents={true} userWidget={true} - hideMaximiseButton={true} + showLayoutButtons={false} />
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 3432643d4b..dacbc94d67 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1947,7 +1947,7 @@ "Chat": "Chat", "Room Info": "Room Info", "You can only pin up to %(count)s widgets|other": "You can only pin up to %(count)s widgets", - "Maximise widget": "Maximise widget", + "Maximise": "Maximise", "Unpin this widget to view it in this panel": "Unpin this widget to view it in this panel", "Close this widget to view it in this panel": "Close this widget to view it in this panel", "Set my room layout for everyone": "Set my room layout for everyone",