rei-mirrors/dockview
1
0
Fork 0
mirror of https://github.com/mathuo/dockview synced 2025-05-06 19:48:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #730 from mathuo/720-allow-customization-of-the-default_overlay_z_index-value

Browse Source 
720 allow customization of the default overlay z index value
This commit is contained in:
mathuo 2024-10-09 22:23:04 +01:00 committed by GitHub
commit 8015860bde
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 76 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
packages/dockview-core/src/__tests__/overlay/overlay.spec.ts
View File

@ -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));
});
});

4
packages/dockview-core/src/__tests__/overlay/overlayRenderContainer.spec.ts
View File

@ -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)'
);
});
});

20
packages/dockview-core/src/overlay/overlay.scss
View File

@ -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;
}

8
packages/dockview-core/src/overlay/overlay.ts
View File

@ -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})`;
}
}
}

8
packages/dockview-core/src/overlay/overlayReadyContainer.scss
View File

@ -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);
}
}

7
packages/dockview-core/src/overlay/overlayRenderContainer.ts
View File

@ -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(() => {

74
packages/dockview-core/src/theme.scss
View File

@ -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
);
}
}
}
}
}
}