diff --git a/README-ru.md b/README-ru.md index 4047d071..5376144b 100644 --- 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 index 6f435e18..6a25da26 100644 --- 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 index 9a654bc7..20be67ae 100644 --- 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 index 387f84f1..44134952 100644 --- a/src/bundle/settings/index.tsx +++ b/src/bundle/settings/index.tsx @@ -158,6 +158,7 @@ const SettingsContent: React.FC = function SettingsContent } + tooltipClassName={bContent('tooltip')} placement={mdHelpPlacement} className={bContent('mode-help')} /> diff --git a/src/bundle/sticky/sticky.scss b/src/bundle/sticky/sticky.scss index 7b3ccd35..1a4f0e97 100644 --- 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 index 30b29fe5..c4d9d2b3 100644 --- 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 index dafdd4b7..a89397a7 100644 --- 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 index f58dbf8d..ff58943b 100644 --- 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 index 2ee9a036..588f205f 100644 --- 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 index e426a52c..5344e394 100644 --- 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 index df72c43d..4ae40c66 100644 --- 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 index 8eda80bc..7e8bec8d 100644 --- 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 index 96c47eaa..5efd360f 100644 --- 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 index 98230502..4730f7c1 100644 --- 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 index 705f049a..000bc27b 100644 --- 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 index 0bb81c91..19cf523e 100644 --- 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 index 8631d7a1..d863a0b4 100644 --- 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 index 4a06dea6..453fc457 100644 --- 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); +} +