From f0ba4da84952ca4d92fda3e8fc8c32cb57966848 Mon Sep 17 00:00:00 2001 From: Ruben Fiszel Date: Mon, 6 Mar 2023 22:35:25 +0100 Subject: [PATCH] feat(frontend): add fork/save buttons + consistent styling for slider/range --- .../src/lib/components/FlowBuilder.svelte | 36 ++++++++++----- .../src/lib/components/Multiselect.svelte | 2 +- .../src/lib/components/ScriptBuilder.svelte | 34 ++++++++++---- frontend/src/lib/components/Slider.svelte | 2 +- .../components/inputs/AppRangeInput.svelte | 7 ++- .../components/inputs/AppSliderInputs.svelte | 10 ++++- .../apps/editor/AppEditorHeader.svelte | 44 ++++++++++++++----- .../apps/editor/component/components.ts | 2 + .../editor/componentsPanel/CssProperty.svelte | 4 +- .../common/button/ButtonPopup.svelte | 2 + .../flows/map/FlowModuleSchemaItem.svelte | 8 ++-- .../src/routes/(root)/(logged)/+layout.svelte | 4 +- .../(root)/(logged)/flows/add/+page.svelte | 2 +- .../flows/edit/[...path]/+page.svelte | 2 +- 14 files changed, 117 insertions(+), 42 deletions(-) diff --git a/frontend/src/lib/components/FlowBuilder.svelte b/frontend/src/lib/components/FlowBuilder.svelte index 84c2054c54..8a6cbf8ffc 100644 --- a/frontend/src/lib/components/FlowBuilder.svelte +++ b/frontend/src/lib/components/FlowBuilder.svelte @@ -7,7 +7,7 @@ import { setContext } from 'svelte' import { writable } from 'svelte/store' import CenteredPage from './CenteredPage.svelte' - import { Button } from './common' + import { Button, ButtonPopup, ButtonPopupItem } from './common' import { dirtyStore } from './common/confirmationModal/dirtyStore' import UnsavedConfirmationModal from './common/confirmationModal/UnsavedConfirmationModal.svelte' import { OFFSET } from './CronInput.svelte' @@ -26,8 +26,6 @@ export let initialArgs: Record = {} export let loading = false - let pathError = '' - async function createSchedule(path: string) { const { cron, args, enabled } = $scheduleStore @@ -49,7 +47,10 @@ } } - async function saveFlow(): Promise { + let loadingSave = false + + async function saveFlow(leave: boolean): Promise { + loadingSave = true const flow = cleanInputs($flowStore) const { cron, args, enabled } = $scheduleStore $dirtyStore = false @@ -111,7 +112,12 @@ await createSchedule(flow.path) } } - goto(`/flows/get/${$flowStore.path}?workspace_id=${$workspaceStore}`) + loadingSave = false + if (leave) { + goto(`/flows/get/${$flowStore.path}?workspace_id=${$workspaceStore}`) + } else if (initialPath !== $flowStore.path) { + goto(`/flows/edit/${$flowStore.path}?workspace_id=${$workspaceStore}`) + } } let timeout: NodeJS.Timeout | undefined = undefined @@ -139,7 +145,7 @@ }, 500) } - const selectedIdStore = writable(selectedId) + const selectedIdStore = writable(selectedId ?? 'settings-metadata') const scheduleStore = writable({ args: {}, cron: '', enabled: false }) const previewArgsStore = writable>(initialArgs) @@ -237,12 +243,22 @@
- saveFlow(false)} > + Save + saveFlow(true)}>Save and exit + {#if initialPath != ''} + { + window.open(`/flows/add?template=${initialPath}`) + }}>Fork + {/if} +
diff --git a/frontend/src/lib/components/Multiselect.svelte b/frontend/src/lib/components/Multiselect.svelte index 162fa81255..c3a86c8b3f 100644 --- a/frontend/src/lib/components/Multiselect.svelte +++ b/frontend/src/lib/components/Multiselect.svelte @@ -167,7 +167,7 @@ {#if showOptions}
    {#each filtered as option} diff --git a/frontend/src/lib/components/ScriptBuilder.svelte b/frontend/src/lib/components/ScriptBuilder.svelte index acf51d93f2..97723cf608 100644 --- a/frontend/src/lib/components/ScriptBuilder.svelte +++ b/frontend/src/lib/components/ScriptBuilder.svelte @@ -14,7 +14,7 @@ import CenteredPage from './CenteredPage.svelte' import UnsavedConfirmationModal from './common/confirmationModal/UnsavedConfirmationModal.svelte' import { dirtyStore } from './common/confirmationModal/dirtyStore' - import { Button, Kbd } from './common' + import { Button, ButtonPopup, ButtonPopupItem, Kbd } from './common' import { faChevronDown, faChevronUp, faPen, faSave } from '@fortawesome/free-solid-svg-icons' import Breadcrumb from './common/breadcrumb/Breadcrumb.svelte' import LanguageIcon from './common/languageIcons/LanguageIcon.svelte' @@ -54,7 +54,9 @@ script.content = initialCode(language, kind, template) } - async function editScript(): Promise { + let loadingSave = false + async function editScript(leave: boolean): Promise { + loadingSave = true try { $dirtyStore = false localStorage.removeItem(script.path) @@ -83,11 +85,17 @@ kind: script.kind } }) - history.replaceState(history.state, '', `/scripts/edit/${newHash}?step=2`) - goto(`/scripts/get/${newHash}?workspace_id=${$workspaceStore}`) + if (leave) { + history.replaceState(history.state, '', `/scripts/edit/${newHash}?step=2`) + goto(`/scripts/get/${newHash}?workspace_id=${$workspaceStore}`) + } else { + await goto(`/scripts/edit/${newHash}?step=2`) + script.hash = newHash + } } catch (error) { - sendUserToast(`Impossible to save the script: ${error.body}`, true) + sendUserToast(`Impossible to save the script: ${error.body || error.message}`, true) } + loadingSave = false } async function changeStep(step: number) { @@ -182,14 +190,24 @@ > Next {#if step == 1}Enter{/if} - editScript(false)} > + Save + editScript(true)}>Save and exit + {#if initialPath != ''} + { + window.open(`/scripts/add?template=${initialPath}`) + }}>Fork + {/if} + diff --git a/frontend/src/lib/components/Slider.svelte b/frontend/src/lib/components/Slider.svelte index 3ea9911b83..04917e1484 100644 --- a/frontend/src/lib/components/Slider.svelte +++ b/frontend/src/lib/components/Slider.svelte @@ -12,5 +12,5 @@ {#if !view}{:else}{/if} {#if view} -
    +
    {/if} diff --git a/frontend/src/lib/components/apps/components/inputs/AppRangeInput.svelte b/frontend/src/lib/components/apps/components/inputs/AppRangeInput.svelte index 718e74c1e8..ca9cbc2783 100644 --- a/frontend/src/lib/components/apps/components/inputs/AppRangeInput.svelte +++ b/frontend/src/lib/components/apps/components/inputs/AppRangeInput.svelte @@ -54,7 +54,12 @@ {+min} -
    +
    export let verticalAlignment: 'top' | 'center' | 'bottom' | undefined = undefined export const staticOutputs: string[] = ['result'] - export let customCss: ComponentCustomCSS<'handle' | 'limits' | 'value'> | undefined = undefined + export let customCss: ComponentCustomCSS<'handle' | 'limits' | 'value' | 'bar'> | undefined = + undefined const { app, worldStore, selectedComponent } = getContext('AppEditorContext') let min = 0 @@ -60,7 +61,12 @@ {+min} -
    ($selectedComponent = id)}> +
    ($selectedComponent = id)} + >
    diff --git a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte index 2e689a98a8..d954bf2b38 100644 --- a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte +++ b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte @@ -1,7 +1,14 @@