starred/windmill
1
0
Fork 0
mirror of https://github.com/windmill-labs/windmill.git synced 2026-08-21 16:02:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: use group color for collapsed stacked layers and step count text

Browse Source 
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Guilhem
2026-02-25 11:53:43 +00:00
parent d4b4104cd7
commit 4a4f4ab15a
2 changed files with 14 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/graph/GroupNodeCard.svelte
+4 -3
View File
@@ -90,8 +90,7 @@
class={twMerge(
'w-full module cursor-pointer max-w-full',
fullWidth ? 'rounded-t-md' : 'shadow-sm border rounded-md overflow-clip',
'bg-surface-tertiary',
noteColorConfig ? noteColorConfig.text : ''
'bg-surface-tertiary'
)}
style={fullWidth ? '' : 'width: 275px;'}
>
@@ -137,7 +136,9 @@
<!-- svelte-ignore a11y_click_events_have_key_events -->
<!-- svelte-ignore a11y_no_static_element_interactions -->
<span
class="text-3xs opacity-60 shrink-0 whitespace-nowrap {onExpand
class="text-3xs opacity-60 shrink-0 whitespace-nowrap {noteColorConfig
? noteColorConfig.text
: ''} {onExpand
? 'cursor-pointer hover:opacity-100 hover:text-blue-500 dark:hover:text-blue-400'
: ''}"
onclick={onExpand ? stopPropagation(preventDefault(onExpand)) : undefined}
frontend/src/lib/components/graph/renderers/nodes/CollapsedGroupNode.svelte
+10 -2
View File
@@ -5,6 +5,7 @@
import GroupNodeCard from '../../GroupNodeCard.svelte'
import GroupActionBar from '../../GroupActionBar.svelte'
import { getGroupEditorContext } from '../../groupEditor.svelte'
import { NOTE_COLORS, NoteColor } from '../../noteColors'
interface Props {
data: CollapsedGroupN['data']
@@ -22,6 +23,13 @@
let group = $derived(
groupEditorContext?.groupEditor.getGroups().find((g) => g.id === data.groupId)
)
let colorConfig = $derived(
data.color
? (NOTE_COLORS[data.color as NoteColor] ?? NOTE_COLORS[NoteColor.BLUE])
: NOTE_COLORS[NoteColor.BLUE]
)
let borderColorClass = $derived(colorConfig.outline.replace(/outline-/g, 'border-'))
</script>
<NodeWrapper offset={data.offset}>
@@ -30,11 +38,11 @@
<div class="relative" onmouseenter={() => (hover = true)} onmouseleave={() => (hover = false)}>
<!-- Stacked layers behind the card -->
<div
class="absolute inset-0 top-[4px] left-2 h-9 rounded-md bg-surface border border-gray-300 z-[-1]"
class="absolute inset-0 top-[4px] left-2 h-9 rounded-md border z-[-1] {colorConfig.background} {borderColorClass}"
style="width: 259px;"
></div>
<div
class="absolute inset-0 top-[7px] left-4 h-9 rounded-md bg-[#F2F2F8] border border-gray-300 z-[-2]"
class="absolute inset-0 top-[7px] left-4 h-9 rounded-md border z-[-2] {colorConfig.background} {borderColorClass}"
style="width: 243px;"
></div>