fix(frontend): Set settings as header and error handler as footer (wi…

…ndmill-labs#893)
emrul · Nov 14, 2022 · 4dc05b9 · 4dc05b9
1 parent c8b35a2
commit 4dc05b9
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 8 deletions.
diff --git a/frontend/src/lib/components/flows/FlowEditor.svelte b/frontend/src/lib/components/flows/FlowEditor.svelte
@@ -10,7 +10,7 @@
 <div class="h-full overflow-hidden border-t">
 	<Splitpanes>
 		<Pane size={25} minSize={20} class="h-full">
-			<div class="grow overflow-auto p-4 bg-gray h-full bg-gray-50 relative">
+			<div class="grow overflow-auto bg-gray h-full bg-gray-50 relative">
 				{#if $flowStore.value.modules}
 					<FlowModuleSchemaMap bind:modules={$flowStore.value.modules} root />
 				{/if}

diff --git a/frontend/src/lib/components/flows/map/FlowErrorHandlerItem.svelte b/frontend/src/lib/components/flows/map/FlowErrorHandlerItem.svelte
@@ -41,7 +41,7 @@
 		}
 	}}
 	class={classNames(
-		'border rounded-md p-2 bg-white text-sm cursor-pointer mt-4 flex flex-col overflow-x-hidden  bottom-0 z-10 sticky',
+		'border rounded-md p-2 bg-white text-sm cursor-pointer flex flex-col overflow-x-hidden ',
 		$selectedId.includes('failure') ? 'outline outline-offset-1 outline-2 outline-slate-900' : ''
 	)}
 >

diff --git a/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte b/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte
@@ -73,11 +73,17 @@
 	$: confirmationModalOpen = indexToRemove !== undefined
 </script>
 
-<div class="flex flex-col justify-between w-full">
-	<ul class="w-full">
-		{#if root}
+<div class="flex flex-col h-full">
+	{#if root}
+		<div class="flex-initial p-4 border-b">
 			<FlowSettingsItem />
-			<FlowInputsItem />
+		</div>
+	{/if}
+	<ul class="w-full flex-auto relative overflow-y-auto overflow-x-hidden p-4">
+		{#if root}
+			<li>
+				<FlowInputsItem />
+			</li>
 		{/if}
 
 		{#each modules as mod, index (mod.id ?? index)}
@@ -101,7 +107,9 @@
 		<InsertModuleButton on:click={() => insertNewModuleAtIndex(modules.length)} />
 	</ul>
 	{#if root}
-		<FlowErrorHandlerItem />
+		<div class="flex-none p-4 border-t">
+			<FlowErrorHandlerItem />
+		</div>
 	{/if}
 </div>
 

diff --git a/frontend/src/lib/components/flows/map/FlowSettingsItem.svelte b/frontend/src/lib/components/flows/map/FlowSettingsItem.svelte
@@ -9,7 +9,7 @@
 	const { select, selectedId, schedule } = getContext<FlowEditorContext>('FlowEditorContext')
 
 	$: settingsClass = classNames(
-		'border w-full rounded-md p-2 bg-white text-sm cursor-pointer flex items-center mb-4 sticky top-0 z-10',
+		'border w-full rounded-md p-2 bg-white text-sm cursor-pointer flex items-center',
 		$selectedId === 'settings' ? 'outline outline-offset-1 outline-2  outline-slate-900' : ''
 	)
 </script>