move modals to top level

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
+  export let modal
-  let navigationSelectionModal
-  let screenNameModal
-  let selectedScreens = []
-  let screenName
   $: selected = tabs.find(t => t.key === $params.assetType)?.title || "Screens"
 
   const navigate = ({ detail }) => {
@@ -91,24 +84,6 @@
         <div class="nav-items-container">
           <ComponentNavigationTree />
         </div>
-        <Modal bind:this={modal}>
-          <NewScreenModal
-            {screenNameModal}
-            {navigationSelectionModal}
-            bind:selectedScreens
-          />
-        </Modal>
-
-        <Modal bind:this={screenNameModal}>
-          <ScreenNameModal bind:screenName {modal} {navigationSelectionModal} />
-        </Modal>
-        <Modal bind:this={navigationSelectionModal}>
-          <NavigationSelectionModal
-            {modal}
-            {selectedScreens}
-            {screenNameModal}
-          />
-        </Modal>
       </div>
     </Tab>
     <Tab title="Layouts">

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) {
+    if (draftScreen) {
-      routeError = "URL is required"
+      console.log(draftScreen)
-    } else {
+      if (!draftScreen.routing.route) {
-      if (routeExists(draftScreen.routing.route, roleId)) {
+        routeError = "URL is required"
-        routeError = "This URL is already taken for this access role"
       } else {
-        routeError = ""
+        if (routeExists(draftScreen.routing.route, roleId)) {
+          routeError = "This URL is already taken for this access role"
+        } else {
+          routeError = ""
+        }
       }
-    }
+      console.log(routeError)
-    if (routeError) return false
+      if (routeError) return false
-
-    await store.actions.screens.create(draftScreen)
-    await store.actions.routing.fetch()
 
-    const routeExists = (route, roleId) => {
+      draftScreen.props.navigation = selectedNav
-      return $allScreens.some(
+      await store.actions.screens.create(draftScreen)
-        screen =>
+      await store.actions.routing.fetch()
-          screen.routing.route.toLowerCase() === route.toLowerCase() &&
-          screen.routing.roleId === roleId
-      )
     }
   }
+
+  const routeExists = (route, roleId) => {
+    return $allScreens.some(
+      screen =>
+        screen.routing.route.toLowerCase() === route.toLowerCase() &&
+        screen.routing.roleId === roleId
+    )
+  }
 </script>
 
 <ModalContent
@@ -59,8 +65,8 @@
 
   <div class="wrapper">
     <div
-      on:click={() => (selectedNav = "sideNav")}
+      on:click={() => (selectedNav = "side")}
-      class:unselected={selectedNav && selectedNav !== "sideNav"}
+      class:unselected={selectedNav && selectedNav !== "side"}
     >
       <div class="box">
         <div class="side-nav" />
@@ -68,8 +74,8 @@
       <div><Detail>Side Nav</Detail></div>
     </div>
     <div
-      on:click={() => (selectedNav = "topNav")}
+      on:click={() => (selectedNav = "top")}
-      class:unselected={selectedNav && selectedNav !== "topNav"}
+      class:unselected={selectedNav && selectedNav !== "top"}
     >
       <div class="box">
         <div class="top-nav" />
@@ -77,8 +83,8 @@
       <div><Detail>Top Nav</Detail></div>
     </div>
     <div
-      on:click={() => (selectedNav = "noNav")}
+      on:click={() => (selectedNav = "none")}
-      class:unselected={selectedNav && selectedNav !== "noNav"}
+      class:unselected={selectedNav && selectedNav !== "none"}
     >
       <div class="box" />
       <div><Detail>No Nav</Detail></div>

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 @@
 <!-- routify:options index=1 -->
 <div class="root">
   <div class="ui-nav">
-    <FrontendNavigatePane />
+    <FrontendNavigatePane {modal} />
   </div>
 
   <div class="preview-pane">
@@ -166,6 +178,25 @@
           <CurrentItemPreview />
         {/key}
       </div>
+    {:else}
+      <div class="centered">
+        <div class="main">
+          <Layout gap="S" justifyItems="center">
+            <svg
+              width="60px"
+              height="60px"
+              class="spectrum-Icon"
+              focusable="false"
+            >
+              <use xlink:href="#spectrum-icon-18-WorkflowAdd" />
+            </svg>
+            <Detail size="M">Let's add some life to this screen</Detail>
+            <Button on:click={() => modal.show()} size="M" cta
+              >Add Screen</Button
+            >
+          </Layout>
+        </div>
+      </div>
     {/if}
   </div>
 
@@ -177,6 +208,20 @@
 </div>
 
 <slot />
+<Modal bind:this={modal}>
+  <NewScreenModal
+    {screenNameModal}
+    {navigationSelectionModal}
+    bind:selectedScreens
+  />
+</Modal>
+
+<Modal bind:this={screenNameModal}>
+  <ScreenNameModal bind:screenName {modal} {navigationSelectionModal} />
+</Modal>
+<Modal bind:this={navigationSelectionModal}>
+  <NavigationSelectionModal {modal} {selectedScreens} {screenNameModal} />
+</Modal>
 
 <style>
   .root {
@@ -237,4 +282,21 @@
     border-left: var(--border-light);
     overflow-x: hidden;
   }
+
+  .centered {
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .main {
+    width: 300px;
+  }
 </style>