fix: added z-index to mode help tooltip and z-index system

gravity-ui · Dec 27, 2024 · 52053e5 · 52053e5
1 parent 5b00492
commit 52053e5
Show file tree

Hide file tree

Showing 18 changed files with 130 additions and 24 deletions.
diff --git a/README-ru.md b/README-ru.md
@@ -84,6 +84,32 @@ configure({
 
 Обязательно сделайте вызов `configure()` из [UIKit](https://github.com/gravity-ui/uikit?tab=readme-ov-file#i18n) и других UI-библиотек.
 
+### Система z-index 
+
+В этом проекте используется система z-index для управления слоями элементов. Ниже приведены определенные уровни и их значения:
+
+| level               | z-index value |
+|---------------------|---------------|
+| background          | -1            |
+| default             | 0             |
+| forefront           | 1             |
+| img-settings-button | 2             |
+| table-view-button   | 100           |
+| table-cell-button   | 110           |
+| sticky-toolbar      | 2000          |
+| tooltip             | 2100          |
+
+### Использование
+
+Для применения z-index в компонентах используйте миксин z-index, передавая соответствующий ключ в качестве аргумента:
+
+```scss
+@use 'styles/mixins.scss';
+
+.tooltip {
+  @include mixins.z-index('tooltip');
+}
+```
 
 ### Участие в разработке
 

diff --git a/README.md b/README.md
@@ -83,6 +83,33 @@ configure({
 
 Don't forget to call `configure()` from [UIKit](https://github.com/gravity-ui/uikit?tab=readme-ov-file#i18n) and other UI libraries.
 
+### Z-index levels
+
+This project uses a z-index map to control the layers of elements. Defined levels:
+
+| level               | z-index value |
+|---------------------|---------------|
+| background          | -1            |
+| default             | 0             |
+| forefront           | 1             |
+| img-settings-button | 2             |
+| table-view-button   | 100           |
+| table-cell-button   | 110           |
+| sticky-toolbar      | 2000          |
+| tooltip             | 2100          |
+
+### Usage
+
+To apply z-index to components, use the z-index mixin, passing the key as an argument:
+
+```scss
+@use 'styles/mixins.scss';
+
+.tooltip {
+  @include mixins.z-index('tooltip');
+}
+```
+
 ### Contributing
 
 - [Contributor Guidelines](https://preview.gravity-ui.com/md-editor/?path=/docs/docs-contributing--docs)
diff --git a/src/bundle/settings/index.scss b/src/bundle/settings/index.scss
@@ -1,3 +1,4 @@
+@use '../../styles/mixins.scss';
 @import '~@gravity-ui/uikit/styles/mixins';
 
 .g-md-editor-settings {
@@ -13,7 +14,7 @@
     }
 
     &__separator {
-        z-index: 0;
+        @include mixins.z-index('default');
 
         margin: 6px 4px;
 
@@ -28,6 +29,10 @@
         float: right;
     }
 
+    &__tooltip {
+        @include mixins.z-index('tooltip');
+    }
+
     &__separator {
         border-bottom: 1px solid var(--g-color-line-generic);
     }

diff --git a/src/bundle/settings/index.tsx b/src/bundle/settings/index.tsx
@@ -158,6 +158,7 @@ const SettingsContent: React.FC<SettingsContentProps> = function SettingsContent
                                 <MarkdownHints />
                             </div>
                         }
+                        tooltipClassName={bContent('tooltip')}
                         placement={mdHelpPlacement}
                         className={bContent('mode-help')}
                     />

diff --git a/src/bundle/sticky/sticky.scss b/src/bundle/sticky/sticky.scss
@@ -1,4 +1,4 @@
-@use '../../styles/zindex' as zIndexVars;
+@use '../../styles/mixins.scss';
 
 $block: 'g-md-editor-sticky';
 
@@ -13,7 +13,7 @@ $block: 'g-md-editor-sticky';
     }
 
     &_sticky-active:not(.#{$block}_clear) {
-        z-index: zIndexVars.$sticky-toolbar;
+        @include mixins.z-index('sticky-toolbar');
 
         padding: var(--g-md-toolbar-sticky-padding);
 

diff --git a/src/extensions/additional/FoldingHeading/plugins/folding.scss b/src/extensions/additional/FoldingHeading/plugins/folding.scss
@@ -1,4 +1,6 @@
 @use 'node_modules/@gravity-ui/uikit/styles/mixins.scss' as uikit;
+@use '../../../../styles/mixins.scss';
+
 
 .pm-h-folding-hidden {
     display: none;
@@ -12,8 +14,9 @@
     position: relative;
 
     &::before {
+        @include mixins.z-index('forefront');
+
         position: absolute;
-        z-index: 1;
         bottom: -4px;
         left: 0;
 
@@ -30,8 +33,9 @@
     }
 
     &::after {
+        @include mixins.z-index('forefront');
+
         position: absolute;
-        z-index: 1;
         bottom: -8px;
         left: 16px;
 
@@ -47,8 +51,9 @@
 
 .pm-h-folding-label {
     &::after {
+        @include mixins.z-index('forefront');
+
         position: absolute;
-        z-index: 1;
         right: 2px;
         bottom: -6px;
 

diff --git a/src/extensions/additional/Math/view-and-edit.scss b/src/extensions/additional/Math/view-and-edit.scss
@@ -1,3 +1,5 @@
+@use '../../../styles/mixins.scss';
+
 .math-block {
     font-family: var(--g-font-family-monospace);
 
@@ -45,8 +47,9 @@
     }
 
     &::before {
+        @include mixins.z-index('background');
+
         position: absolute;
-        z-index: -1;
         inset: -2px;
 
         content: '';

diff --git a/src/extensions/additional/Mermaid/MermaidNodeView/Mermaid.scss b/src/extensions/additional/Mermaid/MermaidNodeView/Mermaid.scss
@@ -1,3 +1,5 @@
+@use '../../../../styles/mixins.scss';
+
 .g-md-Mermaid {
     display: flex;
     justify-content: space-between;
@@ -32,7 +34,7 @@
     }
 
     &__EditorPopover {
-        z-index: 1;
+        @include mixins.z-index('forefront');
 
         float: right;
     }

diff --git a/src/extensions/additional/YfmHtmlBlock/YfmHtmlBlockNodeView/YfmHtmlBlock.scss b/src/extensions/additional/YfmHtmlBlock/YfmHtmlBlockNodeView/YfmHtmlBlock.scss
@@ -1,3 +1,5 @@
+@use '../../../../styles/mixins.scss';
+
 .g-md-yfm-html-block {
     position: relative;
 
@@ -65,7 +67,7 @@
     }
 
     &__editor-popover {
-        z-index: 1;
+        @include mixins.z-index('forefront');
 
         float: right;
     }

diff --git a/src/extensions/behavior/Cursor/gapcursor.scss b/src/extensions/behavior/Cursor/gapcursor.scss
@@ -1,3 +1,5 @@
+@use '../../../styles//mixins.scss';
+
 .Prosemirror-hide-cursor {
     caret-color: transparent;
 }
@@ -27,8 +29,9 @@
     }
 
     &::before {
+        @include mixins.z-index('forefront');
+
         position: relative;
-        z-index: 1;
 
         display: inline-block;
 

diff --git a/src/extensions/behavior/Placeholder/index.scss b/src/extensions/behavior/Placeholder/index.scss
@@ -1,3 +1,5 @@
+@use '../../../styles/mixins.scss';
+
 .ProseMirror .g-md-placeholder {
     display: inline-block;
 
@@ -27,8 +29,9 @@
 
     .ProseMirror-focused &_focus {
         .g-md-placeholder__cursor {
+            @include mixins.z-index('forefront');
+
             position: relative;
-            z-index: 1;
 
             margin-right: -1px;
 

diff --git a/src/extensions/behavior/Resizable/Resizable.scss b/src/extensions/behavior/Resizable/Resizable.scss
@@ -1,3 +1,5 @@
+@use '../../../styles/mixins.scss';
+
 body :has(.g-md-resizable_resizing) {
     cursor: col-resize;
 }
@@ -7,8 +9,9 @@ body :has(.g-md-resizable_resizing) {
 
     &_resizing &__resizer-wrapper,
     &_hover &__resizer-wrapper {
+        @include mixins.z-index('forefront');
+
         position: absolute;
-        z-index: 1;
         top: 0;
 
         display: flex;

diff --git a/src/extensions/markdown/Code/code.scss b/src/extensions/markdown/Code/code.scss
@@ -1,3 +1,4 @@
+@use '../../../styles/mixins.scss';
 // add custom styles for prosemirror-codemark
 // because default styles conflict with the rest of the project styles
 
@@ -18,8 +19,9 @@
 }
 
 .ProseMirror-focused .fake-cursor {
+    @include mixins.z-index('forefront');
+
     position: relative;
-    z-index: 1;
 
     margin-right: -1px;
 

diff --git a/src/extensions/yfm/ImgSize/plugins/ImgSizeNodeView/ImgSettingsButton.scss b/src/extensions/yfm/ImgSize/plugins/ImgSizeNodeView/ImgSettingsButton.scss
@@ -1,6 +1,9 @@
+@use '../../../../../styles/mixins.scss';
+
 .g-md-img-settings-button {
+    @include mixins.z-index('img-settings-button');
+
     position: absolute;
-    z-index: 2;
     top: 3px;
     right: 3px;
 }
diff --git a/src/extensions/yfm/YfmTable/plugins/YfmTableControls/view.scss b/src/extensions/yfm/YfmTable/plugins/YfmTableControls/view.scss
@@ -1,3 +1,5 @@
+@use '../../../../../styles/mixins.scss';
+
 $buttons-size: 16px;
 $buttons-offset: 2px;
 
@@ -41,8 +43,9 @@ $buttons-offset: 2px;
         transition: opacity 150ms ease 50ms;
 
         &_right {
+            @include mixins.z-index('table-view-button');
+
             position: absolute;
-            z-index: 100;
             top: 0;
             right: -$buttons-size - $buttons-offset;
 
@@ -54,8 +57,9 @@ $buttons-offset: 2px;
         }
 
         &_bottom {
+            @include mixins.z-index('table-view-button');
+
             position: absolute;
-            z-index: 100;
             bottom: -$buttons-size - $buttons-offset;
 
             display: flex;

diff --git a/src/extensions/yfm/YfmTable/plugins/YfmTableControls/yfmTableCellView.scss b/src/extensions/yfm/YfmTable/plugins/YfmTableControls/yfmTableCellView.scss
@@ -1,7 +1,10 @@
+@use '../../../../../styles/mixins.scss';
+
 .g-md-table-cell-view {
     &__left-button {
+        @include mixins.z-index('table-cell-button');
+
         position: absolute;
-        z-index: 110;
         top: calc(50% - 14px);
         left: -13px;
 
@@ -19,8 +22,9 @@
     }
 
     &__upper-button {
+        @include mixins.z-index('table-cell-button');
+
         position: absolute;
-        z-index: 110;
         top: -13px;
         left: calc(50% - 14px);
 

diff --git a/src/styles/_zindex.scss b/src/styles/_zindex.scss
@@ -1,6 +1,11 @@
-// so that cursor is always cursor:grabbing
-$dnd-cursor-back: 100500;
-// ghost for drag and drop. has to be always above other elements
-$dnd-ghost: 100499;
-
-$sticky-toolbar: 2000; // more than has popup
+// z-index system values
+$z-index-map: (
+    "background": -1,
+    "default": 0,
+    "forefront": 1,
+    "img-settings-button": 2,
+    "table-view-button": 100,
+    "table-cell-button": 110,
+    "sticky-toolbar": 2000,
+    "tooltip": 2100,
+);
diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss
@@ -1,3 +1,5 @@
+@use './zindex' as zIndexVariables;
+
 @mixin block-border-hover() {
     border: 1px dashed transparent;
     border-radius: var(--g-border-radius-s);
@@ -6,3 +8,9 @@
         border-color: var(--g-color-line-generic);
     }
 }
+
+// Getting z-index value by key
+@mixin z-index($key) {
+    z-index: map-get(zIndexVariables.$z-index-map, $key);
+}
+