From 6a2f711e77c2d7d28ed19d97065eff3eaf1adf22 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Mon, 10 May 2021 16:15:00 +0100 Subject: [PATCH] Add empty state to apps screen --- .../src/pages/builder/portal/_layout.svelte | 3 +- .../pages/builder/portal/apps/index.svelte | 113 ++++++++++++------ 2 files changed, 81 insertions(+), 35 deletions(-) diff --git a/packages/builder/src/pages/builder/portal/_layout.svelte b/packages/builder/src/pages/builder/portal/_layout.svelte index cd2b6ecccc..83657fb790 100644 --- a/packages/builder/src/pages/builder/portal/_layout.svelte +++ b/packages/builder/src/pages/builder/portal/_layout.svelte @@ -31,7 +31,6 @@ onMount(() => { organisation.init() - apps.load() getInfo() }) @@ -162,5 +161,7 @@ } .content { overflow: auto; + display: grid; + grid-template-rows: 1fr; } diff --git a/packages/builder/src/pages/builder/portal/apps/index.svelte b/packages/builder/src/pages/builder/portal/apps/index.svelte index 04f1196b01..37d03a7efa 100644 --- a/packages/builder/src/pages/builder/portal/apps/index.svelte +++ b/packages/builder/src/pages/builder/portal/apps/index.svelte @@ -8,8 +8,10 @@ ButtonGroup, Select, Modal, + ModalContent, Page, notifications, + Body, } from "@budibase/bbui" import CreateAppModal from "components/start/CreateAppModal.svelte" import api, { del } from "builderStore/api" @@ -27,6 +29,8 @@ let appToDelete let creationModal let deletionModal + let creatingApp = false + let loaded = false const checkKeys = async () => { const response = await api.get(`/api/keys/`) @@ -36,9 +40,20 @@ } } + const initiateAppCreation = () => { + creationModal.show() + creatingApp = true + } + const initiateAppImport = () => { template = { fromFile: true } creationModal.show() + creatingApp = true + } + + const stopAppCreation = () => { + template = null + creatingApp = false } const openApp = app => { @@ -73,41 +88,42 @@ appToDelete = null } - onMount(() => { + onMount(async () => { checkKeys() - apps.load() + await apps.load() + loaded = true }) - -
- Apps - - - - -
-
-
- +
+ + (layout = "grid")} + selected={layout === "grid"} + quiet + icon="ClassicGridView" + /> + (layout = "table")} + selected={layout === "table"} + quiet + icon="ViewRow" + /> +
- - (layout = "grid")} - selected={layout === "grid"} - quiet - icon="ClassicGridView" - /> - (layout = "table")} - selected={layout === "table"} - quiet - icon="ViewRow" - /> - - - {#if $apps.length}
{/each}
- {:else} -
No apps.
- {/if} -
+ + {/if} + {#if !$apps.length && !creatingApp && loaded} +
+ + +
+ +
+ + The purpose of the Budibase builder is to help you build beautiful, + powerful applications quickly and easily. + +
+
+
+ {/if}
(template = null)} + on:hide={stopAppCreation} > @@ -183,4 +219,13 @@ .appTable :global(> div:not(.last)) { border-bottom: var(--border-light); } + + .empty-wrapper { + flex: 1 1 auto; + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + }