Revert #6733 to avoid breaking changes for extensions (#6821)

This reverts commit 4af8fbaa34. Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
2025-05-20 05:10:56 +00:00 · 2022-12-22 15:21:44 +03:00 · 2022-12-22 15:21:44 +03:00 · da267a99f4
commit da267a99f4
parent 6781b4657f
26 changed files with 44 additions and 23 deletions
--- a/src/features/application-update/child-features/application-update-using-top-bar/renderer/update-application-top-bar-item/update-button/styles.module.scss
+++ b/src/features/application-update/child-features/application-update-using-top-bar/renderer/update-application-top-bar-item/update-button/styles.module.scss
@ -33,6 +33,7 @@
    height: 100%;
    left: 0;
    opacity: 0.15;
+    z-index: -1;
    transition: opacity 0.1s;
  }
 }
--- a/src/renderer/components/+namespaces/namespace-select-filter.scss
+++ b/src/renderer/components/+namespaces/namespace-select-filter.scss
@ -33,6 +33,7 @@
      &::before, &::after {
        content: ' ';
        position: absolute;
+        z-index: 20;
        display: block;
        width: 8px;
        height: var(--font-size);
--- a/src/renderer/components/+welcome/welcome.scss
+++ b/src/renderer/components/+welcome/welcome.scss
@ -7,7 +7,7 @@
  text-align: center;
  width: 100%;
  height: 100%;
-  z-index: var(--z-index-base);
+  z-index: 1;

  h2 {
    color: var(--textColorAccent);
--- a/src/renderer/components/add-remove-buttons/add-remove-buttons.scss
+++ b/src/renderer/components/add-remove-buttons/add-remove-buttons.scss
@ -9,6 +9,7 @@
  margin-right: $padding * 4;
  bottom: 0;
  right: 0;
+  z-index: 99;

  .Button {
    &.remove-button {
--- a/src/renderer/components/app.scss
+++ b/src/renderer/components/app.scss
@ -26,12 +26,6 @@
  --font-weight-normal: 400;
  --font-weight-bold: 500;
  --main-layout-header: 40px;
-
-  --z-index-base: 0;
-  --z-index-above: 1;
-  --z-index-modals: 2;
-  --z-index-menus: 3;
-  --z-index-topmost: 9999;
 }

 *, *:before, *:after {
@ -254,6 +248,19 @@ iframe {
  }
 }

+// app's common loading indicator, displaying on the route transitions
+#loading {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin: -15px;
+  z-index: 1000;
+
+  &.hidden {
+    display: none;
+  }
+}
+
 // hack-fix: remove crappy yellow background from auto-filled inputs in chrome
@keyframes autofill-remove-bgc {
  to {
--- a/src/renderer/components/cluster-manager/cluster-manager.scss
+++ b/src/renderer/components/cluster-manager/cluster-manager.scss
@ -27,7 +27,7 @@
  }

  .error {
-    z-index: var(--z-index-base);
+    z-index: 1;
  }

  #lens-views {
--- a/src/renderer/components/cluster-manager/cluster-status.module.scss
+++ b/src/renderer/components/cluster-manager/cluster-status.module.scss
@ -5,6 +5,7 @@
  min-width: 350px;
  margin: auto;
  text-align: center;
+  z-index: 1;
  background: var(--mainBackground);
  width: 100%;
  height: 100%;
--- a/src/renderer/components/dialog/dialog.scss
+++ b/src/renderer/components/dialog/dialog.scss
@ -12,7 +12,7 @@
  width: 100%;
  height: 100%;
  padding: $unit * 5;
-  z-index: var(--z-index-modals);
+  z-index: $zIndex-dialog;
  overscroll-behavior: none; // prevent swiping with touch-pad on MacOSX
  overflow: auto;

--- a/src/renderer/components/dock/dock-tabs.module.scss
+++ b/src/renderer/components/dock/dock-tabs.module.scss
@ -44,7 +44,7 @@
      content: "\00A0";
      position: sticky;
      min-width: 8px;
-      z-index: var(--z-index-base);
+      z-index: 1;
    }

    &::before {
--- a/src/renderer/components/dock/dock.scss
+++ b/src/renderer/components/dock/dock.scss
@ -26,7 +26,7 @@
      right: 0;
      left: 0;
      bottom: 0;
-      z-index: var(--z-index-base);
+      z-index: 100;
    }
  }

--- a/src/renderer/components/drawer/drawer.scss
+++ b/src/renderer/components/drawer/drawer.scss
@ -11,7 +11,7 @@
  position: absolute;
  background: var(--contentColor);
  box-shadow: 0 0 $unit * 2 var(--boxShadow);
-  z-index: var(--z-index-above);
+  z-index: $zIndex-drawer;
  height: 100%;

  &.left {
--- a/src/renderer/components/editable-list/editable-list.scss
+++ b/src/renderer/components/editable-list/editable-list.scss
@ -37,6 +37,7 @@
        &::before, &::after {
          content: ' ';
          position: absolute;
+          z-index: 20;
          display: block;
          width: 8px;
          height: var(--font-size);
--- a/src/renderer/components/hotbar/hotbar-menu.scss
+++ b/src/renderer/components/hotbar/hotbar-menu.scss
@ -12,7 +12,6 @@
  padding-top: 1px;
  width: var(--hotbar-width);
  overflow: hidden;
-  isolation: isolate;

  &.draggingOver::after {
    content: " ";
--- a/src/renderer/components/hotbar/hotbar-selector.module.scss
+++ b/src/renderer/components/hotbar/hotbar-selector.module.scss
@ -40,7 +40,7 @@
    }

    &:focus-visible {
-      z-index: var(--z-index-base);
+      z-index: 1;
    }
  }
 }
--- a/src/renderer/components/kube-object-details/kube-object-details.scss
+++ b/src/renderer/components/kube-object-details/kube-object-details.scss
@ -4,6 +4,8 @@
 */

 .KubeObjectDetails {
+  z-index: $zIndex-drawer + 1 !important;
+
  .drawer-title {
    .Menu {
      border: none;
--- a/src/renderer/components/layout/main-layout.module.scss
+++ b/src/renderer/components/layout/main-layout.module.scss
@ -11,7 +11,7 @@
  grid-template-rows: [contents] 1fr [footer] auto;
  grid-template-columns: [sidebar] var(--sidebar-width) [contents] 1fr;
  width: 100%;
-  z-index: var(--z-index-base);
+  z-index: 1;
  height: 100%;
 }

--- a/src/renderer/components/layout/setting-layout.scss
+++ b/src/renderer/components/layout/setting-layout.scss
@ -10,7 +10,7 @@
  display: grid;
  color: var(--settingsColor);
  position: fixed;
-  z-index: var(--z-index-modals);
+  z-index: 13!important;
  left: 0;
  top: 0;
  right: 0;
--- a/src/renderer/components/layout/top-bar/top-bar.module.scss
+++ b/src/renderer/components/layout/top-bar/top-bar.module.scss
@ -5,7 +5,7 @@

 .topBar {
  background-color: var(--layoutBackground);
-  z-index: var(--z-index-above);
+  z-index: 2;
  grid-area: topbar;
  height: var(--main-layout-header);

--- a/src/renderer/components/markdown-viewer/markdown-viewer.scss
+++ b/src/renderer/components/markdown-viewer/markdown-viewer.scss
@ -658,7 +658,7 @@

  :checked + .radio-label {
    position: relative;
-    z-index: var(--z-index-base);
+    z-index: 1;
    border-color: #4078c0;
  }

--- a/src/renderer/components/menu/menu.scss
+++ b/src/renderer/components/menu/menu.scss
@ -12,7 +12,7 @@
  background: var(--bgc);
  list-style: none;
  border: 1px solid var(--borderColor);
-  z-index: var(--z-index-menus);
+  z-index: 101;
  box-shadow: rgb(0 0 0 / 17%) 0px 6px 9px 0px;
  border-radius: 4px;

--- a/src/renderer/components/notifications/notifications.scss
+++ b/src/renderer/components/notifications/notifications.scss
@ -11,7 +11,7 @@
  top: 0;
  padding: $padding * 2;
  max-height: 100vh;
-  z-index: var(--z-index-topmost);
+  z-index: 100000;
  height: min-content!important;

  &:empty {
--- a/src/renderer/components/resizing-anchor/resizing-anchor.scss
+++ b/src/renderer/components/resizing-anchor/resizing-anchor.scss
@ -13,7 +13,7 @@ body.resizing {
  $dimension: 12px;

  position: absolute;
-  z-index: var(--z-index-above);
+  z-index: 10;

  &::after {
    content: " ";
--- a/src/renderer/components/select/select.scss
+++ b/src/renderer/components/select/select.scss
@ -145,7 +145,7 @@ html {
  //-- Themes

  .Select__menu {
-    z-index: var(--z-index-menus); // render at the top when used inside dialog
+    z-index: $zIndex-select-portal; // render at the top when used inside dialog
  }

  .Select, .Select__menu {
--- a/src/renderer/components/table/table-head.scss
+++ b/src/renderer/components/table/table-head.scss
@ -15,7 +15,9 @@
  }

  &.sticky {
+    position: -webkit-sticky; // safari
    position: sticky;
+    z-index: 1;
    top: 0;
  }

--- a/src/renderer/components/tooltip/tooltip.scss
+++ b/src/renderer/components/tooltip/tooltip.scss
@ -24,7 +24,7 @@
  text-align: center;
  pointer-events: none;
  transition: opacity 150ms 150ms ease-in-out;
-  z-index: var(--z-index-topmost);
+  z-index: 100000;
  box-shadow: 0 8px 16px rgba(0,0,0,0.24);
  left: 0;
  top: 0;
--- a/src/renderer/components/vars.scss
+++ b/src/renderer/components/vars.scss
@ -21,6 +21,12 @@ $font-weight-thin: var(--font-weight-thin);
 $font-weight-normal: var(--font-weight-normal);
 $font-weight-bold: var(--font-weight-bold);

+// Z-index correlations
+$zIndex-sidebar-hover: 500;
+$zIndex-select-portal: 300;
+$zIndex-dialog: 200;
+$zIndex-drawer: 100;
+
 // Animation timing functions
 $animation-curve-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1);
 $animation-curve-linear-out-slow-in: cubic-bezier(0, 0, 0.2, 1);