From b7285e010879ff897e9567d9982559a714f47cbb Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Mon, 29 Jun 2020 16:32:51 +0100
Subject: [PATCH 1/4] WIP Form Component Design Update

Wide form added
Boolean button fixed
---
 .../userInterface/temporaryPanelStructure.js  |  51 +++++--
 packages/standard-components/components.json  |   7 +
 .../src/DataFormWide.svelte                   | 142 ++++++++++++++++++
 packages/standard-components/src/index.js     |   1 +
 4 files changed, 189 insertions(+), 12 deletions(-)
 create mode 100644 packages/standard-components/src/DataFormWide.svelte

diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index e2c4044fb6..764daef972 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -321,17 +321,44 @@ export default {
           name: "Form",
           description: "A component that generates a form from your data.",
           icon: "ri-file-edit-fill",
-          properties: {
-            design: { ...all },
-            settings: [{ label: "Model", key: "model", control: ModelSelect }],
-          },
-          _component: "@budibase/standard-components/dataform",
-          template: {
-            component: "@budibase/materialdesign-components/Form",
-            description: "Form for saving a record",
-            name: "@budibase/materialdesign-components/recordForm",
-          },
-          children: [],
+          commonProps: {},
+          children: [
+            {
+              _component: "@budibase/standard-components/dataform",
+              name: "Form Basic",
+              icon: "ri-file-edit-fill",
+              properties: {
+                design: { ...all },
+                settings: [
+                  {
+                    label: "Model",
+                    key: "model",
+                    control: ModelSelect,
+                  },
+                ],
+              },
+              template: {
+                component: "@budibase/materialdesign-components/Form",
+                description: "Form for saving a record",
+                name: "@budibase/materialdesign-components/recordForm",
+              },
+            },
+            {
+              _component: "@budibase/standard-components/dataformwide",
+              name: "Form Wide",
+              icon: "ri-file-edit-fill",
+              properties: {
+                design: { ...all },
+                settings: [
+                  {
+                    label: "Model",
+                    key: "model",
+                    control: ModelSelect,
+                  },
+                ],
+              },
+            },
+          ],
         },
         {
           name: "Chart",
@@ -431,4 +458,4 @@ export default {
       ],
     },
   ],
-}
+}
\ No newline at end of file
diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json
index c4c0246672..8df7756499 100644
--- a/packages/standard-components/components.json
+++ b/packages/standard-components/components.json
@@ -209,6 +209,13 @@
 			"model": "models"
 		}
 	},
