From e71fca35ca83ba223a04bcf6bcd494d43edc0778 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Tue, 15 Nov 2022 01:17:30 +0100
Subject: [PATCH] improve flow UX

---
 .../flows/content/FlowModuleHeader.svelte     |  4 +--
 .../flows/map/FlowBranchAllMap.svelte         | 19 +++++++-------
 .../flows/map/FlowBranchOneMap.svelte         | 21 +++++++--------
 .../flows/map/FlowModuleSchemaItem.svelte     | 26 ++++++++++---------
 .../flows/map/FlowModuleSchemaMap.svelte      |  2 +-
 .../lib/components/flows/map/MapItem.svelte   |  8 +++---
 .../flows/pickers/FlowScriptPicker.svelte     |  1 +
 7 files changed, 42 insertions(+), 39 deletions(-)

diff --git a/frontend/src/lib/components/flows/content/FlowModuleHeader.svelte b/frontend/src/lib/components/flows/content/FlowModuleHeader.svelte
index f93f0cf328..36c25765c6 100644
--- a/frontend/src/lib/components/flows/content/FlowModuleHeader.svelte
+++ b/frontend/src/lib/components/flows/content/FlowModuleHeader.svelte
@@ -53,7 +53,7 @@
 			variant="border"
 			on:click={() => dispatch('fork')}
 			startIcon={{ icon: faCodeBranch }}
-			{iconOnly}
+			iconOnly={false}
 		>
 			Fork
 		</Button>
@@ -66,7 +66,7 @@
 			variant="border"
 			startIcon={{ icon: faSave }}
 			on:click={() => dispatch('createScriptFromInlineScript')}
-			{iconOnly}
+			iconOnly={false}
 		>
 			Save to workspace
 		</Button>
diff --git a/frontend/src/lib/components/flows/map/FlowBranchAllMap.svelte b/frontend/src/lib/components/flows/map/FlowBranchAllMap.svelte
index d7f6bd4a6c..a0f57f3211 100644
--- a/frontend/src/lib/components/flows/map/FlowBranchAllMap.svelte
+++ b/frontend/src/lib/components/flows/map/FlowBranchAllMap.svelte
@@ -4,7 +4,7 @@
 	import type { FlowModule } from '$lib/gen'
 	import FlowModuleSchemaMap from './FlowModuleSchemaMap.svelte'
 	import { slide } from 'svelte/transition'
-	import { faCodeBranch, faTrashAlt } from '@fortawesome/free-solid-svg-icons'
+	import { faCodeBranch, faTimesCircle, faTrashAlt } from '@fortawesome/free-solid-svg-icons'
 	import { Button } from '$lib/components/common'
 	import { classNames } from '$lib/utils'
 	import Icon from 'svelte-awesome'
