Add maximise widget functionality

res/css/_common.scss

@@ -30,6 +30,8 @@ $MessageTimestamp_width_hover: calc($MessageTimestamp_width - 2 * $selected-mess
 $slider-dot-size: 1em;
 $slider-selection-dot-size: 2.4em;
 
+$container-border-width: 8px;
+
 :root {
     font-size: 10px;
 

res/css/structures/_LeftPanelWidget.scss

@@ -134,7 +134,7 @@ limitations under the License.
             mask-position: center;
             mask-size: contain;
             mask-repeat: no-repeat;
-            mask-image: url('$(res)/img/feather-customised/maximise.svg');
+            mask-image: url("$(res)/img/element-icons/maximise-expand.svg");
             background: $muted-fg-color;
         }
     }

res/css/structures/_MainSplit.scss

@@ -23,9 +23,8 @@ limitations under the License.
 }
 
 .mx_MainSplit > .mx_RightPanel_ResizeWrapper {
-    padding: 5px;
-    // margin left to not allow the handle to not encroach on the space for the scrollbar
-    margin-left: 8px;
+    // no padding on the left. The spacing is taken care of by the main split content.
+    padding: 5px 5px 5px 0px;
     height: calc(100vh - 51px); // height of .mx_RoomHeader.light-panel
 
     &:hover .mx_RightPanel_ResizeHandle {

res/css/structures/_RightPanel.scss

@@ -22,7 +22,7 @@ limitations under the License.
     display: flex;
     flex-direction: column;
     border-radius: 8px;
-    padding: 8px 0;
+    padding: $container-border-width 0;
     box-sizing: border-box;
     height: 100%;
     contain: strict;

res/css/views/dialogs/_HostSignupDialog.scss

@@ -78,7 +78,7 @@ limitations under the License.
 }
 
 .mx_HostSignup_maximize_button {
-    mask: url('$(res)/img/feather-customised/maximise.svg');
+    mask: url("$(res)/img/element-icons/maximise-expand.svg");
     mask-repeat: no-repeat;
     mask-position: center;
     mask-size: cover;
@@ -92,7 +92,7 @@ limitations under the License.
 }
 
 .mx_HostSignup_minimize_button {
-    mask: url('$(res)/img/feather-customised/minimise.svg');
+    mask: url("$(res)/img/element-icons/minimise-collapse.svg");
     mask-repeat: no-repeat;
     mask-position: center;
     mask-size: cover;

res/css/views/elements/_ResizeHandle.scss

@@ -32,11 +32,6 @@ limitations under the License.
     cursor: row-resize;
 }
 
-.mx_MatrixChat > .mx_ResizeHandle.mx_ResizeHandle_horizontal {
-    margin: 0 -10px 0 0;
-    padding: 0 8px 0 0;
-}
-
 .mx_ResizeHandle.mx_ResizeHandle_horizontal > div {
     width: 1px;
     height: 100%;

res/css/views/messages/_ViewSourceEvent.scss

@@ -29,19 +29,19 @@ limitations under the License.
     }
 
     .mx_ViewSourceEvent_toggle {
-        width: 12px;
         mask-repeat: no-repeat;
         mask-position: 0 center;
         mask-size: auto 12px;
+        width: 12px;
         visibility: hidden;
         background-color: $accent;
-        mask-image: url('$(res)/img/feather-customised/maximise.svg');
+        mask-image: url("$(res)/img/element-icons/maximise-expand.svg");
     }
 
     &.mx_ViewSourceEvent_expanded .mx_ViewSourceEvent_toggle {
         mask-position: 0 bottom;
-        margin-bottom: 7px;
-        mask-image: url('$(res)/img/feather-customised/minimise.svg');
+        margin-bottom: 5px;
+        mask-image: url("$(res)/img/element-icons/minimise-collapse.svg");
     }
 }
 

res/css/views/right_panel/_RoomSummaryCard.scss

@@ -133,6 +133,8 @@ limitations under the License.
             }
 
             .mx_RoomSummaryCard_app_pinToggle,
+            .mx_RoomSummaryCard_app_maximise,
+            .mx_RoomSummaryCard_app_minimise,
             .mx_RoomSummaryCard_app_options {
                 position: absolute;
                 top: 0;
@@ -174,6 +176,21 @@ limitations under the License.
                     mask-image: url('$(res)/img/element-icons/room/pin-upright.svg');
                 }
             }
