From 8592c489f900c979364b360b5b76fe1d38670577 Mon Sep 17 00:00:00 2001 From: Peter Clement Date: Thu, 11 Nov 2021 08:28:42 +0000 Subject: [PATCH] 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 @@
+ + + + + + + + + +