59 lines
1.8 KiB
TypeScript
59 lines
1.8 KiB
TypeScript
|
/**
|
||
|
|
* Central z-index management for consistent stacking order
|
||
|
|
* Higher numbers appear on top of lower numbers
|
||
|
|
*/
|
||
|
|
|
||
|
|
export const zIndexLayers = {
|
||
|
|
// Base layer: Regular content
|
||
|
|
base: {
|
||
|
|
content: 'auto',
|
||
|
|
inputElements: 1,
|
||
|
|
},
|
||
|
|
|
||
|
|
// Fixed UI elements
|
||
|
|
fixed: {
|
||
|
|
appBar: 10,
|
||
|
|
sideMenu: 10,
|
||
|
|
mobileNav: 250,
|
||
|
|
},
|
||
|
|
|
||
|
|
// Overlay backdrops (semi-transparent backgrounds)
|
||
|
|
backdrop: {
|
||
|
|
dropdown: 1999, // Below modals but above fixed elements
|
||
|
|
modal: 2999, // Below dropdowns on modals
|
||
|
|
contextMenu: 3999, // Below critical overlays
|
||
|
|
},
|
||
|
|
|
||
|
|
// Interactive overlays
|
||
|
|
overlay: {
|
||
|
|
dropdown: 2000, // Dropdowns and select menus
|
||
|
|
modal: 3000, // Modal dialogs
|
||
|
|
contextMenu: 4000, // Context menus and tooltips
|
||
|
|
toast: 5000, // Toast notifications (highest priority)
|
||
|
|
},
|
||
|
|
|
||
|
|
// Special cases for nested elements
|
||
|
|
modalDropdown: 3500, // Dropdowns inside modals
|
||
|
|
wysiwygMenus: 4500, // Editor formatting menus
|
||
|
|
} as const;
|
||
|
|
|
||
|
|
// Helper function to get z-index value
|
||
|
|
export function getZIndex(category: keyof typeof zIndexLayers, subcategory?: string): number | string {
|
||
|
|
const categoryObj = zIndexLayers[category];
|
||
|
|
if (typeof categoryObj === 'object' && subcategory) {
|
||
|
|
return categoryObj[subcategory as keyof typeof categoryObj] || 'auto';
|
||
|
|
}
|
||
|
|
return typeof categoryObj === 'number' ? categoryObj : 'auto';
|
||
|
|
}
|
||
|
|
|
||
|
|
// Z-index assignments for components
|
||
|
|
export const componentZIndex = {
|
||
|
|
'dees-modal': zIndexLayers.overlay.modal,
|
||
|
|
'dees-windowlayer': zIndexLayers.overlay.dropdown,
|
||
|
|
'dees-contextmenu': zIndexLayers.overlay.contextMenu,
|
||
|
|
'dees-toast': zIndexLayers.overlay.toast,
|
||
|
|
'dees-appui-mainmenu': zIndexLayers.fixed.appBar,
|
||
|
|
'dees-mobilenavigation': zIndexLayers.fixed.mobileNav,
|
||
|
|
'dees-slash-menu': zIndexLayers.wysiwygMenus,
|
||
|
|
'dees-formatting-menu': zIndexLayers.wysiwygMenus,
|
||
|
|
} as const;
|