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

fix: flow dev page layout and compact toolbar improvements (#8776)

Browse Source 
- Fix JSON.parse error on /flows/dev page when editor not yet initialized
- Increase compact topbar threshold from 700px to 800px
- Reposition "Test flow" button below settings bar when pane is narrow on dev pages

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ruben Fiszel
2026-04-09 11:08:35 -04:00
committed by GitHub
parent 11ecb5a774
commit 89920e77f3
3 changed files with 18 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/Dev.svelte
+4 -2
View File
@@ -112,6 +112,8 @@
let darkModeToggle: DarkModeToggle | undefined = $state()
let darkMode: boolean = $state(document.documentElement.classList.contains('dark'))
let modeInitialized = $state(false)
let paneWidth = $state(0)
let compactPreview = $derived(paneWidth < 800)
function initializeMode() {
modeInitialized = true
darkModeToggle?.toggle()
@@ -847,7 +849,7 @@
{:else}
<!-- <div class="h-full w-full grid grid-cols-2"> -->
<div class="h-full w-full">
<div class="flex flex-col max-h-screen h-full relative">
<div class="flex flex-col max-h-screen h-full relative" bind:clientWidth={paneWidth}>
<div class="absolute top-0 left-2">
<DarkModeToggle bind:darkMode bind:this={darkModeToggle} forcedDarkMode={false} />
{#if $userStore}
@@ -857,7 +859,7 @@
{/if}
</div>
<div class="flex justify-center pt-1 z-50 absolute -translate-x-[100%] right-2 top-2 gap-2">
<div class="flex justify-center pt-1 z-50 absolute gap-2 {compactPreview ? 'left-1/2 -translate-x-1/2 top-14' : '-translate-x-[100%] right-2 top-2'}">
<FlowPreviewButtons
{suspendStatus}
bind:this={flowPreviewButtons}
frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte
+1 -1
View File
@@ -299,7 +299,7 @@
let minHeight = $state(0)
let flowPaneWidth = $state(0)
let compactTopbar = $derived(flowPaneWidth < 700)
let compactTopbar = $derived(flowPaneWidth < 800)
export function selectNextId(id: any) {
if (flowStore.val.value.modules) {
frontend/src/routes/flows/dev/+page.svelte
+13 -4
View File
@@ -54,6 +54,8 @@
let darkModeToggle: DarkModeToggle | undefined = $state()
let darkMode: boolean = $state(document.documentElement.classList.contains('dark'))
let modeInitialized = $state(false)
let paneWidth = $state(0)
let compactPreview = $derived(paneWidth < 800)
function initializeMode() {
modeInitialized = true
darkModeToggle?.toggle()
@@ -224,8 +226,15 @@
let editor: SimpleEditor | undefined = $state()
function updateCode(editor: SimpleEditor | undefined, flow: OpenFlow) {
if (editor && !deepEqual(flow, JSON.parse(editor.getCode()))) {
editor.setCode(JSON.stringify(flow, null, 4))
if (!editor) return
const code = editor.getCode()
if (!code) return
try {
if (!deepEqual(flow, JSON.parse(code))) {
editor.setCode(JSON.stringify(flow, null, 4))
}
} catch (e) {
// editor not ready yet
}
}
@@ -265,7 +274,7 @@
updateFromCode(e.detail.code)
}}
/>
<div class="flex flex-col max-h-screen h-full relative">
<div class="flex flex-col max-h-screen h-full relative" bind:clientWidth={paneWidth}>
<div class="absolute top-0 left-2">
<DarkModeToggle bind:darkMode bind:this={darkModeToggle} forcedDarkMode={false} />
{#if $userStore}
@@ -275,7 +284,7 @@
{/if}
</div>
<div class="flex justify-center pt-1 z-50 absolute right-2 top-2 gap-2">
<div class="flex justify-center pt-1 z-50 absolute gap-2 {compactPreview ? 'left-1/2 -translate-x-1/2 top-14' : 'right-2 top-2'}">
<FlowPreviewButtons bind:this={flowPreviewButtons} {suspendStatus} />
</div>
<Splitpanes horizontal class="h-full max-h-screen grow">