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

Colorpicker - Swatch Panel, Logic and UI Updates

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

@@ -1,12 +1,14 @@
 <script>
     import {buildStyle} from "./helpers.js"
+    import {fade} from "svelte/transition"
 
     export let backgroundSize = "10px"
     export let borderRadius = ""
     export let height = ""
     export let width = ""
+    export let margin = ""
 
-    $: style = buildStyle({backgroundSize, borderRadius, height, width})
+    $: style = buildStyle({backgroundSize, borderRadius, height, width, margin})
 
 </script>
 
@@ -18,6 +20,6 @@
   }
 </style>
 
-<div {style}>
+<div in:fade {style}>
     <slot />
 </div>

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

@@ -1,5 +1,7 @@
 <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 {
@@ -13,7 +15,15 @@
   import Input from "./Input.svelte";
 
   export let value = "#3ec1d3ff";
+  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 pickerHeight = 0;
+  export let pickerWidth = 0;
+
+  let adder = null;
 
   let h = null;
   let s = null;
@@ -23,11 +33,33 @@
   const dispatch = createEventDispatcher();
 
   onMount(() => {
+    if(!swatches.length > 0) {
+      //Don't use locally stored recent colors if swatches have been passed as props
+      getRecentColors()
+    }
+
     if (format) {
       convertAndSetHSVA()
     }
   });
 
+  function getRecentColors() {
+    let colorStore = localStorage.getItem("cp:recent-colors")
+    if (colorStore) {
+      swatches = JSON.parse(colorStore)      
+    }
+  }
+
+  function setRecentColor(color) {
+    if (swatches.length === 12) {
+      swatches.splice(0, 1)
+    }
+    if (!swatches.includes(color)) {
+      swatches = [...swatches, color]
+      localStorage.setItem("cp:recent-colors", JSON.stringify(swatches))
+    }
+  }
+
   function convertAndSetHSVA() {
     let hsva = convertToHSVA(value, format);
     setHSVA(hsva);
@@ -45,17 +77,27 @@
     s = detail.s;
     v = detail.v;
     value = convertHsvaToFormat([h, s, v, a], format);
-    dispatch("change", value)
+    dispatchValue()
   }
 
-  function setHue(hue) {
-    h = hue;
-    value = convertHsvaToFormat([h, s, v, a], format);    
+  function setHue({color, isDrag}) {
+    h = color;
+    value = convertHsvaToFormat([h, s, v, a], format);   
+    if(!isDrag) {
+      dispatchValue()
+    } 
   }
 
-  function setAlpha(alpha) {
-    a = alpha === "1.00" ? "1" :alpha;
+  function setAlpha({color, isDrag}) {
+    a = color === "1.00" ? "1" : color;
     value = convertHsvaToFormat([h, s, v, a], format);    
+    if(!isDrag) {
+        dispatchValue()
+      } 
+  }
+
+  function dispatchValue() {
+    dispatch("change", value)
   }
 
   function changeFormatAndConvert(f) {
@@ -64,17 +106,48 @@
   }
 
   function handleColorInput(text) {
-    let f = getColorFormat(text)
-    if(f) {
-      format = f;
+    let format = getColorFormat(text)
+    if(format) {
       value = text
       convertAndSetHSVA()
-      dispatch("change", value)
     }
   }
 
-    $: border = s < 10 ? "1px dashed #dedada" : ""
+  function dispatchInputChange() {
+    if(format) {
+      dispatchValue()
+    }
+  }
+
+  function addSwatch() {
+    if(format) {
+      dispatch("addswatch", value)
+      setRecentColor(value)
+    }
+  }
+
+  function removeSwatch(idx) {
+    let removedSwatch = swatches.splice(idx, 1);
+    swatches = swatches
+    dispatch("removeswatch", removedSwatch)
+    localStorage.setItem("cp:recent-colors", JSON.stringify(swatches))
+  }
+  
+
+  function applySwatch(color) {
+    if(value !== color) {
+      format = getColorFormat(color)
+      if(format) {
+        value = color
+        convertAndSetHSVA()
+        dispatchValue()
+      }
+    }
+  }
+
+    $: border = (v > 90 && s < 5) ? "1px dashed #dedada" : ""
     $: style = buildStyle({background: value, border})
+    $: shrink = swatches.length > 0
 </script>
 
 <style>
@@ -83,7 +156,8 @@
     font-size: 11px;
     font-weight: 400;
     flex-direction: column;
-    height: 265px;
+    /* height: 265px; */
+    height: auto;
     width: 220px;
     background: #ffffff;
     border-radius: 2px;
@@ -118,14 +192,44 @@
     border-radius: 50%;
   }
 
+   .swatch-panel {
+    flex: 0 0 15px;
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: flex-start;
+    padding: 0 5px;
+    max-height: 56px;
+  }
+
+  .adder {
+    flex: 1;
+    height: 20px;		
+    display: flex;
+    transition: flex 0.5s;
+    justify-content: center;
+    align-items: center;
+    background: #f1f3f4;
+    cursor: pointer;
+    border: 1px solid #d4d4d4;
+    border-radius: 8px;
+    margin-left: 5px;
+    margin-top: 3px;
+    font-weight: 500;
+  }
+
+  .shrink { 
+    flex: 0 0 20px;
+  }
+
   .format-input-panel {
     display: flex;
     flex-direction: column;
     justify-content: center;
+    padding-top: 3px;
   }
 </style>
 
-<div class="colorpicker-container">
+<div class="colorpicker-container" bind:clientHeight={pickerHeight} bind:clientWidth={pickerWidth}>
 
   <div class="palette-panel">
     <Palette on:change={setSaturationAndValue} {h} {s} {v} {a} />
@@ -139,21 +243,38 @@
         </CheckedBackground>
       </div>
       <div>
-        <Slider type="hue" value={h} on:change={hue => setHue(hue.detail)} />
+        <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 => setAlpha(alpha.detail)} />
+            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)} />
+      <Input {value} on:input={event => handleColorInput(event.target.value)} on:change={dispatchInputChange} />
     </div>
   </div>
 

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

