From 1274bc32c3aa551a635a1b3e2ac199a71a314a81 Mon Sep 17 00:00:00 2001 From: Gerard Burns Date: Mon, 3 Jul 2023 13:36:02 +0100 Subject: [PATCH] New Design Empty State --- .../src/components/common/CreationPage.svelte | 39 ++++ .../actions/TriggerAutomation.svelte | 6 - .../components/start/CreateAppModal.svelte | 17 -- .../builder/app/[application]/data/new.svelte | 39 +--- .../_components/CreateScreenModal.svelte | 199 +++++++++++++++++ .../design/_components/DatasourceModal.svelte | 201 ++++++++++++++++++ .../_components/ScreenDetailsModal.svelte | 80 +++++++ .../design/_components/ScreenRoleModal.svelte | 62 ++++++ .../app/[application]/design/blank.png | Bin 0 -> 32283 bytes .../app/[application]/design/index.svelte | 120 +++++++---- .../app/[application]/design/table.png | Bin 0 -> 27091 bytes .../portal/apps/onboarding/index.svelte | 7 - 12 files changed, 670 insertions(+), 100 deletions(-) create mode 100644 packages/builder/src/components/common/CreationPage.svelte create mode 100644 packages/builder/src/pages/builder/app/[application]/design/_components/CreateScreenModal.svelte create mode 100644 packages/builder/src/pages/builder/app/[application]/design/_components/DatasourceModal.svelte create mode 100644 packages/builder/src/pages/builder/app/[application]/design/_components/ScreenDetailsModal.svelte create mode 100644 packages/builder/src/pages/builder/app/[application]/design/_components/ScreenRoleModal.svelte create mode 100644 packages/builder/src/pages/builder/app/[application]/design/blank.png create mode 100644 packages/builder/src/pages/builder/app/[application]/design/table.png diff --git a/packages/builder/src/components/common/CreationPage.svelte b/packages/builder/src/components/common/CreationPage.svelte new file mode 100644 index 0000000000..9631e9d961 --- /dev/null +++ b/packages/builder/src/components/common/CreationPage.svelte @@ -0,0 +1,39 @@ + + +
+
+ {#if showClose} + + {/if} +
+
+ {heading} +
+ +
+ + diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/TriggerAutomation.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/TriggerAutomation.svelte index 72d38cded0..80c29a231a 100644 --- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/TriggerAutomation.svelte +++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/TriggerAutomation.svelte @@ -145,12 +145,6 @@ padding-bottom: 20px; } - .params { - display: flex; - flex-wrap: nowrap; - gap: 25px; - } - .synchronous-info { display: flex; gap: var(--spacing-s); diff --git a/packages/builder/src/components/start/CreateAppModal.svelte b/packages/builder/src/components/start/CreateAppModal.svelte index cf42668add..9106522628 100644 --- a/packages/builder/src/components/start/CreateAppModal.svelte +++ b/packages/builder/src/components/start/CreateAppModal.svelte @@ -9,8 +9,6 @@ import { createValidationStore } from "helpers/validation/yup" import * as appValidation from "helpers/validation/yup/app" import TemplateCard from "components/common/TemplateCard.svelte" - import createFromScratchScreen from "builderStore/store/screenTemplates/createFromScratchScreen" - import { Roles } from "constants/backend" import { lowercase } from "helpers" export let template @@ -136,21 +134,6 @@ // Create user await auth.setInitInfo({}) - // Create a default home screen if no template was selected - if (template == null) { - let defaultScreenTemplate = createFromScratchScreen.create() - defaultScreenTemplate.routing.route = "/home" - defaultScreenTemplate.routing.roldId = Roles.BASIC - try { - await store.actions.screens.save(defaultScreenTemplate) - } catch (err) { - console.error("Could not create a default application screen", err) - notifications.warning( - "Encountered an issue creating the default screen." - ) - } - } - $goto(`/builder/app/${createdApp.instance._id}`) } catch (error) { creating = false diff --git a/packages/builder/src/pages/builder/app/[application]/data/new.svelte b/packages/builder/src/pages/builder/app/[application]/data/new.svelte index 4eb9ce16e1..c5090229b3 100644 --- a/packages/builder/src/pages/builder/app/[application]/data/new.svelte +++ b/packages/builder/src/pages/builder/app/[application]/data/new.svelte @@ -7,12 +7,13 @@ } from "stores/backend" import { hasData } from "stores/selectors" - import { Icon, notifications, Heading, Body } from "@budibase/bbui" + import { notifications, Body } from "@budibase/bbui" import { params, goto } from "@roxi/routify" import CreateExternalDatasourceModal from "./_components/CreateExternalDatasourceModal/index.svelte" import CreateInternalTableModal from "./_components/CreateInternalTableModal.svelte" import DatasourceOption from "./_components/DatasourceOption.svelte" import IntegrationIcon from "components/backend/DatasourceNavigator/IntegrationIcon.svelte" + import CreationPage from "components/common/CreationPage.svelte" import ICONS from "components/backend/DatasourceNavigator/icons/index.js" import FontAwesomeIcon from "components/common/FontAwesomeIcon.svelte" @@ -46,16 +47,11 @@ bind:this={externalDatasourceModal} /> -
-
- {#if hasData($datasources, $tables)} - - {/if} -
-
- Add new data source -
- + $goto("./table")} + heading="Add new data source" +>
Get started with our Budibase DB
{/each}
-
+
diff --git a/packages/builder/src/pages/builder/app/[application]/design/_components/ScreenDetailsModal.svelte b/packages/builder/src/pages/builder/app/[application]/design/_components/ScreenDetailsModal.svelte new file mode 100644 index 0000000000..7d0c58ce56 --- /dev/null +++ b/packages/builder/src/pages/builder/app/[application]/design/_components/ScreenDetailsModal.svelte @@ -0,0 +1,80 @@ + + + + +
+ {appUrl} +
+
+ + diff --git a/packages/builder/src/pages/builder/app/[application]/design/_components/ScreenRoleModal.svelte b/packages/builder/src/pages/builder/app/[application]/design/_components/ScreenRoleModal.svelte new file mode 100644 index 0000000000..cde8047b97 --- /dev/null +++ b/packages/builder/src/pages/builder/app/[application]/design/_components/ScreenRoleModal.svelte @@ -0,0 +1,62 @@ + + + + Select which level of access you want your screens to have +