MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Show empty screen placeholder with a CTA to add a component

This commit is contained in:
Andrew Kingston 2022-06-07 13:41:17 +01:00
parent 17da8f192f
commit 081d29e0c4
4 changed files with 41 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
View File

@ -174,6 +174,8 @@
if (!$isActive("./navigation")) { if (!$isActive("./navigation")) {
$goto("./navigation") $goto("./navigation")
} }
} else if (type === "request-add-component") {
$goto("./components/new")
} else { } else {
console.warn(`Client sent unknown event type: ${type}`) console.warn(`Client sent unknown event type: ${type}`)
} }

7
packages/client/src/components/Component.svelte
View File

@ -22,6 +22,7 @@
import { Helpers } from "@budibase/bbui" import { Helpers } from "@budibase/bbui"
import { getActiveConditions, reduceConditionActions } from "utils/conditions" import { getActiveConditions, reduceConditionActions } from "utils/conditions"
import Placeholder from "components/app/Placeholder.svelte" import Placeholder from "components/app/Placeholder.svelte"
import ScreenPlaceholder from "components/app/ScreenPlaceholder.svelte"
export let instance = {} export let instance = {}
export let isLayout = false export let isLayout = false
@ -428,7 +429,11 @@
<svelte:self instance={child} /> <svelte:self instance={child} />
{/each} {/each}
{:else if emptyState} {:else if emptyState}
<Placeholder /> {#if isScreen}
<ScreenPlaceholder />
{:else}
<Placeholder />
{/if}
{:else if isBlock} {:else if isBlock}
<slot /> <slot />
{/if} {/if}

30
packages/client/src/components/app/ScreenPlaceholder.svelte Normal file
View File

@ -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>

3
packages/client/src/stores/builder.js
View File

@ -78,6 +78,9 @@ const createBuilderStore = () => {
clickNav: () => { clickNav: () => {
dispatchEvent("click-nav") dispatchEvent("click-nav")
}, },
requestAddComponent: () => {
dispatchEvent("request-add-component")
},
} }
return { return {
...store, ...store,