E2E working

packages/builder/src/components/userInterface/AppPreview/iframeTemplate.html

@@ -22,20 +22,10 @@
         // Extract data from message
         const { selectedComponentId, layout, screen } = JSON.parse(event.data)
 
-        // Update selected component style
-        if (selectedComponentStyle) {
-          document.head.removeChild(selectedComponentStyle)
-        }
-        selectedComponentStyle = document.createElement("style");
-        document.head.appendChild(selectedComponentStyle)
-        var selectedCss = '[data-bb-id="' + selectedComponentId + '"]'  + '{border:2px solid #0055ff !important;}'
-        selectedComponentStyle.appendChild(document.createTextNode(selectedCss))
-
         // Set some flags so the app knows we're in the builder
-        window["##BUDIBASE_IN_BUILDER##"] = true;
-        window["##BUDIBASE_PREVIEW_LAYOUT##"] = layout;
-        window["##BUDIBASE_PREVIEW_SCREEN##"] = screen;
         window["##BUDIBASE_IN_BUILDER##"] = true
+        window["##BUDIBASE_PREVIEW_LAYOUT##"] = layout
+        window["##BUDIBASE_PREVIEW_SCREEN##"] = screen
         window["##BUDIBASE_SELECTED_COMPONENT_ID##"] = selectedComponentId
         window["##BUDIBASE_PREVIEW_ID##"] = Math.random()
         

packages/builder/src/components/userInterface/ComponentNavigationTree/ComponentTree.svelte

@@ -6,6 +6,7 @@
   import ComponentDropdownMenu from "../ComponentDropdownMenu.svelte"
   import NavItem from "components/common/NavItem.svelte"
 
+  export let layout
   export let components = []
   export let currentComponent
   export let onSelect = () => {}
@@ -23,7 +24,11 @@
     const path = store.actions.components.findRoute(component)
 
     // Go to correct URL
-    $goto(`./screens/:screen/${path}`)
+    if (layout) {
+      $goto(`./layouts/:layout/${path}`)
+    } else {
+      $goto(`./screens/:screen/${path}`)
+    }
   }
 
   const dragstart = component => e => {

packages/builder/src/components/userInterface/ComponentNavigationTree/ScreenDropdownMenu.svelte

@@ -3,12 +3,13 @@
   import { store, allScreens } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import { DropdownMenu } from "@budibase/bbui"
+  import { DropdownMenu, Modal, ModalContent } from "@budibase/bbui"
   import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
 
   export let screen
 
   let confirmDeleteDialog
+  let editLayoutDialog
   let dropdown
   let anchor
 
@@ -29,6 +30,10 @@
         icon="ri-delete-bin-line"
         title="Delete"
         on:click={() => confirmDeleteDialog.show()} />
+      <DropdownItem
+        icon="ri-layout-line"
+        title="Set Layout"
+        on:click={() => editLayoutDialog.show()} />
     </DropdownContainer>
   </DropdownMenu>
 </div>
@@ -39,6 +44,15 @@
   okText="Delete Screen"
   onOk={deleteScreen} />
 
+<Modal bind:this={editLayoutDialog}>
+  <ModalContent
+    showCancelButton={false}
+    showConfirmButton={false}
+    title={'Set Layout For Screen'}>
+    Choose a layout for your screen
+  </ModalContent>
+</Modal>
+
 <style>
   .icon i {
     font-size: 16px;

packages/builder/src/components/userInterface/FrontendNavigatePane.svelte

@@ -53,12 +53,9 @@
         <NewScreenModal />
       </Modal>
     {:else if tab === 'layouts'}
-      {#if $currentAsset}
-        <div class="nav-items-container">
-          <Layout />
-          <ComponentNavigationTree />
-        </div>
-      {/if}
+      {#each $store.layouts as layout}
+        <Layout {layout} />
+      {/each}
     {/if}
   </Switcher>
 </div>

packages/builder/src/components/userInterface/Layout.svelte

@@ -7,20 +7,16 @@
   import { store, currentAsset } from "builderStore"
   import { writable } from "svelte/store"
 
-  export let layout = $currentAsset
+  export let layout
 
   let confirmDeleteDialog
   let componentToDelete = ""
 
   const dragDropStore = writable({})
 
-  const lastPartOfName = c =>
-    c && last(c.name ? c.name.split("/") : c._component.split("/"))
-
-  $: _layout = {
-    component: $currentAsset,
-    title: lastPartOfName(layout),
-  }
+  $: console.log({ 
+    $currentAsset, layout
+  })
 
   const setCurrentScreenToLayout = () => {
     store.actions.selectAssetType(FrontendTypes.LAYOUT)
@@ -33,13 +29,14 @@
   icon="ri-layout-3-line"
   text={layout.name}
   withArrow
-  selected={$store.currentComponentInfo?._id === _layout.component.props._id}
-  opened={$store.currentPreviewItem?.name === _layout.title}
+  selected={$store.currentComponentInfo?._id === layout.props._id}
+  opened={$currentAsset._id === layout._id}
   on:click={setCurrentScreenToLayout} />
 
-{#if $store.currentPreviewItem?.name === _layout.title && _layout.component.props._children}
+{#if $currentAsset._id === layout._id && layout.props._children}
   <ComponentTree
-    components={_layout.component.props._children}
+    layout
+    components={layout.props._children}
     currentComponent={$store.currentComponentInfo}
     {dragDropStore} />
 {/if}