diff --git a/ts_web/elements/00zindex.ts b/ts_web/elements/00zindex.ts index d357a74..b9ddcca 100644 --- a/ts_web/elements/00zindex.ts +++ b/ts_web/elements/00zindex.ts @@ -56,4 +56,106 @@ export const componentZIndex = { 'dees-mobilenavigation': zIndexLayers.fixed.mobileNav, 'dees-slash-menu': zIndexLayers.wysiwygMenus, 'dees-formatting-menu': zIndexLayers.wysiwygMenus, -} as const; \ No newline at end of file +} as const; + +/** + * Z-Index Registry for managing stacked elements + * Simple incremental z-index assignment based on creation order + */ +export class ZIndexRegistry { + private static instance: ZIndexRegistry; + private activeElements = new Set(); + private elementZIndexMap = new WeakMap(); + private currentZIndex = 1000; // Starting z-index + + private constructor() {} + + public static getInstance(): ZIndexRegistry { + if (!ZIndexRegistry.instance) { + ZIndexRegistry.instance = new ZIndexRegistry(); + } + return ZIndexRegistry.instance; + } + + /** + * Get the next available z-index + * @returns The next available z-index + */ + public getNextZIndex(): number { + this.currentZIndex += 10; + return this.currentZIndex; + } + + /** + * Register an element with the z-index registry + * @param element - The HTML element to register + * @param zIndex - The z-index assigned to this element + */ + public register(element: HTMLElement, zIndex: number): void { + this.activeElements.add(element); + this.elementZIndexMap.set(element, zIndex); + } + + /** + * Unregister an element from the z-index registry + * @param element - The HTML element to unregister + */ + public unregister(element: HTMLElement): void { + this.activeElements.delete(element); + this.elementZIndexMap.delete(element); + + // If no more active elements, reset counter to base + if (this.activeElements.size === 0) { + this.currentZIndex = 1000; + } + } + + /** + * Get the z-index for a specific element + * @param element - The HTML element + * @returns The z-index or undefined if not registered + */ + public getElementZIndex(element: HTMLElement): number | undefined { + return this.elementZIndexMap.get(element); + } + + /** + * Get count of active elements + * @returns Number of active elements + */ + public getActiveCount(): number { + return this.activeElements.size; + } + + /** + * Get the current highest z-index + * @returns The current z-index value + */ + public getCurrentZIndex(): number { + return this.currentZIndex; + } + + /** + * Clear all registrations (useful for testing) + */ + public clear(): void { + this.activeElements.clear(); + this.elementZIndexMap = new WeakMap(); + this.currentZIndex = 1000; + } + + /** + * Get all active elements in z-index order + * @returns Array of elements sorted by z-index + */ + public getActiveElementsInOrder(): HTMLElement[] { + return Array.from(this.activeElements).sort((a, b) => { + const aZ = this.elementZIndexMap.get(a) || 0; + const bZ = this.elementZIndexMap.get(b) || 0; + return aZ - bZ; + }); + } +} + +// Export singleton instance for convenience +export const zIndexRegistry = ZIndexRegistry.getInstance(); \ No newline at end of file diff --git a/ts_web/elements/dees-input-dropdown.ts b/ts_web/elements/dees-input-dropdown.ts index 590a379..4b326b3 100644 --- a/ts_web/elements/dees-input-dropdown.ts +++ b/ts_web/elements/dees-input-dropdown.ts @@ -280,6 +280,11 @@ export class DeesInputDropdown extends DeesInputBase { elevatedDropdown.style.top = this.getBoundingClientRect().top + 'px'; elevatedDropdown.style.left = this.getBoundingClientRect().left + 'px'; elevatedDropdown.style.width = this.clientWidth + 'px'; + + // Get z-index from registry for the elevated dropdown + const dropdownZIndex = (await import('./00zindex.js')).zIndexRegistry.getNextZIndex(); + elevatedDropdown.style.zIndex = dropdownZIndex.toString(); + (await import('./00zindex.js')).zIndexRegistry.register(elevatedDropdown, dropdownZIndex); elevatedDropdown.options = this.options; elevatedDropdown.selectedOption = this.selectedOption; elevatedDropdown.highlightedIndex = elevatedDropdown.selectedOption ? elevatedDropdown.options.indexOf( @@ -296,9 +301,13 @@ export class DeesInputDropdown extends DeesInputBase { '0'; elevatedDropdown.removeEventListener('selectedOption', handleSelection); this.windowOverlay.removeEventListener('clicked', destroyOverlay); + + // Unregister elevated dropdown from z-index registry + (await import('./00zindex.js')).zIndexRegistry.unregister(elevatedDropdown); + this.windowOverlay.destroy(); }; - const handleSelection = async (event) => { + const handleSelection = async () => { await this.updateSelection(elevatedDropdown.selectedOption); destroyOverlay(); }; @@ -323,10 +332,20 @@ export class DeesInputDropdown extends DeesInputBase { await domtoolsInstance.convenience.smartdelay.delayFor(0); const searchInput = selectionBox.querySelector('input'); searchInput?.focus(); + + // Get z-index from registry for the selection box + const selectionBoxZIndex = (await import('./00zindex.js')).zIndexRegistry.getNextZIndex(); + selectionBox.style.zIndex = selectionBoxZIndex.toString(); + (await import('./00zindex.js')).zIndexRegistry.register(selectionBox as HTMLElement, selectionBoxZIndex); + selectionBox.classList.add('show'); } else { selectedBox.style.pointerEvents = 'none'; selectionBox.classList.remove('show'); + + // Unregister selection box from z-index registry + (await import('./00zindex.js')).zIndexRegistry.unregister(selectionBox as HTMLElement); + // selectedBox.style.opacity = '0'; } } diff --git a/ts_web/elements/dees-modal.ts b/ts_web/elements/dees-modal.ts index 2b3d736..3d70c3e 100644 --- a/ts_web/elements/dees-modal.ts +++ b/ts_web/elements/dees-modal.ts @@ -1,6 +1,6 @@ import * as colors from './00colors.js'; import * as plugins from './00plugins.js'; -import { zIndexLayers } from './00zindex.js'; +import { zIndexLayers, zIndexRegistry } from './00zindex.js'; import { demoFunc } from './dees-modal.demo.js'; import { @@ -62,6 +62,11 @@ export class DeesModal extends DeesElement { }); body.append(modal.windowLayer); body.append(modal); + + // Get z-index for modal (should be above window layer) + modal.modalZIndex = zIndexRegistry.getNextZIndex(); + zIndexRegistry.register(modal, modal.modalZIndex); + return modal; } @@ -95,6 +100,9 @@ export class DeesModal extends DeesElement { @property({ attribute: false }) public onHelp: () => void | Promise; + + @state() + private modalZIndex: number = 1000; constructor() { super(); @@ -118,7 +126,6 @@ export class DeesModal extends DeesElement { box-sizing: border-box; align-items: center; justify-content: center; - z-index: ${zIndexLayers.overlay.modal}; } .modal { will-change: transform; @@ -291,7 +298,7 @@ export class DeesModal extends DeesElement { ${maxWidthStyle ? `.modal { max-width: ${maxWidthStyle}; }` : ''} ${minWidthStyle ? `.modal { min-width: ${minWidthStyle}; }` : ''} -
+
${this.heading}
@@ -349,6 +356,9 @@ export class DeesModal extends DeesElement { await domtools.convenience.smartdelay.delayFor(200); document.body.removeChild(this); await this.windowLayer.destroy(); + + // Unregister from z-index registry + zIndexRegistry.unregister(this); } private async handleHelp() { diff --git a/ts_web/elements/dees-windowlayer.ts b/ts_web/elements/dees-windowlayer.ts index 540bb7a..18f290a 100644 --- a/ts_web/elements/dees-windowlayer.ts +++ b/ts_web/elements/dees-windowlayer.ts @@ -1,5 +1,5 @@ import { customElement, DeesElement, domtools, type TemplateResult, html, property, type CSSResult, state, } from '@design.estate/dees-element'; -import { zIndexLayers } from './00zindex.js'; +import { zIndexLayers, zIndexRegistry } from './00zindex.js'; declare global { interface HTMLElementTagNameMap { @@ -33,6 +33,12 @@ export class DeesWindowLayer extends DeesElement { public options: IOptions_DeesWindowLayer = { blur: false }; + + @state() + private backdropZIndex: number = 1000; + + @state() + private contentZIndex: number = 1001; // INSTANCE @property({ @@ -63,7 +69,7 @@ export class DeesWindowLayer extends DeesElement { background: rgba(0, 0, 0, 0.0); backdrop-filter: brightness(1) ${this.options.blur ? 'blur(0px)' : ''}; pointer-events: none; - z-index: ${zIndexLayers.backdrop.dropdown}; + z-index: ${this.backdropZIndex}; } .slotContent { position: fixed; @@ -72,7 +78,7 @@ export class DeesWindowLayer extends DeesElement { display: flex; justify-content: center; align-items: center; - z-index: ${zIndexLayers.overlay.dropdown}; + z-index: ${this.contentZIndex}; } .visible { @@ -102,9 +108,21 @@ export class DeesWindowLayer extends DeesElement { public toggleVisibility () { this.visible = !this.visible; } + + public getContentZIndex(): number { + return this.contentZIndex; + } public async show() { const domtools = await this.domtoolsPromise; + + // Get z-indexes from registry + this.backdropZIndex = zIndexRegistry.getNextZIndex(); + this.contentZIndex = zIndexRegistry.getNextZIndex(); + + // Register this element + zIndexRegistry.register(this, this.backdropZIndex); + await domtools.convenience.smartdelay.delayFor(0); this.visible = true; } @@ -119,6 +137,10 @@ export class DeesWindowLayer extends DeesElement { const domtools = await this.domtoolsPromise; await this.hide(); await domtools.convenience.smartdelay.delayFor(300); + + // Unregister from z-index registry + zIndexRegistry.unregister(this); + this.remove(); } } diff --git a/ts_web/pages/zindex-showcase.ts b/ts_web/pages/zindex-showcase.ts index 78718dc..2054c40 100644 --- a/ts_web/pages/zindex-showcase.ts +++ b/ts_web/pages/zindex-showcase.ts @@ -23,25 +23,92 @@ export const showcasePage = () => html` overflow-y: auto; } - .showcase-content { - padding: 40px; + .showcase-container { max-width: 1200px; margin: 0 auto; + padding: 48px 24px; } - h1 { - color: ${cssManager.bdTheme('#333', '#fff')}; - margin-bottom: 16px; - font-size: 32px; + .showcase-header { + text-align: center; + margin-bottom: 48px; } - .intro { + .showcase-title { + font-size: 48px; + font-weight: 700; + margin: 0 0 16px 0; + color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')}; + } + + .showcase-subtitle { + font-size: 20px; color: ${cssManager.bdTheme('#666', '#999')}; - font-size: 18px; + margin: 0 0 32px 0; line-height: 1.6; + } + + .showcase-section { + margin-bottom: 48px; + } + + .showcase-section:last-child { + margin-bottom: 0; + padding-bottom: 48px; + } + + /* Ensure all headings are theme-aware */ + h1, h2, h3, h4, h5, h6 { + color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')}; + margin: 0; + } + + p { + color: ${cssManager.bdTheme('#666', '#999')}; + line-height: 1.6; + } + + strong { + color: ${cssManager.bdTheme('#333', '#e0e0e0')}; + } + + .section-header { + display: flex; + align-items: center; + gap: 16px; margin-bottom: 32px; } + .section-icon { + width: 48px; + height: 48px; + border-radius: 12px; + display: flex; + align-items: center; + justify-content: center; + font-size: 24px; + background: ${cssManager.bdTheme('#e3f2fd', '#1e3a5f')}; + } + + .section-icon.layers { background: ${cssManager.bdTheme('#f3e5f5', '#4a148c')}; } + .section-icon.registry { background: ${cssManager.bdTheme('#e8f5e9', '#1b5e20')}; } + .section-icon.demo { background: ${cssManager.bdTheme('#fff3e0', '#e65100')}; } + .section-icon.guidelines { background: ${cssManager.bdTheme('#e0f2f1', '#004d40')}; } + + .section-title { + font-size: 32px; + font-weight: 600; + margin: 0; + color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')}; + } + + .section-description { + color: ${cssManager.bdTheme('#666', '#999')}; + font-size: 16px; + line-height: 1.6; + margin-bottom: 24px; + } + .demo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); @@ -49,17 +116,39 @@ export const showcasePage = () => html` margin-bottom: 40px; } + .demo-card { + background: ${cssManager.bdTheme('#fff', '#1a1a1a')}; + border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333')}; + border-radius: 12px; + padding: 24px; + transition: all 0.2s ease; + } + + .demo-card:hover { + transform: translateY(-2px); + box-shadow: 0 4px 12px ${cssManager.bdTheme('rgba(0,0,0,0.1)', 'rgba(0,0,0,0.3)')}; + } + + .demo-card h4 { + margin-bottom: 16px; + font-size: 18px; + font-weight: 600; + } + .hierarchy-visual { background: ${cssManager.bdTheme('#fff', '#1a1a1a')}; border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333')}; - border-radius: 8px; - padding: 24px; + border-radius: 12px; + padding: 32px; margin-bottom: 40px; } .hierarchy-visual h3 { margin-top: 0; - color: ${cssManager.bdTheme('#333', '#fff')}; + margin-bottom: 24px; + font-size: 24px; + font-weight: 600; + color: ${cssManager.bdTheme('#1a1a1a', '#fff')}; } .layer-stack { @@ -70,19 +159,20 @@ export const showcasePage = () => html` } .layer { - padding: 12px 16px; - border-radius: 6px; + padding: 16px 20px; + border-radius: 8px; display: flex; justify-content: space-between; align-items: center; font-family: 'Geist Mono', monospace; font-size: 14px; transition: all 0.2s; + border: 1px solid transparent; } .layer:hover { - transform: translateY(-2px); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + transform: translateX(4px); + border-color: ${cssManager.bdTheme('#e0e0e0', '#444')}; } .layer.base { @@ -124,16 +214,25 @@ export const showcasePage = () => html` } .warning-box { - background: ${cssManager.bdTheme('#fff3cd', '#332701')}; - border: 1px solid ${cssManager.bdTheme('#ffeaa7', '#664400')}; - border-radius: 6px; - padding: 16px; - margin-bottom: 24px; - color: ${cssManager.bdTheme('#856404', '#ffecb5')}; + background: ${cssManager.bdTheme('#fff8e1', '#332701')}; + border: 1px solid ${cssManager.bdTheme('#ffe082', '#664400')}; + border-radius: 12px; + padding: 20px; + margin-bottom: 32px; + color: ${cssManager.bdTheme('#f57f17', '#ffecb5')}; + display: flex; + align-items: flex-start; + gap: 12px; + } + + .warning-box::before { + content: '⚠️'; + font-size: 20px; + flex-shrink: 0; } .warning-box strong { - color: ${cssManager.bdTheme('#856404', '#ffd93d')}; + color: ${cssManager.bdTheme('#f57f17', '#ffd93d')}; } code { @@ -160,56 +259,186 @@ export const showcasePage = () => html` position: relative; display: inline-block; } + + .registry-status { + background: ${cssManager.bdTheme('#e8f5e9', '#1a2e1a')}; + border: 1px solid ${cssManager.bdTheme('#4caf50', '#2e7d32')}; + border-radius: 12px; + padding: 24px; + margin-bottom: 32px; + position: relative; + overflow: hidden; + } + + .registry-status::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 4px; + background: ${cssManager.bdTheme('#4caf50', '#2e7d32')}; + } + + .registry-status h4 { + margin-top: 0; + margin-bottom: 16px; + color: ${cssManager.bdTheme('#2e7d32', '#81c784')}; + font-size: 18px; + font-weight: 600; + } + + .registry-item { + display: flex; + justify-content: space-between; + padding: 8px 0; + color: ${cssManager.bdTheme('#558b2f', '#aed581')}; + font-family: 'Geist Mono', monospace; + font-size: 14px; + border-bottom: 1px solid ${cssManager.bdTheme('#e0f2e1', '#1b5e20')}; + } + + .registry-item:last-child { + border-bottom: none; + } + + .registry-item.active { + color: ${cssManager.bdTheme('#2e7d32', '#4ade80')}; + font-weight: 600; + } + + .registry-item span:last-child { + font-weight: 600; + } `}
-
-

Z-Index Hierarchy Showcase

-

- This page demonstrates the z-index management system that ensures proper stacking order for all overlay components. - Test the different scenarios to see how overlays interact with each other. -

- -
- ⚠️ Important: The z-index values are managed centrally in 00zindex.ts. - Never use arbitrary z-index values in components - always import and use the predefined layers. +
+
+

Z-Index Management

+

+ A comprehensive system for managing overlay stacking order across all components. + Test different scenarios to see how the dynamic z-index registry ensures proper layering. +

-
-

Z-Index Layer Stack (Top to Bottom)

-
-
- Base Content - z-index: auto +
+
+ Important: The z-index values are managed centrally in 00zindex.ts. + Never use arbitrary z-index values in components - always import and use the z-index registry. +
+
+ + +
+
+
📊
+
+

Live Registry Status

-
- Fixed Navigation - z-index: 10-250 +
+
+

Z-Index Registry

+
+ Active Elements: + 0
-
- Dropdown Overlays - z-index: 1999-2000 +
+ Current Z-Index: + 1000
-
- Modal Dialogs - z-index: 2999-3000 +
+
+ + + + +
+
+
📚
+
+

Layer Hierarchy

-
- Context Menus & WYSIWYG - z-index: 4000-4500 -
-
- Toast Notifications - z-index: 5000 +
+

+ The traditional z-index layers are still defined for reference, but the new registry system + dynamically assigns z-indexes based on creation order. +

+
+

Legacy Z-Index Layers (Reference)

+
+
+ Base Content + z-index: auto +
+
+ Fixed Navigation + z-index: 10-250 +
+
+ Dropdown Overlays + z-index: 1999-2000 +
+
+ Modal Dialogs + z-index: 2999-3000 +
+
+ Context Menus & WYSIWYG + z-index: 4000-4500 +
+
+ Toast Notifications + z-index: 5000 +
- -
+ +
+
+
🎮
-

Dropdown Test

+

Interactive Demos

+
+
+

+ Test the z-index registry in action with these interactive examples. Each element gets the next + available z-index when created, ensuring proper stacking order. +

+ + +
+
+

Dropdown Test

html` } }} > -
+
-
-

Context Menu Test

+
+

Context Menu Test

{ DeesContextmenu.openContextMenuWithOptions(e, [ { name: 'Show Toast', iconName: 'bell', action: async () => { @@ -240,18 +469,18 @@ export const showcasePage = () => html` }}> Right-click here for context menu
-
+
-
-

