Files
windmill/frontend/src/lib/components/common/contextmenu/contextMenuStyles.ts
T
GuilhemandClaude Opus 4.5 c9c3baecb3 add context menu with delete option to preprocessor nodes (#8223)
* fix: add context menu with delete option to preprocessor nodes

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* feat: add delete styling and shortcuts to right-click context menu

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
2026-03-04 12:48:02 +00:00

52 lines
1.8 KiB
TypeScript

/**
* Shared styles for context menu components
* Ensures visual consistency across all context menu implementations
*/
/**
* Base container styles for context menu
* @param zIndex - Optional z-index override (default: 'z-50')
*/
export function getContextMenuContainerClass(zIndex: string = 'z-50'): string {
return `${zIndex} flex flex-col gap-1 min-w-[12rem] overflow-hidden rounded-md border bg-surface p-1 shadow-md`
}
/**
* Base styles for context menu items
*/
export const CONTEXT_MENU_ITEM_BASE_CLASS =
'relative flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-xs outline-none transition-colors'
/**
* Hover state styles for context menu items (standard CSS hover)
*/
export const CONTEXT_MENU_ITEM_HOVER_CLASS = 'hover:bg-surface-hover'
/**
* Hover state styles for context menu items (Melt UI data attribute)
*/
export const CONTEXT_MENU_ITEM_HOVER_MELT_CLASS = 'data-[highlighted]:bg-surface-hover'
/**
* Delete action styles for context menu items
*/
export const CONTEXT_MENU_ITEM_DELETE_CLASS =
'text-red-600 dark:text-red-400 data-[highlighted]:bg-red-500/10 dark:data-[highlighted]:bg-red-900/80 dark:data-[highlighted]:text-red-300'
/**
* Disabled state styles for context menu items
*/
export const CONTEXT_MENU_ITEM_DISABLED_CLASS = 'pointer-events-none opacity-50'
/**
* Divider styles for context menu
*/
export const CONTEXT_MENU_DIVIDER_CLASS = 'my-1 h-px bg-border-light'
/**
* Melt UI animation classes for context menu
*/
export const CONTEXT_MENU_ANIMATION_CLASSES =
'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2'