mirror of
https://github.com/windmill-labs/windmill.git
synced 2026-10-26 08:02:31 +00:00
* 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>
52 lines
1.8 KiB
TypeScript
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'
|
|
|