Toast Notification

- { - DeesToast.createAndShow({ message: 'I appear on top of everything!', type: 'success' }); - }}>Show Toast +
+

Toast Notification

+ { + DeesToast.createAndShow({ message: 'I appear on top of everything!', type: 'success' }); + }}>Show Toast +
-
- + - +

This tests the most common z-index conflict scenario.

{ const modal = await DeesModal.createAndShow({ @@ -310,11 +539,11 @@ export const showcasePage = () => html` }}>Open Modal with Dropdown - +

This creates a complex scenario with multiple overlays to test the complete hierarchy.

{ // Show base modal - const modal1 = await DeesModal.createAndShow({ + await DeesModal.createAndShow({ heading: 'Base Modal', width: 'large', content: html` @@ -342,7 +571,7 @@ export const showcasePage = () => html`
{ - const modal2 = await DeesModal.createAndShow({ + await DeesModal.createAndShow({ heading: 'Second Modal', width: 'small', content: html` @@ -376,7 +605,7 @@ export const showcasePage = () => html` }}>Start Complex Stack Test - +

Profile dropdowns and similar UI elements use the dropdown z-index layer.

html` name: 'Test User', email: 'test@example.com', avatar: 'https://randomuser.me/api/portraits/lego/1.jpg', - status: 'online' + status: 'online' as const }} .menuItems=${[ - { name: 'Show Toast', iconName: 'bell', action: async () => { + { name: 'Show Toast', iconName: 'bell', shortcut: '', action: async () => { DeesToast.createAndShow({ message: 'Profile action triggered!', type: 'success' }); }}, - { divider: true }, - { name: 'Settings', iconName: 'settings', action: async () => {} }, - { name: 'Logout', iconName: 'logOut', action: async () => {} } + { divider: true } as const, + { name: 'Settings', iconName: 'settings', shortcut: '', action: async () => {} }, + { name: 'Logout', iconName: 'logOut', shortcut: '', action: async () => {} } ]} >
- +
-
+

Multiple Toasts

{ DeesToast.createAndShow({ message: 'First toast', type: 'info' }); @@ -413,7 +642,7 @@ export const showcasePage = () => html` }}>Show Multiple Toasts
-
+

Fullscreen Modal

{ await DeesModal.createAndShow({ @@ -441,24 +670,41 @@ export const showcasePage = () => html`
+
- + +
+
+
📖
+
+

Usage Guidelines

+
+
+

Best Practices:

    -
  • Always use the predefined z-index values from 00zindex.ts
    • +
  • Always use the z-index registry from 00zindex.ts
  • Never use arbitrary z-index values like z-index: 9999
    • -
  • When creating new overlay components, choose the appropriate layer
    • +
  • Get z-index from registry when showing elements: zIndexRegistry.getNextZIndex()
    • +
  • Register elements to track them: zIndexRegistry.register(element, zIndex)
    • +
  • Unregister on cleanup: zIndexRegistry.unregister(element)
    • +
  • Elements created later automatically appear on top
  • Test overlay interactions, especially dropdowns in modals
    • -
  • Remember that toasts should always be on top

Import Example:

-import { zIndexLayers } from './00zindex.js';
+import { zIndexRegistry } from './00zindex.js';
 
-// In your component styles:
-z-index: \${zIndexLayers.overlay.modal};
+// In your component: +const myZIndex = zIndexRegistry.getNextZIndex(); +element.style.zIndex = myZIndex.toString(); +zIndexRegistry.register(element, myZIndex); + +// On cleanup: +zIndexRegistry.unregister(element); +
`; \ No newline at end of file