Merge branch 'master' of github.com:Budibase/budibase into feature/self-hosting

lerna.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.4.2",
+  "version": "0.4.3",
   "npmClient": "yarn",
   "packages": [
     "packages/*"

packages/builder/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@budibase/builder",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "license": "AGPL-3.0",
   "private": true,
   "scripts": {
@@ -64,7 +64,7 @@
   },
   "dependencies": {
     "@budibase/bbui": "^1.52.4",
-    "@budibase/client": "^0.4.2",
+    "@budibase/client": "^0.4.3",
     "@budibase/colorpicker": "^1.0.1",
     "@budibase/svelte-ag-grid": "^0.0.16",
     "@fortawesome/fontawesome-free": "^5.14.0",

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

@@ -14,17 +14,19 @@
 </script>
 
 <DetailSummary {name} on:open show={open} thin>
-  <div>
+  {#if open}
-    {#each properties as props}
+    <div>
-      <PropertyControl
+      {#each properties as props}
-        label={props.label}
+        <PropertyControl
-        control={props.control}
+          label={props.label}
-        key={props.key}
+          control={props.control}
-        value={style[props.key]}
+          key={props.key}
-        onChange={(key, value) => onStyleChanged(styleCategory, key, value)}
+          value={style[props.key]}
-        props={{ ...excludeProps(props, ['control', 'label']) }} />
+          onChange={(key, value) => onStyleChanged(styleCategory, key, value)}
-    {/each}
+          props={{ ...excludeProps(props, ['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/client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@budibase/client",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "license": "MPL-2.0",
   "main": "dist/budibase-client.js",
   "module": "dist/budibase-client.js",
@@ -15,7 +15,7 @@
     "svelte-spa-router": "^3.0.5"
   },
   "devDependencies": {
-    "@budibase/standard-components": "^0.4.2",
+    "@budibase/standard-components": "^0.4.3",
     "@rollup/plugin-commonjs": "^16.0.0",
     "@rollup/plugin-node-resolve": "^10.0.0",
     "fs-extra": "^8.1.0",

packages/server/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/server",
   "email": "hi@budibase.com",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "description": "Budibase Web Server",
   "main": "src/electron.js",
   "repository": {
@@ -12,6 +12,7 @@
     "icon": "./build/icons/512x512.png",
     "appId": "com.budibase.builder",
     "productName": "Budibase Builder",
+    "afterSign": "electron-builder-notarize",
     "mac": {
       "icon": "./assets/icons/icon.icns",
       "category": "public.app-category.developer-tools",
@@ -48,7 +49,7 @@
   "author": "Budibase",
   "license": "AGPL-3.0-or-later",
   "dependencies": {
-    "@budibase/client": "^0.4.2",
+    "@budibase/client": "^0.4.3",
     "@koa/router": "^8.0.0",
     "@sendgrid/mail": "^7.1.1",
     "@sentry/node": "^5.19.2",

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

@@ -18,7 +18,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: {},
@@ -30,7 +40,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: "",

packages/standard-components/package.json

@@ -29,7 +29,7 @@
   "keywords": [
     "svelte"
   ],
-  "version": "0.4.2",
+  "version": "0.4.3",
   "license": "MIT",
   "gitHead": "284cceb9b703c38566c6e6363c022f79a08d5691",
   "dependencies": {