From 64129fa6b91c086640d489a80177d47ee2b2c639 Mon Sep 17 00:00:00 2001 From: Gerard Burns Date: Tue, 4 Jul 2023 11:25:47 +0100 Subject: [PATCH 1/3] Replace screen creation modal with page --- .../design}/ScreenDetailsModal.svelte | 0 .../_components/DatasourceModal.svelte | 201 ----------------- .../screens/_components/NewScreenModal.svelte | 165 -------------- .../_components/ScreenDropdownMenu.svelte | 2 +- .../_components/ScreenListPanel.svelte | 7 +- .../_components/ScreenRoleModal.svelte | 62 ------ .../screens/_components/ScreenWizard.svelte | 204 ------------------ .../_components/blankScreenPreview.png | Bin 71063 -> 0 bytes .../screens/_components/listScreenPreview.png | Bin 108488 -> 0 bytes .../_components/CreateScreenModal.svelte | 2 +- .../_components/ScreenDetailsModal.svelte | 80 ------- .../app/[application]/design/index.svelte | 107 +-------- .../app/[application]/design/new.svelte | 102 +++++++++ 13 files changed, 112 insertions(+), 820 deletions(-) rename packages/builder/src/{pages/builder/app/[application]/design/[screenId]/screens/_components => components/design}/ScreenDetailsModal.svelte (100%) delete mode 100644 packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/DatasourceModal.svelte delete mode 100644 packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/NewScreenModal.svelte delete mode 100644 packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenRoleModal.svelte delete mode 100644 packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenWizard.svelte delete mode 100644 packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/blankScreenPreview.png delete mode 100644 packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/listScreenPreview.png delete mode 100644 packages/builder/src/pages/builder/app/[application]/design/_components/ScreenDetailsModal.svelte create mode 100644 packages/builder/src/pages/builder/app/[application]/design/new.svelte diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenDetailsModal.svelte b/packages/builder/src/components/design/ScreenDetailsModal.svelte similarity index 100% rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenDetailsModal.svelte rename to packages/builder/src/components/design/ScreenDetailsModal.svelte diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/DatasourceModal.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/DatasourceModal.svelte deleted file mode 100644 index 26e44ca1d0..0000000000 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/DatasourceModal.svelte +++ /dev/null @@ -1,201 +0,0 @@ - - - - - - Select which datasources you would like to use to create your screens - - - {#each filteredSources as datasource} -
-
- -
{datasource.name}
-
- {#if Array.isArray(datasource.entities)} - {#each datasource.entities.filter(table => table._id !== "ta_users") as table} -
x.table === table._id - )} - on:click={() => toggleScreenSelection(table, datasource)} - > - - - - {table.name} - {#if selectedScreens.find(x => x.table === table._id)} - - - - {/if} -
- {/each} - {/if} - {#if datasource["entities"] && !Array.isArray(datasource.entities)} - {#each Object.keys(datasource.entities).filter(table => table._id !== "ta_users") as table_key} -
x.table === datasource.entities[table_key]._id - )} - on:click={() => - toggleScreenSelection( - datasource.entities[table_key], - datasource - )} - > - - - - {datasource.entities[table_key].name} - {#if selectedScreens.find(x => x.table === datasource.entities[table_key]._id)} - - - - {/if} -
- {/each} - {/if} -
- {/each} - - - - - diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/NewScreenModal.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/NewScreenModal.svelte deleted file mode 100644 index e3a974b344..0000000000 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/NewScreenModal.svelte +++ /dev/null @@ -1,165 +0,0 @@ - - -
- - -
{ - selectedScreenMode = blankScreenModeKey - }} - > -
- blank screen preview -
- Blank screen - Add an empty blank screen -
-
-
-
- -
-
-
- -
- Quickly create a screen from your data -
- -
{ - selectedScreenMode = listScreenModeKey - }} - class:disabled={!$tables.list.filter(table => table._id !== "ta_users") - .length} - > -
- list screen preview -
- List view - - Create, edit and view your data in a list view screen with side - panel - -
-
-
-
- -
-
-
- - -
- - diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenDropdownMenu.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenDropdownMenu.svelte index ec965ed659..fd5ddd9459 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenDropdownMenu.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenDropdownMenu.svelte @@ -9,7 +9,7 @@ Helpers, notifications, } from "@budibase/bbui" - import ScreenDetailsModal from "./ScreenDetailsModal.svelte" + import ScreenDetailsModal from "components/design/ScreenDetailsModal.svelte" import sanitizeUrl from "builderStore/store/screenTemplates/utils/sanitizeUrl" import { makeComponentUnique } from "builderStore/componentUtils" diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenListPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenListPanel.svelte index 06f9f86eb6..faad1143cc 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenListPanel.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenListPanel.svelte @@ -1,17 +1,16 @@ - - - Select which level of access you want your screens to have - -
- {appUrl} -
- - - diff --git a/packages/builder/src/pages/builder/app/[application]/design/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/index.svelte index 42d85b5280..e9c72a6e1f 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/index.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/index.svelte @@ -1,107 +1,12 @@ - -{#if loaded} - -
- Start from scratch or create screens from your data -
- -
-
createScreenModal.show("blank")}> -
- -
-
- Blank screen - Add an empty blank screen -
-
- -
createScreenModal.show("table")}> -
- -
-
- Table - View, edit and delete rows on a table -
-
-
- -{/if} - - - - diff --git a/packages/builder/src/pages/builder/app/[application]/design/new.svelte b/packages/builder/src/pages/builder/app/[application]/design/new.svelte new file mode 100644 index 0000000000..8b341ee2c4 --- /dev/null +++ b/packages/builder/src/pages/builder/app/[application]/design/new.svelte @@ -0,0 +1,102 @@ + + +
+ 0} + onClose={() => $goto(`./${$frontendStore.screens[0]._id}`)} + heading="Create your first screen" + > +
+ Start from scratch or create screens from your data +
+ +
+
createScreenModal.show("blank")}> +
+ +
+
+ Blank screen + Add an empty blank screen +
+
+ +
createScreenModal.show("table")}> +
+ +
+
+ Table + View, edit and delete rows on a table +
+
+
+ +
+ + + + From 82a851dd36cb1a7d050004697a1f4464395f40d1 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Tue, 11 Jul 2023 13:38:17 +0100 Subject: [PATCH 2/3] Update text depending on whether the app already has screens --- .../pages/builder/app/[application]/design/new.svelte | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/builder/src/pages/builder/app/[application]/design/new.svelte b/packages/builder/src/pages/builder/app/[application]/design/new.svelte index 8b341ee2c4..13eaaeaf7e 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/new.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/new.svelte @@ -4,17 +4,19 @@ import blankImage from "./blank.png" import tableImage from "./table.png" import CreateScreenModal from "./_components/CreateScreenModal.svelte" - import { store as frontendStore } from "builderStore" + import { store } from "builderStore" import { goto } from "@roxi/routify" let createScreenModal + + $: hasScreens = $store.screens?.length
0} - onClose={() => $goto(`./${$frontendStore.screens[0]._id}`)} - heading="Create your first screen" + showClose={$store.screens.length > 0} + onClose={() => $goto(`./${$store.screens[0]._id}`)} + heading={hasScreens ? "Create new screen" : "Create your first screen"} >
Start from scratch or create screens from your data From 097406079296fc09eaac1f14b8f20000b600c59e Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Tue, 11 Jul 2023 13:41:26 +0100 Subject: [PATCH 3/3] Update screen role modal to use better text and title --- .../[application]/design/_components/ScreenRoleModal.svelte | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 index cde8047b97..5d73b7961c 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/_components/ScreenRoleModal.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/_components/ScreenRoleModal.svelte @@ -40,14 +40,14 @@ - Select which level of access you want your screens to have + Select the level of access required to see these screens