@@ -2,11 +2,14 @@
     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';
     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"
@@ -17,8 +20,8 @@
 
     let previewHeight = null    
     let previewWidth = null
-    let pickerWidth = 250
-    let pickerHeight = 300
+    let pickerWidth = 0
+    let pickerHeight = 0
 
     let anchorEl = null
     let parentNodes = [];
@@ -61,30 +64,33 @@
 
     function openColorpicker(event) {
         if(colorPreview) {
-            const {top: spaceAbove, width, bottom, right, left: spaceLeft} = colorPreview.getBoundingClientRect()   
-            const {innerHeight, innerWidth} = window
+            open = true;        
+        }
+    }
 
-            const {offsetLeft, offsetTop} = colorPreview
-            //get the scrollTop value for all scrollable parent elements 
-            let scrollTop = parentNodes.reduce((scrollAcc, el) => scrollAcc += el.scrollTop, 0);
+    $: if(open && colorPreview) {
+        const {top: spaceAbove, width, bottom, right, left: spaceLeft} = colorPreview.getBoundingClientRect()   
+        const {innerHeight, innerWidth} = window
 
-            const spaceBelow = (innerHeight - spaceAbove) - previewHeight
-            const top = spaceAbove > spaceBelow ? (offsetTop - pickerHeight) - scrollTop : (offsetTop + previewHeight) - scrollTop      
-            
-            //TOO: Testing and Scroll Awareness for x Scroll
-            const spaceRight = (innerWidth - spaceLeft) + previewWidth
-            const left = spaceRight > spaceLeft ? (offsetLeft + previewWidth) : offsetLeft - pickerWidth
+        const {offsetLeft, offsetTop} = colorPreview
+        //get the scrollTop value for all scrollable parent elements 
+        let scrollTop = parentNodes.reduce((scrollAcc, el) => scrollAcc += el.scrollTop, 0);
 
-            dimensions = {top, left}
+        const spaceBelow = (innerHeight - spaceAbove) - previewHeight
+        const top = spaceAbove > spaceBelow ? (offsetTop - pickerHeight) - scrollTop : (offsetTop + previewHeight) - scrollTop      
+        
+        //TOO: Testing and Scroll Awareness for x Scroll
+        const spaceRight = (innerWidth - spaceLeft) + previewWidth
+        const left = spaceRight > spaceLeft ? (offsetLeft + previewWidth) : offsetLeft - pickerWidth
 
-            open = true;        
-        }
+        dimensions = {top, left}
     }
 
     function onColorChange(color) {
         value = color.detail;
         dispatch("change", color.detail)
     }
