From fdc35b40f214aafef33ced17eeba788af120c724 Mon Sep 17 00:00:00 2001 From: Faton Ramadani Date: Fri, 1 Dec 2023 17:10:50 +0100 Subject: [PATCH] App menu improvements (#2753) * fix(frontend): add dropdown menu result + fix splitpanes seperators * fix(frontend): remove useless border * fix(frontend): fix arg enum * fix(frontend): remove useless div * fix(frontend): remove duplicated code * fix(frontend): remove duplicated code * fix(frontend): fix reactivity * fix(frontend): fix reactivity --- frontend/src/lib/components/ArgEnum.svelte | 28 +++++------ frontend/src/lib/components/ArgInput.svelte | 7 +-- .../apps/components/display/AppMenu.svelte | 48 +++++++++++-------- .../components/apps/editor/AppEditor.svelte | 6 +-- .../components/MenuItemsOutput.svelte | 4 +- ...TableActionOutput.svelte => Output.svelte} | 3 +- .../components/TableActionsOutput.svelte | 4 +- .../InlineScriptEditor.svelte | 1 - frontend/tailwind.config.cjs | 4 +- 9 files changed, 51 insertions(+), 54 deletions(-) rename frontend/src/lib/components/apps/editor/contextPanel/components/{TableActionOutput.svelte => Output.svelte} (87%) diff --git a/frontend/src/lib/components/ArgEnum.svelte b/frontend/src/lib/components/ArgEnum.svelte index fd2fc38b69..19e4e753cc 100644 --- a/frontend/src/lib/components/ArgEnum.svelte +++ b/frontend/src/lib/components/ArgEnum.svelte @@ -1,23 +1,28 @@ { dispatch('focus') }} + create + {onCreate} {disabled} {autofocus} + createText="Press enter to use this non-predefined value" /> - -{#if !disabled && !disableCustomValue} - -{/if} diff --git a/frontend/src/lib/components/ArgInput.svelte b/frontend/src/lib/components/ArgInput.svelte index 4a4a533837..1867274ae4 100644 --- a/frontend/src/lib/components/ArgInput.svelte +++ b/frontend/src/lib/components/ArgInput.svelte @@ -188,11 +188,8 @@ } let redraw = 0 - let itemsLimit = 50 - let customValue = false - $: validateInput(pattern, value, required) @@ -391,11 +388,9 @@ }} {defaultValue} {valid} - {customValue} {disabled} {autofocus} bind:value={v} - disableCustomValue={true} enum_={itemsType?.enum ?? []} /> {:else} @@ -495,7 +490,7 @@ {/if} {:else if inputCat == 'enum'}
- +
{:else if inputCat == 'date'} diff --git a/frontend/src/lib/components/apps/components/display/AppMenu.svelte b/frontend/src/lib/components/apps/components/display/AppMenu.svelte index 38fb9334cf..eb4d83cfee 100644 --- a/frontend/src/lib/components/apps/components/display/AppMenu.svelte +++ b/frontend/src/lib/components/apps/components/display/AppMenu.svelte @@ -27,21 +27,19 @@ export let verticalAlignment: 'top' | 'center' | 'bottom' | undefined = undefined export let menuItems: (BaseAppComponent & ButtonComponent)[] + const { app, worldStore } = getContext('AppViewerContext') + + let outputs = initOutput($worldStore, id, { + result: { + latestButtonClicked: undefined as string | undefined + } + }) + const resolvedConfig = initConfig( components['menucomponent'].initialData.configuration, configuration ) - const { app, worldStore } = getContext('AppViewerContext') - - initOutput($worldStore, id, { - result: undefined, - loading: false - }) - - //used so that we can count number of outputs setup for first refresh - initOutput($worldStore, id, {}) - let beforeIconComponent: any let afterIconComponent: any let css = initCss($app.css?.menucomponent, customCss) @@ -123,17 +121,25 @@ {#if menuItems.length > 0} {#each menuItems as actionButton, actionIndex (actionButton?.id)} {#if actionButton.type == 'buttoncomponent'} - +
{ + outputs?.result.set({ + latestButtonClicked: actionButton.id + }) + }} + > + +
{/if} {/each} {/if} diff --git a/frontend/src/lib/components/apps/editor/AppEditor.svelte b/frontend/src/lib/components/apps/editor/AppEditor.svelte index a88ca77cc1..feaf9155fa 100644 --- a/frontend/src/lib/components/apps/editor/AppEditor.svelte +++ b/frontend/src/lib/components/apps/editor/AppEditor.svelte @@ -551,7 +551,7 @@ class={twMerge( 'bg-surface-secondary h-full w-full relative', $appStore.css?.['app']?.['viewer']?.class, - 'wm-app-viewer z-[100] h-full overflow-visible' + 'wm-app-viewer h-full overflow-visible' )} style={$appStore.css?.['app']?.['viewer']?.style} > @@ -594,7 +594,7 @@ on:scroll={parseScroll} class={classNames( 'mx-auto w-full h-full z-50', - $appStore.fullscreen ? '' : 'max-w-7xl border-x', + $appStore.fullscreen ? '' : 'max-w-7xl', $componentActive ? 'absolute' : 'overflow-auto' )} style={$componentActive ? `top: -${$yTop}px;` : ''} @@ -614,7 +614,7 @@ {#if $connectingInput?.opened == false && !$componentActive} -
+
diff --git a/frontend/src/lib/components/apps/editor/contextPanel/components/MenuItemsOutput.svelte b/frontend/src/lib/components/apps/editor/contextPanel/components/MenuItemsOutput.svelte index 58a0fd0461..62f38548dc 100644 --- a/frontend/src/lib/components/apps/editor/contextPanel/components/MenuItemsOutput.svelte +++ b/frontend/src/lib/components/apps/editor/contextPanel/components/MenuItemsOutput.svelte @@ -1,6 +1,6 @@ @@ -9,7 +9,7 @@ {#if gridItem.data.type === 'menucomponent' && gridItem.data.menuItems.length > 0}
{#each gridItem.data.menuItems as action, index} - + {/each}
{/if} diff --git a/frontend/src/lib/components/apps/editor/contextPanel/components/TableActionOutput.svelte b/frontend/src/lib/components/apps/editor/contextPanel/components/Output.svelte similarity index 87% rename from frontend/src/lib/components/apps/editor/contextPanel/components/TableActionOutput.svelte rename to frontend/src/lib/components/apps/editor/contextPanel/components/Output.svelte index 7189614898..551f8958a8 100644 --- a/frontend/src/lib/components/apps/editor/contextPanel/components/TableActionOutput.svelte +++ b/frontend/src/lib/components/apps/editor/contextPanel/components/Output.svelte @@ -9,9 +9,10 @@ export let id: string export let first: boolean = false + export let label: string - + { diff --git a/frontend/src/lib/components/apps/editor/contextPanel/components/TableActionsOutput.svelte b/frontend/src/lib/components/apps/editor/contextPanel/components/TableActionsOutput.svelte index e9186ad369..22c070821b 100644 --- a/frontend/src/lib/components/apps/editor/contextPanel/components/TableActionsOutput.svelte +++ b/frontend/src/lib/components/apps/editor/contextPanel/components/TableActionsOutput.svelte @@ -1,6 +1,6 @@ @@ -9,7 +9,7 @@ {#if gridItem.data.type === 'tablecomponent' && gridItem.data.actionButtons.length > 0}
{#each gridItem.data.actionButtons as action, index} - + {/each}
{/if} diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte index 258ab46e90..ba624164e6 100644 --- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte +++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte @@ -162,7 +162,6 @@ bind:inlineScript /> {/if} -
{#if name !== undefined} diff --git a/frontend/tailwind.config.cjs b/frontend/tailwind.config.cjs index b62066212e..dcc50c072d 100644 --- a/frontend/tailwind.config.cjs +++ b/frontend/tailwind.config.cjs @@ -792,7 +792,6 @@ const config = { backgroundColor: lightTheme.border + ' !important', margin: '0 !important', border: 'none !important', - zIndex: '1001 !important', '&::after': { backgroundColor: lightTheme.border + ' !important', margin: '0 !important', @@ -803,7 +802,8 @@ const config = { '--splitter-hover-adjustment': '-2px' }, '&:hover::after': { - opacity: '1' + opacity: '1', + zIndex: '1001 !important' } }, '.dark .splitpanes__splitter': {