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

hover color for virtual items

Browse Source
This commit is contained in:
Diego Imbert
2025-04-17 11:22:08 +02:00
parent 30c6a5f123
commit 84a75308da
14 changed files with 36 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/flows/map/VirtualItem.svelte
+2
View File
@@ -13,6 +13,7 @@
export let label: string | undefined = undefined
export let bgColor: string = ''
export let bgHoverColor: string = ''
export let selected: boolean
export let selectable: boolean
export let id: string | undefined = undefined
@@ -36,6 +37,7 @@
<VirtualItemWrapper
{label}
{bgColor}
{bgHoverColor}
{selected}
{selectable}
{id}
frontend/src/lib/components/flows/map/VirtualItemWrapper.svelte
+4 -1
View File
@@ -9,6 +9,7 @@
export let id: string | undefined
export let onTop: boolean = false
export let bgColor: string
export let bgHoverColor: string = ''
const dispatch = createEventDispatcher<{
insert: {
@@ -33,7 +34,9 @@
onTop ? 'z-[901]' : '',
'outline-offset-1 outline-gray-600 dark:outline-gray-400'
)}
style="width: 275px; max-height: 38px; background-color: {bgColor};"
style="width: 275px; max-height: 38px; background-color: {hover && bgHoverColor
? bgHoverColor
: bgColor};"
on:pointerdown={() => {
if (selectable) {
dispatch('select', id || label || '')
frontend/src/lib/components/graph/renderers/nodes/BranchAllStart.svelte
+2 -1
View File
@@ -3,7 +3,7 @@
import NodeWrapper from './NodeWrapper.svelte'
import { X } from 'lucide-svelte'
import type { GraphModuleState } from '../../model'
import { getStateColor } from '../../util'
import { getStateColor, getStateHoverColor } from '../../util'
import type { FlowModule } from '$lib/gen'
import type { GraphEventHandlers } from '../../graphBuilder'
import { computeBorderStatus } from '../utils'
@@ -33,6 +33,7 @@
selectable
selected={data.selected}
bgColor={getStateColor(undefined, darkMode)}
bgHoverColor={getStateHoverColor(undefined, darkMode)}
borderColor={borderStatus
? getStateColor(borderStatus, darkMode) + (!darkMode ? '; border-width: 3px' : '')
: undefined}
frontend/src/lib/components/graph/renderers/nodes/BranchOneStart.svelte
+2 -1
View File
@@ -3,7 +3,7 @@
import NodeWrapper from './NodeWrapper.svelte'
import { X } from 'lucide-svelte'
import type { GraphModuleState } from '../../model'
import { getStateColor } from '../../util'
import { getStateColor, getStateHoverColor } from '../../util'
import type { FlowModule } from '$lib/gen'
import type { GraphEventHandlers } from '../../graphBuilder'
import { computeBorderStatus } from '../utils'
@@ -35,6 +35,7 @@
selectable
selected={data.selected}
bgColor={getStateColor(undefined, darkMode)}
bgHoverColor={getStateHoverColor(undefined, darkMode)}
borderColor={borderStatus ? getStateColor(borderStatus, darkMode) : undefined}
on:select={() => {
setTimeout(() => data?.eventHandlers?.select(data.id))
frontend/src/lib/components/graph/renderers/nodes/ForLoopStartNode.svelte
+2 -1
View File
@@ -2,7 +2,7 @@
import VirtualItem from '$lib/components/flows/map/VirtualItem.svelte'
import NodeWrapper from './NodeWrapper.svelte'
import type { FlowModule, FlowStatusModule } from '$lib/gen'
import { getStateColor } from '../../util'
import { getStateColor, getStateHoverColor } from '../../util'
import type { GraphModuleState } from '../../model'
import type { GraphEventHandlers } from '../../graphBuilder'
import { getContext } from 'svelte'
@@ -79,6 +79,7 @@
id={data.id}
hideId
bgColor={getStateColor(undefined, darkMode)}
bgHoverColor={getStateHoverColor(undefined, darkMode)}
borderColor={getStateColor(computeStatus(data.flowModuleStates?.[data.id]), darkMode)}
on:select={(e) => {
setTimeout(() => data?.eventHandlers?.select(e.detail))
frontend/src/lib/components/graph/renderers/nodes/InputNode.svelte
+2 -1
View File
@@ -3,7 +3,7 @@
import NodeWrapper from './NodeWrapper.svelte'
import type { GraphEventHandlers } from '../../graphBuilder'
import type { FlowModule } from '$lib/gen'
import { getStateColor } from '../../util'
import { getStateColor, getStateHoverColor } from '../../util'
import { getContext } from 'svelte'
import type { Writable } from 'svelte/store'
import InsertModuleButton from '$lib/components/flows/map/InsertModuleButton.svelte'
@@ -73,6 +73,7 @@
selectable
selected={$selectedId === 'Input'}
bgColor={getStateColor(undefined, darkMode)}
bgHoverColor={getStateHoverColor(undefined, darkMode)}
on:insert={(e) => {
setTimeout(() => data?.eventHandlers?.insert(e.detail))
}}
frontend/src/lib/components/graph/renderers/nodes/NoBranchNode.svelte
+2 -1
View File
@@ -3,7 +3,7 @@
import NodeWrapper from './NodeWrapper.svelte'
import type { FlowModule } from '$lib/gen'
import type { GraphEventHandlers } from '../../graphBuilder'
import { getStateColor } from '../../util'
import { getStateColor, getStateHoverColor } from '../../util'
import type { GraphModuleState } from '../../model'
import { computeBorderStatus } from '../utils'
@@ -31,6 +31,7 @@
selectable={true}
selected={false}
bgColor={getStateColor(undefined, darkMode)}
bgHoverColor={getStateHoverColor(undefined, darkMode)}
borderColor={getStateColor(borderStatus, darkMode)}
on:select={(e) => {
setTimeout(() => data?.eventHandlers?.select(e.detail))
frontend/src/lib/components/graph/renderers/nodes/ResultNode.svelte
+5 -1
View File
@@ -3,7 +3,7 @@
import NodeWrapper from './NodeWrapper.svelte'
import type { FlowModule } from '$lib/gen'
import type { GraphEventHandlers } from '../../graphBuilder'
import { getStateColor } from '../../util'
import { getStateColor, getStateHoverColor } from '../../util'
import type { Writable } from 'svelte/store'
import { getContext } from 'svelte'
@@ -29,6 +29,10 @@
data.success == undefined ? undefined : data.success ? 'Success' : 'Failure',
darkMode
)}
bgHoverColor={getStateHoverColor(
data.success == undefined ? undefined : data.success ? 'Success' : 'Failure',
darkMode
)}
on:select={(e) => {
setTimeout(() => data?.eventHandlers?.select(e.detail))
}}
frontend/src/lib/components/graph/renderers/nodes/SubflowBound.svelte
+2 -1
View File
@@ -3,7 +3,7 @@
import NodeWrapper from './NodeWrapper.svelte'
import { Minimize2 } from 'lucide-svelte'
import type { GraphModuleState } from '../../model'
import { getStateColor } from '../../util'
import { getStateColor, getStateHoverColor } from '../../util'
import type { FlowModule } from '$lib/gen'
import type { GraphEventHandlers } from '../../graphBuilder'
@@ -28,6 +28,7 @@
selectable
selected={data.selected}
bgColor={getStateColor(undefined, darkMode)}
bgHoverColor={getStateHoverColor(undefined, darkMode)}
borderColor={undefined}
on:select={() => {
setTimeout(() => data.eventHandlers?.select(data.id))
frontend/src/lib/components/graph/renderers/nodes/TriggersNode.svelte
+2 -1
View File
@@ -6,7 +6,7 @@
import { getContext } from 'svelte'
import type { Writable } from 'svelte/store'
import { Maximize2, Minimize2, Calendar } from 'lucide-svelte'
import { getStateColor } from '../../util'
import { getStateColor, getStateHoverColor } from '../../util'
import { setScheduledPollSchedule, type TriggerContext } from '$lib/components/triggers'
import VirtualItemWrapper from '$lib/components/flows/map/VirtualItemWrapper.svelte'
@@ -37,6 +37,7 @@
isEditor={data.isEditor}
path={data.path}
bgColor={getStateColor(undefined, darkMode)}
bgHoverColor={getStateHoverColor(undefined, darkMode)}
on:new={(e) => {
data?.eventHandlers.insert({
modules: data.modules,
frontend/src/lib/components/graph/renderers/nodes/branchAllEndNode.svelte
+2 -1
View File
@@ -3,7 +3,7 @@
import NodeWrapper from './NodeWrapper.svelte'
import type { FlowModule } from '$lib/gen'
import type { GraphEventHandlers } from '../../graphBuilder'
import { getStateColor } from '../../util'
import { getStateColor, getStateHoverColor } from '../../util'
import type { GraphModuleState } from '../../model'
export let data: {
@@ -23,6 +23,7 @@
selectable={true}
selected={false}
bgColor={getStateColor(undefined, darkMode)}
bgHoverColor={getStateHoverColor(undefined, darkMode)}
borderColor={getStateColor(data?.flowModuleStates?.[data?.id]?.type, darkMode)}
on:select={(e) => {
data?.eventHandlers?.select(e.detail)
frontend/src/lib/components/graph/renderers/nodes/branchOneEndNode.svelte
+2 -1
View File
@@ -2,7 +2,7 @@
import VirtualItem from '$lib/components/flows/map/VirtualItem.svelte'
import NodeWrapper from './NodeWrapper.svelte'
import type { GraphEventHandlers } from '../../graphBuilder'
import { getStateColor } from '../../util'
import { getStateColor, getStateHoverColor } from '../../util'
import type { GraphModuleState } from '../../model'
export let data: {
@@ -21,6 +21,7 @@
selectable={true}
selected={false}
bgColor={getStateColor(undefined, darkMode)}
bgHoverColor={getStateHoverColor(undefined, darkMode)}
borderColor={getStateColor(data?.flowModuleStates?.[data?.id]?.type, darkMode)}
on:select={(e) => {
setTimeout(() => data?.eventHandlers?.select(e.detail))
frontend/src/lib/components/graph/renderers/triggers/TriggersWrapper.svelte
+6 -1
View File
@@ -15,19 +15,24 @@
export let disableAi: boolean = false
export let modules: FlowModule[] = []
export let bgColor: string
export let bgHoverColor: string = ''
const dispatch = createEventDispatcher()
let hover = false
</script>
<div style={`width: ${NODE.width}px;`}>
<button
style="background-color: {bgColor};"
style="background-color: {hover && bgHoverColor ? bgHoverColor : bgColor};"
class="flex w-full flex-row gap-1 px-2 p-1 items-center {selected
? 'outline outline-2 outline-gray-600 rounded-sm dark:bg-white/5 dark:outline-gray-400'
: ''}"
on:pointerdown={() => {
dispatch('select')
}}
on:mouseenter={() => (hover = true)}
on:mouseleave={() => (hover = false)}
>
<div class="flex flex-col mr-1 ml-1">
<div class="flex flex-row items-center text-2xs font-normal"> Triggers </div>
frontend/src/lib/components/graph/util.ts
+1 -1
View File
@@ -57,7 +57,7 @@ export function getStateHoverColor(
if (nonVirtualItem) {
return isDark ? '#343B46' : '#f6f6f6'
} else {
return isDark ? '#343B46' : '#f6f6f6'
return isDark ? '#343B46' : '#d5dee8'
}
}
}