refactor(z-index): created layers system (#3156)

Satellite-im · May 16, 2022 · b4932fe · b4932fe
1 parent 1948719
commit b4932fe
Show file tree

Hide file tree

Showing 51 changed files with 169 additions and 97 deletions.
diff --git a/assets/styles/base.less b/assets/styles/base.less
@@ -441,7 +441,7 @@ input.date-input {
     &:extend(.blur-less);
     font-family: @primary-font !important;
     color: @secondary-text !important;
-    z-index: 100000 !important;
+    &:extend(.fourth-layer);
   }
 }
 .input {
@@ -486,7 +486,8 @@ input.date-input {
 .select.is-primary:not(:hover)::after,
 .select:not(.is-multiple):not(.is-loading):hover::after {
   border-color: @secondary-text;
-  z-index: @base-z-index;
+
+  &:extend(.first-layer);
 }
 
 .select.is-primary:hover::after,

diff --git a/assets/styles/framework/framework.less b/assets/styles/framework/framework.less
@@ -7,7 +7,12 @@
 @import url('~/assets/styles/framework/ui.less');
 @import url('~/assets/styles/framework/animations.less');
 
-@base-z-index: 1;
+@background-layer-zindex: -1;
+@base-layer-zindex: 0;
+@first-layer-zindex: 10;
+@second-layer-zindex: 20;
+@third-layer-zindex: 30;
+@fourth-layer-zindex: 40;
 @viewport-width: 100vw;
 
 @import url('@creativebulma/bulma-tooltip/dist/bulma-tooltip.min.css');
@@ -19,3 +24,22 @@
 #app {
   height: 100%;
 }
+
+.background-layer {
+  z-index: @background-layer-zindex;
+}
+.base-layer {
+  z-index: @base-layer-zindex;
+}
+.first-layer {
+  z-index: @first-layer-zindex;
+}
+.second-layer {
+  z-index: @second-layer-zindex;
+}
+.third-layer {
+  z-index: @third-layer-zindex;
+}
+.fourth-layer {
+  z-index: @fourth-layer-zindex;
+}
diff --git a/assets/styles/thirdparty/multiselect.less b/assets/styles/thirdparty/multiselect.less
@@ -21,7 +21,8 @@ fieldset[disabled] .multiselect {
   border-radius: @full;
   border: 2px solid transparent;
   box-shadow: 0 0 0 1px transparent;
-  z-index: @base-z-index + 4;
+
+  &:extend(.first-layer);
 }
 .multiselect__spinner:before {
   animation: spinning 2.4s cubic-bezier(0.41, 0.26, 0.2, 0.62);
@@ -66,7 +67,7 @@ fieldset[disabled] .multiselect {
   opacity: 0.6;
 }
 .multiselect--active {
-  z-index: @base-z-index + 3;
+  &:extend(.first-layer);
   .multiselect__tags {
     &:extend(.round-corners);
   }

diff --git a/components/interactables/ContextMenu/ContextMenu.less b/components/interactables/ContextMenu/ContextMenu.less
@@ -3,8 +3,8 @@
   &:extend(.blur);
   &:extend(.font-secondary);
   &:extend(.round-corners);
+  &:extend(.third-layer);
   position: fixed;
-  z-index: 999;
   outline: none;
   cursor: pointer;
   padding: 8px;

diff --git a/components/interactables/ImageCropper/ImageCropper.less b/components/interactables/ImageCropper/ImageCropper.less
@@ -10,11 +10,11 @@
 
 .file-browser-trigger {
   position: absolute;
-  z-index: 99;
   // border: 4px solid red;
   height: 200px;
   width: 500px;
   cursor: pointer;
+  &:extend(.third-layer);
 }
 
 .croppie-container {
@@ -39,10 +39,10 @@
   &:extend(.absolute-coverage);
   flex-direction: column;
   align-items: center;
-  z-index: 99;
   padding: 35px;
   margin: auto;
   width: 380px;
   height: 380px;
   animation: zoom-in-zoom-out @animation-speed ease-out;
+  &:extend(.third-layer);
 }
diff --git a/components/interactables/Input/Input.less b/components/interactables/Input/Input.less
@@ -23,8 +23,8 @@
     height: @full;
     background: transparent;
     border-color: transparent;
-    z-index: 2;
     cursor: pointer;
+    &:extend(.first-layer);
   }
   position: relative;
 }

diff --git a/components/interactables/QuickProfile/QuickProfile.less b/components/interactables/QuickProfile/QuickProfile.less
@@ -21,9 +21,9 @@
     height: 25px;
     .close-button {
       position: absolute;
-      z-index: 10;
       right: @normal-spacing;
       top: @normal-spacing;
+      &:extend(.first-layer);
     }
   }
   .is-text {
@@ -48,13 +48,13 @@
     margin-top: @xlarge-spacing;
   }
   position: fixed;
