Merge pull request #724 from amirmamaghani/master

Added support for custom overlay z-index
This commit is contained in:
mathuo 2024-10-09 21:53:27 +01:00 committed by GitHub
commit 12bb6f6d20
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 7 additions and 9 deletions

View File

@ -13,8 +13,6 @@ import { CompositeDisposable, MutableDisposable } from '../lifecycle';
import { clamp } from '../math'; import { clamp } from '../math';
import { AnchoredBox } from '../types'; import { AnchoredBox } from '../types';
export const DEFAULT_OVERLAY_Z_INDEX = 999;
class AriaLevelTracker { class AriaLevelTracker {
private _orderedList: HTMLElement[] = []; private _orderedList: HTMLElement[] = [];
@ -37,9 +35,9 @@ class AriaLevelTracker {
private update(): void { private update(): void {
for (let i = 0; i < this._orderedList.length; i++) { for (let i = 0; i < this._orderedList.length; i++) {
this._orderedList[i].setAttribute('aria-level', `${i}`); this._orderedList[i].setAttribute('aria-level', `${i}`);
this._orderedList[i].style.zIndex = `${ this._orderedList[i].style.zIndex = `calc(var(--dv-floating-z-index) + ${
DEFAULT_OVERLAY_Z_INDEX + i * 2 i * 2
}`; })`;
} }
} }
} }

View File

@ -9,7 +9,6 @@ import {
} from '../lifecycle'; } from '../lifecycle';
import { IDockviewPanel } from '../dockview/dockviewPanel'; import { IDockviewPanel } from '../dockview/dockviewPanel';
import { DockviewComponent } from '../dockview/dockviewComponent'; import { DockviewComponent } from '../dockview/dockviewComponent';
import { DEFAULT_OVERLAY_Z_INDEX } from './overlay';
export type DockviewPanelRenderer = 'onlyWhenVisible' | 'always'; export type DockviewPanelRenderer = 'onlyWhenVisible' | 'always';
@ -137,9 +136,9 @@ export class OverlayRenderContainer extends CompositeDisposable {
const level = Number( const level = Number(
element.getAttribute('aria-level') element.getAttribute('aria-level')
); );
focusContainer.style.zIndex = `${ focusContainer.style.zIndex = `calc(var(--dv-floating-z-index) + ${
DEFAULT_OVERLAY_Z_INDEX + level * 2 + 1 level * 2 + 1
}`; })`;
}; };
const observer = new MutationObserver(() => { const observer = new MutationObserver(() => {

View File

@ -8,6 +8,7 @@
--dv-tabs-container-scrollbar-color: #888; --dv-tabs-container-scrollbar-color: #888;
--dv-icon-hover-background-color: rgba(90, 93, 94, 0.31); --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-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);
--dv-floating-z-index: 999;
} }
@mixin dockview-theme-dark-mixin { @mixin dockview-theme-dark-mixin {