Unify widget header actions with those in right panel (#7734)

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_maximiseToggle,
-            .mx_RoomSummaryCard_app_minimise,
             .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;

res/css/views/rooms/_AppsDrawer.scss

@@ -231,14 +231,24 @@ $MinWidth: 240px;
     background-color: $topleftmenu-color;
     margin: 0 5px;
 
-    &.mx_AppTileMenuBar_iconButton_minWidget {
+    &.mx_AppTileMenuBar_iconButton_close {
-        mask-size: auto 10px;
-        mask-image: url("$(res)/img/element-icons/minimise-collapse.svg");
-    }
-
-    &.mx_AppTileMenuBar_iconButton_maxWidget {
         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 {

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<IProps, IState> {
         userWidget: false,
         miniMode: false,
         threadId: null,
+        showLayoutButtons: true,
     };
 
     private contextMenuButton = createRef<any>();
@@ -507,7 +508,7 @@ export default class AppTile extends React.Component<IProps, IState> {
             { 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<IProps, IState> {
         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<IProps, IState> {
             );
         }
 
-        let maxMinButton;
+        const layoutButtons: React.ReactNodeArray = [];
-        if (!this.props.hideMaximiseButton) {
+        if (this.props.showLayoutButtons) {
-            const widgetIsMaximised = WidgetLayoutStore.instance.
+            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_close": isMaximised,
-                "mx_AppTileMenuBar_iconButton_maxWidget": !widgetIsMaximised,
+                "mx_AppTileMenuBar_iconButton_maximise": !isMaximised,
             });
-            maxMinButton = <AccessibleButton
+            layoutButtons.push(<AccessibleButton
-                className={className}
+                className={maximisedClasses}
                 title={
-                    widgetIsMaximised ? _t('Close') : _t('Maximise widget')
+                    isMaximised ? _t("Close") : _t("Maximise")
                 }
-                onClick={this.onMaxMinWidgetClick}
+                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
+                className={pinnedClasses}
+                title={
+                    isPinned ? _t("Unpin") : _t("Pin")
+                }
+                onClick={this.onTogglePinnedClick}
+            />);
         }
 
         return <React.Fragment>
@@ -673,7 +697,7 @@ export default class AppTile extends React.Component<IProps, IState> {
                             { this.props.showTitle && this.getTileTitle() }
                         </span>
                         <span className="mx_AppTileMenuBarWidgets">
-                            { maxMinButton }
+                            { layoutButtons }
                             { (this.props.showPopout && !this.state.requiresClient) && <AccessibleButton
                                 className="mx_AppTileMenuBar_iconButton mx_AppTileMenuBar_iconButton_popout"
                                 title={_t('Popout widget')}

src/components/views/right_panel/RoomSummaryCard.tsx

@@ -135,16 +135,12 @@ const AppRow: React.FC<IAppRowProps> = ({ 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<IAppRowProps> = ({ 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 <div className={classes} ref={handle}>
         <AccessibleTooltipButton
             className="mx_RoomSummaryCard_icon_app"
@@ -169,7 +170,7 @@ const AppRow: React.FC<IAppRowProps> = ({ app, room }) => {
         </AccessibleTooltipButton>
 
         { canModifyWidget && <ContextMenuTooltipButton
-            className="mx_RoomSummaryCard_app_options mx_RoomSummaryCard_maximised_widget"
+            className="mx_RoomSummaryCard_app_options"
             isExpanded={menuDisplayed}
             onClick={openMenu}
             title={_t("Options")}
@@ -184,7 +185,7 @@ const AppRow: React.FC<IAppRowProps> = ({ app, room }) => {
             yOffset={-24}
         />
         <AccessibleTooltipButton
-            className={isMaximised ? "mx_RoomSummaryCard_app_minimise" : "mx_RoomSummaryCard_app_maximise"}
+            className="mx_RoomSummaryCard_app_maximiseToggle"
             onClick={toggleMaximised}
             title={maximiseTitle}
             yOffset={-24}

src/components/views/rooms/Stickerpicker.tsx

@@ -304,7 +304,7 @@ export default class Stickerpicker extends React.PureComponent<IProps, IState> {
                                 showPopout={false}
                                 handleMinimisePointerEvents={true}
                                 userWidget={true}
-                                hideMaximiseButton={true}
+                                showLayoutButtons={false}
                             />
                         </PersistedElement>
                     </div>

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",