From 4346bce4fdc618fe00a755ac50197d64c5464d24 Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Thu, 2 Jul 2020 20:38:02 +0100
Subject: [PATCH 1/4] #383 rename Model > Table (ui only)

---
 .../CreateEditModel/CreateEditModel.svelte       |  2 +-
 .../nav/ModelNavigator/EmptyModel.svelte         | 14 +++++++-------
 .../nav/ModelNavigator/ModelNavigator.svelte     |  2 +-
 .../userInterface/temporaryPanelStructure.js     | 16 ++++++++--------
 .../backend/model/[selectedModel]/index.svelte   |  2 +-
 .../[application]/backend/model/index.svelte     |  4 ++--
 packages/standard-components/components.json     |  6 +++---
 7 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/CreateEditModel.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/CreateEditModel.svelte
index 6e1a1d564b..2cb718c278 100644
--- a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/CreateEditModel.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/CreateEditModel.svelte
@@ -37,7 +37,7 @@
 <div class="heading">
   {#if !showFieldView}
     <i class="ri-list-settings-line button--toggled" />
-    <h3 class="budibase__title--3">Create / Edit Model</h3>
+    <h3 class="budibase__title--3">Create / Edit Table</h3>
   {:else}
     <i class="ri-file-list-line button--toggled" />
     <h3 class="budibase__title--3">Create / Edit Field</h3>
diff --git a/packages/builder/src/components/nav/ModelNavigator/EmptyModel.svelte b/packages/builder/src/components/nav/ModelNavigator/EmptyModel.svelte
index da01963937..4541c095d3 100644
--- a/packages/builder/src/components/nav/ModelNavigator/EmptyModel.svelte
+++ b/packages/builder/src/components/nav/ModelNavigator/EmptyModel.svelte
@@ -19,19 +19,19 @@
         ...rest,
       },
     })
-    notifier.success(`${model.name} model created.`)
+    notifier.success(`${model.name} table created.`)
   }
 </script>
 
 <section transition:fade>
   <header>
-    <h2>Create New Model</h2>
-    <p>Before you can view your model, you need to set it up.</p>
+    <h2>Create New Table</h2>
+    <p>Before you can view your table, you need to set it up.</p>
   </header>
 
   <div class="block-row">
     <span class="block-row-title">Fields</span>
