From 27455e15cde1d7ba7a08fc95fea1caed7bb2c2b0 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 2 May 2023 19:07:35 +0000 Subject: [PATCH 1/9] Nesting --- res/css/views/rooms/_AppsDrawer.pcss | 60 ++++++++++++++-------------- 1 file changed, 30 insertions(+), 30 deletions(-) diff --git a/res/css/views/rooms/_AppsDrawer.pcss b/res/css/views/rooms/_AppsDrawer.pcss index 7c9ae0b51a9..f76f6535ec5 100644 --- a/res/css/views/rooms/_AppsDrawer.pcss +++ b/res/css/views/rooms/_AppsDrawer.pcss @@ -210,11 +210,11 @@ $MinWidth: 240px; .mx_WidgetAvatar { margin-right: 12px; } -} -.mx_AppTileMenuBarTitle > :last-child { +> :last-child { margin-left: 9px; } +} .mx_AppTileMenuBarWidgets { float: right; @@ -278,6 +278,16 @@ $MinWidth: 240px; overflow: hidden; border-radius: 8px; background-color: $widget-body-bg-color; + + iframe { + width: 100%; + height: 100%; + overflow: hidden; + border: none; + padding: 0; + margin: 0; + display: block; + } } .mx_AppTileBody_mini { @@ -285,6 +295,12 @@ $MinWidth: 240px; width: 100%; overflow: hidden; border-radius: 8px; + + iframe { + border: none; + width: 100%; + height: 100%; + } } .mx_AppTile .mx_AppTileBody, @@ -294,22 +310,6 @@ $MinWidth: 240px; flex: 1; } -.mx_AppTileBody_mini iframe { - border: none; - width: 100%; - height: 100%; -} - -.mx_AppTileBody iframe { - width: 100%; - height: 100%; - overflow: hidden; - border: none; - padding: 0; - margin: 0; - display: block; -} - .mx_AppPermissionWarning { text-align: center; display: flex; @@ -318,6 +318,11 @@ $MinWidth: 240px; justify-content: center; align-items: center; font-size: $font-16px; + + h4 { + margin: 0; + padding: 0; + } } .mx_AppPermissionWarning_row { @@ -332,20 +337,14 @@ $MinWidth: 240px; font-weight: var(--font-semi-bold); } -.mx_AppPermissionWarning h4 { - margin: 0; - padding: 0; -} - .mx_AppPermissionWarning_helpIcon { margin-top: 1px; margin-right: 2px; width: 10px; height: 10px; display: inline-block; -} -.mx_AppPermissionWarning_helpIcon::before { +&::before { display: inline-block; background-color: $accent; mask-repeat: no-repeat; @@ -357,6 +356,7 @@ $MinWidth: 240px; vertical-align: middle; mask-image: url("$(res)/img/feather-customised/help-circle.svg"); } +} .mx_AppPermissionWarning_tooltip { @mixin mx_Tooltip_dark; @@ -380,15 +380,19 @@ $MinWidth: 240px; /* match bg of border so that the cut corners have the right fill */ background-color: $widget-body-bg-color !important; border-radius: 8px; + +iframe { + display: none; } -.mx_AppLoading .mx_Spinner { +.mx_Spinner { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } +} .mx_AppLoading_spinner_fadeIn { animation-fill-mode: backwards; @@ -406,10 +410,6 @@ $MinWidth: 240px; } } -.mx_AppLoading iframe { - display: none; -} - .mx_AppsDrawer_resizing .mx_AppTile_persistedWrapper { z-index: 1; } From 20b6ab107505dcf45383bcb7d87c221d2a3b4d07 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 2 May 2023 19:08:41 +0000 Subject: [PATCH 2/9] Run prettier --- res/css/views/rooms/_AppsDrawer.pcss | 50 ++++++++++++++-------------- 1 file changed, 25 insertions(+), 25 deletions(-) diff --git a/res/css/views/rooms/_AppsDrawer.pcss b/res/css/views/rooms/_AppsDrawer.pcss index f76f6535ec5..7f85e3e89f9 100644 --- a/res/css/views/rooms/_AppsDrawer.pcss +++ b/res/css/views/rooms/_AppsDrawer.pcss @@ -211,9 +211,9 @@ $MinWidth: 240px; margin-right: 12px; } -> :last-child { - margin-left: 9px; -} + > :last-child { + margin-left: 9px; + } } .mx_AppTileMenuBarWidgets { @@ -344,18 +344,18 @@ $MinWidth: 240px; height: 10px; display: inline-block; -&::before { - display: inline-block; - background-color: $accent; - mask-repeat: no-repeat; - mask-size: 12px; - width: 12px; - height: 12px; - mask-position: center; - content: ""; - vertical-align: middle; - mask-image: url("$(res)/img/feather-customised/help-circle.svg"); -} + &::before { + display: inline-block; + background-color: $accent; + mask-repeat: no-repeat; + mask-size: 12px; + width: 12px; + height: 12px; + mask-position: center; + content: ""; + vertical-align: middle; + mask-image: url("$(res)/img/feather-customised/help-circle.svg"); + } } .mx_AppPermissionWarning_tooltip { @@ -381,17 +381,17 @@ $MinWidth: 240px; background-color: $widget-body-bg-color !important; border-radius: 8px; -iframe { - display: none; -} + iframe { + display: none; + } -.mx_Spinner { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; -} + .mx_Spinner { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + } } .mx_AppLoading_spinner_fadeIn { From 161c2549f70ef41392c5bf2cf50b0bf362836bbc Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 2 May 2023 19:13:50 +0000 Subject: [PATCH 3/9] Common style rules for `mx_AppTileBody` and `mx_AppTileBody_mini` --- res/css/views/rooms/_AppsDrawer.pcss | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/res/css/views/rooms/_AppsDrawer.pcss b/res/css/views/rooms/_AppsDrawer.pcss index 7f85e3e89f9..5096a8c8ba6 100644 --- a/res/css/views/rooms/_AppsDrawer.pcss +++ b/res/css/views/rooms/_AppsDrawer.pcss @@ -272,11 +272,15 @@ $MinWidth: 240px; } } -.mx_AppTileBody { - height: 100%; +.mx_AppTileBody, +.mx_AppTileBody_mini { width: 100%; overflow: hidden; border-radius: 8px; +} + +.mx_AppTileBody { + height: 100%; background-color: $widget-body-bg-color; iframe { @@ -292,9 +296,6 @@ $MinWidth: 240px; .mx_AppTileBody_mini { height: $MiniAppTileHeight; - width: 100%; - overflow: hidden; - border-radius: 8px; iframe { border: none; From df8d45548f507a17a9bd828397418813b10f92df Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 2 May 2023 19:14:35 +0000 Subject: [PATCH 4/9] Common style rules for iframe --- res/css/views/rooms/_AppsDrawer.pcss | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/res/css/views/rooms/_AppsDrawer.pcss b/res/css/views/rooms/_AppsDrawer.pcss index 5096a8c8ba6..fae142ae465 100644 --- a/res/css/views/rooms/_AppsDrawer.pcss +++ b/res/css/views/rooms/_AppsDrawer.pcss @@ -277,6 +277,12 @@ $MinWidth: 240px; width: 100%; overflow: hidden; border-radius: 8px; + + iframe { + border: none; + width: 100%; + height: 100%; + } } .mx_AppTileBody { @@ -284,10 +290,7 @@ $MinWidth: 240px; background-color: $widget-body-bg-color; iframe { - width: 100%; - height: 100%; overflow: hidden; - border: none; padding: 0; margin: 0; display: block; @@ -296,12 +299,6 @@ $MinWidth: 240px; .mx_AppTileBody_mini { height: $MiniAppTileHeight; - - iframe { - border: none; - width: 100%; - height: 100%; - } } .mx_AppTile .mx_AppTileBody, From 9ca36fa3c13c06ca8ebc51793ada7a2a97a1ef25 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 2 May 2023 19:24:43 +0000 Subject: [PATCH 5/9] Use a custom property for height --- res/css/views/rooms/_AppsDrawer.pcss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/res/css/views/rooms/_AppsDrawer.pcss b/res/css/views/rooms/_AppsDrawer.pcss index fae142ae465..165fa89f967 100644 --- a/res/css/views/rooms/_AppsDrawer.pcss +++ b/res/css/views/rooms/_AppsDrawer.pcss @@ -277,6 +277,7 @@ $MinWidth: 240px; width: 100%; overflow: hidden; border-radius: 8px; + height: var(--AppTileBody-height); iframe { border: none; @@ -286,7 +287,8 @@ $MinWidth: 240px; } .mx_AppTileBody { - height: 100%; + --AppTileBody-height: 100%; + background-color: $widget-body-bg-color; iframe { @@ -298,7 +300,7 @@ $MinWidth: 240px; } .mx_AppTileBody_mini { - height: $MiniAppTileHeight; + --AppTileBody-height: $MiniAppTileHeight; } .mx_AppTile .mx_AppTileBody, From 6a5aa3e87fb2dc907eb64e7597cab83e311c4e5b Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 3 May 2023 03:35:25 +0000 Subject: [PATCH 6/9] Replace with a custom property - $MiniAppTileHeight --- res/css/views/rooms/_AppsDrawer.pcss | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/res/css/views/rooms/_AppsDrawer.pcss b/res/css/views/rooms/_AppsDrawer.pcss index 165fa89f967..65e87491143 100644 --- a/res/css/views/rooms/_AppsDrawer.pcss +++ b/res/css/views/rooms/_AppsDrawer.pcss @@ -15,11 +15,12 @@ See the License for the specific language governing permissions and limitations under the License. */ -$MiniAppTileHeight: 220px; /* TODO this should be 300px but that's too large */ $MinWidth: 240px; .mx_AppsDrawer { + --AppTile_mini-height: 220px; + margin: var(--container-gap-width); /* The left side gap is fully handled by this margin. To prohibit bleeding on webkit browser. */ margin-right: calc(var(--container-gap-width) / 2); @@ -174,7 +175,7 @@ $MinWidth: 240px; padding: 0; display: flex; flex-direction: column; - height: $MiniAppTileHeight; + height: var(--AppTile_mini-height); } .mx_AppTile .mx_AppTile_persistedWrapper, @@ -300,7 +301,7 @@ $MinWidth: 240px; } .mx_AppTileBody_mini { - --AppTileBody-height: $MiniAppTileHeight; + --AppTileBody-height: var(--AppTile_mini-height); } .mx_AppTile .mx_AppTileBody, From 1eb19320eb099d153896169152a7fbc6268c5503 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 3 May 2023 03:49:34 +0000 Subject: [PATCH 7/9] Replace with a custom property - $MinWidth --- res/css/views/rooms/_AppsDrawer.pcss | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/res/css/views/rooms/_AppsDrawer.pcss b/res/css/views/rooms/_AppsDrawer.pcss index 65e87491143..8204c70d748 100644 --- a/res/css/views/rooms/_AppsDrawer.pcss +++ b/res/css/views/rooms/_AppsDrawer.pcss @@ -15,11 +15,9 @@ See the License for the specific language governing permissions and limitations under the License. */ -/* TODO this should be 300px but that's too large */ -$MinWidth: 240px; - .mx_AppsDrawer { --AppTile_mini-height: 220px; + --minWidth: 240px; /* TODO this should be 300px but that's too large */ margin: var(--container-gap-width); /* The left side gap is fully handled by this margin. To prohibit bleeding on webkit browser. */ @@ -95,7 +93,7 @@ $MinWidth: 240px; .mx_AppTile { width: 50%; - min-width: $MinWidth; + min-width: var(--minWidth); } &.mx_AppsDrawer_2apps .mx_AppTile { @@ -104,7 +102,7 @@ $MinWidth: 240px; &:nth-child(3) { flex-grow: 1; width: 0 !important; - min-width: $MinWidth !important; + min-width: var(--minWidth) !important; } } &.mx_AppsDrawer_3apps .mx_AppTile { @@ -113,7 +111,7 @@ $MinWidth: 240px; &:nth-child(3) { flex-grow: 1; width: 0 !important; - min-width: $MinWidth !important; + min-width: var(--minWidth) !important; } } } From 5a2cd9133ac9720a6bad0653a40559294c0d0747 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 3 May 2023 04:39:35 +0000 Subject: [PATCH 8/9] Group common declarations --- res/css/views/rooms/_AppsDrawer.pcss | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/res/css/views/rooms/_AppsDrawer.pcss b/res/css/views/rooms/_AppsDrawer.pcss index 8204c70d748..1aa6e7a1298 100644 --- a/res/css/views/rooms/_AppsDrawer.pcss +++ b/res/css/views/rooms/_AppsDrawer.pcss @@ -223,31 +223,33 @@ limitations under the License. } .mx_AppTileMenuBar_iconButton { - height: 24px; + --size: 24px; /* Size of the button. Its height and width values should be same */ + + height: var(--size); margin: 0 4px; position: relative; - width: 24px; + width: var(--size); + + &::before, + &:hover::after { + content: ""; + height: var(--size); + width: var(--size); + position: absolute; + } &::before { background-color: $muted-fg-color; - content: ""; - height: 24px; mask-position: center; mask-repeat: no-repeat; mask-size: 12px; - position: absolute; - width: 24px; } &:hover::after { background-color: $panel-actions; border-radius: 50%; - content: ""; - height: 24px; left: 0; - position: absolute; top: 0; - width: 24px; } &.mx_AppTileMenuBar_iconButton--collapse::before { From 34ed56be98c149b95f0b09d1f364bf61a3be12d5 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 3 May 2023 15:49:28 +0000 Subject: [PATCH 9/9] Sorting --- res/css/views/rooms/_AppsDrawer.pcss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/res/css/views/rooms/_AppsDrawer.pcss b/res/css/views/rooms/_AppsDrawer.pcss index 1aa6e7a1298..d74cf8dface 100644 --- a/res/css/views/rooms/_AppsDrawer.pcss +++ b/res/css/views/rooms/_AppsDrawer.pcss @@ -225,17 +225,17 @@ limitations under the License. .mx_AppTileMenuBar_iconButton { --size: 24px; /* Size of the button. Its height and width values should be same */ - height: var(--size); margin: 0 4px; position: relative; + height: var(--size); width: var(--size); &::before, &:hover::after { content: ""; + position: absolute; height: var(--size); width: var(--size); - position: absolute; } &::before {