Merge branch 'master' of github.com:Budibase/budibase into custom-css

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">

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

@@ -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>

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

@@ -22,17 +22,19 @@
 </script>
 
 <DetailSummary name={`${name}${changed ? ' *' : ''}`} on:open show={open} thin>
-  <div>
+  {#if open}
-    {#each properties as prop}
+    <div>
-      <PropertyControl
+      {#each properties as prop}
-        label={`${prop.label}${hasPropChanged(prop) ? ' *' : ''}`}
+        <PropertyControl
-        control={prop.control}
+          label={`${prop.label}${hasPropChanged(prop) ? ' *' : ''}`}
-        key={prop.key}
+          control={prop.control}
-        value={style[prop.key]}
+          key={prop.key}
-        onChange={(key, value) => onStyleChanged(styleCategory, key, value)}
+          value={style[prop.key]}
-        props={{ ...excludeProps(prop, ['control', 'label']) }} />
+          onChange={(key, value) => onStyleChanged(styleCategory, key, value)}
-    {/each}
+          props={{ ...excludeProps(prop, ['control', 'label']) }} />
-  </div>
+      {/each}
+    </div>
+  {/if}
 </DetailSummary>
 
 <style>

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

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>

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)

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: "",