Add maximise widget functionality (#7098)

Co-authored-by: J. Ryan Stinnett <jryans@gmail.com>
This commit is contained in:
Timo 2021-11-16 15:43:18 +01:00 committed by GitHub
parent 2f4f3f2a8c
commit 556cfc7ed8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
24 changed files with 418 additions and 233 deletions

View file

@ -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.mx_AppTileMenuBar_iconButton_menu {
mask-image: url('$(res)/img/element-icons/room/ellipsis.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_menu {
mask-image: url('$(res)/img/element-icons/room/ellipsis.svg');
}
}
.mx_AppTileBody {