Show empty screen placeholder with a CTA to add a component

4 years ago · 081d29e0c4
4 changed files with 41 additions and 1 deletions
--- 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}`)
      }
--- 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 @@
          <svelte:self instance={child} />
        {/each}
      {:else if emptyState}
-        <Placeholder />
+        {#if isScreen}
+          <ScreenPlaceholder />
+        {:else}
+          <Placeholder />
+        {/if}
      {:else if isBlock}
        <slot />
      {/if}
--- a/packages/client/src/components/app/ScreenPlaceholder.svelte
+++ b/packages/client/src/components/app/ScreenPlaceholder.svelte
@ -0,0 +1,30 @@
+<script>
+  import { getContext } from "svelte"
+  import { Heading, Body, Button } from "@budibase/bbui"
+
+  const { builderStore } = getContext("sdk")
+</script>
+
+{#if $builderStore.inBuilder}
+  <div class="placeholder">
+    <Heading size="L">Your screen is empty</Heading>
+    <Body>Bring your app to life by adding some components!</Body>
+    <Button cta icon="Add" on:click={builderStore.actions.requestAddComponent}
+      >Add component</Button
+    >
+  </div>
+{/if}
+
+<style>
+  .placeholder {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: var(--spacing-s);
+    flex: 1 1 auto;
+  }
+  .placeholder :global(.spectrum-Button) {
+    margin-top: var(--spacing-m);
+  }
+</style>
--- 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,