Merge pull request #366 from Budibase/property-panel/colorpicker

UI Updates for Colorpicker Component

packages/builder/src/components/userInterface/Colorpicker/ButtonGroup.svelte

@@ -12,8 +12,10 @@
     font-weight: 500;
     display: flex;
     flex-flow: row nowrap;
-    width: 100%;
     justify-content: center;
+    width: 170px;
+    height: 30px;
+    align-self: center;
   }
 </style>
 

packages/builder/src/components/userInterface/Colorpicker/CheckedBackground.svelte

@@ -0,0 +1,23 @@
+<script>
+    import {buildStyle} from "./helpers.js"
+
+    export let backgroundSize = "10px"
+    export let borderRadius = ""
+    export let height = ""
+    export let width = ""
+
+    $: style = buildStyle({backgroundSize, borderRadius, height, width})
+
+</script>
+
+<style>
+  div {
+    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;
+  }
+</style>
+
+<div {style}>
+    <slot />
+</div>

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

@@ -1,6 +1,7 @@
 <script>
   import { onMount, createEventDispatcher } from "svelte";
-
+  import CheckedBackground from "./CheckedBackground.svelte"
+  import {buildStyle} from "./helpers.js"
   import {
     getColorFormat,
     convertToHSVA,
@@ -59,7 +60,6 @@
 
   function changeFormatAndConvert(f) {
     format = f;
-    console.log(f)
     value = convertHsvaToFormat([h, s, v, a], format);
   }
 
@@ -73,6 +73,8 @@
     }
   }
 
+    $: border = s < 10 ? "1px dashed #dedada" : ""
+    $: style = buildStyle({background: value, border})
 </script>
 
 <style>
@@ -81,19 +83,25 @@
     font-size: 11px;
     font-weight: 400;
     flex-direction: column;
-    height: 300px;
+    height: 265px;
-    width: 250px;
+    width: 220px;
     background: #ffffff;
     border-radius: 2px;
     box-shadow: 0 0.15em 1.5em 0 rgba(0,0,0,.1), 0 0 1em 0 rgba(0,0,0,.03);
   }
 
