From 6044e3b6ef92e89b8f15f38bc2d0986ec64105d5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=81d=C3=A1m=20Kov=C3=A1cs?= <43071496+adam-kov@users.noreply.github.com> Date: Thu, 23 Feb 2023 11:42:32 +0100 Subject: [PATCH] feat(frontend): Add more app component CSS customisation (#1218) * fix(frontend): Update app style editor * fix(frontend): Update component custom css typings * fix(frontend): Generalise custom CSS inputs * feat(frontend): Add display CSS customization --- .../components/AppDisplayComponent.svelte | 17 +- .../apps/components/buttons/AppButton.svelte | 10 +- .../components/dataDisplay/AppText.svelte | 4 +- .../components/apps/editor/AppEditor.svelte | 18 +- .../components/apps/editor/Component.svelte | 12 +- .../componentsPanel/ComponentList.svelte | 63 +++---- .../editor/componentsPanel/CssProperty.svelte | 34 ++++ .../editor/componentsPanel/CssSettings.svelte | 178 +++++++++--------- .../editor/componentsPanel/ListItem.svelte | 31 +++ .../apps/editor/componentsPanel/store.ts | 2 - .../settingsPanel/ComponentPanel.svelte | 15 +- frontend/src/lib/components/apps/types.ts | 22 +-- .../lib/components/common/tabs/Tabs.svelte | 2 +- 13 files changed, 236 insertions(+), 172 deletions(-) create mode 100644 frontend/src/lib/components/apps/editor/componentsPanel/CssProperty.svelte create mode 100644 frontend/src/lib/components/apps/editor/componentsPanel/ListItem.svelte diff --git a/frontend/src/lib/components/apps/components/AppDisplayComponent.svelte b/frontend/src/lib/components/apps/components/AppDisplayComponent.svelte index 0a5f8d5667..28eb444eb0 100644 --- a/frontend/src/lib/components/apps/components/AppDisplayComponent.svelte +++ b/frontend/src/lib/components/apps/components/AppDisplayComponent.svelte @@ -1,25 +1,36 @@ -
+
Results
-
+
diff --git a/frontend/src/lib/components/apps/components/buttons/AppButton.svelte b/frontend/src/lib/components/apps/components/buttons/AppButton.svelte index 09f3d7cd70..4aa0d78160 100644 --- a/frontend/src/lib/components/apps/components/buttons/AppButton.svelte +++ b/frontend/src/lib/components/apps/components/buttons/AppButton.svelte @@ -1,9 +1,9 @@ {#each componentSets as { title, components }, index (index)} - {@const isOpen = $isOpenStore[title]} -
- - {#if isOpen} -
- {#if components.length} -
- {#each components as item} - - {/each} -
- {:else} -
- There are no components in this group yet -
- {/if} + + {#if components.length} +
+ {#each components as item} + + {/each} +
+ {:else} +
+ There are no components in this group yet
{/if} -
+ {/each} diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/CssProperty.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/CssProperty.svelte new file mode 100644 index 0000000000..98abbb9bbc --- /dev/null +++ b/frontend/src/lib/components/apps/editor/componentsPanel/CssProperty.svelte @@ -0,0 +1,34 @@ + + +
+ {name} +
+{#if value} +
+ + +
+{/if} \ No newline at end of file diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/CssSettings.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/CssSettings.svelte index 1434e8f0b6..08132d6c85 100644 --- a/frontend/src/lib/components/apps/editor/componentsPanel/CssSettings.svelte +++ b/frontend/src/lib/components/apps/editor/componentsPanel/CssSettings.svelte @@ -1,17 +1,23 @@ -
- switchTab(e.detail)} - options={{ - right: 'As JSON' - }} - /> -
- -{#if !viewJsonSchema} -
- {#each entries as { type, name, icon, ids }} - {#if ids.length > 0} -
- - {#if $isOpenStoreCss[type]} -
+ switchTab(e.detail === 'json')} + class="relative" +> + +
+ + UI +
+ + +
+ + JSON +
+ +
+ + {#each entries as { type, name, icon, ids }} + {#if ids.length > 0} + +
+ + + {name} + +
+
{#each ids as id} -
-
{id}
- {#if $app?.css?.[type]?.[id]} - Style - + {#if $app?.css?.[type][id]} + (isCustom[type] = true)} - bind:value={$app.css[type][id].style} - /> - Tailwind classes - (isCustom[type] = true)} - bind:value={$app.css[type][id].class} /> {/if}
{/each}
- {/if} -
+ + {/if} + {/each} + + + {#if !emptyString(jsonError)} + + {jsonError} + + {:else} +
{/if} - {/each} +
+ +
+
-{:else} - {#if !emptyString(jsonError)}{jsonError}{:else}
{/if} -
- -
-{/if} + diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/ListItem.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/ListItem.svelte new file mode 100644 index 0000000000..f3cd7aa75a --- /dev/null +++ b/frontend/src/lib/components/apps/editor/componentsPanel/ListItem.svelte @@ -0,0 +1,31 @@ + + +
+ + {#if isOpen} +
+ +
+ {/if} +
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/store.ts b/frontend/src/lib/components/apps/editor/componentsPanel/store.ts index eb4b94cb19..05274010a9 100644 --- a/frontend/src/lib/components/apps/editor/componentsPanel/store.ts +++ b/frontend/src/lib/components/apps/editor/componentsPanel/store.ts @@ -19,5 +19,3 @@ export const isOpenStore = { }, reset: () => store.set({}) } - -export const isOpenStoreCss = writable>({}) \ No newline at end of file diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte index 0cab994d7c..a1587a743c 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte @@ -18,6 +18,7 @@ import RunnableInputEditor from './inputEditor/RunnableInputEditor.svelte' import TemplateEditor from '$lib/components/TemplateEditor.svelte' import type { AppComponent } from '../Component.svelte' + import CssProperty from '../componentsPanel/CssProperty.svelte' export let component: AppComponent | undefined export let onDelete: (() => void) | undefined = undefined @@ -170,14 +171,12 @@ {#if Object.keys(component.customCss ?? {}).length > 0} - {#each Object.entries(component.customCss ?? {}) as [key, value]} -
-
{key}
- Style - - Tailwind classes - -
+ {#each Object.keys(component.customCss ?? {}) as name} + {#if component?.customCss?.[name]} +
+ +
+ {/if} {/each} {/if} diff --git a/frontend/src/lib/components/apps/types.ts b/frontend/src/lib/components/apps/types.ts index d2438c42fd..8bd6586560 100644 --- a/frontend/src/lib/components/apps/types.ts +++ b/frontend/src/lib/components/apps/types.ts @@ -2,7 +2,7 @@ import type { Schema } from '$lib/common' import type { Preview } from '$lib/gen' import type { FilledItem } from '@windmill-labs/svelte-grid' import type { Writable } from 'svelte/store' -import type { AppComponent } from './editor/Component.svelte' +import type { AppComponent, components } from './editor/Component.svelte' import type { AppInput, ConnectedAppInput, @@ -29,6 +29,13 @@ export interface GeneralAppInput { tooltip?: string } +export type ComponentCssProperty = { + class: string + style: string +} + +export type ComponentCustomCSS = Record + export interface BaseAppComponent extends Partial { id: ComponentID componentInput: AppInput | undefined @@ -45,13 +52,7 @@ export interface BaseAppComponent extends Partial { ) > card: boolean | undefined - customCss?: Record< - string, - { - class: string - style: string - } - > + customCss?: ComponentCustomCSS /** * If `true` then the wrapper will allow items to flow outside of it's borders. * @@ -97,10 +98,7 @@ export type App = { inlineScript: InlineScript | undefined fields: Record }> - css?: Record< - 'viewer' | 'grid' | AppComponent['type'], - Record - > + css?: Record<'viewer' | 'grid' | AppComponent['type'], ComponentCustomCSS> } export type ConnectingInput = { diff --git a/frontend/src/lib/components/common/tabs/Tabs.svelte b/frontend/src/lib/components/common/tabs/Tabs.svelte index d5f7c5f1be..1ad7d92130 100644 --- a/frontend/src/lib/components/common/tabs/Tabs.svelte +++ b/frontend/src/lib/components/common/tabs/Tabs.svelte @@ -41,7 +41,7 @@ $$props.class )} > - +