-    <p>Blocks are pre-made fields and help you build your model quicker.</p>
+    <p>Blocks are pre-made fields and help you build your table quicker.</p>
     <div class="blocks">
       {#each Object.values(FIELDS) as field}
         <Block
@@ -45,7 +45,7 @@
 
   <div class="block-row">
     <span class="block-row-title">Blocks</span>
-    <p>Blocks are pre-made fields and help you build your model quicker.</p>
+    <p>Blocks are pre-made fields and help you build your table quicker.</p>
     <div class="blocks">
       {#each Object.values(BLOCKS) as field}
         <Block
@@ -58,8 +58,8 @@
   </div>
 
   <div class="block-row">
-    <span class="block-row-title">Models</span>
-    <p>Blocks are pre-made fields and help you build your model quicker.</p>
+    <span class="block-row-title">Tables</span>
+    <p>Blocks are pre-made fields and help you build your table quicker.</p>
     <div class="blocks">
       {#each Object.values(MODELS) as model}
         <Block
diff --git a/packages/builder/src/components/nav/ModelNavigator/ModelNavigator.svelte b/packages/builder/src/components/nav/ModelNavigator/ModelNavigator.svelte
index abb1ad7906..d7cc44bc0d 100644
--- a/packages/builder/src/components/nav/ModelNavigator/ModelNavigator.svelte
+++ b/packages/builder/src/components/nav/ModelNavigator/ModelNavigator.svelte
@@ -53,7 +53,7 @@
           bind:value={$backendUiStore.tabs.NAVIGATION_PANEL}>
           {#if selectedTab === 'NAVIGATE'}
             <Button purple wide on:click={setupForNewModel}>
-              Create New Model
+              Create New Table
             </Button>
             <div class="hierarchy-items-container">
               {#each $backendUiStore.models as model}
diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index 99692d2827..73bd9dd9b7 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -313,7 +313,7 @@ export default {
           icon: "ri-archive-drawer-fill",
           properties: {
             design: { ...all },
-            settings: [{ label: "Model", key: "model", control: ModelSelect }],
+            settings: [{ label: "Table", key: "model", control: ModelSelect }],
           },
           children: [],
         },
@@ -331,7 +331,7 @@ export default {
                 design: { ...all },
                 settings: [
                   {
-                    label: "Model",
+                    label: "Table",
                     key: "model",
                     control: ModelSelect,
                   },
@@ -351,7 +351,7 @@ export default {
                 design: { ...all },
                 settings: [
                   {
-                    label: "Model",
+                    label: "Table",
                     key: "model",
                     control: ModelSelect,
                   },
@@ -368,7 +368,7 @@ export default {
           properties: {
             design: { ...all },
             settings: [
-              { label: "Model", key: "model", control: ModelSelect },
+              { label: "Table", key: "model", control: ModelSelect },
               {
                 label: "Chart Type",
                 key: "type",
@@ -399,18 +399,18 @@ export default {
           icon: "ri-file-list-fill",
           properties: {
             design: { ...all },
-            settings: [{ label: "Model", key: "model", control: ModelSelect }],
+            settings: [{ label: "Table", key: "model", control: ModelSelect }],
           },
           children: [],
         },
         {
           name: "List",
           _component: "@budibase/standard-components/list",
-          description: "Renders all children once per record, of a given model",
+          description: "Renders all children once per record, of a given table",
           icon: "ri-file-list-fill",
           properties: {
             design: { ...all },
-            settings: [{ label: "Model", key: "model", control: ModelSelect }],
+            settings: [{ label: "Table", key: "model", control: ModelSelect }],
           },
           children: [],
         },
@@ -422,7 +422,7 @@ export default {
           icon: "ri-profile-line",
           properties: {
             design: { ...all },
-            settings: [{ label: "Model", key: "model", control: ModelSelect }],
+            settings: [{ label: "Table", key: "model", control: ModelSelect }],
           },
           children: [],
         },
diff --git a/packages/builder/src/pages/[application]/backend/model/[selectedModel]/index.svelte b/packages/builder/src/pages/[application]/backend/model/[selectedModel]/index.svelte
index 232a569caa..3b2c43a178 100644
--- a/packages/builder/src/pages/[application]/backend/model/[selectedModel]/index.svelte
+++ b/packages/builder/src/pages/[application]/backend/model/[selectedModel]/index.svelte
@@ -28,7 +28,7 @@
 {:else if $backendUiStore.selectedDatabase._id && selectedModel.name}
   <ModelDataTable />
 {:else}
-  <i style="color: var(--grey-4)">create your first model to start building</i>
+  <i style="color: var(--grey-4)">create your first table to start building</i>
 {/if}
 
 <style>
diff --git a/packages/builder/src/pages/[application]/backend/model/index.svelte b/packages/builder/src/pages/[application]/backend/model/index.svelte
index f72878a871..101655ddb9 100644
--- a/packages/builder/src/pages/[application]/backend/model/index.svelte
+++ b/packages/builder/src/pages/[application]/backend/model/index.svelte
@@ -22,5 +22,5 @@
 </script>
 
 {#if $backendUiStore.models.length === 0}
-  Please create a model
-{:else}Please select a model{/if}
+  Please create a table
+{:else}Please select a table{/if}
diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json
index 2c24c02615..ce205cf92c 100644
--- a/packages/standard-components/components.json
+++ b/packages/standard-components/components.json
@@ -196,21 +196,21 @@
 		}
 	},
 	"datatable": {
-		"description": "an HTML table that fetches data from a model or view and displays it.",
+		"description": "an HTML table that fetches data from a table or view and displays it.",
 		"data": true,
 		"props": {
 			"model": "models" 
 		}
 	},
 	"dataform": {
-		"description": "an HTML table that fetches data from a model or view and displays it.",
+		"description": "an HTML table that fetches data from a table or view and displays it.",
 		"data": true,
 		"props": {
 			"model": "models"
 		}
 	},
 	"dataformwide": {
-		"description": "an HTML table that fetches data from a model or view and displays it.",
+		"description": "an HTML table that fetches data from a table or view and displays it.",
 		"data": true,
 		"props": {
 			"model": "models"

From 1da37b1fa553e9a5b2337db88b563b99b8970377 Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Thu, 2 Jul 2020 21:09:49 +0100
Subject: [PATCH 2/4] #290 field name validation

---
 .../nav/ModelSetupNav/ModelSetupNav.svelte    | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/packages/builder/src/components/nav/ModelSetupNav/ModelSetupNav.svelte b/packages/builder/src/components/nav/ModelSetupNav/ModelSetupNav.svelte
index 39be32bf07..e1f4d3601b 100644
--- a/packages/builder/src/components/nav/ModelSetupNav/ModelSetupNav.svelte
+++ b/packages/builder/src/components/nav/ModelSetupNav/ModelSetupNav.svelte
@@ -52,7 +52,35 @@
     })
   }
 
+  function validate() {
+    let errors = []
+    for (let field of Object.values($backendUiStore.draftModel.schema)) {
+      const restrictedFieldNames = ["type", "modelId"]
+      if (field.name.startsWith("_")) {
+        errors.push(`field '${field.name}' - name cannot begin with '_''`)
+      } else if (restrictedFieldNames.includes(field.name)) {
+        errors.push(`field '${field.name}' - is a restricted name, please rename`)
+      } else if (!field.name || !field.name.trim()) {
+        errors.push("field name cannot be blank")
+      }
+    }
+
+    if (!$backendUiStore.draftModel.name) {
+      errors.push("Table name cannot be blank")
+    }
+
+    return errors
+  }
+
   async function saveModel() {
+    const errors = validate()
+    if (errors.length > 0) {
+      notifier.danger(
+        errors.join("/n")
+      )
+      return
+    }
+
     await backendUiStore.actions.models.save({
       model: $backendUiStore.draftModel,
     })

From 69b05d6f931c9603c2f4018c6bef1ee49cc68045 Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Fri, 3 Jul 2020 13:03:50 +0100
Subject: [PATCH 3/4] #416 auto init of budibase when electron starts

---
 packages/cli/src/commands/init/initHandler.js | 87 +---------------
 packages/server/package.json                  |  2 +-
 packages/server/src/electron.js               | 98 +++++++++++--------
 .../src/utilities/initialiseBudibase.js       | 66 +++++++++++++
 4 files changed, 128 insertions(+), 125 deletions(-)
 create mode 100644 packages/server/src/utilities/initialiseBudibase.js

diff --git a/packages/cli/src/commands/init/initHandler.js b/packages/cli/src/commands/init/initHandler.js
index 3fe4134447..eadc74f815 100644
--- a/packages/cli/src/commands/init/initHandler.js
+++ b/packages/cli/src/commands/init/initHandler.js
@@ -1,88 +1,7 @@
-const inquirer = require("inquirer")
-const { exists, readFile, writeFile, ensureDir } = require("fs-extra")
-const chalk = require("chalk")
-const { serverFileName, xPlatHomeDir } = require("../../common")
-const { join } = require("path")
-const Sqrl = require("squirrelly")
-const uuid = require("uuid")
+const { xPlatHomeDir } = require("../../common")
+const initialiseBudibase = require("@budibase/server/src/utilities/initialiseBudibase")
 
 module.exports = opts => {
-  return run(opts)
-}
-
-const run = async opts => {
-  try {
-    await ensureAppDir(opts)
-    await setEnvironmentVariables(opts)
-    await createClientDatabase(opts)
-    await createDevEnvFile(opts)
-    console.log(chalk.green("Budibase successfully initialised."))
-  } catch (error) {
-    console.error(`Error initialising Budibase: ${error.message}`)
-  }
-}
-
-const setEnvironmentVariables = async opts => {
-  if (opts.couchDbUrl) {
-    process.env.COUCH_DB_URL = opts.couchDbUrl
-  } else {
-    const dataDir = join(opts.dir, ".data")
-    await ensureDir(dataDir)
-    process.env.COUCH_DB_URL =
-      dataDir + (dataDir.endsWith("/") || dataDir.endsWith("\\") ? "" : "/")
-  }
-}
-
-const ensureAppDir = async opts => {
   opts.dir = xPlatHomeDir(opts.dir)
-  await ensureDir(opts.dir)
-}
-
-const createClientDatabase = async opts => {
-  // cannot be a top level require as it
-  // will cause environment module to be loaded prematurely
-  const clientDb = require("@budibase/server/src/db/clientDb")
-
-  if (opts.clientId === "new") {
-    // cannot be a top level require as it
-    // will cause environment module to be loaded prematurely
-    const CouchDB = require("@budibase/server/src/db/client")
-    const existing = await CouchDB.allDbs()
-
-    let i = 0
-    let isExisting = true
-    while (isExisting) {
-      i += 1
-      opts.clientId = i.toString()
-      isExisting = existing.includes(clientDb.name(opts.clientId))
-    }
-  }
-
-  await clientDb.create(opts.clientId)
-}
-
-const createDevEnvFile = async opts => {
-  const destConfigFile = join(opts.dir, "./.env")
-  let createConfig = !(await exists(destConfigFile)) || opts.quiet
-  if (!createConfig) {
-    const answers = await inquirer.prompt([
-      {
-        type: "input",
-        name: "overwrite",
-        message: ".env already exists - overwrite? (N/y)",
-      },
-    ])
-    createConfig = ["Y", "y", "yes"].includes(answers.overwrite)
-  }
-
-  if (createConfig) {
-    const template = await readFile(serverFileName(".env.template"), {
-      encoding: "utf8",
-    })
-    opts.adminSecret = uuid.v4()
-    opts.cookieKey1 = uuid.v4()
-    opts.cookieKey2 = uuid.v4()
-    const config = Sqrl.Render(template, opts)
-    await writeFile(destConfigFile, config, { flag: "w+" })
-  }
+  return initialiseBudibase(opts)
 }
diff --git a/packages/server/package.json b/packages/server/package.json
index f725f65abf..e57691209e 100644
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -26,7 +26,7 @@
     "test": "jest routes --runInBand",
     "test:integration": "jest workflow --runInBand",
     "test:watch": "jest --watch",
-    "initialise": "node ../cli/bin/budi init -b local -q",
+    "initialise": "node ../cli/bin/budi init -q",
     "run:docker": "node src/index",
     "budi": "node ../cli/bin/budi",
     "dev:builder": "nodemon ../cli/bin/budi run",
diff --git a/packages/server/src/electron.js b/packages/server/src/electron.js
index d496c276cc..1d6687a145 100644
--- a/packages/server/src/electron.js
+++ b/packages/server/src/electron.js
@@ -1,55 +1,73 @@
 const { app, BrowserWindow, shell } = require("electron")
 const { join } = require("path")
-const { homedir } = require("os")
 const isDev = require("electron-is-dev")
 const { autoUpdater } = require("electron-updater")
 const unhandled = require("electron-unhandled")
+const { existsSync } = require("fs-extra")
+const initialiseBudibase = require("./utilities/initialiseBudibase")
+const { budibaseAppsDir } = require("./utilities/budibaseDir")
 
-require("dotenv").config({ path: join(homedir(), ".budibase", ".env") })
+const budibaseDir = budibaseAppsDir()
+const envFile = join(budibaseDir, ".env")
 
-if (isDev) {
-  unhandled({
-    showDialog: true,
+if (!existsSync(envFile)) {
+  // assume not initialised
+  initialiseBudibase({ dir: budibaseDir }).then(() => {
+    startApp()
   })
+} else {
+  startApp()
 }
 
-const APP_URL = "http://localhost:4001/_builder"
-const APP_TITLE = "Budibase Builder"
+function startApp() {
+  // evict environment from cache, so it reloads when next asked
+  delete require.cache[require.resolve("./environment")]
+  require("dotenv").config({ path: envFile })
 
-let win
-
-function handleRedirect(e, url) {
-  e.preventDefault()
-  shell.openExternal(url)
-}
-
-async function createWindow() {
-  app.server = await require("./app")()
-  win = new BrowserWindow({ width: 1920, height: 1080 })
-  win.setTitle(APP_TITLE)
-  win.loadURL(APP_URL)
   if (isDev) {
-    win.webContents.openDevTools()
-  } else {
-    autoUpdater.checkForUpdatesAndNotify()
+    unhandled({
+      showDialog: true,
+    })
   }
 
-  // open _blank in default browser
-  win.webContents.on("new-window", handleRedirect)
-  win.webContents.on("will-navigate", handleRedirect)
+  const APP_URL = "http://localhost:4001/_builder"
+  const APP_TITLE = "Budibase Builder"
+
+  let win
+
+  function handleRedirect(e, url) {
+    e.preventDefault()
+    shell.openExternal(url)
+  }
+
+  async function createWindow() {
+    app.server = await require("./app")()
+    win = new BrowserWindow({ width: 1920, height: 1080 })
+    win.setTitle(APP_TITLE)
+    win.loadURL(APP_URL)
+    if (isDev) {
+      win.webContents.openDevTools()
+    } else {
+      autoUpdater.checkForUpdatesAndNotify()
+    }
+
+    // open _blank in default browser
+    win.webContents.on("new-window", handleRedirect)
+    win.webContents.on("will-navigate", handleRedirect)
+  }
+
+  app.whenReady().then(createWindow)
+
+  // Quit when all windows are closed.
+  app.on("window-all-closed", () => {
+    // On macOS it is common for applications and their menu bar
+    // to stay active until the user quits explicitly with Cmd + Q
+    if (process.platform !== "darwin") app.quit()
+  })
+
+  app.on("activate", () => {
+    // On macOS it's common to re-create a window in the app when the
+    // dock icon is clicked and there are no other windows open.
+    if (win === null) createWindow()
+  })
 }
-
-app.whenReady().then(createWindow)
-
-// Quit when all windows are closed.
-app.on("window-all-closed", () => {
-  // On macOS it is common for applications and their menu bar
-  // to stay active until the user quits explicitly with Cmd + Q
-  if (process.platform !== "darwin") app.quit()
-})
-
-app.on("activate", () => {
-  // On macOS it's common to re-create a window in the app when the
-  // dock icon is clicked and there are no other windows open.
-  if (win === null) createWindow()
-})
diff --git a/packages/server/src/utilities/initialiseBudibase.js b/packages/server/src/utilities/initialiseBudibase.js
new file mode 100644
index 0000000000..87fedb434f
--- /dev/null
+++ b/packages/server/src/utilities/initialiseBudibase.js
@@ -0,0 +1,66 @@
+const { exists, readFile, writeFile, ensureDir } = require("fs-extra")
+const { join, resolve } = require("path")
+const Sqrl = require("squirrelly")
+const uuid = require("uuid")
+
+module.exports = async opts => {
+  await ensureDir(opts.dir)
+  await setCouchDbUrl(opts)
+
+  // need an env file to create the client database
+  await createDevEnvFile(opts)
+  await createClientDatabase(opts)
+
+  // need to recreate the env file, as we only now have a client id
+  // quiet flag will force overwrite of config
+  opts.quiet = true
+  await createDevEnvFile(opts)
+}
+
+const setCouchDbUrl = async opts => {
+  if (!opts.couchDbUrl) {
+    const dataDir = join(opts.dir, ".data")
+    await ensureDir(dataDir)
+    opts.couchDbUrl =
+      dataDir + (dataDir.endsWith("/") || dataDir.endsWith("\\") ? "" : "/")
+  }
+}
+
+const createDevEnvFile = async opts => {
+  const destConfigFile = join(opts.dir, "./.env")
+  let createConfig = !(await exists(destConfigFile)) || opts.quiet
+  if (createConfig) {
+    const template = await readFile(
+      resolve(__dirname, "..", "..", ".env.template"),
+      {
+        encoding: "utf8",
+      }
+    )
+    opts.cookieKey1 = opts.cookieKey1 || uuid.v4()
+    const config = Sqrl.Render(template, opts)
+    await writeFile(destConfigFile, config, { flag: "w+" })
+  }
+}
+
+const createClientDatabase = async opts => {
+  // cannot be a top level require as it
+  // will cause environment module to be loaded prematurely
+  const clientDb = require("../db/clientDb")
+
+  if (!opts.clientId || opts.clientId === "new") {
+    // cannot be a top level require as it
+    // will cause environment module to be loaded prematurely
+    const CouchDB = require("../db/client")
+    const existing = await CouchDB.allDbs()
+
+    let i = 0
+    let isExisting = true
+    while (isExisting) {
+      i += 1
+      opts.clientId = i.toString()
+      isExisting = existing.includes(clientDb.name(opts.clientId))
+    }
+  }
+
+  await clientDb.create(opts.clientId)
+}

From 03dabc58100e25c1668f4fa29d759e3790a72a18 Mon Sep 17 00:00:00 2001
From: cmack <conoramck@gmail.com>
Date: Fri, 3 Jul 2020 13:38:51 +0100
Subject: [PATCH 4/4] Moz Prefixes and X Positional Awareness

---
 .../components/CheckedBackground.svelte       |   4 +-
 .../Colorpicker/components/Colorpicker.svelte | 322 +++++++++---------
 .../components/Colorpreview.svelte            | 198 ++++++-----
 3 files changed, 268 insertions(+), 256 deletions(-)

diff --git a/packages/builder/src/components/userInterface/Colorpicker/components/CheckedBackground.svelte b/packages/builder/src/components/userInterface/Colorpicker/components/CheckedBackground.svelte
index 2baa6b466e..c1a3c2f6fc 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/components/CheckedBackground.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/components/CheckedBackground.svelte
@@ -1,5 +1,5 @@
 <script>
-  import {buildStyle} from "../helpers.js"
+  import { buildStyle } from "../helpers.js"
   import { fade } from "svelte/transition"
 
   export let backgroundSize = "10px"
@@ -20,5 +20,7 @@
     background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
     height: fit-content;
     width: fit-content;
+    width: -moz-fit-content;
+    height: -moz-fit-content;
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/Colorpicker/components/Colorpicker.svelte b/packages/builder/src/components/userInterface/Colorpicker/components/Colorpicker.svelte
index deb199fde3..254dc1f288 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/components/Colorpicker.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/components/Colorpicker.svelte
@@ -1,267 +1,184 @@
 <script>
-  import { onMount, createEventDispatcher } from "svelte"
-  import { fade } from "svelte/transition"
-  import Swatch from "./Swatch.svelte"
-  import CheckedBackground from "./CheckedBackground.svelte"
-  import { buildStyle } from "../helpers.js"
+  import { onMount, createEventDispatcher } from "svelte";
+  import { fade } from "svelte/transition";
+  import Swatch from "./Swatch.svelte";
+  import CheckedBackground from "./CheckedBackground.svelte";
+  import { buildStyle } from "../helpers.js";
   import {
     getColorFormat,
     convertToHSVA,
-    convertHsvaToFormat,
-  } from "../utils.js"
-  import Slider from "./Slider.svelte"
-  import Palette from "./Palette.svelte"
-  import ButtonGroup from "./ButtonGroup.svelte"
-  import Input from "./Input.svelte"
-  import Portal from "./Portal.svelte"
-  import { keyevents } from "../actions"
+    convertHsvaToFormat
+  } from "../utils.js";
+  import Slider from "./Slider.svelte";
+  import Palette from "./Palette.svelte";
+  import ButtonGroup from "./ButtonGroup.svelte";
+  import Input from "./Input.svelte";
+  import Portal from "./Portal.svelte";
+  import { keyevents } from "../actions";
 
-  export let value = "#3ec1d3ff"
-  export let open = false
-  export let swatches = []
+  export let value = "#3ec1d3ff";
+  export let open = false;
+  export let swatches = [];
 
-  export let disableSwatches = false
-  export let format = "hexa"
-  export let style = ""
-  export let pickerHeight = 0
-  export let pickerWidth = 0
+  export let disableSwatches = false;
+  export let format = "hexa";
+  export let style = "";
+  export let pickerHeight = 0;
+  export let pickerWidth = 0;
 
-  let colorPicker = null
-  let adder = null
-  let swatchesSetFromLocalStore = false
+  let colorPicker = null;
+  let adder = null;
+  let swatchesSetFromLocalStore = false;
 
-  let h = 0
-  let s = 0
-  let v = 0
-  let a = 0
+  let h = 0;
+  let s = 0;
+  let v = 0;
+  let a = 0;
 
-  const dispatch = createEventDispatcher()
+  const dispatch = createEventDispatcher();
 
   onMount(() => {
     if (!swatches.length > 0) {
       //Don't use locally stored recent colors if swatches have been passed as props
-      swatchesSetFromLocalStore = true
-      swatches = getRecentColors() || []
+      swatchesSetFromLocalStore = true;
+      swatches = getRecentColors() || [];
     }
 
     if (swatches.length > 12) {
       console.warn(
         `Colorpicker - ${swatches.length} swatches were provided. Only the first 12 swatches will be displayed.`
-      )
+      );
     }
 
     if (colorPicker) {
-      colorPicker.focus()
+      colorPicker.focus();
     }
 
     if (format) {
-      convertAndSetHSVA()
+      convertAndSetHSVA();
     }
-  })
+  });
 
   function getRecentColors() {
-    let colorStore = localStorage.getItem("cp:recent-colors")
+    let colorStore = localStorage.getItem("cp:recent-colors");
     if (colorStore) {
-      return JSON.parse(colorStore)
+      return JSON.parse(colorStore);
     }
   }
 
   function handleEscape() {
     if (open) {
-      open = false
+      open = false;
     }
   }
 
   function setRecentColors(color) {
     const s = swatchesSetFromLocalStore
       ? swatches
-      : [...getRecentColors(), color]
-    localStorage.setItem("cp:recent-colors", JSON.stringify(s))
+      : [...getRecentColors(), color];
+    localStorage.setItem("cp:recent-colors", JSON.stringify(s));
   }
 
   function convertAndSetHSVA() {
-    let hsva = convertToHSVA(value, format)
-    setHSVA(hsva)
+    let hsva = convertToHSVA(value, format);
+    setHSVA(hsva);
   }
 
   function setHSVA([hue, sat, val, alpha]) {
-    h = hue
-    s = sat
-    v = val
-    a = alpha
+    h = hue;
+    s = sat;
+    v = val;
+    a = alpha;
   }
 
   //fired by choosing a color from the palette
   function setSaturationAndValue({ detail }) {
-    s = detail.s
-    v = detail.v
-    value = convertHsvaToFormat([h, s, v, a], format)
-    dispatchValue()
+    s = detail.s;
+    v = detail.v;
+    value = convertHsvaToFormat([h, s, v, a], format);
+    dispatchValue();
   }
 
   function setHue({ color, isDrag }) {
-    h = color
-    value = convertHsvaToFormat([h, s, v, a], format)
+    h = color;
+    value = convertHsvaToFormat([h, s, v, a], format);
     if (!isDrag) {
-      dispatchValue()
+      dispatchValue();
     }
   }
 
   function setAlpha({ color, isDrag }) {
-    a = color === "1.00" ? "1" : color
-    value = convertHsvaToFormat([h, s, v, a], format)
+    a = color === "1.00" ? "1" : color;
+    value = convertHsvaToFormat([h, s, v, a], format);
     if (!isDrag) {
-      dispatchValue()
+      dispatchValue();
     }
   }
 
   function dispatchValue() {
-    dispatch("change", value)
+    dispatch("change", value);
   }
 
   function changeFormatAndConvert(f) {
-    format = f
-    value = convertHsvaToFormat([h, s, v, a], format)
+    format = f;
+    value = convertHsvaToFormat([h, s, v, a], format);
   }
 
   function handleColorInput(text) {
-    let format = getColorFormat(text)
+    let format = getColorFormat(text);
     if (format) {
-      value = text
-      convertAndSetHSVA()
+      value = text;
+      convertAndSetHSVA();
     }
   }
 
   function dispatchInputChange() {
     if (format) {
-      dispatchValue()
+      dispatchValue();
     }
   }
 
   function addSwatch() {
     if (format) {
       if (swatches.length === 12) {
-        swatches.splice(0, 1)
+        swatches.splice(0, 1);
       }
 
       if (!swatches.includes(value)) {
-        swatches = [...swatches, value]
-        setRecentColors(value)
+        swatches = [...swatches, value];
+        setRecentColors(value);
       }
 
-      dispatch("addswatch", value)
+      dispatch("addswatch", value);
     }
   }
 
   function removeSwatch(idx) {
-    let removedSwatch = swatches.splice(idx, 1)
-    swatches = swatches
-    dispatch("removeswatch", removedSwatch)
+    let removedSwatch = swatches.splice(idx, 1);
+    swatches = swatches;
+    dispatch("removeswatch", removedSwatch);
     if (swatchesSetFromLocalStore) {
       //as could be a swatch not present in local storage
-      setRecentColors()
+      setRecentColors();
     }
   }
 
   function applySwatch(color) {
     if (value !== color) {
-      format = getColorFormat(color)
+      format = getColorFormat(color);
       if (format) {
-        value = color
-        convertAndSetHSVA()
-        dispatchValue()
+        value = color;
+        convertAndSetHSVA();
+        dispatchValue();
       }
     }
   }
 
-  $: border = v > 90 && s < 5 ? "1px dashed #dedada" : ""
-  $: selectedColorStyle = buildStyle({ background: value, border })
-  $: hasSwatches = swatches.length > 0
-
+  $: border = v > 90 && s < 5 ? "1px dashed #dedada" : "";
+  $: selectedColorStyle = buildStyle({ background: value, border });
+  $: hasSwatches = swatches.length > 0;
 </script>
 
-<Portal>
-  <div
-    class="colorpicker-container"
-    use:keyevents={{ Escape: handleEscape }}
-    transition:fade
-    bind:this={colorPicker}
-    {style}
-    tabindex="0"
-    bind:clientHeight={pickerHeight}
-    bind:clientWidth={pickerWidth}>
-
-    <div class="palette-panel">
-      <Palette on:change={setSaturationAndValue} {h} {s} {v} {a} />
-    </div>
-
-    <div class="control-panel">
-      <div class="alpha-hue-panel">
-        <div>
-          <CheckedBackground borderRadius="50%" backgroundSize="8px">
-            <div
-              class="selected-color"
-              title={value}
-              style={selectedColorStyle} />
-          </CheckedBackground>
-        </div>
-        <div>
-          <Slider
-            type="hue"
-            value={h}
-            on:change={hue => setHue(hue.detail)}
-            on:dragend={dispatchValue} />
-
-          <CheckedBackground borderRadius="10px" backgroundSize="7px">
-            <Slider
-              type="alpha"
-              value={a}
-              on:change={(alpha, isDrag) => setAlpha(alpha.detail, isDrag)}
-              on:dragend={dispatchValue} />
-          </CheckedBackground>
-
-        </div>
-      </div>
-
-      {#if !disableSwatches}
-        <div transition:fade class="swatch-panel">
-          {#if hasSwatches}
-            {#each swatches as color, idx}
-              {#if idx < 12}
-                <Swatch
-                  {color}
-                  on:click={() => applySwatch(color)}
-                  on:removeswatch={() => removeSwatch(idx)} />
-              {/if}
-            {/each}
-          {/if}
-          {#if swatches.length < 12}
-            <div
-              tabindex="0"
-              use:keyevents={{ Enter: addSwatch }}
-              bind:this={adder}
-              transition:fade
-              class="adder"
-              class:shrink={hasSwatches}
-              on:click={addSwatch}>
-              <span>&plus;</span>
-            </div>
-          {/if}
-        </div>
-      {/if}
-
-      <div class="format-input-panel">
-        <ButtonGroup {format} onclick={changeFormatAndConvert} />
-        <Input
-          {value}
-          on:input={event => handleColorInput(event.target.value)}
-          on:change={dispatchInputChange} />
-      </div>
-    </div>
-
-  </div>
-</Portal>
-
 <style>
   .colorpicker-container {
     position: absolute;
@@ -347,3 +264,86 @@
     padding-top: 3px;
   }
 </style>
+
+<Portal>
+  <div
+    class="colorpicker-container"
+    use:keyevents={{ Escape: handleEscape }}
+    transition:fade
+    bind:this={colorPicker}
+    {style}
+    tabindex="0"
+    bind:clientHeight={pickerHeight}
+    bind:clientWidth={pickerWidth}>
+
+    <div class="palette-panel">
+      <Palette on:change={setSaturationAndValue} {h} {s} {v} {a} />
+    </div>
+
+    <div class="control-panel">
+      <div class="alpha-hue-panel">
+        <div>
+          <CheckedBackground borderRadius="50%" backgroundSize="8px">
+            <div
+              class="selected-color"
+              title={value}
+              style={selectedColorStyle} />
+          </CheckedBackground>
+        </div>
+        <div>
+          <Slider
+            type="hue"
+            value={h}
+            on:change={hue => setHue(hue.detail)}
+            on:dragend={dispatchValue} />
+
+          <CheckedBackground borderRadius="10px" backgroundSize="7px">
+            <Slider
+              type="alpha"
+              value={a}
+              on:change={(alpha, isDrag) => setAlpha(alpha.detail, isDrag)}
+              on:dragend={dispatchValue} />
+          </CheckedBackground>
+
+        </div>
+      </div>
+
+      {#if !disableSwatches}
+        <div transition:fade class="swatch-panel">
+          {#if hasSwatches}
+            {#each swatches as color, idx}
+              {#if idx < 12}
+                <Swatch
+                  {color}
+                  on:click={() => applySwatch(color)}
+                  on:removeswatch={() => removeSwatch(idx)} />
+              {/if}
+            {/each}
+          {/if}
+          {#if swatches.length < 12}
+            <div
+              tabindex="0"
+              title="Add Swatch"
+              use:keyevents={{ Enter: addSwatch }}
+              bind:this={adder}
+              transition:fade
+              class="adder"
+              class:shrink={hasSwatches}
+              on:click={addSwatch}>
+              <span>&plus;</span>
+            </div>
+          {/if}
+        </div>
+      {/if}
+
+      <div class="format-input-panel">
+        <ButtonGroup {format} onclick={changeFormatAndConvert} />
+        <Input
+          {value}
+          on:input={event => handleColorInput(event.target.value)}
+          on:change={dispatchInputChange} />
+      </div>
+    </div>
+
+  </div>
+</Portal>
diff --git a/packages/builder/src/components/userInterface/Colorpicker/components/Colorpreview.svelte b/packages/builder/src/components/userInterface/Colorpicker/components/Colorpreview.svelte
index a28c8d2560..f3ab6f6f22 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/components/Colorpreview.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/components/Colorpreview.svelte
@@ -1,93 +1,141 @@
 <script>
-  import Colorpicker from "./Colorpicker.svelte"
-  import CheckedBackground from "./CheckedBackground.svelte"
-  import { createEventDispatcher, beforeUpdate, onMount } from "svelte"
+  import Colorpicker from "./Colorpicker.svelte";
+  import CheckedBackground from "./CheckedBackground.svelte";
+  import { createEventDispatcher, beforeUpdate, onMount } from "svelte";
 
-  import { buildStyle, debounce } from "../helpers.js"
-  import { fade } from "svelte/transition"
-  import { getColorFormat } from "../utils.js"
+  import { buildStyle, debounce } from "../helpers.js";
+  import { fade } from "svelte/transition";
+  import { getColorFormat } from "../utils.js";
 
-  export let value = "#3ec1d3ff"
-  export let swatches = []
-  export let disableSwatches = false
-  export let open = false
-  export let width = "25px"
-  export let height = "25px"
+  export let value = "#3ec1d3ff";
+  export let swatches = [];
+  export let disableSwatches = false;
+  export let open = false;
+  export let width = "25px";
+  export let height = "25px";
 
-  let format = "hexa"
-  let dimensions = { top: 0, bottom: 0, right: 0, left: 0 }
-  let positionSide = "top"
-  let colorPreview = null
+  let format = "hexa";
+  let dimensions = { top: 0, bottom: 0, right: 0, left: 0 };
+  let positionY = "top";
+  let positionX = "left";
+  let colorPreview = null;
 
-  let previewHeight = null
-  let previewWidth = null
-  let pickerWidth = 0
-  let pickerHeight = 0
+  let previewHeight = null;
+  let previewWidth = null;
+  let pickerWidth = 0;
+  let pickerHeight = 0;
 
-  let errorMsg = null
+  let errorMsg = null;
 
-  const dispatch = createEventDispatcher()
+  const dispatch = createEventDispatcher();
 
   beforeUpdate(() => {
-    format = getColorFormat(value)
+    format = getColorFormat(value);
     if (!format) {
-      errorMsg = `Colorpicker - ${value} is an unknown color format. Please use a hex, rgb or hsl value`
-      console.error(errorMsg)
+      errorMsg = `Colorpicker - ${value} is an unknown color format. Please use a hex, rgb or hsl value`;
+      console.error(errorMsg);
     } else {
-      errorMsg = null
+      errorMsg = null;
     }
-  })
+  });
 
   function openColorpicker(event) {
     if (colorPreview) {
-      open = true
+      open = true;
     }
   }
 
   function onColorChange(color) {
-    value = color.detail
-    dispatch("change", color.detail)
+    value = color.detail;
+    dispatch("change", color.detail);
   }
 
   function calculateDimensions() {
-    const {
-      top: spaceAbove,
-      width,
-      bottom,
-      right,
-      left,
-    } = colorPreview.getBoundingClientRect()
+    if (open) {
+      const {
+        top: spaceAbove,
+        width,
+        bottom,
+        right,
+        left
+      } = colorPreview.getBoundingClientRect();
 
-    const spaceBelow = window.innerHeight - bottom
-    const previewCenter = previewWidth / 2
+      const spaceBelow = window.innerHeight - bottom;
+      const previewCenter = previewWidth / 2;
 
-    let y, x
+      let y, x;
 
-    if (spaceAbove > spaceBelow) {
-      positionSide = "bottom"
-      y = window.innerHeight - spaceAbove
-    } else {
-      positionSide = "top"
-      y = bottom
+      if (spaceAbove > spaceBelow) {
+        positionY = "bottom";
+        y = window.innerHeight - spaceAbove;
+      } else {
+        positionY = "top";
+        y = bottom;
+      }
+
+      // Centre picker by default
+      x = left + previewCenter - 220 / 2;
+
+      const spaceRight = window.innerWidth - right;
+
+      //Position picker left or right if space not available for centering
+      if (left < 110 && spaceRight > 220) {
+        positionX = "left";
+        x = right;
+      } else if (spaceRight < 100 && left > 220) {
+        positionX = "right";
+        x = document.body.clientWidth - left;
+      }
+
+      dimensions = { [positionY]: y.toFixed(1), [positionX]: x.toFixed(1) };
     }
-
-    x = left + previewCenter - 220 / 2
-
-    dimensions = { [positionSide]: y.toFixed(1), left: x.toFixed(1) }
   }
 
   $: if (open && colorPreview) {
-    calculateDimensions()
+    calculateDimensions();
   }
 
-  $: previewStyle = buildStyle({ width, height, background: value })
-  $: errorPreviewStyle = buildStyle({ width, height })
+  $: previewStyle = buildStyle({ width, height, background: value });
+  $: errorPreviewStyle = buildStyle({ width, height });
   $: pickerStyle = buildStyle({
-    [positionSide]: `${dimensions[positionSide]}px`,
-    left: `${dimensions.left}px`,
-  })
+    [positionY]: `${dimensions[positionY]}px`,
+    [positionX]: `${dimensions[positionX]}px`
+  });
 </script>
 
+<style>
+  .color-preview-container {
+    display: flex;
+    flex-flow: row nowrap;
+    height: fit-content;
+  }
+
+  .color-preview {
+    cursor: pointer;
+    border-radius: 3px;
+    border: 1px solid #dedada;
+    position: absolute;
+    left: 110px;
+  }
+
+  .preview-error {
+    background: #cccccc;
+    color: #808080;
+    text-align: center;
+    font-size: 18px;
+    cursor: not-allowed;
+  }
+
+  .overlay {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 2;
+  }
+</style>
+
 <svelte:window on:resize={debounce(calculateDimensions, 200)} />
 
 <div class="color-preview-container">
@@ -127,41 +175,3 @@
     </div>
   {/if}
 </div>
-
-<style>
-  .color-preview-container {
-    display: flex;
-    flex-flow: row nowrap;
-    height: fit-content;
-  }
-
-  .color-preview {
-    cursor: pointer;
-    border-radius: 3px;
-    border: 1px solid #dedada;
-  }
-
-  .preview-error {
-    background: #cccccc;
-    color: #808080;
-    text-align: center;
-    font-size: 18px;
-    cursor: not-allowed;
-  }
-
-  /* .picker-container {
-    position: absolute;
-    z-index: 3;
-    width: fit-content;
-    height: fit-content;
-  } */
-
-  .overlay {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    z-index: 2;
-  }
-</style>