+  .palette-panel {
+    flex: 1;
+  }
+
   .control-panel {
+    flex: 1;
     display: flex;
     flex-direction: column;
     padding: 8px;
     background: white;
-    border: 1px solid #d2d2d2
+    border: 1px solid #d2d2d2;
+    color: #777373;
   }
 
   .alpha-hue-panel {
@@ -108,7 +116,6 @@
     width: 30px;
     height: 30px;
     border-radius: 50%;
-    border: 1px solid #dedada;
   }
 
   .format-input-panel {
@@ -120,19 +127,27 @@
 
 <div class="colorpicker-container">
 
-  <Palette on:change={setSaturationAndValue} {h} {s} {v} {a} />
+  <div class="palette-panel">
+    <Palette on:change={setSaturationAndValue} {h} {s} {v} {a} />
+  </div>
 
   <div class="control-panel">
     <div class="alpha-hue-panel">
       <div>
-        <div class="selected-color" style={`background: ${value}`} />
+        <CheckedBackground borderRadius="50%" backgroundSize="8px">
+          <div class="selected-color" {style} />
+        </CheckedBackground>
       </div>
       <div>
         <Slider type="hue" value={h} on:change={hue => setHue(hue.detail)} />
-        <Slider
+
-          type="alpha"
+        <CheckedBackground borderRadius="10px" backgroundSize="7px">
-          value={a}
+          <Slider
-          on:change={alpha => setAlpha(alpha.detail)} />
+            type="alpha"
+            value={a}
+            on:change={alpha => setAlpha(alpha.detail)} />
+        </CheckedBackground>
+        
       </div>
     </div>
 

packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte

@@ -1,5 +1,6 @@
 <script>
     import Colorpicker from "./Colorpicker.svelte"
+    import CheckedBackground from "./CheckedBackground.svelte"
     import {createEventDispatcher, afterUpdate, beforeUpdate} from "svelte"
     import {buildStyle} from "./helpers.js"
     import { fade } from 'svelte/transition';
@@ -72,7 +73,7 @@
             
             //TOO: Testing and Scroll Awareness for x Scroll
             const spaceRight = (innerWidth - spaceLeft) + previewWidth
-            const left = spaceRight > spaceLeft ? (offsetLeft + previewWidth) + pickerWidth : offsetLeft - pickerWidth
+            const left = spaceRight > spaceLeft ? (offsetLeft + previewWidth) : offsetLeft - pickerWidth
 
             dimensions = {top, left}
 
@@ -88,7 +89,10 @@
 
 <div class="color-preview-container">
     {#if !errorMsg}
-        <div bind:this={colorPreview} bind:clientHeight={previewHeight} bind:clientWidth={previewWidth} class="color-preview" style={previewStyle} on:click={openColorpicker}></div>
+        <CheckedBackground borderRadius="3px" backgroundSize="8px">
+            <div bind:this={colorPreview} bind:clientHeight={previewHeight} bind:clientWidth={previewWidth} class="color-preview" style={previewStyle} on:click={openColorpicker} />        
+        </CheckedBackground>
+
         {#if open}
         <div class="picker-container" bind:clientHeight={pickerHeight} bind:clientWidth={pickerWidth} style={pickerStyle}>
             <Colorpicker on:change={onColorChange} {format} {value} />
@@ -111,9 +115,8 @@
     }
 
     .color-preview {
-        flex: 1;
         border-radius: 3px;
-        border: 1px solid #dedada;
+        border: 1px solid #dedada;        
     }
 
     .preview-error {

packages/builder/src/components/userInterface/Colorpicker/FlatButton.svelte

@@ -5,15 +5,18 @@
 
 <style>
   .flatbutton {
-    padding: 3px 15px;
     cursor: pointer;
-    color: black;
-    background-color: #dadada;
     border: 1px solid #d4d4d4;
     border-radius: 8px;
     text-transform: uppercase;
     margin: 5px;
     transition: all 0.3s;
+    font-size: 10px;
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: #f1f3f4;
   }
 
   .selected {

packages/builder/src/components/userInterface/Colorpicker/Input.svelte

@@ -10,16 +10,16 @@
   }
 
   input {
-    width: 185px;
+    width: 175px;
-    font-size: 14px;
+    font-size: 13px;
     background: #f1f3f4;
     border-radius: 8px;
-    height: 27px;
+    height: 20px;
     outline-color: #003cb0;
-    color: #565252;
+    color: inherit;
     text-align: center;
-    /* border: none; */
     border: 1px solid #dadada;
+    font-weight: 550;
   }
 </style>
 

packages/builder/src/components/userInterface/Colorpicker/Palette.svelte

@@ -1,5 +1,6 @@
 <script>
   import { onMount, createEventDispatcher } from "svelte";
+  import CheckedBackground from "./CheckedBackground.svelte"
 
   const dispatch = createEventDispatcher()
 
@@ -40,7 +41,7 @@
   .palette {
     position: relative;
     width: 100%;
-    height: 175px;
+    height: 140px;
     cursor: crosshair;
     overflow: hidden;
   }
@@ -55,6 +56,8 @@
   }
 </style>
 
-<div bind:this={palette} bind:clientHeight={paletteHeight} bind:clientWidth={paletteWidth} on:click={handleClick} class="palette" {style}>
+  <CheckedBackground width="100%">
-  <div class="picker" style={pickerStyle} />
+    <div bind:this={palette} bind:clientHeight={paletteHeight} bind:clientWidth={paletteWidth} on:click={handleClick} class="palette" {style}>
-</div>
+      <div class="picker" style={pickerStyle} />
+    </div>
+  </CheckedBackground>

packages/builder/src/components/userInterface/Colorpicker/Slider.svelte

@@ -36,7 +36,7 @@
     position: relative;
     align-self: center;
     height: 8px;
-    width: 185px;
+    width: 150px;
     border-radius: 10px;
     margin: 10px 0px;
     border: 1px solid #e8e8ef;