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,