+
 </script>
 
 <div class="color-preview-container">
@@ -94,8 +100,8 @@
         </CheckedBackground>
 
         {#if open}
-        <div class="picker-container" bind:clientHeight={pickerHeight} bind:clientWidth={pickerWidth} style={pickerStyle}>
-            <Colorpicker on:change={onColorChange} {format} {value} />
+        <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>
         <div on:click|self={() => open = false} class="overlay"></div>
         {/if}

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

@@ -24,5 +24,5 @@
 </style>
 
 <div>
-  <input on:input type="text" {value} maxlength="25" />
+  <input on:input on:change type="text" {value} maxlength="25" />
 </div>

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

@@ -10,7 +10,7 @@
   let slider;
   let sliderWidth = 0;
 
-  function handleClick(mouseX) {
+  function onSliderChange(mouseX, isDrag = false) {
     const { left, width } = slider.getBoundingClientRect();
     let clickPosition = mouseX - left;
 
@@ -21,7 +21,8 @@
         type === "hue"
           ? 360 * percentageClick
           : percentageClick;
-      dispatch("change", value);
+      
+      dispatch("change", {color: value, isDrag});
     }
   }
 
@@ -75,13 +76,14 @@
 <div
   bind:this={slider}
   bind:clientWidth={sliderWidth}
-  on:click={event => handleClick(event.clientX)}
+  on:click={event => onSliderChange(event.clientX)}
   class="color-format-slider"
   class:hue={type === 'hue'}
   class:alpha={type === 'alpha'}>
   <div
     use:dragable
-    on:drag={e => handleClick(e.detail)}
+    on:drag={e => onSliderChange(e.detail, true)}
+    on:dragend
     class="slider-thumb"
     {style} />
 </div>

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

@@ -0,0 +1,53 @@
+<script>
+    import {createEventDispatcher} from "svelte"
+    import { fade } from 'svelte/transition';
+    import CheckedBackground from "./CheckedBackground.svelte"
+
+    export let hovered = false
+    export let color = "#fff"
+
+    const dispatch = createEventDispatcher()
+
+</script>
+
+<style>
+  .swatch {
+    position: relative;
+    cursor: pointer;
+    border-radius: 6px;
+    border: 1px solid #dedada;  
+    height: 20px; 
+    width: 20px;
+  }
+
+  .space {
+      padding: 3px 5px;
+  }
+
+  .remove-icon {
+    position: absolute;
+    right: 0;
+    top: -5px;
+    right: -4px;
+    width:10px;
+    height: 10px;
+    border-radius: 50%;
+    background-color: #800000;
+    color: #fff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+</style>
+
+<div class="space">
+  <CheckedBackground borderRadius="6px"> 
+    <div in:fade class="swatch" style={`background: ${color};`} on:click|self on:mouseover={() => hovered = true} on:mouseleave={() => hovered = false}>
+        {#if hovered}
+        <div in:fade class="remove-icon" on:click|self={()=> dispatch("removeswatch")}>
+            <span on:click|self={()=> dispatch("removeswatch")}>&times;</span>
+        </div>
+        {/if}
+    </div>            
+</CheckedBackground>
+</div>

packages/builder/src/components/userInterface/Colorpicker/drag.js

@@ -16,6 +16,7 @@ export default function(node) {
   function handleMouseUp() {
     window.removeEventListener("mousedown", handleMouseDown)
     window.removeEventListener("mousemove", handleMouseMove)
+    node.dispatchEvent(new CustomEvent("dragend"))
   }
 
   node.addEventListener("mousedown", handleMouseDown)