From 9940dabfff7c588a4fd1aa150f2002000738c3ff Mon Sep 17 00:00:00 2001 From: Eva Marco Date: Mon, 11 Mar 2024 10:16:56 +0100 Subject: [PATCH] :bug: Fix z-index of workspace context menu --- .../resources/styles/common/framework.scss | 2 +- .../styles/common/refactor/basic-rules.scss | 2 +- .../styles/common/refactor/z-index.scss | 5 +- frontend/resources/styles/main-default.scss | 1 - .../styles/main/partials/context-menu.scss | 2 +- .../styles/main/partials/dropdown.scss | 2 +- .../styles/main/partials/exception-page.scss | 2 +- .../styles/main/partials/loader.scss | 2 +- .../styles/main/partials/tool-bar.scss | 48 ------------------- .../main/ui/components/context_menu_a11y.scss | 2 +- .../src/app/main/ui/dashboard/comments.scss | 2 +- .../src/app/main/ui/dashboard/templates.scss | 2 +- .../app/main/ui/workspace/color_palette.scss | 2 +- .../ui/workspace/color_palette_ctx_menu.scss | 2 +- .../app/main/ui/workspace/context_menu.scss | 2 +- .../src/app/main/ui/workspace/palette.scss | 2 +- .../src/app/main/ui/workspace/presence.scss | 2 +- .../src/app/main/ui/workspace/sidebar.scss | 2 +- .../main/ui/workspace/sidebar/layer_item.scss | 2 +- .../sidebar/options/menus/frame_grid.scss | 2 +- .../sidebar/options/menus/typography.scss | 2 +- .../ui/workspace/text_palette_ctx_menu.scss | 2 +- .../app/main/ui/workspace/top_toolbar.scss | 2 +- 23 files changed, 23 insertions(+), 71 deletions(-) delete mode 100644 frontend/resources/styles/main/partials/tool-bar.scss diff --git a/frontend/resources/styles/common/framework.scss b/frontend/resources/styles/common/framework.scss index 5a22085ee..a90e22dbd 100644 --- a/frontend/resources/styles/common/framework.scss +++ b/frontend/resources/styles/common/framework.scss @@ -1011,7 +1011,7 @@ input[type="range"]:focus::-ms-fill-upper { padding-left: 16px; top: 16px; right: 16px; - z-index: 1005; + z-index: 40; display: flex; align-items: center; diff --git a/frontend/resources/styles/common/refactor/basic-rules.scss b/frontend/resources/styles/common/refactor/basic-rules.scss index 61a1c4c49..4b8663f33 100644 --- a/frontend/resources/styles/common/refactor/basic-rules.scss +++ b/frontend/resources/styles/common/refactor/basic-rules.scss @@ -905,7 +905,7 @@ margin: 0; margin-top: $s-1; border-radius: $br-8; - z-index: $z-index-3; + z-index: $z-index-4; overflow-y: auto; overflow-x: hidden; background-color: var(--menu-background-color); diff --git a/frontend/resources/styles/common/refactor/z-index.scss b/frontend/resources/styles/common/refactor/z-index.scss index 5be8e2e5b..755b2e9fa 100644 --- a/frontend/resources/styles/common/refactor/z-index.scss +++ b/frontend/resources/styles/common/refactor/z-index.scss @@ -6,8 +6,9 @@ $z-index-1: 1; // floating elements $z-index-2: 2; // sidebars -$z-index-3: 3; // context menu -$z-index-4: 4; // modal +$z-index-3: 3; // topbar +$z-index-4: 4; // context menu +$z-index-5: 5; // modal $z-index-10: 10; $z-index-20: 20; $z-index-modal: 30; // When refactor finish we can reduce this number, diff --git a/frontend/resources/styles/main-default.scss b/frontend/resources/styles/main-default.scss index f3fd5e5bc..0a914e78d 100644 --- a/frontend/resources/styles/main-default.scss +++ b/frontend/resources/styles/main-default.scss @@ -60,7 +60,6 @@ @import "main/partials/project-bar"; @import "main/partials/sidebar"; @import "main/partials/tab-container"; -@import "main/partials/tool-bar"; @import "main/partials/user-settings"; @import "main/partials/workspace"; @import "main/partials/color-bullet"; diff --git a/frontend/resources/styles/main/partials/context-menu.scss b/frontend/resources/styles/main/partials/context-menu.scss index e7a302655..3f4e3f0dd 100644 --- a/frontend/resources/styles/main/partials/context-menu.scss +++ b/frontend/resources/styles/main/partials/context-menu.scss @@ -8,7 +8,7 @@ position: relative; visibility: hidden; opacity: 0; - z-index: 100; + z-index: 3; } .context-menu.is-open { diff --git a/frontend/resources/styles/main/partials/dropdown.scss b/frontend/resources/styles/main/partials/dropdown.scss index 0abd62a4f..ed3a2817f 100644 --- a/frontend/resources/styles/main/partials/dropdown.scss +++ b/frontend/resources/styles/main/partials/dropdown.scss @@ -4,7 +4,7 @@ background-color: $color-white; border-radius: $br2; box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25); - z-index: 12; + z-index: 3; hr { margin: 0 !important; diff --git a/frontend/resources/styles/main/partials/exception-page.scss b/frontend/resources/styles/main/partials/exception-page.scss index 3ffd4ca1b..30686023a 100644 --- a/frontend/resources/styles/main/partials/exception-page.scss +++ b/frontend/resources/styles/main/partials/exception-page.scss @@ -12,7 +12,7 @@ display: flex; align-items: center; padding: 32px; - z-index: 1000; + z-index: 40; cursor: pointer; diff --git a/frontend/resources/styles/main/partials/loader.scss b/frontend/resources/styles/main/partials/loader.scss index f42675aaf..ce2542d2d 100644 --- a/frontend/resources/styles/main/partials/loader.scss +++ b/frontend/resources/styles/main/partials/loader.scss @@ -9,7 +9,7 @@ position: fixed; top: 0; width: 100%; - z-index: 999; + z-index: 40; } // full with loader CSS diff --git a/frontend/resources/styles/main/partials/tool-bar.scss b/frontend/resources/styles/main/partials/tool-bar.scss deleted file mode 100644 index eea14f2e3..000000000 --- a/frontend/resources/styles/main/partials/tool-bar.scss +++ /dev/null @@ -1,48 +0,0 @@ -// This Source Code Form is subject to the terms of the Mozilla Public -// License, v. 2.0. If a copy of the MPL was not distributed with this -// file, You can obtain one at http://mozilla.org/MPL/2.0/. -// -// Copyright (c) KALEIDOS INC - -.tool-bar { - background-color: $color-gray-40; - bottom: 0; - height: 100%; - position: fixed; - left: 0; - width: 50px; - z-index: 10; - - .tool-bar-inside { - padding-top: 70px; - - .main-tools { - align-items: center; - display: flex; - flex-direction: column; - - li { - cursor: pointer; - margin-bottom: $size-5; - - svg { - fill: $color-gray-20; - height: 25px; - width: 25px; - } - - &:hover { - svg { - fill: $color-white; - } - } - - &.current { - svg { - fill: $color-primary; - } - } - } - } - } -} diff --git a/frontend/src/app/main/ui/components/context_menu_a11y.scss b/frontend/src/app/main/ui/components/context_menu_a11y.scss index ed007261c..ea8a89cc5 100644 --- a/frontend/src/app/main/ui/components/context_menu_a11y.scss +++ b/frontend/src/app/main/ui/components/context_menu_a11y.scss @@ -10,7 +10,7 @@ position: relative; visibility: hidden; opacity: $op-0; - z-index: $z-index-3; + z-index: $z-index-4; &.is-open { position: relative; diff --git a/frontend/src/app/main/ui/dashboard/comments.scss b/frontend/src/app/main/ui/dashboard/comments.scss index 1be90e32b..b6e872e52 100644 --- a/frontend/src/app/main/ui/dashboard/comments.scss +++ b/frontend/src/app/main/ui/dashboard/comments.scss @@ -78,7 +78,7 @@ min-height: $s-200; position: absolute; width: 100%; - z-index: $z-index-3; + z-index: $z-index-4; hr { margin: 0; diff --git a/frontend/src/app/main/ui/dashboard/templates.scss b/frontend/src/app/main/ui/dashboard/templates.scss index 2fa508411..2649d166b 100644 --- a/frontend/src/app/main/ui/dashboard/templates.scss +++ b/frontend/src/app/main/ui/dashboard/templates.scss @@ -42,7 +42,7 @@ border-top-right-radius: $br-10; margin-right: $s-32; position: relative; - z-index: 1; + z-index: $z-index-1; background-color: $db-quaternary; } diff --git a/frontend/src/app/main/ui/workspace/color_palette.scss b/frontend/src/app/main/ui/workspace/color_palette.scss index dfe3e8229..4815dee3e 100644 --- a/frontend/src/app/main/ui/workspace/color_palette.scss +++ b/frontend/src/app/main/ui/workspace/color_palette.scss @@ -19,7 +19,7 @@ height: 100%; width: $s-24; padding: 0; - z-index: $z-index-4; + z-index: $z-index-5; svg { @extend .button-icon; stroke: var(--icon-foreground); diff --git a/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.scss b/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.scss index 7b09a1ab6..920d6031b 100644 --- a/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.scss +++ b/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.scss @@ -13,7 +13,7 @@ max-width: $s-480; padding: $s-4; margin: 0 0 $s-4 0; - z-index: $z-index-3; + z-index: $z-index-4; border-radius: $br-10; background-color: var(--context-menu-background-color); diff --git a/frontend/src/app/main/ui/workspace/context_menu.scss b/frontend/src/app/main/ui/workspace/context_menu.scss index f6d10a8ec..0ce429a5b 100644 --- a/frontend/src/app/main/ui/workspace/context_menu.scss +++ b/frontend/src/app/main/ui/workspace/context_menu.scss @@ -19,7 +19,7 @@ border-radius: $br-8; border: $s-2 solid var(--panel-border-color); background-color: var(--menu-background-color); - z-index: $z-index-3; + z-index: $z-index-4; } .separator { diff --git a/frontend/src/app/main/ui/workspace/palette.scss b/frontend/src/app/main/ui/workspace/palette.scss index 70f0639e0..9474a7909 100644 --- a/frontend/src/app/main/ui/workspace/palette.scss +++ b/frontend/src/app/main/ui/workspace/palette.scss @@ -43,7 +43,7 @@ .resize-area { grid-area: resize; height: $s-8; - z-index: $z-index-3; + z-index: $z-index-4; width: calc(100% - $s-8); border-radius: $br-circle; cursor: ns-resize; diff --git a/frontend/src/app/main/ui/workspace/presence.scss b/frontend/src/app/main/ui/workspace/presence.scss index 07c883950..22c76e3b0 100644 --- a/frontend/src/app/main/ui/workspace/presence.scss +++ b/frontend/src/app/main/ui/workspace/presence.scss @@ -42,7 +42,7 @@ padding: $s-8; margin: calc(-1 * $s-2) calc(-1 * $s-4) 0 0; background-color: var(--menu-background-color); - z-index: $z-index-3; + z-index: $z-index-4; .active-users-list { gap: $s-4; .users-num, diff --git a/frontend/src/app/main/ui/workspace/sidebar.scss b/frontend/src/app/main/ui/workspace/sidebar.scss index b14ca1253..192a8416e 100644 --- a/frontend/src/app/main/ui/workspace/sidebar.scss +++ b/frontend/src/app/main/ui/workspace/sidebar.scss @@ -47,7 +47,7 @@ $width-settings-bar-max: $s-500; position: absolute; top: 0; left: unset; - z-index: $z-index-3; + z-index: $z-index-4; width: $s-8; cursor: ew-resize; height: 100%; diff --git a/frontend/src/app/main/ui/workspace/sidebar/layer_item.scss b/frontend/src/app/main/ui/workspace/sidebar/layer_item.scss index 68779f911..124ee6f48 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layer_item.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/layer_item.scss @@ -249,7 +249,7 @@ :global(.sticky) { position: sticky; top: $s-0; - z-index: $z-index-3; + z-index: $z-index-4; } .tab-indentation { diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss index d1bb3aa4c..bf1a29c77 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss @@ -224,7 +224,7 @@ margin: 0 0 $s-40 0; margin-top: $s-4; border-radius: $br-8; - z-index: $z-index-3; + z-index: $z-index-4; overflow-y: auto; background-color: var(--menu-background-color); .option-btn { diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss index 1106ea3c1..b5c417a41 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss @@ -351,7 +351,7 @@ right: 0; height: 100%; width: 100%; - z-index: $z-index-3; + z-index: $z-index-4; } .show-recent { diff --git a/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.scss b/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.scss index e1b2bb08d..e29217eaa 100644 --- a/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.scss +++ b/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.scss @@ -13,7 +13,7 @@ max-width: $s-480; padding: $s-4; margin: 0 0 $s-4 0; - z-index: $z-index-3; + z-index: $z-index-4; border-radius: $br-10; background-color: var(--context-menu-background-color); diff --git a/frontend/src/app/main/ui/workspace/top_toolbar.scss b/frontend/src/app/main/ui/workspace/top_toolbar.scss index 293956c6c..bc7850c72 100644 --- a/frontend/src/app/main/ui/workspace/top_toolbar.scss +++ b/frontend/src/app/main/ui/workspace/top_toolbar.scss @@ -17,7 +17,7 @@ padding: $s-8 $s-16; border-radius: $s-8; border: $s-2 solid var(--panel-border-color); - z-index: $z-index-10; + z-index: $z-index-3; background-color: var(--color-background-primary); transition: top 0.3s,