+	"dataformwide": {
+		"description": "an HTML table that fetches data from a model or view and displays it.",
+		"data": true,
+		"props": {
+			"model": "models"
+		}
+	},
 	"datalist": {
 		"description": "A configurable data list that attaches to your backend models.",
 		"data": true,
diff --git a/packages/standard-components/src/DataFormWide.svelte b/packages/standard-components/src/DataFormWide.svelte
new file mode 100644
index 0000000000..44c7aef4e2
--- /dev/null
+++ b/packages/standard-components/src/DataFormWide.svelte
@@ -0,0 +1,142 @@
+<script>
+  import { onMount } from "svelte"
+  export let _bb
+  export let model
+
+  const TYPE_MAP = {
+    string: "text",
+    boolean: "checkbox",
+    number: "number"
+  }
+
+  let username
+  let password
+  let newModel = {
+    modelId: model,
+  }
+  let store = _bb.store
+  let schema = {}
+  let modelDef = {}
+  $: if (model && model.length !== 0) {
+    fetchModel()
+  }
+  $: fields = Object.keys(schema)
+  async function fetchModel() {
+    const FETCH_MODEL_URL = `/api/models/${model}`
+    const response = await _bb.api.get(FETCH_MODEL_URL)
+    modelDef = await response.json()
+    schema = modelDef.schema
+  }
+  async function save() {
+    const SAVE_RECORD_URL = `/api/${model}/records`
+    const response = await _bb.api.post(SAVE_RECORD_URL, newModel)
+    const json = await response.json()
+    store.update(state => {
+      state[model] = state[model] ? [...state[model], json] : [json]
+      return state
+    })
+  }
+  const handleInput = field => event => {
+    let value
+    if (event.target.type === "checkbox") {
+      value = event.target.checked
+      newModel[field] = value
+      return
+    }
+    if (event.target.type === "number") {
+      value = parseInt(event.target.value)
+      newModel[field] = value
+      return
+    }
+    value = event.target.value
+    newModel[field] = value
+  }
+</script>
+<form class="form" on:submit|preventDefault>
+  <h1>{modelDef.name} Form</h1>
+  <hr />
+  <div class="form-content">
+    {#each fields as field}
+      <div class="form-item">
+        <label class="form-label" for="form-stacked-text">{field}</label>
+        <input
+          class="input"
+          placeholder={field}
+          type={TYPE_MAP[schema[field].type]}
+          on:change={handleInput(field)} />
+      </div>
+      <hr />
+    {/each}
+    <div class="button-block">
+      <button on:click={save}>Submit Form</button>
+    </div>
+  </div>
+</form>
+<style>
+  .form {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin: auto;
+    padding: 40px;
+  }
+  .form-content {
+    margin-bottom: 20px;
+  }
+  .input {
+    height: 40px;
+    border-radius: 5px;
+    border: 1px solid #e6e6e6;
+    padding: 6px 12px 6px 12px;
+    font-size: 16px;
+  }
+    .input::placeholder {
+      color: #cccccc;
+    }
+  .form-item {
+    display: grid;
+    grid-template-columns: 30% 1fr;
+    margin-bottom: 16px;
+    align-items: center;
+    gap: 1em;
+  }
+
+  hr {
+    border: 1px solid #f5f5f5;
+    margin: 40px 0px;
+  }
+  hr:nth-last-child(2) {
+    border: 1px solid #f5f5f5;
+    margin: 40px 0px;
+  }
+  .button-block {
+    display: flex;
+    justify-content: flex-end;
+  }
+  button {
+    font-size: 16px;
+    padding: 8px 16px;
+    box-sizing: border-box;
+    border-radius: 4px;
+    color: white;
+    background-color: #393c44;
+    outline: none;
+    height: 40px;
+    cursor: pointer;
+    transition: all 0.2s ease 0s;
+    overflow: hidden;
+    outline: none;
+    user-select: none;
+    white-space: nowrap;
+    text-align: center;
+  }
+  button:hover {
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); 
+  }
+
+input[type=checkbox] {
+    transform: scale(2);
+    cursor: pointer;
+}
+
+</style> 
\ No newline at end of file
diff --git a/packages/standard-components/src/index.js b/packages/standard-components/src/index.js
index 24342066e8..37d6abab74 100644
--- a/packages/standard-components/src/index.js
+++ b/packages/standard-components/src/index.js
@@ -16,6 +16,7 @@ export { default as icon } from "./Icon.svelte"
 export { default as Navigation } from "./Navigation.svelte"
 export { default as datatable } from "./DataTable.svelte"
 export { default as dataform } from "./DataForm.svelte"
+export { default as dataformwide } from "./DataFormWide.svelte"
 export { default as datachart } from "./DataChart.svelte"
 export { default as datalist } from "./DataList.svelte"
 export { default as list } from "./List.svelte"

From c015544959fe2b5e62c2716945b1411556e72098 Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Mon, 29 Jun 2020 19:54:30 +0100
Subject: [PATCH 2/4] Updated the basic form with boolean and select fix

---
 .../standard-components/src/DataForm.svelte   | 70 ++++++++++++++++---
 .../src/DataFormWide.svelte                   | 57 +++++++++++----
 2 files changed, 103 insertions(+), 24 deletions(-)

diff --git a/packages/standard-components/src/DataForm.svelte b/packages/standard-components/src/DataForm.svelte
index 1510110ba9..938077371b 100644
--- a/packages/standard-components/src/DataForm.svelte
+++ b/packages/standard-components/src/DataForm.svelte
@@ -4,6 +4,12 @@
   export let _bb
   export let model
 
+  const TYPE_MAP = {
+    string: "text",
+    boolean: "checkbox",
+    number: "number"
+  }
+
   let username
   let password
   let newModel = {
@@ -59,15 +65,23 @@
 
 <form class="form" on:submit|preventDefault>
   <h1>{modelDef.name} Form</h1>
+  <hr />
   <div class="form-content">
     {#each fields as field}
       <div class="form-item">
         <label class="form-label" for="form-stacked-text">{field}</label>
-        <input
-          class="input"
-          placeholder={field}
-          type={schema[field].type === 'string' ? 'text' : schema[field].type}
-          on:change={handleInput(field)} />
+        {#if schema[field].type === "string" && schema[field].constraints.inclusion}
+          <select on:blur={handleInput(field)}>
+            {#each schema[field].constraints.inclusion as opt}
+            <option>{opt}</option>
+            {/each}
+          </select>
+        {:else}
+          <input
+            class="input"
+            type={TYPE_MAP[schema[field].type]}
+            on:change={handleInput(field)} />
+        {/if}
       </div>
       <hr />
     {/each}
@@ -142,9 +156,45 @@
     text-align: center;
   }
 
-  button:hover {
-    background-color: white;
-    border-color: #393c44;
-    color: #393c44;
-  }
+  
+button:hover {
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); 
+}
+
+input[type=checkbox] {
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  margin: 0;
+  vertical-align: bottom;
+  position: relative;
+  top: -1px;
+  *overflow: hidden;
+
+}
+
+select::-ms-expand {
+  display: none;
+}
+select {
+  display: inline-block;
+  cursor: pointer;
+  align-items: baseline;
+  box-sizing: border-box;
+  padding: 1em 1em;
+  border: 1px solid #eaeaea;
+  border-radius: 5px;
+  font: inherit;
+  line-height: inherit;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  background-repeat: no-repeat;
+  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
+  background-position: right 17px top 1.5em, right 10px top 1.5em;
+  background-size: 7px 7px, 7px 7px;
+}
+
+
 </style>
diff --git a/packages/standard-components/src/DataFormWide.svelte b/packages/standard-components/src/DataFormWide.svelte
index 44c7aef4e2..78cc1f4dc2 100644
--- a/packages/standard-components/src/DataFormWide.svelte
+++ b/packages/standard-components/src/DataFormWide.svelte
@@ -59,11 +59,18 @@
     {#each fields as field}
       <div class="form-item">
         <label class="form-label" for="form-stacked-text">{field}</label>
-        <input
-          class="input"
-          placeholder={field}
-          type={TYPE_MAP[schema[field].type]}
-          on:change={handleInput(field)} />
+        {#if schema[field].type === "string" && schema[field].constraints.inclusion}
+          <select on:blur={handleInput(field)}>
+            {#each schema[field].constraints.inclusion as opt}
+            <option>{opt}</option>
+            {/each}
+          </select>
+        {:else}
+          <input
+            class="input"
+            type={TYPE_MAP[schema[field].type]}
+            on:change={handleInput(field)} />
+        {/if}
       </div>
       <hr />
     {/each}
@@ -84,15 +91,12 @@
     margin-bottom: 20px;
   }
   .input {
-    height: 40px;
     border-radius: 5px;
     border: 1px solid #e6e6e6;
-    padding: 6px 12px 6px 12px;
+    padding: 1em;
     font-size: 16px;
   }
-    .input::placeholder {
-      color: #cccccc;
-    }
+
   .form-item {
     display: grid;
     grid-template-columns: 30% 1fr;
@@ -119,7 +123,7 @@
     box-sizing: border-box;
     border-radius: 4px;
     color: white;
-    background-color: #393c44;
+    background-color: black;
     outline: none;
     height: 40px;
     cursor: pointer;
@@ -130,13 +134,38 @@
     white-space: nowrap;
     text-align: center;
   }
-  button:hover {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); 
-  }
+
+button:hover {
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); 
+}
 
 input[type=checkbox] {
     transform: scale(2);
     cursor: pointer;
 }
 
+select::-ms-expand {
+  display: none;
+}
+select {
+  cursor: pointer;
+  display: inline-block;
+  align-items: baseline;
+  box-sizing: border-box;
+  padding: 1em 1em;
+  border: 1px solid #eaeaea;
+  border-radius: 5px;
+  font: inherit;
+  line-height: inherit;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  background-repeat: no-repeat;
+  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
+  background-position: right 17px top 1.5em, right 10px top 1.5em;
+  background-size: 7px 7px, 7px 7px;
+}
+
+
 </style> 
\ No newline at end of file

From 66a7d24ea2f36e5e8d8b38a4e71c5f6dc269b2ff Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Mon, 29 Jun 2020 19:55:27 +0100
Subject: [PATCH 3/4] Formatting and linting done

---
 .../userInterface/temporaryPanelStructure.js  |  2 +-
 .../standard-components/src/DataForm.svelte   | 82 +++++++++----------
 .../src/DataFormWide.svelte                   | 68 +++++++--------
 3 files changed, 76 insertions(+), 76 deletions(-)

diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index 764daef972..ae39ce3ee2 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -458,4 +458,4 @@ export default {
       ],
     },
   ],
-}
\ No newline at end of file
+}
diff --git a/packages/standard-components/src/DataForm.svelte b/packages/standard-components/src/DataForm.svelte
index 938077371b..389ce0ecd2 100644
--- a/packages/standard-components/src/DataForm.svelte
+++ b/packages/standard-components/src/DataForm.svelte
@@ -7,7 +7,7 @@
   const TYPE_MAP = {
     string: "text",
     boolean: "checkbox",
-    number: "number"
+    number: "number",
   }
 
   let username
