url/homelable
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

aligned all status icon styling

Browse Source
This commit is contained in:
findthelorax
2026-04-21 23:30:12 -04:00
committed by Remy
parent 1d6127fed3
commit 96786f155b
2 changed files with 10 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/canvas/nodes/BaseNode.tsx
+7 -9
View File
@@ -109,6 +109,11 @@ export function BaseNode({ id, data, selected, icon: typeIcon, width, height }:
</div>
))}
</div>
<div
className="ml-auto w-1.5 h-1.5 rounded-full shrink-0 -translate-y-1.5"
style={{ backgroundColor: statusColor }}
title={data.status}
/>
</div>
{/* Properties section (new system) */}
@@ -121,7 +126,7 @@ export function BaseNode({ id, data, selected, icon: typeIcon, width, height }:
return (
<div key={prop.key} className="flex items-center gap-1 font-mono text-[10px] min-w-0 overflow-hidden" style={{ color: theme.colors.nodeSubtextColor }}>
{Icon && <Icon size={9} className="shrink-0" />}
<span className="truncate max-w-[60px] shrink-0" title={prop.key}>{prop.key}</span>
<span className="truncate max-w-15 shrink-0" title={prop.key}>{prop.key}</span>
<span className="truncate min-w-0" title={prop.value}>· {prop.value}</span>
</div>
)
@@ -139,7 +144,7 @@ export function BaseNode({ id, data, selected, icon: typeIcon, width, height }:
<div className="flex items-center gap-1 font-mono text-[10px]" style={{ color: theme.colors.nodeSubtextColor }}>
<Cpu size={9} className="shrink-0" />
{data.cpu_model && (
<span className="truncate max-w-[80px]" title={data.cpu_model}>{data.cpu_model}</span>
<span className="truncate max-w-20" title={data.cpu_model}>{data.cpu_model}</span>
)}
{data.cpu_count != null && (
<span className="shrink-0">{data.cpu_model ? `· ${data.cpu_count}c` : `${data.cpu_count} cores`}</span>
@@ -166,13 +171,6 @@ export function BaseNode({ id, data, selected, icon: typeIcon, width, height }:
</>
)}
{/* Status dot */}
<div
className="absolute top-1.5 right-1.5 w-1.5 h-1.5 rounded-full shrink-0"
style={{ backgroundColor: statusColor }}
title={data.status}
/>
{(BOTTOM_HANDLE_POSITIONS[data.bottom_handles ?? 1] ?? BOTTOM_HANDLE_POSITIONS[1]).map((leftPct, idx) => {
const sourceId = BOTTOM_HANDLE_IDS[idx]
const targetId = idx === 0 ? 'bottom-t' : `bottom-${idx + 1}-t`
frontend/src/components/canvas/nodes/ProxmoxGroupNode.tsx
+3 -3
View File
@@ -71,7 +71,7 @@ export function ProxmoxGroupNode(props: NodeProps<Node<NodeData>>) {
>
{/* Header bar */}
<div
className="flex items-center gap-2 px-2.5 py-1.5 shrink-0"
className="flex flex-row items-center px-2.5 py-1.5 shrink-0"
style={{
background: isOnline ? `${glow}18` : `${theme.colors.nodeIconBackground}88`,
borderBottom: `1px solid ${isOnline ? `${glow}33` : theme.colors.handleBackground}`,
@@ -104,7 +104,7 @@ export function ProxmoxGroupNode(props: NodeProps<Node<NodeData>>) {
</div>
{/* Status dot */}
<div
className="w-1.5 h-1.5 rounded-full shrink-0"
className="ml-auto w-1.5 h-1.5 rounded-full shrink-0"
style={{ backgroundColor: statusColor }}
title={data.status}
/>
@@ -125,7 +125,7 @@ export function ProxmoxGroupNode(props: NodeProps<Node<NodeData>>) {
}}
>
{Icon && <Icon size={9} className="shrink-0" />}
<span className="truncate max-w-[60px] shrink-0" title={prop.key}>{prop.key}</span>
<span className="truncate max-w-15 shrink-0" title={prop.key}>{prop.key}</span>
<span className="truncate min-w-0" title={prop.value}>· {prop.value}</span>
</div>
)