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

nit dataflow dark mode colors

Browse Source
This commit is contained in:
Ruben Fiszel
2024-07-05 20:06:31 +02:00
parent c4b2baae20
commit 8bddfb6e38
2 changed files with 45 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/graph/FlowGraph.svelte
+7 -3
View File
@@ -185,7 +185,8 @@
id: `dep-${pid}-${$selectedId}`,
source: pid,
target: $selectedId!,
labelBgColor: 'white',
labelBgColor: darkMode ? '#999' : 'white',
edgeColor: darkMode ? 'white' : 'black',
arrow: false,
animate: true,
noHandle: true,
@@ -201,7 +202,8 @@
id: `dep-${pid}-${$selectedId}`,
source: $selectedId!,
target: pid,
labelBgColor: 'white',
labelBgColor: darkMode ? '#999' : 'white',
edgeColor: darkMode ? 'white' : 'black',
arrow: false,
animate: true,
noHandle: true,
@@ -770,9 +772,11 @@
onMount(() => {
onThemeChange()
})
let darkMode = false
</script>
<DarkModeObserver on:change={onThemeChange} />
<DarkModeObserver bind:darkMode on:change={onThemeChange} />
<!-- {JSON.stringify(flowModuleStates)} -->
<div
frontend/src/lib/components/graph/svelvet/edges/views/Edges/EdgeText.svelte
+38 -39
View File
@@ -1,49 +1,48 @@
<script lang="ts">
import type { EdgeTextProps } from './types';
import type { EdgeTextProps } from './types'
// destructuring props to pass into BaseEdge component
export let edgeTextProps: EdgeTextProps;
$: ({ label, labelBgColor, labelTextColor, centerX, centerY } =
edgeTextProps);
// destructuring props to pass into BaseEdge component
export let edgeTextProps: EdgeTextProps
$: ({ label, labelBgColor, labelTextColor, centerX, centerY } = edgeTextProps)
const shiftRectY: number = 7;
$: pxRatio = label.length < 3 ? 9 : 7;
const shiftRectY: number = 7
$: pxRatio = label.length < 3 ? 9 : 7
// determine the center point of the edge to be used in the EdgeText component
$: textCenterX = centerX;
$: textCenterY = centerY;
// determine the center point of the edge to be used in the EdgeText component
$: textCenterX = centerX
$: textCenterY = centerY
// determine width of rect to render based on label.length (removing spaces)
// pxRatio is an estimate of how many pixels 1 character might take up
// pxRatio not 100% accurate as font is not monospace
$: spaces = label.split(' ').length - 1;
$: newLength = label.length - spaces;
$: labelPx = newLength * pxRatio;
// determine width of rect to render based on label.length (removing spaces)
// pxRatio is an estimate of how many pixels 1 character might take up
// pxRatio not 100% accurate as font is not monospace
$: spaces = label.split(' ').length - 1
$: newLength = label.length - spaces
$: labelPx = newLength * pxRatio
</script>
{#if typeof label === 'undefined' || !label}
{null}
{null}
{:else}
<g>
<rect
class="EdgeTextBg"
data-testid="edge-text-bg"
fill={labelBgColor ? labelBgColor : 'white'}
x={textCenterX - labelPx / 2}
y={textCenterY - shiftRectY}
width={labelPx}
height={16}
/>
<text
class="EdgeText"
x={textCenterX}
y={textCenterY}
font-size="12px"
dominant-baseline="central"
text-anchor="middle"
fill={labelTextColor ? labelTextColor : 'black'}
>
{label}
</text>
</g>
<g>
<rect
class="EdgeTextBg"
data-testid="edge-text-bg"
fill={labelBgColor ? labelBgColor : 'white'}
x={textCenterX - labelPx / 2}
y={textCenterY - shiftRectY}
width={labelPx}
height={16}
/>
<text
class="EdgeText"
x={textCenterX}
y={textCenterY}
font-size="12px"
dominant-baseline="central"
text-anchor="middle"
fill={labelTextColor ? labelTextColor : 'black'}
>
{label}
</text>
</g>
{/if}