diff --git a/packages/dockview-core/src/__tests__/overlay/overlay.spec.ts b/packages/dockview-core/src/__tests__/overlay/overlay.spec.ts index 90bdbec99..5611bc4c7 100644 --- a/packages/dockview-core/src/__tests__/overlay/overlay.spec.ts +++ b/packages/dockview-core/src/__tests__/overlay/overlay.spec.ts @@ -369,8 +369,11 @@ describe('overlay', () => { const overlay1 = createOverlay(); + const zIndexValue = (delta: number) => + `calc(var(--dv-overlay-z-index, 999) + ${delta})`; + expect(overlay1.element.getAttribute('aria-level')).toBe('0'); - expect(overlay1.element.style.zIndex).toBe('999'); + expect(overlay1.element.style.zIndex).toBe(zIndexValue(0)); const overlay2 = createOverlay(); const overlay3 = createOverlay(); @@ -378,38 +381,38 @@ describe('overlay', () => { expect(overlay1.element.getAttribute('aria-level')).toBe('0'); expect(overlay2.element.getAttribute('aria-level')).toBe('1'); expect(overlay3.element.getAttribute('aria-level')).toBe('2'); - expect(overlay1.element.style.zIndex).toBe('999'); - expect(overlay2.element.style.zIndex).toBe('1001'); - expect(overlay3.element.style.zIndex).toBe('1003'); + expect(overlay1.element.style.zIndex).toBe(zIndexValue(0)); + expect(overlay2.element.style.zIndex).toBe(zIndexValue(2)); + expect(overlay3.element.style.zIndex).toBe(zIndexValue(4)); overlay2.bringToFront(); expect(overlay1.element.getAttribute('aria-level')).toBe('0'); expect(overlay2.element.getAttribute('aria-level')).toBe('2'); expect(overlay3.element.getAttribute('aria-level')).toBe('1'); - expect(overlay1.element.style.zIndex).toBe('999'); - expect(overlay2.element.style.zIndex).toBe('1003'); - expect(overlay3.element.style.zIndex).toBe('1001'); + expect(overlay1.element.style.zIndex).toBe(zIndexValue(0)); + expect(overlay2.element.style.zIndex).toBe(zIndexValue(4)); + expect(overlay3.element.style.zIndex).toBe(zIndexValue(2)); overlay1.bringToFront(); expect(overlay1.element.getAttribute('aria-level')).toBe('2'); expect(overlay2.element.getAttribute('aria-level')).toBe('1'); expect(overlay3.element.getAttribute('aria-level')).toBe('0'); - expect(overlay1.element.style.zIndex).toBe('1003'); - expect(overlay2.element.style.zIndex).toBe('1001'); - expect(overlay3.element.style.zIndex).toBe('999'); + expect(overlay1.element.style.zIndex).toBe(zIndexValue(4)); + expect(overlay2.element.style.zIndex).toBe(zIndexValue(2)); + expect(overlay3.element.style.zIndex).toBe(zIndexValue(0)); overlay2.dispose(); expect(overlay1.element.getAttribute('aria-level')).toBe('1'); expect(overlay3.element.getAttribute('aria-level')).toBe('0'); - expect(overlay1.element.style.zIndex).toBe('1001'); - expect(overlay3.element.style.zIndex).toBe('999'); + expect(overlay1.element.style.zIndex).toBe(zIndexValue(2)); + expect(overlay3.element.style.zIndex).toBe(zIndexValue(0)); overlay1.dispose(); expect(overlay3.element.getAttribute('aria-level')).toBe('0'); - expect(overlay3.element.style.zIndex).toBe('999'); + expect(overlay3.element.style.zIndex).toBe(zIndexValue(0)); }); }); diff --git a/packages/dockview-core/src/__tests__/overlay/overlayRenderContainer.spec.ts b/packages/dockview-core/src/__tests__/overlay/overlayRenderContainer.spec.ts index 0e7ddfbce..250a81b46 100644 --- a/packages/dockview-core/src/__tests__/overlay/overlayRenderContainer.spec.ts +++ b/packages/dockview-core/src/__tests__/overlay/overlayRenderContainer.spec.ts @@ -258,6 +258,8 @@ describe('overlayRenderContainer', () => { await exhaustMicrotaskQueue(); expect(spy).toHaveBeenCalledWith('aria-level'); - expect(panelContentEl.parentElement!.style.zIndex).toBe('1004'); + expect(panelContentEl.parentElement!.style.zIndex).toBe( + 'calc(var(--dv-overlay-z-index, 999) + 5)' + ); }); }); diff --git a/packages/dockview-core/src/overlay/overlay.scss b/packages/dockview-core/src/overlay/overlay.scss index 971d8629c..89788e032 100644 --- a/packages/dockview-core/src/overlay/overlay.scss +++ b/packages/dockview-core/src/overlay/overlay.scss @@ -26,8 +26,10 @@ } .dv-resize-container { + --dv-overlay-z-index: var(--dv-overlay-z-index, 999); + position: absolute; - z-index: 997; + z-index: calc(var(--dv-overlay-z-index) - 2); border: 1px solid var(--dv-tab-divider-color); box-shadow: var(--dv-floating-box-shadow); @@ -41,7 +43,7 @@ width: calc(100% - 8px); left: 4px; top: -2px; - z-index: 999; + z-index: var(--dv-overlay-z-index); position: absolute; cursor: ns-resize; } @@ -51,7 +53,7 @@ width: calc(100% - 8px); left: 4px; bottom: -2px; - z-index: 999; + z-index: var(--dv-overlay-z-index); position: absolute; cursor: ns-resize; } @@ -61,7 +63,7 @@ width: 4px; left: -2px; top: 4px; - z-index: 999; + z-index: var(--dv-overlay-z-index); position: absolute; cursor: ew-resize; } @@ -71,7 +73,7 @@ width: 4px; right: -2px; top: 4px; - z-index: 999; + z-index: var(--dv-overlay-z-index); position: absolute; cursor: ew-resize; } @@ -81,7 +83,7 @@ width: 4px; top: -2px; left: -2px; - z-index: 999; + z-index: var(--dv-overlay-z-index); position: absolute; cursor: nw-resize; } @@ -91,7 +93,7 @@ width: 4px; right: -2px; top: -2px; - z-index: 999; + z-index: var(--dv-overlay-z-index); position: absolute; cursor: ne-resize; } @@ -101,7 +103,7 @@ width: 4px; left: -2px; bottom: -2px; - z-index: 999; + z-index: var(--dv-overlay-z-index); position: absolute; cursor: sw-resize; } @@ -111,7 +113,7 @@ width: 4px; right: -2px; bottom: -2px; - z-index: 999; + z-index: var(--dv-overlay-z-index); position: absolute; cursor: se-resize; } diff --git a/packages/dockview-core/src/overlay/overlay.ts b/packages/dockview-core/src/overlay/overlay.ts index 0a399dd9a..c0a2fd598 100644 --- a/packages/dockview-core/src/overlay/overlay.ts +++ b/packages/dockview-core/src/overlay/overlay.ts @@ -13,8 +13,6 @@ import { CompositeDisposable, MutableDisposable } from '../lifecycle'; import { clamp } from '../math'; import { AnchoredBox } from '../types'; -export const DEFAULT_OVERLAY_Z_INDEX = 999; - class AriaLevelTracker { private _orderedList: HTMLElement[] = []; @@ -37,9 +35,9 @@ class AriaLevelTracker { private update(): void { for (let i = 0; i < this._orderedList.length; i++) { this._orderedList[i].setAttribute('aria-level', `${i}`); - this._orderedList[i].style.zIndex = `${ - DEFAULT_OVERLAY_Z_INDEX + i * 2 - }`; + this._orderedList[ + i + ].style.zIndex = `calc(var(--dv-overlay-z-index, 999) + ${i * 2})`; } } } diff --git a/packages/dockview-core/src/overlay/overlayReadyContainer.scss b/packages/dockview-core/src/overlay/overlayReadyContainer.scss index fbd978841..18cc80781 100644 --- a/packages/dockview-core/src/overlay/overlayReadyContainer.scss +++ b/packages/dockview-core/src/overlay/overlayReadyContainer.scss @@ -1,14 +1,12 @@ .dv-render-overlay { + --dv-overlay-z-index: var(--dv-overlay-z-index, 999); + position: absolute; z-index: 1; height: 100%; &.dv-render-overlay-float { - z-index: 998; - - &.dv-render-overlay-active { - // z-index: 1000; - } + z-index: calc(var(--dv-overlay-z-index) - 1); } } diff --git a/packages/dockview-core/src/overlay/overlayRenderContainer.ts b/packages/dockview-core/src/overlay/overlayRenderContainer.ts index 1d68042e9..f83f50e5e 100644 --- a/packages/dockview-core/src/overlay/overlayRenderContainer.ts +++ b/packages/dockview-core/src/overlay/overlayRenderContainer.ts @@ -9,7 +9,6 @@ import { } from '../lifecycle'; import { IDockviewPanel } from '../dockview/dockviewPanel'; import { DockviewComponent } from '../dockview/dockviewComponent'; -import { DEFAULT_OVERLAY_Z_INDEX } from './overlay'; export type DockviewPanelRenderer = 'onlyWhenVisible' | 'always'; @@ -137,9 +136,9 @@ export class OverlayRenderContainer extends CompositeDisposable { const level = Number( element.getAttribute('aria-level') ); - focusContainer.style.zIndex = `${ - DEFAULT_OVERLAY_Z_INDEX + level * 2 + 1 - }`; + focusContainer.style.zIndex = `calc(var(--dv-overlay-z-index, 999) + ${ + level * 2 + 1 + })`; }; const observer = new MutationObserver(() => { diff --git a/packages/dockview-core/src/theme.scss b/packages/dockview-core/src/theme.scss index ca0cb67c6..907a13f64 100644 --- a/packages/dockview-core/src/theme.scss +++ b/packages/dockview-core/src/theme.scss @@ -8,6 +8,7 @@ --dv-tabs-container-scrollbar-color: #888; --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31); --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5); + --dv-overlay-z-index: 999; } @mixin dockview-theme-dark-mixin { @@ -268,52 +269,51 @@ } .vertical > .sash-container > .sash { - - &:not(.disabled) { - &::after { - content: ''; - height: 4px; - width: 40px; - border-radius: 2px; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - background-color: var(--dv-separator-handle-background-color); - position: absolute; - } - - &:hover { + &:not(.disabled) { &::after { - background-color: var( - --dv-separator-handle-hover-background-color - ); + content: ''; + height: 4px; + width: 40px; + border-radius: 2px; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: var(--dv-separator-handle-background-color); + position: absolute; + } + + &:hover { + &::after { + background-color: var( + --dv-separator-handle-hover-background-color + ); + } } } - } } .horizontal > .sash-container > .sash { - &:not(.disabled) { - &::after { - content: ''; - height: 40px; - width: 4px; - border-radius: 2px; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - background-color: var(--dv-separator-handle-background-color); - position: absolute; - } - - &:hover { + &:not(.disabled) { &::after { - background-color: var( - --dv-separator-handle-hover-background-color - ); + content: ''; + height: 40px; + width: 4px; + border-radius: 2px; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: var(--dv-separator-handle-background-color); + position: absolute; + } + + &:hover { + &::after { + background-color: var( + --dv-separator-handle-hover-background-color + ); + } } } - } } }