@@ -48,7 +48,7 @@
 {#if module.value.type === 'branchall'}
 	<div class="flex text-xs">
 		<div
-			class="w-full space-y-2 flex flex-col border p-2 bg-gray-500 border-gray-600 bg-opacity-10 rounded-sm my-2"
+			class="w-full space-y-2 flex flex-col border p-2 bg-gray-500 border-gray-600 bg-opacity-10 rounded-sm my-2 relative"
 		>
 			{#each module.value.branches ?? [] as branch, branchIndex (branchIndex)}
 				<!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -69,14 +69,15 @@
 						class="text-xs flex flex-row justify-between w-full flex-wrap gap-2 items-center truncate"
 					>
 						{branch.summary || `Branch ${branchIndex}`}
-						<Button
-							iconOnly
-							size="xs"
-							startIcon={{ icon: faTrashAlt }}
-							color="light"
-							variant="border"
+						<button
+							class="absolute -top-1 right-1 rounded-full bg-white h-4 w-4 "
 							on:click={() => removeBranch(branchIndex)}
-						/>
+							><Icon
+								data={faTrashAlt}
+								class="text-gray-600 hover:text-red-600"
+								scale={0.6}
+							/></button
+						>
 					</span>
 				</div>
 
diff --git a/frontend/src/lib/components/flows/map/FlowBranchOneMap.svelte b/frontend/src/lib/components/flows/map/FlowBranchOneMap.svelte
index 026dc81b32..4bd0a71507 100644
--- a/frontend/src/lib/components/flows/map/FlowBranchOneMap.svelte
+++ b/frontend/src/lib/components/flows/map/FlowBranchOneMap.svelte
@@ -3,8 +3,7 @@
 	import { getContext } from 'svelte'
 	import type { FlowModule } from '$lib/gen'
 	import FlowModuleSchemaMap from './FlowModuleSchemaMap.svelte'
-	import { slide } from 'svelte/transition'
-	import { faCodeBranch, faTrashAlt } from '@fortawesome/free-solid-svg-icons'
+	import { faCodeBranch, faTimesCircle, faTrashAlt } from '@fortawesome/free-solid-svg-icons'
 	import { Button } from '$lib/components/common'
 	import { classNames } from '$lib/utils'
 	import Icon from 'svelte-awesome'
@@ -49,7 +48,7 @@
 {#if module.value.type === 'branchone'}
 	<div class="flex text-xs">
 		<div
-			class="w-full space-y-2 flex flex-col border p-2 bg-gray-500 border-gray-600 bg-opacity-10 rounded-sm my-2"
+			class="w-full space-y-2 flex flex-col border p-2 bg-gray-500 border-gray-600 bg-opacity-10 rounded-sm my-2 relative"
 		>
 			<!-- svelte-ignore a11y-click-events-have-key-events -->
 			<div
@@ -94,15 +93,15 @@
 						class="text-xs flex flex-row justify-between w-full flex-wrap gap-2 items-center truncate"
 					>
 						{branch.summary || `Branch ${branchIndex}`}
-
-						<Button
-							iconOnly
-							size="xs"
-							startIcon={{ icon: faTrashAlt }}
-							color="light"
-							variant="border"
+						<button
+							class="absolute -top-1 right-1 rounded-full m-auto  h-4 w-4 "
 							on:click={() => removeBranch(branchIndex)}
-						/>
+							><Icon
+								data={faTrashAlt}
+								class="text-gray-600 hover:text-red-600"
+								scale={0.6}
+							/></button
+						>
 					</span>
 				</div>
 
diff --git a/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte b/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte
index 3f9f5a2c0a..cfda03898c 100644
--- a/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte
+++ b/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte
@@ -1,8 +1,13 @@
 <script lang="ts">
 	import Badge from '$lib/components/common/badge/Badge.svelte'
-	import Button from '$lib/components/common/button/Button.svelte'
 	import { classNames } from '$lib/utils'
-	import { faBed, faRepeat, faStop, faTrashAlt } from '@fortawesome/free-solid-svg-icons'
+	import {
+		faBed,
+		faRepeat,
+		faStop,
+		faTimesCircle,
+		faTrashAlt
+	} from '@fortawesome/free-solid-svg-icons'
 	import { createEventDispatcher } from 'svelte'
 	import Icon from 'svelte-awesome'
 
@@ -20,7 +25,7 @@
 	export let label: string
 
 	const margin = isLast ? '' : isFirst ? 'mb-0.5' : 'my-0.5'
-	const dispatch = createEventDispatcher<{ delete: CustomEvent<MouseEvent> }>()
+	const dispatch = createEventDispatcher()
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -48,7 +53,7 @@
 	</div>
 	<div
 		class={classNames(
-			'w-full flex overflow-hidden rounded-sm cursor-pointer',
+			'w-full flex overflow-hidden rounded-sm cursor-pointer mr-2',
 			selected ? 'outline outline-offset-1 outline-2  outline-gray-600' : '',
 			margin
 		)}
@@ -71,7 +76,7 @@
 			{/if}
 		</div>
 		<div
-			class="flex justify-between items-center w-full overflow-hidden border p-2 bg-white text-sm"
+			class="flex justify-between items-center w-full overflow-hidden border p-2 bg-white text-2xs"
 		>
 			<div class="flex-1 truncate" class:font-bold={bold}>{label}</div>
 			<div class="flex items-center space-x-2">
@@ -79,14 +84,11 @@
 					<Badge color="indigo">{id}</Badge>
 				{/if}
 				{#if deletable}
-					<Button
+					<button
+						class="absolute -top-1 right-1 rounded-full m-auto bg-white  h-4 w-4 "
 						on:click={(event) => dispatch('delete', event)}
-						startIcon={{ icon: faTrashAlt, classes: 'text-gray-500' }}
-						iconOnly={true}
-						color="light"
-						variant="border"
-						size="xs"
-					/>
+						><Icon data={faTrashAlt} class="text-gray-600 hover:text-red-600" scale={0.6} /></button
+					>
 				{/if}
 			</div>
 		</div>
diff --git a/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte b/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte
index f54f489e36..3b491a5adb 100644
--- a/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte
+++ b/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte
@@ -79,7 +79,7 @@
 			<FlowSettingsItem />
 		</div>
 	{/if}
-	<ul class="w-full flex-auto relative overflow-y-auto overflow-x-hidden pl-2 pr-1 py-4">
+	<ul class="w-full flex-auto relative overflow-y-auto overflow-x-hidden px-1 py-1">
 		{#if root}
 			<li>
 				<FlowInputsItem />
diff --git a/frontend/src/lib/components/flows/map/MapItem.svelte b/frontend/src/lib/components/flows/map/MapItem.svelte
index b60556ddd9..bdb3b909f0 100644
--- a/frontend/src/lib/components/flows/map/MapItem.svelte
+++ b/frontend/src/lib/components/flows/map/MapItem.svelte
@@ -22,8 +22,8 @@
 		suspend: Boolean(mod.suspend)
 	}
 
-	function onDelete(event: CustomEvent<CustomEvent<MouseEvent>>) {
-		dispatch('delete', event.detail)
+	function onDelete(event: CustomEvent<MouseEvent>) {
+		dispatch('delete', event)
 	}
 </script>
 
@@ -45,8 +45,8 @@
 			</FlowModuleSchemaItem>
 			<div class="flex flex-row w-full">
 				<div class="w-7 shrink-0 line" />
-				<div class="grow my-4 overflow-auto">
-					<div class="w-full pr-1">
+				<div class="grow my-1 overflow-auto">
+					<div class="w-full">
 						<FlowModuleSchemaMap bind:modules={mod.value.modules} color="orange" />
 					</div>
 				</div>
diff --git a/frontend/src/lib/components/flows/pickers/FlowScriptPicker.svelte b/frontend/src/lib/components/flows/pickers/FlowScriptPicker.svelte
index f4949464b3..63a078b410 100644
--- a/frontend/src/lib/components/flows/pickers/FlowScriptPicker.svelte
+++ b/frontend/src/lib/components/flows/pickers/FlowScriptPicker.svelte
@@ -10,6 +10,7 @@
 
 <Button
 	{disabled}
+	btnClasses="truncate"
 	on:click
 	size="sm"
 	spacingSize="md"