From f63b6946ecc422c82684f2fdbcce313aad88a67f Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 23 Dec 2020 08:54:09 +0000
Subject: [PATCH 1/4] Fix empty screen list when navigating between roles

---
 .../ComponentsPaneSwitcher.svelte             | 82 -------------------
 .../design/[assetType]/_layout.svelte         | 10 ++-
 2 files changed, 7 insertions(+), 85 deletions(-)
 delete mode 100644 packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte

diff --git a/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte b/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte
deleted file mode 100644
index beae2d7e3f..0000000000
--- a/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte
+++ /dev/null
@@ -1,82 +0,0 @@
-<script>
-  import { store, allScreens } from "builderStore"
-  import { FrontendTypes } from "constants"
-  import ComponentPropertiesPanel from "./ComponentPropertiesPanel.svelte"
-  import ComponentSelectionList from "./ComponentSelectionList.svelte"
-
-  const PROPERTIES_TAB = "properties"
-  const COMPONENT_SELECTION_TAB = "components"
-
-  let selected = PROPERTIES_TAB
-
-  const isSelected = tab => selected === tab
-
-  const selectTab = tab => (selected = tab)
-
-  const toggleTab = () =>
-    (selected =
-      selected === PROPERTIES_TAB ? COMPONENT_SELECTION_TAB : PROPERTIES_TAB)
-</script>
-
-<div class="root">
-  {#if $store.currentFrontEndType === FrontendTypes.LAYOUT || $allScreens.length}
-    <div class="switcher">
-      <button
-        class:selected={selected === COMPONENT_SELECTION_TAB}
-        on:click={() => selectTab(COMPONENT_SELECTION_TAB)}>
-        Add
-      </button>
-
-      <button
-        class:selected={selected === PROPERTIES_TAB}
-        on:click={() => selectTab(PROPERTIES_TAB)}>
-        Edit
-      </button>
-    </div>
-
-    <div class="panel">
-      {#if selected === PROPERTIES_TAB}
-        <ComponentPropertiesPanel {toggleTab} />
-      {/if}
-
-      {#if selected === COMPONENT_SELECTION_TAB}
-        <ComponentSelectionList {toggleTab} />
-      {/if}
-    </div>
-  {/if}
-</div>
-
-<style>
-  .root {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    padding: 20px 5px 20px 10px;
-    border-left: solid 1px var(--grey-2);
-  }
-
-  .switcher {
-    display: flex;
-    margin: 0px 20px 20px 0px;
-  }
-
-  .switcher > button {
-    display: inline-block;
-    border: none;
-    margin: 0;
-    padding: 0;
-    cursor: pointer;
-    font-size: 18px;
-    font-weight: 600;
-    color: var(--grey-5);
-    margin-right: 20px;
-  }
-
-  .switcher > .selected {
-    color: var(--ink);
-  }
-
-  .panel {
-    height: 100%;
-  }
-</style>
diff --git a/packages/builder/src/pages/[application]/design/[assetType]/_layout.svelte b/packages/builder/src/pages/[application]/design/[assetType]/_layout.svelte
index b797a18dc4..df013f2abe 100644
--- a/packages/builder/src/pages/[application]/design/[assetType]/_layout.svelte
+++ b/packages/builder/src/pages/[application]/design/[assetType]/_layout.svelte
@@ -1,7 +1,11 @@
 <script>
-  import { store, backendUiStore, currentAsset } from "builderStore"
+  import {
+    store,
+    backendUiStore,
+    currentAsset,
+    selectedComponent,
+  } from "builderStore"
   import { onMount } from "svelte"
-  import { FrontendTypes } from "constants"
   import CurrentItemPreview from "components/userInterface/AppPreview"
   import ComponentPropertiesPanel from "components/userInterface/ComponentPropertiesPanel.svelte"
   import ComponentSelectionList from "components/userInterface/ComponentSelectionList.svelte"
@@ -43,7 +47,7 @@
     {/if}
   </div>
 
-  {#if $store.currentFrontEndType === FrontendTypes.SCREEN || $store.currentFrontEndType === FrontendTypes.LAYOUT}
+  {#if $selectedComponent != null}
     <div class="components-pane">
       <ComponentPropertiesPanel />
     </div>

From fb3a3d504ed972c904c1e6ea1e4d6fc580d2d4c2 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 23 Dec 2020 09:23:03 +0000
Subject: [PATCH 2/4] Fix new layouts having bad styling

---
 .../userInterface/SettingsView.svelte         |  4 ++--
 packages/server/src/api/controllers/layout.js |  4 ++--
 packages/server/src/constants/layouts.js      | 23 +++++++++++++++++--
 3 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/packages/builder/src/components/userInterface/SettingsView.svelte b/packages/builder/src/components/userInterface/SettingsView.svelte
index eee50d8cf6..211e04d009 100644
--- a/packages/builder/src/components/userInterface/SettingsView.svelte
+++ b/packages/builder/src/components/userInterface/SettingsView.svelte
@@ -41,7 +41,7 @@
     { key: "layoutId", label: "Layout", control: LayoutSelect },
   ]
 
-  const layoutDefinition = [{ key: "title", label: "Title", control: Input }]
+  const layoutDefinition = []
 
   const canRenderControl = (key, dependsOn) => {
     let test = !isEmpty(componentInstance[dependsOn])
@@ -119,7 +119,7 @@
     {/if}
   {/if}
 
-  {#if panelDefinition && panelDefinition.length > 0}
+  {#if !isLayout && panelDefinition && panelDefinition.length > 0}
     {#each panelDefinition as definition}
       {#if canRenderControl(definition.key, definition.dependsOn)}
         <PropertyControl
diff --git a/packages/server/src/api/controllers/layout.js b/packages/server/src/api/controllers/layout.js
index 433a173d1c..de4c647c9f 100644
--- a/packages/server/src/api/controllers/layout.js
+++ b/packages/server/src/api/controllers/layout.js
@@ -8,8 +8,8 @@ exports.save = async function(ctx) {
 
   if (!layout.props) {
     layout = {
-      ...layout,
       ...EMPTY_LAYOUT,
+      ...layout,
     }
   }
 
@@ -34,7 +34,7 @@ exports.destroy = async function(ctx) {
     )
   ).rows.map(element => element.doc.layoutId)
   if (layoutsUsedByScreens.includes(layoutId)) {
-    ctx.throw(400, "Cannot delete a base layout")
+    ctx.throw(400, "Cannot delete a layout that's being used by a screen")
   }
 
   await db.remove(layoutId, layoutRev)
diff --git a/packages/server/src/constants/layouts.js b/packages/server/src/constants/layouts.js
index f2ad5b2675..0b25bf52a9 100644
--- a/packages/server/src/constants/layouts.js
+++ b/packages/server/src/constants/layouts.js
@@ -16,7 +16,17 @@ const EMPTY_LAYOUT = {
         _id: "7fcf11e4-6f5b-4085-8e0d-9f3d44c98967",
         _component: "##builtin/screenslot",
         _styles: {
-          normal: {},
+          normal: {
+            flex: "1 1 auto",
+            display: "flex",
+            "flex-direction": "column",
+            "justify-content": "flex-start",
+            "align-items": "stretch",
+            "max-width": "100%",
+            "margin-left": "20px",
+            "margin-right": "20px",
+            width: "1400px",
+          },
           hover: {},
           active: {},
           selected: {},
@@ -28,7 +38,16 @@ const EMPTY_LAYOUT = {
     _styles: {
       active: {},
       hover: {},
-      normal: {},
+      normal: {
+        display: "flex",
+        "flex-direction": "column",
+        "align-items": "center",
+        "justify-content": "flex-start",
+        "margin-right": "auto",
+        "margin-left": "auto",
+        "min-height": "100%",
+        "background-image": "#f5f5f5",
+      },
       selected: {},
     },
     className: "",

From f8e6dd99ef622f6579df9464bc1745062b12c357 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 23 Dec 2020 09:56:18 +0000
Subject: [PATCH 3/4] Fix lag when swapping between settings and design options

---
 .../userInterface/PropertyGroup.svelte        | 24 ++++++++++---------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/packages/builder/src/components/userInterface/PropertyGroup.svelte b/packages/builder/src/components/userInterface/PropertyGroup.svelte
index 2fb304f5c8..e2a712f45f 100644
--- a/packages/builder/src/components/userInterface/PropertyGroup.svelte
+++ b/packages/builder/src/components/userInterface/PropertyGroup.svelte
@@ -14,17 +14,19 @@
 </script>
 
 <DetailSummary {name} on:open show={open} thin>
-  <div>
-    {#each properties as props}
-      <PropertyControl
-        label={props.label}
-        control={props.control}
-        key={props.key}
-        value={style[props.key]}
-        onChange={(key, value) => onStyleChanged(styleCategory, key, value)}
-        props={{ ...excludeProps(props, ['control', 'label']) }} />
-    {/each}
-  </div>
+  {#if open}
+    <div>
+      {#each properties as props}
+        <PropertyControl
+          label={props.label}
+          control={props.control}
+          key={props.key}
+          value={style[props.key]}
+          onChange={(key, value) => onStyleChanged(styleCategory, key, value)}
+          props={{ ...excludeProps(props, ['control', 'label']) }} />
+      {/each}
+    </div>
+  {/if}
 </DetailSummary>
 
 <style>

From 5867ba09ac44b7e5a168e357c5e0cb5ac9bb3ab1 Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Tue, 5 Jan 2021 11:24:28 +0000
Subject: [PATCH 4/4] Fix for: Small Typo in Data Binding textbox #962

---
 .../builder/src/components/userInterface/BindingDropdown.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/components/userInterface/BindingDropdown.svelte b/packages/builder/src/components/userInterface/BindingDropdown.svelte
index e62f76e4b7..afbad79f96 100644
--- a/packages/builder/src/components/userInterface/BindingDropdown.svelte
+++ b/packages/builder/src/components/userInterface/BindingDropdown.svelte
@@ -62,7 +62,7 @@
     <TextArea
       thin
       bind:value
-      placeholder="Add text, or lick the objects on the left to add them to the
+      placeholder="Add text, or click the objects on the left to add them to the
       textbox." />
     <div class="controls">
       <a href="https://docs.budibase.com/design/binding">