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

styles

Browse Source
This commit is contained in:
authentik Default Admin
2026-03-07 23:13:07 +01:00
parent 4c33d1095d
commit 640c8b7d98
6 changed files with 41 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/graph/BaseNode.tsx
View File

@@ -80,11 +80,6 @@ export function BaseNode({
)}
style={{ margin: 0, touchAction: "none", userSelect: "none" }}
>
<span
className="absolute bottom-0 right-0 w-8 h-8 rounded-br border-l border-t border-border/30 hover:border-border/50"
title="Drag corner to resize"
aria-label="Resize node"
/>
</NodeResizeControl>
)}
{handles}
@@ -113,23 +108,6 @@ export function BaseNodeHeader({
);
}
/**
* The title text for the node. To maintain a native application feel, the title
* text is not selectable.
*/
export function BaseNodeHeaderTitle({
className,
...props
}: ComponentProps<"h3">) {
return (
<h3
data-slot="base-node-title"
className={cn("user-select-none flex-1 font-semibold", className)}
{...props}
/>
);
}
/**
* Standard node header: icon on the left, title taking the rest. Use for all node types.
* Inlined so it does not depend on BaseNodeHeader/BaseNodeHeaderTitle (avoids reference errors with HMR).
@@ -153,7 +131,7 @@ export function BaseNodeHeaderRow({
{icon}
<h3
data-slot="base-node-title"
className="user-select-none flex-1 font-semibold"
className="user-select-none flex-1 font-mono"
>
{title}
</h3>

4
src/components/graph/ConfigNode.tsx
View File

@@ -162,7 +162,7 @@ export const ConfigNode = memo(function ConfigNode({ id, data, width, height }:
return (
<BaseNode className="min-w-80 min-h-[280px]" dimensions={dimensions} resizable nodeId={id} handles={<><InputHandle id="ain" /><OutputHandle id="out" /></>}>
<BaseNodeHeaderRow icon={<ScrollText className="size-4" />} title={<NodeHeaderTitle nodeId={id} displayTitle={`${id}.puml`} />} />
<BaseNodeHeaderRow icon={<ScrollText className="size-4" />} title={<NodeHeaderTitle nodeId={id} displayTitle={`${id}`} />} />
<BaseNodeContent>
<div className="shrink-0 w-full">
@@ -248,7 +248,7 @@ export const ConfigNode = memo(function ConfigNode({ id, data, width, height }:
/>
</div>
<div ref={editorContainerRef} className="min-h-0 flex-1 w-full nodrag nopan overflow-hidden rounded border border-input">
<div ref={editorContainerRef} className="min-h-0 flex-1 w-full nodrag nopan overflow-hidden border-t border-input">
<CodeMirror
// @ts-expect-error ref is { view, state, editor }; package ref type not in our node_modules
ref={editorRef}

9
src/components/graph/FunctionNode.tsx
View File

@@ -52,13 +52,10 @@ export const FunctionNode = memo(function FunctionNode({ id, data, width, height
<BaseNodeHeaderRow icon={<Code2 className="size-4" />} title={<NodeHeaderTitle nodeId={id} displayTitle={id} />} />
<BaseNodeContent>
<div className="shrink-0 w-full mb-1">
<div className="shrink-0 w-full">
<NodeMenubar nodeId={id} nodeType="function" />
</div>
<p className="shrink-0 text-[10px] text-muted-foreground mb-1">
Call in config: <code className="rounded bg-muted px-0.5">$&#123;{id}(var1, var2)&#125;</code>
</p>
<div ref={editorContainerRef} className="min-h-0 flex-1 w-full nodrag nopan overflow-hidden rounded border border-input">
<div ref={editorContainerRef} className="min-h-0 flex-1 w-full nodrag nopan overflow-hidden border-t border-input">
<CodeMirror
value={bodyValue}
height={`${editorHeight}px`}
@@ -72,7 +69,7 @@ export const FunctionNode = memo(function FunctionNode({ id, data, width, height
</BaseNodeContent>
<BaseNodeFooter>
<BaseNodeFooterText>Body: {bodyValue ? `${bodyValue.length} chars` : 'none'}</BaseNodeFooterText>
<BaseNodeFooterText>{bodyValue ? `${bodyValue.length} chars` : 'none'}</BaseNodeFooterText>
</BaseNodeFooter>
</BaseNode>
)

2
src/components/graph/NodeMenubar.tsx
View File

@@ -79,7 +79,7 @@ export function NodeMenubar({ nodeId, nodeType, editInputsContent, insertTagsCon
}, [nodeId, ctx])
return (
<Menubar className="h-auto min-h-0 flex items-center bg-none p-1 border-none shadow-none">
<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 shadow-none rounded-none text-muted-foreground">
<MenubarMenu>
<MenubarTrigger className="px-1.5 py-0 text-xs">
Node

2
src/components/graph/RenderingNode.tsx
View File

@@ -403,7 +403,7 @@ export const RenderingNode = memo(function RenderingNode({ id, width, height }:
<div className="flex min-h-0 flex-1 items-center justify-center text-xs text-muted-foreground">Rendering…</div>
) : svgContent ? (
<div
className="min-h-0 flex-1 w-full overflow-auto rounded border border-input bg-white dark:bg-gray-900 [&_svg]:max-w-full [&_svg]:h-auto"
className="min-h-0 flex-1 w-full overflow-auto bg-white dark:bg-secondary [&_svg]:max-w-full [&_svg]:h-auto"
dangerouslySetInnerHTML={{ __html: svgContent }}
/>
) : null}

5
src/components/graph/VariableNode.tsx
View File

@@ -94,10 +94,11 @@ export const VariableNode = memo(function VariableNode({ id, data }: Props) {
<BaseNode className="min-w-56 min-h-[180px]" handles={<OutputHandle id="out" />}>
<BaseNodeHeaderRow icon={<Variable className="size-4" />} title={<NodeHeaderTitle nodeId={id} displayTitle={id} />} />
<BaseNodeContent className="gap-2 p-3">
<BaseNodeContent>
<div className="shrink-0 w-full">
<NodeMenubar nodeId={id} nodeType="variable" />
</div>
<div className="flex flex-col p-2 gap-2">
<div className="flex flex-col gap-1.5">
<label className="text-xs font-medium text-muted-foreground">Type</label>
<Select value={valueType} onValueChange={onTypeChange}>
@@ -129,11 +130,11 @@ export const VariableNode = memo(function VariableNode({ id, data }: Props) {
/>
)}
</div>
</div>
</BaseNodeContent>
<BaseNodeFooter>
<BaseNodeFooterText>
Use in config: <code className="rounded bg-muted px-0.5">prop: {'${'}{id}{'}'}</code>
</BaseNodeFooterText>
</BaseNodeFooter>
</BaseNode>