@@ -70,10 +70,10 @@
     {#each fields as field}
       <div class="form-item">
         <label class="form-label" for="form-stacked-text">{field}</label>
-        {#if schema[field].type === "string" && schema[field].constraints.inclusion}
+        {#if schema[field].type === 'string' && schema[field].constraints.inclusion}
           <select on:blur={handleInput(field)}>
             {#each schema[field].constraints.inclusion as opt}
-            <option>{opt}</option>
+              <option>{opt}</option>
             {/each}
           </select>
         {:else}
@@ -156,45 +156,43 @@
     text-align: center;
   }
 
-  
-button:hover {
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); 
-}
-
-input[type=checkbox] {
-  width: 32px;
-  height: 32px;
-  padding: 0;
-  margin: 0;
-  vertical-align: bottom;
-  position: relative;
-  top: -1px;
-  *overflow: hidden;
-
-}
-
-select::-ms-expand {
-  display: none;
-}
-select {
-  display: inline-block;
-  cursor: pointer;
-  align-items: baseline;
-  box-sizing: border-box;
-  padding: 1em 1em;
-  border: 1px solid #eaeaea;
-  border-radius: 5px;
-  font: inherit;
-  line-height: inherit;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  -ms-appearance: none;
-  appearance: none;
-  background-repeat: no-repeat;
-  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
-  background-position: right 17px top 1.5em, right 10px top 1.5em;
-  background-size: 7px 7px, 7px 7px;
-}
+  button:hover {
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+      0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  }
 
+  input[type="checkbox"] {
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    margin: 0;
+    vertical-align: bottom;
+    position: relative;
+    top: -1px;
+    *overflow: hidden;
+  }
 
+  select::-ms-expand {
+    display: none;
+  }
+  select {
+    display: inline-block;
+    cursor: pointer;
+    align-items: baseline;
+    box-sizing: border-box;
+    padding: 1em 1em;
+    border: 1px solid #eaeaea;
+    border-radius: 5px;
+    font: inherit;
+    line-height: inherit;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    -ms-appearance: none;
+    appearance: none;
+    background-repeat: no-repeat;
+    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
+      linear-gradient(135deg, currentColor 50%, transparent 50%);
+    background-position: right 17px top 1.5em, right 10px top 1.5em;
+    background-size: 7px 7px, 7px 7px;
+  }
 </style>
diff --git a/packages/standard-components/src/DataFormWide.svelte b/packages/standard-components/src/DataFormWide.svelte
index 78cc1f4dc2..f712c787de 100644
--- a/packages/standard-components/src/DataFormWide.svelte
+++ b/packages/standard-components/src/DataFormWide.svelte
@@ -6,7 +6,7 @@
   const TYPE_MAP = {
     string: "text",
     boolean: "checkbox",
-    number: "number"
+    number: "number",
   }
 
   let username
@@ -52,6 +52,7 @@
     newModel[field] = value
   }
 </script>
+
 <form class="form" on:submit|preventDefault>
   <h1>{modelDef.name} Form</h1>
   <hr />
@@ -59,10 +60,10 @@
     {#each fields as field}
       <div class="form-item">
         <label class="form-label" for="form-stacked-text">{field}</label>
-        {#if schema[field].type === "string" && schema[field].constraints.inclusion}
+        {#if schema[field].type === 'string' && schema[field].constraints.inclusion}
           <select on:blur={handleInput(field)}>
             {#each schema[field].constraints.inclusion as opt}
-            <option>{opt}</option>
+              <option>{opt}</option>
             {/each}
           </select>
         {:else}
@@ -79,6 +80,7 @@
     </div>
   </div>
 </form>
+
 <style>
   .form {
     display: flex;
@@ -135,37 +137,37 @@
     text-align: center;
   }
 
-button:hover {
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); 
-}
+  button:hover {
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+      0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  }
 
-input[type=checkbox] {
+  input[type="checkbox"] {
     transform: scale(2);
     cursor: pointer;
-}
+  }
 
-select::-ms-expand {
-  display: none;
-}
-select {
-  cursor: pointer;
-  display: inline-block;
-  align-items: baseline;
-  box-sizing: border-box;
-  padding: 1em 1em;
-  border: 1px solid #eaeaea;
-  border-radius: 5px;
-  font: inherit;
-  line-height: inherit;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  -ms-appearance: none;
-  appearance: none;
-  background-repeat: no-repeat;
-  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
-  background-position: right 17px top 1.5em, right 10px top 1.5em;
-  background-size: 7px 7px, 7px 7px;
-}
-
-
-</style> 
\ No newline at end of file
+  select::-ms-expand {
+    display: none;
+  }
+  select {
+    cursor: pointer;
+    display: inline-block;
+    align-items: baseline;
+    box-sizing: border-box;
+    padding: 1em 1em;
+    border: 1px solid #eaeaea;
+    border-radius: 5px;
+    font: inherit;
+    line-height: inherit;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    -ms-appearance: none;
+    appearance: none;
+    background-repeat: no-repeat;
+    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
+      linear-gradient(135deg, currentColor 50%, transparent 50%);
+    background-position: right 17px top 1.5em, right 10px top 1.5em;
+    background-size: 7px 7px, 7px 7px;
+  }
+</style>

From 90c70e85ee33786b7158771897797173dae3741b Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Tue, 30 Jun 2020 13:08:58 +0100
Subject: [PATCH 4/4] Colorpicker - Portal and Centering

---
 .../Colorpicker/Colorpicker.svelte            | 146 ++++++++++--------
 .../Colorpicker/Colorpreview.svelte           | 116 ++++++--------
 .../userInterface/Colorpicker/Portal.svelte   |  37 +++++
 .../[application]/frontend/_layout.svelte     |   1 -
 4 files changed, 168 insertions(+), 132 deletions(-)
 create mode 100644 packages/builder/src/components/userInterface/Colorpicker/Portal.svelte

diff --git a/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte b/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
index 2ae31385aa..27b5e20b5b 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
@@ -13,16 +13,18 @@
   import Palette from "./Palette.svelte"
   import ButtonGroup from "./ButtonGroup.svelte"
   import Input from "./Input.svelte"
+  import Portal from "./Portal.svelte"
 
   export let value = "#3ec1d3ff"
+  export let open = false;
   export let swatches = [] //TODO: Safe swatches - limit to 12. warn in console
   export let disableSwatches = false
   export let format = "hexa"
-  export let open = false
-
+  export let style = ""
   export let pickerHeight = 0
   export let pickerWidth = 0
 
+  let colorPicker = null
   let adder = null
 
   let h = null
@@ -38,6 +40,10 @@
       getRecentColors()
     }
 
+    if(colorPicker) {
+      colorPicker.focus()
+    }
+
     if (format) {
       convertAndSetHSVA()
     }
@@ -50,6 +56,12 @@
     }
   }
 
+  function handleEscape(e) {
+    if(open && e.key === "Escape") {
+      open = false
+    }
+  }
+
   function setRecentColor(color) {
     if (swatches.length === 12) {
       swatches.splice(0, 1)
@@ -145,85 +157,97 @@
   }
 
   $: border = v > 90 && s < 5 ? "1px dashed #dedada" : ""
-  $: style = buildStyle({ background: value, border })
+  $: selectedColorStyle = buildStyle({ background: value, border })
   $: shrink = swatches.length > 0
+  
 </script>
 
-<div
-  class="colorpicker-container"
-  bind:clientHeight={pickerHeight}
-  bind:clientWidth={pickerWidth}>
 
-  <div class="palette-panel">
-    <Palette on:change={setSaturationAndValue} {h} {s} {v} {a} />
-  </div>
+<Portal>
+  <div
+    class="colorpicker-container"
+    transition:fade
+    bind:this={colorPicker}
+    {style}
+    tabindex="0"
+    on:keydown={handleEscape}
+    bind:clientHeight={pickerHeight}
+    bind:clientWidth={pickerWidth}>
 
-  <div class="control-panel">
-    <div class="alpha-hue-panel">
-      <div>
-        <CheckedBackground borderRadius="50%" backgroundSize="8px">
-          <div class="selected-color" {style} />
-        </CheckedBackground>
-      </div>
-      <div>
-        <Slider
-          type="hue"
-          value={h}
-          on:change={hue => setHue(hue.detail)}
-          on:dragend={dispatchValue} />
+    <div class="palette-panel">
+      <Palette on:change={setSaturationAndValue} {h} {s} {v} {a} />
+    </div>
 
-        <CheckedBackground borderRadius="10px" backgroundSize="7px">
+    <div class="control-panel">
+      <div class="alpha-hue-panel">
+        <div>
+          <CheckedBackground borderRadius="50%" backgroundSize="8px">
+            <div class="selected-color" style={selectedColorStyle} />
+          </CheckedBackground>
+        </div>
+        <div>
           <Slider
-            type="alpha"
-            value={a}
-            on:change={(alpha, isDrag) => setAlpha(alpha.detail, isDrag)}
+            type="hue"
+            value={h}
+            on:change={hue => setHue(hue.detail)}
             on:dragend={dispatchValue} />
-        </CheckedBackground>
 
+          <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 swatches.length > 0}
+            {#each swatches as color, idx}
+              <Swatch
+                {color}
+                on:click={() => applySwatch(color)}
+                on:removeswatch={() => removeSwatch(idx)} />
+            {/each}
+          {/if}
+          {#if swatches.length !== 12}
+            <div
+              bind:this={adder}
+              transition:fade
+              class="adder"
+              on:click={addSwatch}
+              class:shrink>
+              <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>
 
-    {#if !disableSwatches}
-      <div transition:fade class="swatch-panel">
-        {#if swatches.length > 0}
-          {#each swatches as color, idx}
-            <Swatch
-              {color}
-              on:click={() => applySwatch(color)}
-              on:removeswatch={() => removeSwatch(idx)} />
-          {/each}
-        {/if}
-        {#if swatches.length !== 12}
-          <div
-            bind:this={adder}
-            transition:fade
-            class="adder"
-            on:click={addSwatch}
-            class:shrink>
-            <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;
+    outline: none;
+    z-index: 3;
     display: flex;
     font-size: 11px;
     font-weight: 400;
     flex-direction: column;
-    /* height: 265px; */
+    margin: 5px 0px;
     height: auto;
     width: 220px;
     background: #ffffff;
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte b/packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte
index 72da43181e..fc85b12f30 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte
@@ -1,7 +1,7 @@
 <script>
   import Colorpicker from "./Colorpicker.svelte"
   import CheckedBackground from "./CheckedBackground.svelte"
-  import { createEventDispatcher, afterUpdate, beforeUpdate } from "svelte"
+  import { createEventDispatcher, beforeUpdate } from "svelte"
 
   import { buildStyle } from "./helpers.js"
   import { fade } from "svelte/transition"
@@ -15,7 +15,8 @@
   export let height = "25px"
 
   let format = "hexa"
-  let dimensions = { top: 0, left: 0 }
+  let dimensions = { top: 0, bottom: 0, right: 0, left: 0 }
+  let positionSide = "top"
   let colorPreview = null
 
   let previewHeight = null
@@ -23,17 +24,8 @@
   let pickerWidth = 0
   let pickerHeight = 0
 
-  let anchorEl = null
-  let parentNodes = []
   let errorMsg = null
 
-  $: previewStyle = buildStyle({ width, height, background: value })
-  $: errorPreviewStyle = buildStyle({ width, height })
-  $: pickerStyle = buildStyle({
-    top: `${dimensions.top}px`,
-    left: `${dimensions.left}px`,
-  })
-
   const dispatch = createEventDispatcher()
 
   beforeUpdate(() => {
@@ -46,25 +38,6 @@
     }
   })
 
-  afterUpdate(() => {
-    if (colorPreview && colorPreview.offsetParent && !anchorEl) {
-      //Anchor relative to closest positioned ancestor element. If none, then anchor to body
-      anchorEl = colorPreview.offsetParent
-      let curEl = colorPreview
-      let els = []
-      //Travel up dom tree from preview element to find parent elements that scroll
-      while (!anchorEl.isSameNode(curEl)) {
-        curEl = curEl.parentNode
-        let elOverflow = window
-          .getComputedStyle(curEl)
-          .getPropertyValue("overflow")
-        if (/scroll|auto/.test(elOverflow)) {
-          els.push(curEl)
-        }
-      }
-      parentNodes = els
-    }
-  })
 
   function openColorpicker(event) {
     if (colorPreview) {
@@ -72,43 +45,45 @@
     }
   }
 
-  $: if (open && colorPreview) {
+  function onColorChange(color) {
+    value = color.detail
+    dispatch("change", color.detail)
+  }
+
+  $: if(open && colorPreview) {
     const {
       top: spaceAbove,
       width,
       bottom,
       right,
-      left: spaceLeft,
+      left,
     } = colorPreview.getBoundingClientRect()
-    const { innerHeight, innerWidth } = window
 
-    const { offsetLeft, offsetTop } = colorPreview
-    //get the scrollTop value for all scrollable parent elements
-    let scrollTop = parentNodes.reduce(
-      (scrollAcc, el) => (scrollAcc += el.scrollTop),
-      0
-    )
+    const spaceBelow = window.innerHeight - bottom
+    const previewCenter = previewWidth / 2
 
-    const spaceBelow = innerHeight - spaceAbove - previewHeight
-    const top =
-      spaceAbove > spaceBelow
-        ? offsetTop - pickerHeight - scrollTop
-        : offsetTop + previewHeight - scrollTop
+    let y, x;
 
-    //TOO: Testing and Scroll Awareness for x Scroll
-    const spaceRight = innerWidth - spaceLeft + previewWidth
-    const left =
-      spaceRight > spaceLeft
-        ? offsetLeft + previewWidth
-        : offsetLeft - pickerWidth
+    if(spaceAbove > spaceBelow) {
+      positionSide = "bottom"
+      y = (window.innerHeight - spaceAbove)
+    }else{
+      positionSide = "top"
+      y = bottom
+    }
 
-    dimensions = { top, left }
+    x = (left + previewCenter) - (pickerWidth / 2)
+
+    dimensions = { [positionSide]: y.toFixed(1), left: x.toFixed(1) }
   }
 
-  function onColorChange(color) {
-    value = color.detail
-    dispatch("change", color.detail)
-  }
+  $: previewStyle = buildStyle({ width, height, background: value })
+  $: errorPreviewStyle = buildStyle({ width, height })
+  $: pickerStyle = buildStyle({
+    [positionSide]: `${dimensions[positionSide]}px`,
+    left: `${dimensions.left}px`,
+  })
+  
 </script>
 
 <div class="color-preview-container">
@@ -124,19 +99,19 @@
     </CheckedBackground>
 
     {#if open}
-      <div transition:fade class="picker-container" style={pickerStyle}>
-        <Colorpicker
-          on:change={onColorChange}
-          on:addswatch
-          on:removeswatch
-          bind:format
-          bind:value
-          bind:pickerHeight
-          bind:pickerWidth
-          {swatches}
-          {disableSwatches}
-          {open} />
-      </div>
+    <Colorpicker
+      style={pickerStyle}
+      on:change={onColorChange}
+      on:addswatch
+      on:removeswatch
+      bind:format
+      bind:value
+      bind:pickerHeight
+      bind:pickerWidth
+      bind:open
+      {swatches}
+      {disableSwatches}
+       />
       <div on:click|self={() => (open = false)} class="overlay" />
     {/if}
   {:else}
@@ -154,6 +129,7 @@
   }
 
   .color-preview {
+    cursor: pointer;
     border-radius: 3px;
     border: 1px solid #dedada;
   }
@@ -166,12 +142,12 @@
     cursor: not-allowed;
   }
 
-  .picker-container {
+  /* .picker-container {
     position: absolute;
     z-index: 3;
     width: fit-content;
     height: fit-content;
-  }
+  } */
 
   .overlay {
     position: fixed;
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Portal.svelte b/packages/builder/src/components/userInterface/Colorpicker/Portal.svelte
new file mode 100644
index 0000000000..9af289175a
--- /dev/null
+++ b/packages/builder/src/components/userInterface/Colorpicker/Portal.svelte
@@ -0,0 +1,37 @@
+<script>
+  import { onMount } from "svelte";
+
+  export let target = document.body;
+
+  let targetEl;
+  let portal;
+  let componentInstance;
+
+  onMount(() => {
+    if (typeof target === "string") {
+      targetEl = document.querySelector(target);
+      // Force exit
+      if (targetEl === null) {
+        return () => {};
+      }
+    } else if (target instanceof HTMLElement) {
+      targetEl = target;
+    } else {
+      throw new TypeError(
+        `Unknown target type: ${typeof target}. Allowed types: String (CSS selector), HTMLElement.`
+      );
+    }
+
+    portal = document.createElement("div");
+    targetEl.appendChild(portal);
+    portal.appendChild(componentInstance);
+
+    return () => {
+      targetEl.removeChild(portal);
+    };
+  });
+</script>
+
+<div bind:this={componentInstance}>
+  <slot />
+</div>
diff --git a/packages/builder/src/pages/[application]/frontend/_layout.svelte b/packages/builder/src/pages/[application]/frontend/_layout.svelte
index 87b064addf..d0569fc7c8 100644
--- a/packages/builder/src/pages/[application]/frontend/_layout.svelte
+++ b/packages/builder/src/pages/[application]/frontend/_layout.svelte
@@ -88,7 +88,6 @@
     padding: 0;
     display: flex;
     flex-direction: column;
-    z-index: 5;
   }
 
   .preview-pane {