+            .mx_RoomSummaryCard_app_maximise {
+                right: 48px;
+                &::before {
+                    mask-size: 14px;
+                    mask-image: url("$(res)/img/element-icons/maximise-expand.svg");
+                }
+            }
+            .mx_RoomSummaryCard_app_minimise {
+                right: 48px;
+                &::before {
+                    mask-size: 14px;
+                    mask-image: url("$(res)/img/element-icons/minimise-collapse.svg");
+                    background-color: $accent;
+                }
+            }
 
             .mx_RoomSummaryCard_app_options {
                 right: 48px;
@@ -182,6 +199,9 @@ limitations under the License.
                 &::before {
                     mask-image: url('$(res)/img/element-icons/room/ellipsis.svg');
                 }
+                &.mx_RoomSummaryCard_maximised_widget {
+                    right: 72px;
+                }
             }
 
             &.mx_RoomSummaryCard_Button_pinned {

res/css/views/right_panel/_WidgetCard.scss

@@ -20,6 +20,8 @@ limitations under the License.
 
     .mx_AppTileFullWidth {
         max-width: unset;
+        width: auto !important;
+        margin: 0px $container-border-width 0px $container-border-width;
         height: 100%;
         border: 0;
     }

res/css/views/rooms/_AppsDrawer.scss

@@ -18,11 +18,12 @@ limitations under the License.
 $MiniAppTileHeight: 200px;
 
 .mx_AppsDrawer {
-    margin: 5px 5px 5px 18px;
+    margin: 5px;
     position: relative;
     display: flex;
     flex-direction: column;
     overflow: hidden;
+    flex-grow: 1;
 
     .mx_AppsContainer_resizerHandleContainer {
         width: 100%;
@@ -100,11 +101,11 @@ $MiniAppTileHeight: 200px;
     min-height: 0;
 
     .mx_AppTile:first-of-type {
-        border-left-width: 8px;
+        border-left-width: $container-border-width;
         border-radius: 10px 0 0 10px;
     }
     .mx_AppTile:last-of-type {
-        border-right-width: 8px;
+        border-right-width: $container-border-width;
         border-radius: 0 10px 10px 0;
     }
 
@@ -142,7 +143,7 @@ $MinWidth: 240px;
 .mx_AppTile {
     width: 50%;
     min-width: $MinWidth;
-    border: 8px solid $widget-menu-bar-bg-color;
+    border: $container-border-width solid $widget-menu-bar-bg-color;
     border-left-width: 5px;
     border-right-width: 5px;
     display: flex;
@@ -155,7 +156,7 @@ $MinWidth: 240px;
     width: 100% !important; // to override the inline style set by the resizer
     margin: 0;
     padding: 0;
-    border: 5px solid $widget-menu-bar-bg-color;
+    border: $container-border-width solid $widget-menu-bar-bg-color;
     border-radius: 8px;
     display: flex;
     flex-direction: column;
@@ -224,15 +225,28 @@ $MinWidth: 240px;
     mask-position: 0 center;
     mask-size: auto 12px;
     background-color: $topleftmenu-color;
-    margin: 0 3px;
-}
+    margin: 0 5px;
 
-.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_popout {
-    mask-image: url('$(res)/img/feather-customised/widget/external-link.svg');
-}
+    &.mx_AppTileMenuBar_iconButton_minWidget {
+        width: 10px;
+        height: 12px;
+        mask-size: auto 10px;
+        mask-image: url("$(res)/img/element-icons/minimise-collapse.svg");
+    }
+
+    &.mx_AppTileMenuBar_iconButton_maxWidget {
+        width: 11px;
+        height: 11px;
+        mask-image: url("$(res)/img/element-icons/maximise-expand.svg");
+    }
+
+    &.mx_AppTileMenuBar_iconButton_popout {
+        mask-image: url('$(res)/img/feather-customised/widget/external-link.svg');
+    }
 
-.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_menu {
-    mask-image: url('$(res)/img/element-icons/room/ellipsis.svg');
+    &.mx_AppTileMenuBar_iconButton_menu {
+        mask-image: url('$(res)/img/element-icons/room/ellipsis.svg');
+    }
 }
 
 .mx_AppTileBody {

res/css/views/rooms/_EventTile.scss

@@ -546,13 +546,13 @@ $left-gutter: 64px;
     mask-size: 75%;
     mask-position: center;
     mask-repeat: no-repeat;
-    mask-image: url($collapse-button-url);
+    mask-image: url("$(res)/img/element-icons/minimise-collapse.svg");
 }
 .mx_EventTile_expandButton {
     mask-size: 75%;
     mask-position: center;
     mask-repeat: no-repeat;
-    mask-image: url($expand-button-url);
+    mask-image: url("$(res)/img/element-icons/maximise-expand.svg");
 }
 
 .mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_copyButton,

res/themes/legacy-light/css/_legacy-light.scss

@@ -213,8 +213,6 @@ $event-highlight-bg-color: $yellow-background;
 $event-timestamp-color: #acacac;
 
 $copy-button-url: "$(res)/img/feather-customised/clipboard.svg";
-$collapse-button-url: "$(res)/img/feather-customised/minimise.svg";
-$expand-button-url: "$(res)/img/feather-customised/maximise.svg";
 
 // e2e
 $e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent

res/themes/light/css/_light.scss

@@ -302,8 +302,6 @@ $focus-brightness: 105%;
 // Icon URLs
 // ********************
 $copy-button-url: "$(res)/img/feather-customised/clipboard.svg";
-$collapse-button-url: "$(res)/img/feather-customised/minimise.svg";
-$expand-button-url: "$(res)/img/feather-customised/maximise.svg";
 // ********************
 
 // Mixins