From 6e83c96236e24ccd891ae29f3020701902f7bc6d Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Tue, 7 Jun 2022 13:41:17 +0100 Subject: [PATCH] Show empty screen placeholder with a CTA to add a component --- .../[screenId]/_components/AppPreview.svelte | 2 ++ .../client/src/components/Component.svelte | 7 ++++- .../components/app/ScreenPlaceholder.svelte | 30 +++++++++++++++++++ packages/client/src/stores/builder.js | 3 ++ 4 files changed, 41 insertions(+), 1 deletion(-) create mode 100644 packages/client/src/components/app/ScreenPlaceholder.svelte diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte index 4178932866..b54ab540da 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte @@ -174,6 +174,8 @@ if (!$isActive("./navigation")) { $goto("./navigation") } + } else if (type === "request-add-component") { + $goto("./components/new") } else { console.warn(`Client sent unknown event type: ${type}`) } diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte index e8fcc80db4..a54c5198cd 100644 --- a/packages/client/src/components/Component.svelte +++ b/packages/client/src/components/Component.svelte @@ -22,6 +22,7 @@ import { Helpers } from "@budibase/bbui" import { getActiveConditions, reduceConditionActions } from "utils/conditions" import Placeholder from "components/app/Placeholder.svelte" + import ScreenPlaceholder from "components/app/ScreenPlaceholder.svelte" export let instance = {} export let isLayout = false @@ -428,7 +429,11 @@ {/each} {:else if emptyState} - + {#if isScreen} + + {:else} + + {/if} {:else if isBlock} {/if} diff --git a/packages/client/src/components/app/ScreenPlaceholder.svelte b/packages/client/src/components/app/ScreenPlaceholder.svelte new file mode 100644 index 0000000000..7635f55054 --- /dev/null +++ b/packages/client/src/components/app/ScreenPlaceholder.svelte @@ -0,0 +1,30 @@ + + +{#if $builderStore.inBuilder} +
+ Your screen is empty + Bring your app to life by adding some components! + +
+{/if} + + diff --git a/packages/client/src/stores/builder.js b/packages/client/src/stores/builder.js index bc3e933079..0c3969c03c 100644 --- a/packages/client/src/stores/builder.js +++ b/packages/client/src/stores/builder.js @@ -78,6 +78,9 @@ const createBuilderStore = () => { clickNav: () => { dispatchEvent("click-nav") }, + requestAddComponent: () => { + dispatchEvent("request-add-component") + }, } return { ...store,