-  z-index: 3;
   width: 350px;
   max-width: calc(@full - 2rem);
   top: 4rem;
   left: 4rem;
   padding: @normal-spacing;
   overflow: hidden;
+  &:extend(.first-layer);
 }
 
 @media only screen and (max-width: @mobile-breakpoint) {

diff --git a/components/interactables/Select/Select.less b/components/interactables/Select/Select.less
@@ -46,7 +46,8 @@
     max-width: @full;
     left: 0;
     right: 0;
-    z-index: @base-z-index + 100;
+
+    &:extend(.second-layer);
     margin-top: @light-spacing;
     div {
       height: @normal-spacing * 2;

diff --git a/components/ui/Chat/Image/Overlay/Overlay.less b/components/ui/Chat/Image/Overlay/Overlay.less
@@ -21,6 +21,7 @@
 
   position: fixed;
   background: rgba(0, 0, 0, 0.75);
-  z-index: @base-z-index + 102;
+
+  &:extend(.second-layer);
   flex-direction: column;
 }
diff --git a/components/ui/Chat/Scroll/Scroll.less b/components/ui/Chat/Scroll/Scroll.less
@@ -59,7 +59,8 @@
   width: calc(@full - @normal-spacing * 1.8);
   margin-left: @normal-spacing;
   border-radius: 0 0 @corner-rounding @corner-rounding;
-  z-index: @base-z-index + 11;
+
+  &:extend(.first-layer);
   padding: (@light-spacing / 2) @light-spacing;
   span {
     float: right;

diff --git a/components/ui/ComingSoon/ComingSoon.less b/components/ui/ComingSoon/ComingSoon.less
@@ -1,6 +1,6 @@
 .coming-soon-container {
   &:before {
-    z-index: @base-z-index + 200 !important;
+    &:extend(.third-layer);
   }
   .coming-soon {
     pointer-events: none;
@@ -29,10 +29,10 @@
     content: 'Coming Soon';
     position: absolute;
     font-size: 2.5em;
-    z-index: 999;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     color: white;
+    &:extend(.third-layer);
   }
 }
diff --git a/components/ui/DroppableWrapper/DroppableWrapper.less b/components/ui/DroppableWrapper/DroppableWrapper.less
@@ -17,7 +17,7 @@
     background-color: transparent;
     border: 5px solid transparent;
     transition: 0.2s ease-in-out;
-    z-index: 100;
+    &:extend(.third-layer);
   }
   &.droppableWrapper--active {
     &:after {

diff --git a/components/ui/GlowingCursorArea/GlowingCursorArea.less b/components/ui/GlowingCursorArea/GlowingCursorArea.less
@@ -14,7 +14,7 @@
   height: 0px;
   pointer-events: none;
   user-select: none;
-  z-index: 55555555;
+  &:extend(.third-layer);
   backface-visibility: hidden;
   will-change: transform;
   box-shadow: 0 0 30px 30px rgba(255, 255, 255, 0.1);

diff --git a/components/ui/InlineNotification/InlineNotification.less b/components/ui/InlineNotification/InlineNotification.less
@@ -13,7 +13,8 @@
     justify-self: flex-end;
   }
   position: fixed;
-  z-index: @base-z-index + 101;
+
+  &:extend(.second-layer);
   background: @red;
   padding: (@light-spacing / 2) @normal-spacing;
   font-size: @text-size;

diff --git a/components/ui/Loaders/Updating/Updating.less b/components/ui/Loaders/Updating/Updating.less
@@ -8,7 +8,8 @@
   flex-direction: row;
   margin: 0;
   position: fixed;
-  z-index: @base-z-index + 2;
+
+  &:extend(.first-layer);
   bottom: @normal-spacing;
   right: @normal-spacing;
   background: @primary-color;

diff --git a/components/ui/Modal/Modal.less b/components/ui/Modal/Modal.less
@@ -34,7 +34,7 @@
 }
 
 .modal {
-  z-index: @base-z-index + 103;
+  &:extend(.first-layer);
   position: absolute;
 }
 .close {
@@ -46,7 +46,8 @@
   height: 30px;
   font-size: 14pt;
   cursor: pointer;
-  z-index: @base-z-index + 5;
+
+  &:extend(.first-layer);
 }
 .label {
   padding: 0 !important;
@@ -85,7 +86,8 @@
     width: 100%;
     height: 100%;
     position: absolute;
-    z-index: @base-z-index + 102;
+
+    &:extend(.first-layer);
     background: transparent !important;
     backdrop-filter: @light-blur;
   }

diff --git a/components/ui/Popups/Error/Error.less b/components/ui/Popups/Error/Error.less
@@ -48,7 +48,7 @@
   position: fixed;
   background: @foreground !important;
   opacity: 0.6;
-  z-index: 9;
+  &:extend(.first-layer);
   height: @full;
   top: 0;
   left: 0;

diff --git a/components/ui/TypeAhead/TypeAhead.less b/components/ui/TypeAhead/TypeAhead.less
@@ -5,7 +5,8 @@
     left: 0;
     margin-top: @light-spacing * 1.5;
     &:extend(.bordered);
-    z-index: @base-z-index + 2;
+
+    &:extend(.first-layer);
     &:extend(.background-semitransparent-light);
     &:extend(.blur);
     &:extend(.full-width);

diff --git a/components/views/chat/chatbar/Editable.vue b/components/views/chat/chatbar/Editable.vue
@@ -330,7 +330,6 @@ export default Vue.extend({
   width: 100%;
 
   .placeholder {
-    z-index: -1;
     color: @text-muted;
     position: absolute;
     white-space: nowrap;
@@ -342,6 +341,7 @@ export default Vue.extend({
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
+    &:extend(.background-layer);
   }
 
   .editable-input {

diff --git a/components/views/chat/chatbar/commands/preview/Preview.less b/components/views/chat/chatbar/commands/preview/Preview.less
@@ -8,7 +8,8 @@
   &:extend(.round-corners);
   &:extend(.background-semitransparent-light);
   &:extend(.blur);
-  z-index: @base-z-index;
+
+  &:extend(.first-layer);
 
   #commands {
     height: 7.5rem;

diff --git a/components/views/chat/chatbar/controls/Controls.less b/components/views/chat/chatbar/controls/Controls.less
@@ -11,7 +11,7 @@
     background-color: transparent;
     color: @white;
     &:before {
-      z-index: @base-z-index + 200 !important;
+      &:extend(.first-layer);
     }
     &[disabled] {
       cursor: not-allowed !important;

diff --git a/components/views/chat/enhancers/Enhancers.less b/components/views/chat/enhancers/Enhancers.less
@@ -40,7 +40,8 @@
   bottom: 100% !important;
   margin-bottom: @light-spacing;
   overflow: hidden;
-  z-index: @base-z-index + 100;
+
+  &:extend(.first-layer);
   margin-right: 1rem;
   &:extend(.round-corners);
   &:extend(.background-semitransparent-light);

diff --git a/components/views/chat/message/actions/Actions.less b/components/views/chat/message/actions/Actions.less
@@ -37,5 +37,5 @@
   font-size: 14px;
   align-items: center;
   padding: 0 0.25rem;
-  z-index: 10;
+  &:extend(.first-layer);
 }
diff --git a/components/views/chat/message/reactions/Reactions.less b/components/views/chat/message/reactions/Reactions.less
@@ -60,7 +60,8 @@
     padding: 8px 12px;
     &:extend(.bordered);
     &:extend(.round-corners);
-    z-index: @base-z-index + 2;
+
+    &:extend(.first-layer);
     animation: @animation-speed fadeIn;
     animation-fill-mode: both;
     opacity: 0;