From 52053e55f8c40ff6b54e1e8cc1d89556e26359d1 Mon Sep 17 00:00:00 2001 From: dpolevodin Date: Fri, 27 Dec 2024 20:19:31 +0600 Subject: [PATCH 1/6] fix: added z-index to mode help tooltip and z-index system --- README-ru.md | 26 ++++++++++++++++++ README.md | 27 +++++++++++++++++++ src/bundle/settings/index.scss | 7 ++++- src/bundle/settings/index.tsx | 1 + src/bundle/sticky/sticky.scss | 4 +-- .../FoldingHeading/plugins/folding.scss | 11 +++++--- .../additional/Math/view-and-edit.scss | 5 +++- .../Mermaid/MermaidNodeView/Mermaid.scss | 4 ++- .../YfmHtmlBlockNodeView/YfmHtmlBlock.scss | 4 ++- src/extensions/behavior/Cursor/gapcursor.scss | 5 +++- .../behavior/Placeholder/index.scss | 5 +++- .../behavior/Resizable/Resizable.scss | 5 +++- src/extensions/markdown/Code/code.scss | 4 ++- .../ImgSizeNodeView/ImgSettingsButton.scss | 5 +++- .../plugins/YfmTableControls/view.scss | 8 ++++-- .../YfmTableControls/yfmTableCellView.scss | 8 ++++-- src/styles/_zindex.scss | 17 +++++++----- src/styles/mixins.scss | 8 ++++++ 18 files changed, 130 insertions(+), 24 deletions(-) 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); +} + From de7a072c0e1d3ec19198fd5f63386f40d886fbaf Mon Sep 17 00:00:00 2001 From: dpolevodin Date: Mon, 13 Jan 2025 18:21:22 +0600 Subject: [PATCH 2/6] fix: added z-index to mode help tooltip and z-index system (fixed lint) --- src/bundle/settings/index.scss | 5 +++-- src/bundle/sticky/sticky.scss | 4 ++-- .../FoldingHeading/plugins/folding.scss | 13 ++++++------- .../additional/Math/view-and-edit.scss | 4 ++-- .../Mermaid/MermaidNodeView/Mermaid.scss | 4 ++-- .../YfmHtmlBlockNodeView/YfmHtmlBlock.scss | 4 ++-- src/extensions/behavior/Cursor/gapcursor.scss | 4 ++-- src/extensions/behavior/Placeholder/index.scss | 4 ++-- src/extensions/behavior/Resizable/Resizable.scss | 4 ++-- src/extensions/markdown/Code/code.scss | 4 ++-- .../ImgSizeNodeView/ImgSettingsButton.scss | 4 ++-- .../YfmTable/plugins/YfmTableControls/view.scss | 8 ++++---- .../YfmTableControls/yfmTableCellView.scss | 8 ++++---- src/styles/_zindex.scss | 16 ++++++++-------- src/styles/mixins.scss | 2 +- 15 files changed, 44 insertions(+), 44 deletions(-) diff --git a/src/bundle/settings/index.scss b/src/bundle/settings/index.scss index 20be67ae..008058a9 100644 --- a/src/bundle/settings/index.scss +++ b/src/bundle/settings/index.scss @@ -1,4 +1,5 @@ @use '../../styles/mixins.scss'; + @import '~@gravity-ui/uikit/styles/mixins'; .g-md-editor-settings { @@ -14,11 +15,11 @@ } &__separator { - @include mixins.z-index('default'); - margin: 6px 4px; border-left: 1px solid var(--g-color-line-generic); + + @include mixins.z-index('default'); } } diff --git a/src/bundle/sticky/sticky.scss b/src/bundle/sticky/sticky.scss index 1a4f0e97..fd4d9896 100644 --- a/src/bundle/sticky/sticky.scss +++ b/src/bundle/sticky/sticky.scss @@ -13,10 +13,10 @@ $block: 'g-md-editor-sticky'; } &_sticky-active:not(.#{$block}_clear) { - @include mixins.z-index('sticky-toolbar'); - padding: var(--g-md-toolbar-sticky-padding); + @include mixins.z-index('sticky-toolbar'); + &::before { position: absolute; inset: var(--g-md-toolbar-sticky-inset, -4px); diff --git a/src/extensions/additional/FoldingHeading/plugins/folding.scss b/src/extensions/additional/FoldingHeading/plugins/folding.scss index c4d9d2b3..5e600e8b 100644 --- a/src/extensions/additional/FoldingHeading/plugins/folding.scss +++ b/src/extensions/additional/FoldingHeading/plugins/folding.scss @@ -1,7 +1,6 @@ @use 'node_modules/@gravity-ui/uikit/styles/mixins.scss' as uikit; @use '../../../../styles/mixins.scss'; - .pm-h-folding-hidden { display: none; } @@ -14,8 +13,6 @@ position: relative; &::before { - @include mixins.z-index('forefront'); - position: absolute; bottom: -4px; left: 0; @@ -30,11 +27,11 @@ mask-size: 12px; transform: translateY(80%); + + @include mixins.z-index('forefront'); } &::after { - @include mixins.z-index('forefront'); - position: absolute; bottom: -8px; left: 16px; @@ -46,13 +43,13 @@ content: ''; border-top: 1px dashed var(--g-color-line-generic); + + @include mixins.z-index('forefront'); } } .pm-h-folding-label { &::after { - @include mixins.z-index('forefront'); - position: absolute; right: 2px; bottom: -6px; @@ -70,5 +67,7 @@ transform: translate(0, 50%); @include uikit.text-body-1(); + + @include mixins.z-index('forefront'); } } diff --git a/src/extensions/additional/Math/view-and-edit.scss b/src/extensions/additional/Math/view-and-edit.scss index a89397a7..14521521 100644 --- a/src/extensions/additional/Math/view-and-edit.scss +++ b/src/extensions/additional/Math/view-and-edit.scss @@ -47,8 +47,6 @@ } &::before { - @include mixins.z-index('background'); - position: absolute; inset: -2px; @@ -58,6 +56,8 @@ background-color: var(--g-md-math-back-color); transition: background-color 0.15s linear; + + @include mixins.z-index('background'); } &:hover { diff --git a/src/extensions/additional/Mermaid/MermaidNodeView/Mermaid.scss b/src/extensions/additional/Mermaid/MermaidNodeView/Mermaid.scss index ff58943b..13838307 100644 --- a/src/extensions/additional/Mermaid/MermaidNodeView/Mermaid.scss +++ b/src/extensions/additional/Mermaid/MermaidNodeView/Mermaid.scss @@ -34,9 +34,9 @@ } &__EditorPopover { - @include mixins.z-index('forefront'); - float: right; + + @include mixins.z-index('forefront'); } &__Controls { diff --git a/src/extensions/additional/YfmHtmlBlock/YfmHtmlBlockNodeView/YfmHtmlBlock.scss b/src/extensions/additional/YfmHtmlBlock/YfmHtmlBlockNodeView/YfmHtmlBlock.scss index 588f205f..58e23339 100644 --- a/src/extensions/additional/YfmHtmlBlock/YfmHtmlBlockNodeView/YfmHtmlBlock.scss +++ b/src/extensions/additional/YfmHtmlBlock/YfmHtmlBlockNodeView/YfmHtmlBlock.scss @@ -67,9 +67,9 @@ } &__editor-popover { - @include mixins.z-index('forefront'); - float: right; + + @include mixins.z-index('forefront'); } &__controls { diff --git a/src/extensions/behavior/Cursor/gapcursor.scss b/src/extensions/behavior/Cursor/gapcursor.scss index 5344e394..5b27445a 100644 --- a/src/extensions/behavior/Cursor/gapcursor.scss +++ b/src/extensions/behavior/Cursor/gapcursor.scss @@ -29,8 +29,6 @@ } &::before { - @include mixins.z-index('forefront'); - position: relative; display: inline-block; @@ -41,6 +39,8 @@ caret-color: transparent; border-right: 1px solid transparent; + + @include mixins.z-index('forefront'); } .ProseMirror-focused &::before { diff --git a/src/extensions/behavior/Placeholder/index.scss b/src/extensions/behavior/Placeholder/index.scss index 4ae40c66..3b554911 100644 --- a/src/extensions/behavior/Placeholder/index.scss +++ b/src/extensions/behavior/Placeholder/index.scss @@ -29,8 +29,6 @@ .ProseMirror-focused &_focus { .g-md-placeholder__cursor { - @include mixins.z-index('forefront'); - position: relative; margin-right: -1px; @@ -40,6 +38,8 @@ animation: placeholder_blink 1s; animation-iteration-count: infinite; + + @include mixins.z-index('forefront'); } } } diff --git a/src/extensions/behavior/Resizable/Resizable.scss b/src/extensions/behavior/Resizable/Resizable.scss index 7e8bec8d..0342c0cf 100644 --- a/src/extensions/behavior/Resizable/Resizable.scss +++ b/src/extensions/behavior/Resizable/Resizable.scss @@ -9,8 +9,6 @@ body :has(.g-md-resizable_resizing) { &_resizing &__resizer-wrapper, &_hover &__resizer-wrapper { - @include mixins.z-index('forefront'); - position: absolute; top: 0; @@ -24,6 +22,8 @@ body :has(.g-md-resizable_resizing) { cursor: col-resize; pointer-events: auto; + @include mixins.z-index('forefront'); + &_left { left: 0; } diff --git a/src/extensions/markdown/Code/code.scss b/src/extensions/markdown/Code/code.scss index 5efd360f..e9d4dcd3 100644 --- a/src/extensions/markdown/Code/code.scss +++ b/src/extensions/markdown/Code/code.scss @@ -19,8 +19,6 @@ } .ProseMirror-focused .fake-cursor { - @include mixins.z-index('forefront'); - position: relative; margin-right: -1px; @@ -30,4 +28,6 @@ animation: code_fake_blink 1s; animation-iteration-count: infinite; + + @include mixins.z-index('forefront'); } diff --git a/src/extensions/yfm/ImgSize/plugins/ImgSizeNodeView/ImgSettingsButton.scss b/src/extensions/yfm/ImgSize/plugins/ImgSizeNodeView/ImgSettingsButton.scss index 4730f7c1..b131ae02 100644 --- a/src/extensions/yfm/ImgSize/plugins/ImgSizeNodeView/ImgSettingsButton.scss +++ b/src/extensions/yfm/ImgSize/plugins/ImgSizeNodeView/ImgSettingsButton.scss @@ -1,9 +1,9 @@ @use '../../../../../styles/mixins.scss'; .g-md-img-settings-button { - @include mixins.z-index('img-settings-button'); - position: absolute; top: 3px; right: 3px; + + @include mixins.z-index('img-settings-button'); } diff --git a/src/extensions/yfm/YfmTable/plugins/YfmTableControls/view.scss b/src/extensions/yfm/YfmTable/plugins/YfmTableControls/view.scss index 000bc27b..ffebf278 100644 --- a/src/extensions/yfm/YfmTable/plugins/YfmTableControls/view.scss +++ b/src/extensions/yfm/YfmTable/plugins/YfmTableControls/view.scss @@ -43,8 +43,6 @@ $buttons-offset: 2px; transition: opacity 150ms ease 50ms; &_right { - @include mixins.z-index('table-view-button'); - position: absolute; top: 0; right: -$buttons-size - $buttons-offset; @@ -54,11 +52,11 @@ $buttons-offset: 2px; width: $buttons-size; height: 100%; - } - &_bottom { @include mixins.z-index('table-view-button'); + } + &_bottom { position: absolute; bottom: -$buttons-size - $buttons-offset; @@ -67,6 +65,8 @@ $buttons-offset: 2px; width: 100%; height: $buttons-size; + + @include mixins.z-index('table-view-button'); } } diff --git a/src/extensions/yfm/YfmTable/plugins/YfmTableControls/yfmTableCellView.scss b/src/extensions/yfm/YfmTable/plugins/YfmTableControls/yfmTableCellView.scss index 19cf523e..081655de 100644 --- a/src/extensions/yfm/YfmTable/plugins/YfmTableControls/yfmTableCellView.scss +++ b/src/extensions/yfm/YfmTable/plugins/YfmTableControls/yfmTableCellView.scss @@ -2,8 +2,6 @@ .g-md-table-cell-view { &__left-button { - @include mixins.z-index('table-cell-button'); - position: absolute; top: calc(50% - 14px); left: -13px; @@ -14,6 +12,8 @@ border-radius: var(--g-border-radius-s); background: var(--g-color-base-background); + @include mixins.z-index('table-cell-button'); + &:hover { pointer-events: initial; @@ -22,8 +22,6 @@ } &__upper-button { - @include mixins.z-index('table-cell-button'); - position: absolute; top: -13px; left: calc(50% - 14px); @@ -36,6 +34,8 @@ transform: rotate(90deg); + @include mixins.z-index('table-cell-button'); + &:hover { pointer-events: initial; diff --git a/src/styles/_zindex.scss b/src/styles/_zindex.scss index d863a0b4..7e808a49 100644 --- a/src/styles/_zindex.scss +++ b/src/styles/_zindex.scss @@ -1,11 +1,11 @@ // 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, + '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 453fc457..366388be 100644 --- a/src/styles/mixins.scss +++ b/src/styles/mixins.scss @@ -10,7 +10,7 @@ } // Getting z-index value by key + @mixin z-index($key) { z-index: map-get(zIndexVariables.$z-index-map, $key); } - From 2ebcba263e040babbdd703fe60a6cc1a306df7f4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=9F=D0=BE=D0=BB=D0=B5=D0=B2=D0=BE=D0=B4=D0=B8=D0=BD=20?= =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9=20=D0=98=D0=B3=D0=BE?= =?UTF-8?q?=D1=80=D0=B5=D0=B2=D0=B8=D1=87=20=284094029=29?= Date: Thu, 17 Apr 2025 13:10:35 +0600 Subject: [PATCH 3/6] fix: return z-index value to sticky-toolbar --- src/styles/_zindex.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/_zindex.scss b/src/styles/_zindex.scss index 73779447..810f90d3 100644 --- a/src/styles/_zindex.scss +++ b/src/styles/_zindex.scss @@ -6,5 +6,5 @@ $z-index-map: ( 'img-settings-button': 2, 'table-view-button': 100, 'table-cell-button': 110, - 'sticky-toolbar': 990, + 'sticky-toolbar': 2000, ); From c3f5a1ad33eb2115eba178be759fb15ef77af753 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=9F=D0=BE=D0=BB=D0=B5=D0=B2=D0=BE=D0=B4=D0=B8=D0=BD=20?= =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9=20=D0=98=D0=B3=D0=BE?= =?UTF-8?q?=D1=80=D0=B5=D0=B2=D0=B8=D1=87=20=284094029=29?= Date: Thu, 17 Apr 2025 13:49:44 +0600 Subject: [PATCH 4/6] fix: added zIndex varibale to HelpMark --- src/bundle/settings/index.tsx | 2 ++ src/styles/_zindex.scss | 6 ++++++ 2 files changed, 8 insertions(+) diff --git a/src/bundle/settings/index.tsx b/src/bundle/settings/index.tsx index ef7aec3d..86691b8c 100644 --- a/src/bundle/settings/index.tsx +++ b/src/bundle/settings/index.tsx @@ -26,6 +26,7 @@ import type {MarkdownEditorMode, MarkdownEditorSplitMode} from '../types'; import {MarkdownHints} from './MarkdownHints'; import './index.scss'; +import '../../styles/_zindex.scss'; const placement: PopupPlacement = ['bottom-end', 'top-end']; @@ -154,6 +155,7 @@ const SettingsContent: React.FC = function SettingsContent popoverProps={{ placement: mdHelpPlacement, modal: false, + zIndex: 'var(--md-editor-sticky-toolbar-popup-z-index)', }} className={bContent('mode-help')} > diff --git a/src/styles/_zindex.scss b/src/styles/_zindex.scss index 810f90d3..c3881d39 100644 --- a/src/styles/_zindex.scss +++ b/src/styles/_zindex.scss @@ -7,4 +7,10 @@ $z-index-map: ( 'table-view-button': 100, 'table-cell-button': 110, 'sticky-toolbar': 2000, + 'sticky-toolbar-popup': 2100, ); + +:root { + --md-editor-sticky-toolbar-popup-z-index: #{map-get($z-index-map, 'sticky-toolbar-popup')} +} + From a08425b5916b0ac961300724a3e57d978f13b821 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=9F=D0=BE=D0=BB=D0=B5=D0=B2=D0=BE=D0=B4=D0=B8=D0=BD=20?= =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9=20=D0=98=D0=B3=D0=BE?= =?UTF-8?q?=D1=80=D0=B5=D0=B2=D0=B8=D1=87=20=284094029=29?= Date: Wed, 14 May 2025 19:07:44 +0600 Subject: [PATCH 5/6] feat: upped @gravity-ui/uikit version to latest and added zIndex prop to PopoverProps in HelpMark --- package-lock.json | 86 ++++++++++++++----------- package.json | 2 +- src/bundle/settings/index.tsx | 5 ++ src/utils/get-z-index-from-variables.ts | 7 ++ 4 files changed, 62 insertions(+), 38 deletions(-) create mode 100644 src/utils/get-z-index-from-variables.ts diff --git a/package-lock.json b/package-lock.json index cd8ba93a..0b8d879f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -69,7 +69,7 @@ "@gravity-ui/prettier-config": "1.1.0", "@gravity-ui/stylelint-config": "4.0.1", "@gravity-ui/tsconfig": "1.0.0", - "@gravity-ui/uikit": "7.1.1", + "@gravity-ui/uikit": "7.11.0", "@playwright/experimental-ct-react": "1.49.0", "@playwright/test": "1.49.0", "@storybook/addon-docs": "8.4.1", @@ -3372,29 +3372,32 @@ } }, "node_modules/@floating-ui/core": { - "version": "1.6.9", - "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.9.tgz", - "integrity": "sha512-uMXCuQ3BItDUbAMhIXw7UPXRfAlOAvZzdK9BWpE60MCn+Svt3aLn9jsPTi/WNGlRUu2uI0v5S7JiIUsbsvh3fw==", + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.0.tgz", + "integrity": "sha512-FRdBLykrPPA6P76GGGqlex/e7fbe0F1ykgxHYNXQsH/iTEtjMj/f9bpY5oQqbjt5VgZvgz/uKXbGuROijh3VLA==", "dev": true, + "license": "MIT", "dependencies": { "@floating-ui/utils": "^0.2.9" } }, "node_modules/@floating-ui/dom": { - "version": "1.6.13", - "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.13.tgz", - "integrity": "sha512-umqzocjDgNRGTuO7Q8CU32dkHkECqI8ZdMZ5Swb6QAM0t5rnlrN3lGo1hdpscRd3WS8T6DKYK4ephgIH9iRh3w==", + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.0.tgz", + "integrity": "sha512-lGTor4VlXcesUMh1cupTUTDoCxMb0V6bm3CnxHzQcw8Eaf1jQbgQX4i02fYgT0vJ82tb5MZ4CZk1LRGkktJCzg==", "dev": true, + "license": "MIT", "dependencies": { - "@floating-ui/core": "^1.6.0", + "@floating-ui/core": "^1.7.0", "@floating-ui/utils": "^0.2.9" } }, "node_modules/@floating-ui/react": { - "version": "0.27.3", - "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.27.3.tgz", - "integrity": "sha512-CLHnes3ixIFFKVQDdICjel8muhFLOBdQH7fgtHNPY8UbCNqbeKZ262G7K66lGQOUQWWnYocf7ZbUsLJgGfsLHg==", + "version": "0.27.8", + "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.27.8.tgz", + "integrity": "sha512-EQJ4Th328y2wyHR3KzOUOoTW2UKjFk53fmyahfwExnFQ8vnsMYqKc+fFPOkeYtj5tcp1DUMiNJ7BFhed7e9ONw==", "dev": true, + "license": "MIT", "dependencies": { "@floating-ui/react-dom": "^2.1.2", "@floating-ui/utils": "^0.2.9", @@ -3410,6 +3413,7 @@ "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.2.tgz", "integrity": "sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==", "dev": true, + "license": "MIT", "dependencies": { "@floating-ui/dom": "^1.0.0" }, @@ -3422,7 +3426,8 @@ "version": "0.2.9", "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.9.tgz", "integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==", - "dev": true + "dev": true, + "license": "MIT" }, "node_modules/@gravity-ui/eslint-config": { "version": "3.3.0", @@ -3541,14 +3546,16 @@ } }, "node_modules/@gravity-ui/i18n": { - "version": "1.7.0", - "resolved": "https://registry.npmjs.org/@gravity-ui/i18n/-/i18n-1.7.0.tgz", - "integrity": "sha512-jZotOX73lMVARsNZ5L8rquDhyCIcHnX7GwT32m6vrnqy6iKBfBdOuAnAalUbnoVJoasfvYiSyX3kwusetyZgfQ==" + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/@gravity-ui/i18n/-/i18n-1.8.0.tgz", + "integrity": "sha512-bVt/UGjL96Naw0h03QW+3z2tf6t4zvLh1j+eFzpdLlAIMeNu0dRjxn4X6EGtwhwKrfMyIfrlOqmLSroXtCNQAw==", + "license": "MIT" }, "node_modules/@gravity-ui/icons": { - "version": "2.12.0", - "resolved": "https://registry.npmjs.org/@gravity-ui/icons/-/icons-2.12.0.tgz", - "integrity": "sha512-rwLOMfNq+uxONCdc4y2agNytMrhVroBdl10bo0C5sHfn7ZLIq8UHzXD9vn2a+QujuLaHnqZJ5PWbpSIuzpnvvg==", + "version": "2.13.0", + "resolved": "https://registry.npmjs.org/@gravity-ui/icons/-/icons-2.13.0.tgz", + "integrity": "sha512-oHWJTb8rTuZo1czZRBSggEWMmthiXeM5LBpB0GzyS1tCkNE1A7DpEvvrKUwHYVHTxpw/xWIqQCxNj7LIo2R3NQ==", + "license": "MIT", "peerDependencies": { "react": "*" }, @@ -3596,22 +3603,23 @@ "dev": true }, "node_modules/@gravity-ui/uikit": { - "version": "7.1.1", - "resolved": "https://registry.npmjs.org/@gravity-ui/uikit/-/uikit-7.1.1.tgz", - "integrity": "sha512-Qm4YyDZKCODM/61DnVMxUQOsyOWKXG1YnZSDF1Ixpf5QYnNgy2TLchqIqmN5STAxsggEZY2UBTqGEaJ7NTQ8cw==", + "version": "7.11.0", + "resolved": "https://registry.npmjs.org/@gravity-ui/uikit/-/uikit-7.11.0.tgz", + "integrity": "sha512-JNU6BnDt2f8kgQGuBp9YvTWURO4rMEN/CLpe9jbE+PouCFMV9aj5qb2Fqp9KOL+suAsjCe6s6Ow4UtpeyVV9KA==", "dev": true, + "license": "MIT", "dependencies": { "@bem-react/classname": "^1.6.0", - "@floating-ui/react": "^0.27.3", - "@gravity-ui/i18n": "^1.7.0", - "@gravity-ui/icons": "^2.12.0", - "@tanstack/react-virtual": "^3.11.2", + "@floating-ui/react": "^0.27.7", + "@gravity-ui/i18n": "^1.8.0", + "@gravity-ui/icons": "^2.13.0", + "@tanstack/react-virtual": "^3.13.6", "blueimp-md5": "^2.19.0", "lodash": "^4.17.21", "rc-slider": "^11.1.8", "react-beautiful-dnd": "^13.1.1", "react-transition-group": "^4.4.5", - "react-virtualized-auto-sizer": "^1.0.25", + "react-virtualized-auto-sizer": "^1.0.26", "react-window": "^1.8.11", "tabbable": "^6.2.0", "tslib": "^2.8.1" @@ -6151,12 +6159,13 @@ } }, "node_modules/@tanstack/react-virtual": { - "version": "3.11.2", - "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.11.2.tgz", - "integrity": "sha512-OuFzMXPF4+xZgx8UzJha0AieuMihhhaWG0tCqpp6tDzlFwOmNBPYMuLOtMJ1Tr4pXLHmgjcWhG6RlknY2oNTdQ==", + "version": "3.13.8", + "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.13.8.tgz", + "integrity": "sha512-meS2AanUg50f3FBSNoAdBSRAh8uS0ue01qm7zrw65KGJtiXB9QXfybqZwkh4uFpRv2iX/eu5tjcH5wqUpwYLPg==", "dev": true, + "license": "MIT", "dependencies": { - "@tanstack/virtual-core": "3.11.2" + "@tanstack/virtual-core": "3.13.8" }, "funding": { "type": "github", @@ -6168,10 +6177,11 @@ } }, "node_modules/@tanstack/virtual-core": { - "version": "3.11.2", - "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.11.2.tgz", - "integrity": "sha512-vTtpNt7mKCiZ1pwU9hfKPhpdVO2sVzFQsxoVBGtOSHxlrRRzYr8iQ2TlwbAcRYCcEiZ9ECAM8kBzH0v2+VzfKw==", + "version": "3.13.8", + "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.13.8.tgz", + "integrity": "sha512-BT6w89Hqy7YKaWewYzmecXQzcJh6HTBbKYJIIkMaNU49DZ06LoTV3z32DWWEdUsgW6n1xTmwTLs4GtWrZC261w==", "dev": true, + "license": "MIT", "funding": { "type": "github", "url": "https://github.com/sponsors/tannerlinsley" @@ -19018,10 +19028,11 @@ } }, "node_modules/react-virtualized-auto-sizer": { - "version": "1.0.25", - "resolved": "https://registry.npmjs.org/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.25.tgz", - "integrity": "sha512-YHsksEGDfsHbHuaBVDYwJmcktblcHGafz4ZVuYPQYuSHMUGjpwmUCrAOcvMSGMwwk1eFWj1M/1GwYpNPuyhaBg==", + "version": "1.0.26", + "resolved": "https://registry.npmjs.org/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.26.tgz", + "integrity": "sha512-CblNyiNVw2o+hsa5/49NH2ogGxZ+t+3aweRvNSq7TVjDIlwk7ir4lencEg5HxHeSzwNarSkNkiu0qJSOXtxm5A==", "dev": true, + "license": "MIT", "peerDependencies": { "react": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0 || ^19.0.0" @@ -21147,7 +21158,8 @@ "version": "6.2.0", "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz", "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==", - "dev": true + "dev": true, + "license": "MIT" }, "node_modules/table": { "version": "6.8.1", diff --git a/package.json b/package.json index 909e2ffb..83b998c7 100644 --- a/package.json +++ b/package.json @@ -233,7 +233,7 @@ "@gravity-ui/prettier-config": "1.1.0", "@gravity-ui/stylelint-config": "4.0.1", "@gravity-ui/tsconfig": "1.0.0", - "@gravity-ui/uikit": "7.1.1", + "@gravity-ui/uikit": "7.11.0", "@playwright/experimental-ct-react": "1.49.0", "@playwright/test": "1.49.0", "@storybook/addon-docs": "8.4.1", diff --git a/src/bundle/settings/index.tsx b/src/bundle/settings/index.tsx index c1ef47e2..32e369fa 100644 --- a/src/bundle/settings/index.tsx +++ b/src/bundle/settings/index.tsx @@ -15,6 +15,8 @@ import { type QAProps, } from '@gravity-ui/uikit'; +import {getZIndexFromVariables} from 'src/utils/get-z-index-from-variables'; + import {type ClassNameProps, cn} from '../../classname'; import {i18n} from '../../i18n/bundle'; import WysiwygModeIcon from '../../icons/WysiwygMode'; @@ -172,6 +174,9 @@ const SettingsContent: React.FC = function SettingsContent popoverProps={{ placement: mdHelpPlacement, modal: false, + zIndex: getZIndexFromVariables( + '--md-editor-sticky-toolbar-popup-z-index', + ), }} className={bContent('mode-help')} > diff --git a/src/utils/get-z-index-from-variables.ts b/src/utils/get-z-index-from-variables.ts new file mode 100644 index 00000000..104aebb7 --- /dev/null +++ b/src/utils/get-z-index-from-variables.ts @@ -0,0 +1,7 @@ +export const getZIndexFromVariables = (variable: string): number => { + const zIndexValue = getComputedStyle(document.documentElement) + .getPropertyValue(variable) + .trim(); + + return parseInt(zIndexValue, 10) || 0; +}; From 380e90e1fc8951b25865ad79dce69fd06d1ad724 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=9F=D0=BE=D0=BB=D0=B5=D0=B2=D0=BE=D0=B4=D0=B8=D0=BD=20?= =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9=20=D0=98=D0=B3=D0=BE?= =?UTF-8?q?=D1=80=D0=B5=D0=B2=D0=B8=D1=87=20=284094029=29?= Date: Mon, 2 Jun 2025 15:34:11 +0600 Subject: [PATCH 6/6] fix: prettier fix --- src/styles/_zindex.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/styles/_zindex.scss b/src/styles/_zindex.scss index c3881d39..70ce0446 100644 --- a/src/styles/_zindex.scss +++ b/src/styles/_zindex.scss @@ -11,6 +11,5 @@ $z-index-map: ( ); :root { - --md-editor-sticky-toolbar-popup-z-index: #{map-get($z-index-map, 'sticky-toolbar-popup')} + --md-editor-sticky-toolbar-popup-z-index: #{map-get($z-index-map, 'sticky-toolbar-popup')}; } -