Inline

packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/index.svelte

@@ -19,6 +19,7 @@
   import table from "./images/tableInline.svg"
 
   export let onClose: (() => void) | null = null
+  export let inline: boolean = false
 
   $: hasScreens = $screenStore.screens?.length
   $: title = hasScreens ? "Create new screen" : "Create your first screen"
@@ -59,20 +60,27 @@
   }
 </script>
 
-<Modal bind:this={rootModal} on:hide={() => (selectedType = undefined)}>
+<Modal
+  bind:this={rootModal}
+  on:hide={() => (selectedType = undefined)}
+  {inline}
+>
   <ModalContent
-    {title}
+    title={inline ? "" : title}
     size="L"
     {onConfirm}
     disabled={!selectedType}
     confirmText="Next"
+    showDivider={!inline}
+    showCloseIcon={!inline}
+    showCancelButton={!inline}
   >
-    <div class="subHeading">
-      Start from scratch or create screens from your data
-    </div>
     <!-- svelte-ignore a11y-no-static-element-interactions -->
     <!-- svelte-ignore a11y-click-events-have-key-events -->
-    <CreationPage showClose={!!onClose} {onClose}>
+    <CreationPage showClose={!!onClose} {onClose} heading={inline ? title : ""}>
+      <div class="subHeading" class:inline>
+        Start from scratch or create screens from your data
+      </div>
       <div class="cards">
         <div
           class="card"
@@ -150,6 +158,10 @@
   .subHeading {
     padding-bottom: var(--spacing-l);
   }
+  .subHeading:not(.inline) {
+    align-self: start;
+  }
+
   .cards {
     display: flex;
     flex-wrap: wrap;

packages/builder/src/pages/builder/app/[application]/design/new.svelte

@@ -2,6 +2,9 @@
   import NewScreen from "./_components/NewScreen/index.svelte"
   import { screenStore } from "@/stores/builder"
   import { goto } from "@roxi/routify"
+  import { onMount } from "svelte"
+
+  let newScreenModal: NewScreen
 
   $: onClose = getOnClose($screenStore)
 
@@ -18,6 +21,10 @@
       $goto(`./${screens[0]._id}`)
     }
   }
+
+  onMount(() => {
+    newScreenModal.show()
+  })
 </script>
 
-<NewScreen {onClose} />
+<NewScreen {onClose} bind:this={newScreenModal} inline />