dtoro/zui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: minor styles and ux

Browse Source
This commit is contained in:
authentik Default Admin
2026-03-11 00:21:37 +01:00
parent 08d66b59c2
commit 7c1039f4c6
3 changed files with 185 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
frontend/src/components/base/NodeMenubar.tsx
View File

@@ -1,7 +1,5 @@
import React, { useCallback, useContext } from 'react'
import FlowContext from '../../lib/flowContext'
import { getNextNodeId, getResetDataForType } from '../../lib/flowUtils'
import { getDefaultStyle } from '../../lib/nodeRegistry'
import {
Menubar,
MenubarContent,
@@ -15,9 +13,6 @@ import {
MenubarTrigger,
} from '../ui/menubar'
import { Kbd } from '../ui/kbd'
const DUPLICATE_OFFSET = { x: 30, y: 30 }
type Props = {
nodeId: string
nodeType: string
@@ -50,39 +45,6 @@ export function NodeMenubar({ nodeId, nodeType, editInputsContent, inputsMenuCon
const hasEdit = nodeType === 'config' || nodeType === 'function'
const hasConnectedNodes = edges.some((e: any) => e.target === nodeId)
const onDuplicate = useCallback(() => {
if (!setNodes || !node) return
const pos = node.position ?? { x: 0, y: 0 }
setNodes((nds: any[]) => {
const newId = getNextNodeId(nodeType, nds.map((n: any) => n.id))
const newNode = {
id: newId,
type: node.type,
position: { x: pos.x + DUPLICATE_OFFSET.x, y: pos.y + DUPLICATE_OFFSET.y },
data: typeof node.data === 'object' && node.data !== null ? { ...node.data } : node.data,
style: getDefaultStyle(nodeType),
}
if (nodeType === 'config' && newNode.data && typeof newNode.data === 'object' && 'title' in newNode.data) {
(newNode.data as { title: string }).title = `${newId}`
}
return nds.concat(newNode)
})
}, [node, nodeType, setNodes])
const onCopy = useCallback(() => {
if (!node) return
const copy = { id: node.id, type: node.type, data: node.data, position: node.position, style: node.style }
navigator.clipboard?.writeText(JSON.stringify(copy)).catch(() => { })
}, [node])
const onReset = useCallback(() => {
if (!setNodes) return
const resetData = getResetDataForType(nodeType, nodeId)
setNodes((nds: any[]) =>
nds.map((n) => (n.id === nodeId ? { ...n, data: resetData } : n))
)
}, [nodeId, nodeType, setNodes])
const onDelete = useCallback(() => {
if (!setNodes || !setEdges) return
setNodes((nds: any[]) => nds.filter((n: any) => n.id !== nodeId))
@@ -93,14 +55,6 @@ export function NodeMenubar({ nodeId, nodeType, editInputsContent, inputsMenuCon
ctx?.setRenamingNodeId?.(nodeId)
}, [nodeId, ctx])
const onPaste = useCallback(() => {
ctx?.flowActionsRef?.current?.pasteAtViewportCenter?.()
}, [ctx])
const onFitView = useCallback(() => {
ctx?.flowActionsRef?.current?.fitView?.()
}, [ctx])
return (
<Menubar className="h-auto min-h-0 flex items-center bg-none p-1 border-t-0 border-l-0 border-r-0 border-b border-b-secondary shadow-none rounded-none text-muted-foreground">
<MenubarMenu>
@@ -108,37 +62,14 @@ export function NodeMenubar({ nodeId, nodeType, editInputsContent, inputsMenuCon
Node
</MenubarTrigger>
<MenubarContent className="min-w-[12rem]">
{/* Edit */}
<MenubarItem className="text-xs" onClick={onDuplicate}>
Duplicate
<MenubarShortcut className="ml-auto pl-4"><Kbd>⌘D</Kbd></MenubarShortcut>
</MenubarItem>
<MenubarItem className="text-xs" onClick={onCopy}>
Copy
<MenubarShortcut className="ml-auto pl-4"><Kbd>⌘C</Kbd></MenubarShortcut>
</MenubarItem>
<MenubarItem className="text-xs" onClick={onPaste}>
Paste
<MenubarShortcut className="ml-auto pl-4"><Kbd>⌘V</Kbd></MenubarShortcut>
</MenubarItem>
<MenubarSeparator />
{/* View */}
<MenubarItem className="text-xs" onClick={onFitView}>
Fit View
<MenubarShortcut className="ml-auto pl-4"><Kbd>⌘0</Kbd></MenubarShortcut>
</MenubarItem>
<MenubarSeparator />
{/* Node */}
<MenubarItem className="text-xs" onClick={onRename}>
Rename
</MenubarItem>
<MenubarItem className="text-xs" onClick={onReset}>
Clear
</MenubarItem>
{nodeMenuExtraContent}
<MenubarSeparator />
<MenubarItem className="text-xs text-destructive focus:text-destructive" onClick={onDelete}>
Delete
<MenubarShortcut className="ml-auto pl-4"><Kbd>⌫</Kbd></MenubarShortcut>
</MenubarItem>
</MenubarContent>
</MenubarMenu>