From 70dd6f759cdb202e2bedd9eba18eb25a889281da Mon Sep 17 00:00:00 2001 From: Faton Ramadani Date: Fri, 3 Mar 2023 15:15:29 +0100 Subject: [PATCH] App small fixes (#1258) * fix(frontend): Fix runnable editor * fix(frontend): remove isopenstore * fix(frontend): add output searchbar * fix(frontend): fix build * fix(frontend): add missing clear button --- frontend/src/lib/components/Tooltip.svelte | 2 +- .../components/apps/editor/AppEditor.svelte | 8 +- .../componentsPanel/ComponentList.svelte | 86 +++++++++++++------ .../editor/componentsPanel/ListItem.svelte | 33 ++++--- .../editor/contextPanel/ContextPanel.svelte | 30 ++++++- .../EmptyInlineScript.svelte | 14 ++- .../InlineScriptEditor.svelte | 62 ++++++++----- .../InlineScriptEditorPanel.svelte | 13 +-- .../InlineScriptsPanel.svelte | 21 +++-- .../InlineScriptsPanelList.svelte | 13 +-- .../settingsPanel/ComponentPanel.svelte | 2 +- .../settingsPanel/common/PanelSection.svelte | 4 +- 12 files changed, 197 insertions(+), 91 deletions(-) diff --git a/frontend/src/lib/components/Tooltip.svelte b/frontend/src/lib/components/Tooltip.svelte index 4afad97a05..eb79fae9e7 100644 --- a/frontend/src/lib/components/Tooltip.svelte +++ b/frontend/src/lib/components/Tooltip.svelte @@ -13,7 +13,7 @@
- - + +
Insert
- +
Settings
- +
CSS diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte index 43f67e3ad7..3080e1e554 100644 --- a/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte +++ b/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte @@ -1,13 +1,12 @@ -{#each COMPONENT_SETS as { title, components }, index (index)} - - {#if components.length} -
- {#each components as item} - - {/each} -
- {:else} -
There are no components in this group yet
+
+
+ + {#if search} + {/if} - -{/each} +
+
+ +{#if componentsFiltered.reduce((acc, { components }) => acc + components.length, 0) === 0} +
No components found
+{:else} + {#each componentsFiltered as { title, components }, index (index)} + + {#if components.length} +
+ {#each components as item} + + {/each} +
+ {:else} +
+ There are no components in this group yet +
+ {/if} + + {/each} +{/if} diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/ListItem.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/ListItem.svelte index bfb139b329..5930ec7b68 100644 --- a/frontend/src/lib/components/apps/editor/componentsPanel/ListItem.svelte +++ b/frontend/src/lib/components/apps/editor/componentsPanel/ListItem.svelte @@ -4,27 +4,38 @@ import { isOpenStore } from './store' export let title: string - export let prefix: string = '' + export let prefix: string | undefined = undefined $: storeTitle = prefix + title - $: isOpen = $isOpenStore[storeTitle] + $: isOpen = prefix ? $isOpenStore[storeTitle] : true
- + {#if isOpen} +
+ +
+ {/if} + {:else} +

{title}

- - - {#if isOpen} -
+
{/if} diff --git a/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte b/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte index 15b1658e5b..821b213303 100644 --- a/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte +++ b/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte @@ -1,5 +1,6 @@
- {#each panels as [componentId, outputs] (componentId)} +
+ + {#if search} + + {/if} +
+ {#each filteredPanels as [componentId, outputs] (componentId)} {#if outputs.length > 0 && $worldStore?.outputsById[componentId]} {@const name = getComponentNameById(componentId)}
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte index 22347b8867..c985c7385a 100644 --- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte +++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte @@ -7,7 +7,7 @@ import { inferArgs } from '$lib/infer' import { initialCode } from '$lib/script_helpers' import { capitalize, emptySchema, getScriptByPath } from '$lib/utils' - import { faCodeBranch } from '@fortawesome/free-solid-svg-icons' + import { faCodeBranch, faTrash } from '@fortawesome/free-solid-svg-icons' import { Building, Globe2 } from 'lucide-svelte' import { createEventDispatcher, getContext } from 'svelte' import { fly } from 'svelte/transition' @@ -176,12 +176,22 @@
+
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte index eaf3bf7c46..26fb17097f 100644 --- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte +++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte @@ -3,7 +3,7 @@ import type { Preview } from '$lib/gen' import { createEventDispatcher, getContext, onMount } from 'svelte' import type { AppEditorContext, InlineScript } from '../../types' - import { CheckCircle, Maximize2, Trash2, X } from 'lucide-svelte' + import { CornerDownLeft, Maximize2, Plus, Trash2, X } from 'lucide-svelte' import InlineScriptEditorDrawer from './InlineScriptEditorDrawer.svelte' import { inferArgs } from '$lib/infer' import type { Schema } from '$lib/common' @@ -11,11 +11,11 @@ import { fly } from 'svelte/transition' import Editor from '$lib/components/Editor.svelte' import { emptySchema, scriptLangToEditorLang } from '$lib/utils' - import Tooltip from '$lib/components/Tooltip.svelte' import Popover from '../../../Popover.svelte' import { computeFields } from './utils' import { deepEqual } from 'fast-equals' import type { AppInput } from '../../inputType' + import Kbd from '$lib/components/common/kbd/Kbd.svelte' let inlineScriptEditorDrawer: InlineScriptEditorDrawer @@ -73,6 +73,8 @@ } } } + + let isMac = navigator.userAgent.indexOf('Mac OS X') !== -1 @@ -80,30 +82,25 @@
{#if name !== undefined} - + {/if}
{#if validCode} - - - + Valid {:else} - - - + Invalid {/if} {#if id.startsWith('unused-') || id.startsWith('bg_')} Delete @@ -111,41 +108,62 @@ Open full editor {#if $runnableComponents[id] != undefined} {/if}
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte index 6b5e7e241c..7c7ba84903 100644 --- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte +++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte @@ -62,6 +62,12 @@ ) { refreshScript(componentInput.runnable) } + + function deleteInlineScript() { + if (componentInput && componentInput.type == 'runnable') { + componentInput = clearResultAppInput(componentInput) + } + } @@ -80,16 +86,13 @@ bind:name={componentInput.runnable.name} bind:fields={componentInput.fields} syncFields - on:delete={() => { - if (componentInput && componentInput.type == 'runnable') { - componentInput = clearResultAppInput(componentInput) - } - }} + on:delete={deleteInlineScript} /> {:else} { if ( componentInput && diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte index 0360e83cac..1b57c1fe90 100644 --- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte +++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte @@ -12,6 +12,16 @@ getContext('AppEditorContext') let selectedScriptComponentId: string | undefined = undefined + + function deleteBackgroundScript(index: number) { + // remove the script from the array at the index + $app.hiddenInlineScripts.splice(index, 1) + $app.hiddenInlineScripts = [...$app.hiddenInlineScripts] + + delete $staticOutputs[`bg_${index}`] + delete $runnableComponents[`bg_${index}`] + $staticOutputs = $staticOutputs + } @@ -97,20 +107,13 @@ bind:name={hiddenInlineScript.name} bind:fields={hiddenInlineScript.fields} syncFields - on:delete={() => { - // remove the script from the array at the index - $app.hiddenInlineScripts.splice(index, 1) - $app.hiddenInlineScripts = [...$app.hiddenInlineScripts] - - delete $staticOutputs[`bg_${index}`] - delete $runnableComponents[`bg_${index}`] - $staticOutputs = $staticOutputs - }} + on:delete={() => deleteBackgroundScript(index)} /> {:else} deleteBackgroundScript(index)} on:new={(e) => { hiddenInlineScript.inlineScript = e.detail }} diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelList.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelList.svelte index 3f0b247a30..2eb3eaa413 100644 --- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelList.svelte +++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelList.svelte @@ -54,9 +54,9 @@
- RUNNABLES + Runnables
@@ -129,9 +129,12 @@ smallPadding > - +
{#if $app.hiddenInlineScripts?.length > 0} diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte index 367a8c73e6..9f38100b1d 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte @@ -2,7 +2,7 @@ import Button from '$lib/components/common/button/Button.svelte' import { faChevronDown, faChevronUp, faCopy, faTrashAlt } from '@fortawesome/free-solid-svg-icons' import { getContext } from 'svelte' - import type { AppEditorContext, GridItem } from '../../types' + import type { AppEditorContext } from '../../types' import PanelSection from './common/PanelSection.svelte' import InputsSpecsEditor from './InputsSpecsEditor.svelte' import TableActions from './TableActions.svelte' diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/common/PanelSection.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/common/PanelSection.svelte index 60292a42bd..51f379d97b 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/common/PanelSection.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/common/PanelSection.svelte @@ -17,12 +17,12 @@ )} >
-
+
{title} {#if tooltip} - + {tooltip} {/if}