From 1a265149e23cf5301fd84d31c73b302ba4099992 Mon Sep 17 00:00:00 2001 From: Peter Clement Date: Tue, 9 Nov 2021 09:33:34 +0000 Subject: [PATCH 01/12] new auto screen ux --- .../createFromScratchScreen.js | 1 + .../FrontendNavigatePane.svelte | 7 +- .../NavigationSelectionModal.svelte | 85 ++++++++++ .../NavigationPanel/NewScreenModal.svelte | 147 ++++++++++++------ 4 files changed, 190 insertions(+), 50 deletions(-) create mode 100644 packages/builder/src/components/design/NavigationPanel/NavigationSelectionModal.svelte diff --git a/packages/builder/src/builderStore/store/screenTemplates/createFromScratchScreen.js b/packages/builder/src/builderStore/store/screenTemplates/createFromScratchScreen.js index 817dfeceea..d4b78740d0 100644 --- a/packages/builder/src/builderStore/store/screenTemplates/createFromScratchScreen.js +++ b/packages/builder/src/builderStore/store/screenTemplates/createFromScratchScreen.js @@ -2,6 +2,7 @@ import { Screen } from "./utils/Screen" export default { name: `Create from scratch`, + id: `createFromScratch`, create: () => createScreen(), } diff --git a/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte b/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte index de5400d0ba..274df8294c 100644 --- a/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte +++ b/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte @@ -26,6 +26,7 @@ ] let modal + let navSelectionModal $: selected = tabs.find(t => t.key === $params.assetType)?.title || "Screens" const navigate = ({ detail }) => { @@ -85,9 +86,9 @@
- - - + diff --git a/packages/builder/src/components/design/NavigationPanel/NavigationSelectionModal.svelte b/packages/builder/src/components/design/NavigationPanel/NavigationSelectionModal.svelte new file mode 100644 index 0000000000..4efd74b30b --- /dev/null +++ b/packages/builder/src/components/design/NavigationPanel/NavigationSelectionModal.svelte @@ -0,0 +1,85 @@ + + + navSelectionModal.show()} + size="M" + disabled={!selectedNav} +> + Please select your preferred layout for the new application: + +
+
(selectedNav = "sideNav")} + class:unselected={selectedNav && selectedNav !== "sideNav"} + > +
+
+
+
Side Nav
+
+
(selectedNav = "topNav")} + class:unselected={selectedNav && selectedNav !== "topNav"} + > +
+
+
+
Top Nav
+
+
(selectedNav = "noNav")} + class:unselected={selectedNav && selectedNav !== "noNav"} + > +
+
No Nav
+
+
+ + + diff --git a/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte b/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte index 0671dce589..fd3f0c2a57 100644 --- a/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte +++ b/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte @@ -1,21 +1,20 @@ - - - - + From 8592c489f900c979364b360b5b76fe1d38670577 Mon Sep 17 00:00:00 2001 From: Peter Clement Date: Thu, 11 Nov 2021 08:28:42 +0000 Subject: [PATCH 03/12] move modals to top level --- .../FrontendNavigatePane.svelte | 27 +------- .../NavigationSelectionModal.svelte | 52 ++++++++------- .../design/[assetType]/_layout.svelte | 64 ++++++++++++++++++- 3 files changed, 93 insertions(+), 50 deletions(-) diff --git a/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte b/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte index ad62a7d6f4..92a20a4acc 100644 --- a/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte +++ b/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte @@ -10,11 +10,8 @@ import { roles } from "stores/backend" import ComponentNavigationTree from "components/design/NavigationPanel/ComponentNavigationTree/index.svelte" import Layout from "components/design/NavigationPanel/Layout.svelte" - import NewScreenModal from "components/design/NavigationPanel/NewScreenModal.svelte" import NewLayoutModal from "components/design/NavigationPanel/NewLayoutModal.svelte" import { Icon, Modal, Select, Search, Tabs, Tab } from "@budibase/bbui" - import NavigationSelectionModal from "./NavigationSelectionModal.svelte" - import ScreenNameModal from "./ScreenNameModal.svelte" const tabs = [ { @@ -27,11 +24,7 @@ }, ] - let modal - let navigationSelectionModal - let screenNameModal - let selectedScreens = [] - let screenName + export let modal $: selected = tabs.find(t => t.key === $params.assetType)?.title || "Screens" const navigate = ({ detail }) => { @@ -91,24 +84,6 @@
- - - - - - - - - -
diff --git a/packages/builder/src/components/design/NavigationPanel/NavigationSelectionModal.svelte b/packages/builder/src/components/design/NavigationPanel/NavigationSelectionModal.svelte index 22351d0a13..6e2a7b3d25 100644 --- a/packages/builder/src/components/design/NavigationPanel/NavigationSelectionModal.svelte +++ b/packages/builder/src/components/design/NavigationPanel/NavigationSelectionModal.svelte @@ -5,6 +5,7 @@ export let screenNameModal export let selectedScreens export let modal + let roleId = $selectedAccessRole || "BASIC" let routeError @@ -19,28 +20,33 @@ $: blankSelected = selectedScreens.find(x => x.id === "createFromScratch") const save = async draftScreen => { - if (!draftScreen.routing.route) { - routeError = "URL is required" - } else { - if (routeExists(draftScreen.routing.route, roleId)) { - routeError = "This URL is already taken for this access role" + if (draftScreen) { + console.log(draftScreen) + if (!draftScreen.routing.route) { + routeError = "URL is required" } else { - routeError = "" + if (routeExists(draftScreen.routing.route, roleId)) { + routeError = "This URL is already taken for this access role" + } else { + routeError = "" + } } - } - if (routeError) return false + console.log(routeError) + if (routeError) return false - await store.actions.screens.create(draftScreen) - await store.actions.routing.fetch() - - const routeExists = (route, roleId) => { - return $allScreens.some( - screen => - screen.routing.route.toLowerCase() === route.toLowerCase() && - screen.routing.roleId === roleId - ) + draftScreen.props.navigation = selectedNav + await store.actions.screens.create(draftScreen) + await store.actions.routing.fetch() } } + + const routeExists = (route, roleId) => { + return $allScreens.some( + screen => + screen.routing.route.toLowerCase() === route.toLowerCase() && + screen.routing.roleId === roleId + ) + }
(selectedNav = "sideNav")} - class:unselected={selectedNav && selectedNav !== "sideNav"} + on:click={() => (selectedNav = "side")} + class:unselected={selectedNav && selectedNav !== "side"} >
@@ -68,8 +74,8 @@
Side Nav
(selectedNav = "topNav")} - class:unselected={selectedNav && selectedNav !== "topNav"} + on:click={() => (selectedNav = "top")} + class:unselected={selectedNav && selectedNav !== "top"} >
@@ -77,8 +83,8 @@
Top Nav
(selectedNav = "noNav")} - class:unselected={selectedNav && selectedNav !== "noNav"} + on:click={() => (selectedNav = "none")} + class:unselected={selectedNav && selectedNav !== "none"} >
No Nav
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte index d3e5d5d2d0..b787d9adec 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte @@ -5,6 +5,8 @@ selectedComponent, allScreens, } from "builderStore" + import { Detail, Layout, Button, Modal } from "@budibase/bbui" + import CurrentItemPreview from "components/design/AppPreview" import PropertiesPanel from "components/design/PropertiesPanel/PropertiesPanel.svelte" import ComponentSelectionList from "components/design/AppPreview/ComponentSelectionList.svelte" @@ -16,6 +18,9 @@ import AppThemeSelect from "components/design/AppPreview/AppThemeSelect.svelte" import ThemeEditor from "components/design/AppPreview/ThemeEditor.svelte" import DevicePreviewSelect from "components/design/AppPreview/DevicePreviewSelect.svelte" + import NavigationSelectionModal from "components/design/NavigationPanel/NavigationSelectionModal.svelte" + import ScreenNameModal from "components/design/NavigationPanel/ScreenNameModal.svelte" + import NewScreenModal from "components/design/NavigationPanel/NewScreenModal.svelte" // Cache previous values so we don't update the URL more than necessary let previousType @@ -23,6 +28,13 @@ let previousComponentId let hydrationComplete = false + // Manage the layout modal flow from here + let modal + let navigationSelectionModal + let screenNameModal + let screenName + let selectedScreens = [] + // Hydrate state from URL params $: hydrateStateFromURL($params, $leftover) @@ -145,7 +157,7 @@
- +
@@ -166,6 +178,25 @@ {/key}
+ {:else} +
+
+ + + + + Let's add some life to this screen + + +
+
{/if}
@@ -177,6 +208,20 @@
+ + + + + + + + + + From 8645299ab1bd2a9e10fb07088430ea836e533357 Mon Sep 17 00:00:00 2001 From: Peter Clement Date: Thu, 11 Nov 2021 11:07:55 +0000 Subject: [PATCH 04/12] save nav selection --- .../NavigationSelectionModal.svelte | 40 ++++++++++++++----- 1 file changed, 29 insertions(+), 11 deletions(-) diff --git a/packages/builder/src/components/design/NavigationPanel/NavigationSelectionModal.svelte b/packages/builder/src/components/design/NavigationPanel/NavigationSelectionModal.svelte index 6e2a7b3d25..4c67aef8fb 100644 --- a/packages/builder/src/components/design/NavigationPanel/NavigationSelectionModal.svelte +++ b/packages/builder/src/components/design/NavigationPanel/NavigationSelectionModal.svelte @@ -1,6 +1,7 @@ modal.show()} onConfirm={() => navigationSelectionModal.show()} cancelText={"Back"} - disabled={!name.length} + disabled={!screenName} > - + diff --git a/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte index b787d9adec..dbed0e4cfb 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte @@ -32,9 +32,9 @@ let modal let navigationSelectionModal let screenNameModal - let screenName + let screenName = "" let selectedScreens = [] - + $: console.log(screenName) // Hydrate state from URL params $: hydrateStateFromURL($params, $leftover) @@ -220,7 +220,12 @@ - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte index dbed0e4cfb..5f020aed9a 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte @@ -5,7 +5,7 @@ selectedComponent, allScreens, } from "builderStore" - import { Detail, Layout, Button, Modal } from "@budibase/bbui" + import { Detail, Layout, Button, Modal, Icon } from "@budibase/bbui" import CurrentItemPreview from "components/design/AppPreview" import PropertiesPanel from "components/design/PropertiesPanel/PropertiesPanel.svelte" @@ -21,6 +21,7 @@ import NavigationSelectionModal from "components/design/NavigationPanel/NavigationSelectionModal.svelte" import ScreenNameModal from "components/design/NavigationPanel/ScreenNameModal.svelte" import NewScreenModal from "components/design/NavigationPanel/NewScreenModal.svelte" + import Logo from "assets/bb-space-man.svg" // Cache previous values so we don't update the URL more than necessary let previousType @@ -182,17 +183,17 @@
- - - - Let's add some life to this screen - +
+ Let's add some life to this screen +
+
@@ -236,7 +237,28 @@ flex: 1 1 auto; height: 0; } + .new-screen-text { + width: 160px; + text-align: center; + } + .new-screen-button { + margin-left: 5px; + height: 20px; + width: 100px; + display: flex; + align-items: center; + } + + .background-icon { + margin-top: 4px; + margin-right: 4px; + } + + .img-size { + width: 160px; + height: 160px; + } .ui-nav { grid-column: 1; background-color: var(--background); @@ -291,7 +313,7 @@ .centered { top: 0; bottom: 0; - left: 0; + left: 10%; right: 0; width: 100%; height: 100%; From 35f0384b171db1ebdf1c7277a33062b6fc642062 Mon Sep 17 00:00:00 2001 From: Peter Clement Date: Thu, 11 Nov 2021 12:55:04 +0000 Subject: [PATCH 07/12] removing log --- .../design/NavigationPanel/NavigationSelectionModal.svelte | 4 ++-- .../components/design/NavigationPanel/ScreenNameModal.svelte | 3 +-- .../app/[application]/design/[assetType]/_layout.svelte | 2 +- 3 files changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/builder/src/components/design/NavigationPanel/NavigationSelectionModal.svelte b/packages/builder/src/components/design/NavigationPanel/NavigationSelectionModal.svelte index bed7028f6f..695638f83e 100644 --- a/packages/builder/src/components/design/NavigationPanel/NavigationSelectionModal.svelte +++ b/packages/builder/src/components/design/NavigationPanel/NavigationSelectionModal.svelte @@ -39,7 +39,7 @@ let route = screenName ? sanitizeUrl(`/${screenName}`) : draftScreen.routing.route - console.log(sanitizeUrl(`/${screenName}`)) + if (draftScreen) { if (!route) { routeError = "URL is required" @@ -50,7 +50,7 @@ routeError = "" } } - console.log(routeError) + if (routeError) return false draftScreen.routing.route = route diff --git a/packages/builder/src/components/design/NavigationPanel/ScreenNameModal.svelte b/packages/builder/src/components/design/NavigationPanel/ScreenNameModal.svelte index a5fe61dbc4..ff656001df 100644 --- a/packages/builder/src/components/design/NavigationPanel/ScreenNameModal.svelte +++ b/packages/builder/src/components/design/NavigationPanel/ScreenNameModal.svelte @@ -4,12 +4,11 @@ export let modal export let navigationSelectionModal export let screenName - $: console.log(name) modal.show()} onConfirm={() => navigationSelectionModal.show()} diff --git a/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte index 5f020aed9a..c61e5e09c7 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte @@ -35,7 +35,7 @@ let screenNameModal let screenName = "" let selectedScreens = [] - $: console.log(screenName) + // Hydrate state from URL params $: hydrateStateFromURL($params, $leftover) From fba0975c545791f03760399e3b8677cdf9d3a1d3 Mon Sep 17 00:00:00 2001 From: Peter Clement Date: Mon, 15 Nov 2021 11:03:09 +0000 Subject: [PATCH 08/12] Add deletion modal and hover on delete icon --- .../NavigationSelectionModal.svelte | 47 ++++++++++++++----- .../NavigationPanel/NewScreenModal.svelte | 2 +- .../NavigationPanel/ScreenNameModal.svelte | 37 ++++++++++++++- .../design/[assetType]/_layout.svelte | 17 +++++-- 4 files changed, 84 insertions(+), 19 deletions(-) diff --git a/packages/builder/src/components/design/NavigationPanel/NavigationSelectionModal.svelte b/packages/builder/src/components/design/NavigationPanel/NavigationSelectionModal.svelte index 695638f83e..d62363827b 100644 --- a/packages/builder/src/components/design/NavigationPanel/NavigationSelectionModal.svelte +++ b/packages/builder/src/components/design/NavigationPanel/NavigationSelectionModal.svelte @@ -3,18 +3,19 @@ import { store, selectedAccessRole, allScreens } from "builderStore" import { cloneDeep } from "lodash/fp" import sanitizeUrl from "builderStore/store/screenTemplates/utils/sanitizeUrl" + import { onDestroy } from "svelte" export let screenNameModal export let selectedScreens export let modal export let screenName + export let url + let roleId = $selectedAccessRole || "BASIC" let routeError let selectedNav let createdScreens = [] - let createLink = true - $: { selectedScreens.forEach(screen => { createdScreens = [...createdScreens, screen.create()] @@ -24,22 +25,33 @@ $: blankSelected = selectedScreens.find(x => x.id === "createFromScratch") const save = async screens => { - screens.forEach(screen => { - saveScreens(screen) - }) + for (let screen of screens) { + await saveScreens(screen) + } let navLayout = cloneDeep( $store.layouts.find(layout => layout._id === "layout_private_master") ) navLayout.props.navigation = selectedNav + + await store.actions.routing.fetch() await store.actions.layouts.save(navLayout) + selectedScreens = [] + screenName = "" + url = "" } - const saveScreens = async draftScreen => { - let route = screenName - ? sanitizeUrl(`/${screenName}`) - : draftScreen.routing.route + let existingScreenCount = $store.screens.filter( + s => s.props._instanceName == draftScreen.props._instanceName + ).length + if (existingScreenCount > 0) { + let oldUrlArr = draftScreen.routing.route.split("/") + oldUrlArr[1] = `${oldUrlArr[1]}-${existingScreenCount + 1}` + draftScreen.routing.route = oldUrlArr.join("/") + } + + let route = url ? sanitizeUrl(`${url}`) : draftScreen.routing.route if (draftScreen) { if (!route) { routeError = "URL is required" @@ -53,15 +65,19 @@ if (routeError) return false + if (screenName) { + draftScreen.props._instanceName = screenName + } + draftScreen.routing.route = route + await store.actions.screens.create(draftScreen) - if (createLink) { + if (draftScreen.props._instanceName.endsWith("List")) { await store.actions.components.links.save( draftScreen.routing.route, - draftScreen.props._instanceName + draftScreen.routing.route.split("/")[1] ) } - await store.actions.routing.fetch() } } @@ -72,6 +88,12 @@ screen.routing.roleId === roleId ) } + + onDestroy(() => { + selectedScreens = [] + screenName = "" + url = "" + })
(selectedNav = "Left")} class:unselected={selectedNav && selectedNav !== "Left"} > diff --git a/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte b/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte index a9c72aa1ce..979c0a1a6e 100644 --- a/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte +++ b/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte @@ -50,7 +50,7 @@ toggleScreenSelection(templates.find(t => t.id === blankScreen))} class:disabled={autoSelected} > -
+
Blank
diff --git a/packages/builder/src/components/design/NavigationPanel/ScreenNameModal.svelte b/packages/builder/src/components/design/NavigationPanel/ScreenNameModal.svelte index ff656001df..646f3ad303 100644 --- a/packages/builder/src/components/design/NavigationPanel/ScreenNameModal.svelte +++ b/packages/builder/src/components/design/NavigationPanel/ScreenNameModal.svelte @@ -1,19 +1,52 @@ modal.show()} onConfirm={() => navigationSelectionModal.show()} cancelText={"Back"} - disabled={!screenName} + disabled={!screenName || !url || routeError} > + diff --git a/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte index c61e5e09c7..7fbb3ed7f6 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte @@ -34,6 +34,7 @@ let navigationSelectionModal let screenNameModal let screenName = "" + let url = "" let selectedScreens = [] // Hydrate state from URL params @@ -185,7 +186,7 @@ logo
- Let's add some life to this screen + Let's add some life to this screen