Recent Colors and UI Updates

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

@@ -1,5 +1,6 @@
 <script>
     import {buildStyle} from "./helpers.js"
+    import {fade} from "svelte/transition"
 
     export let backgroundSize = "10px"
     export let borderRadius = ""
@@ -18,6 +19,6 @@
   }
 </style>
 
-<div {style}>
+<div transition:fade {style}>
     <slot />
 </div>

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

@@ -1,5 +1,6 @@
 <script>
   import { onMount, createEventDispatcher } from "svelte";
+  import { fade } from 'svelte/transition';
   import CheckedBackground from "./CheckedBackground.svelte"
   import {buildStyle} from "./helpers.js"
   import {
@@ -15,6 +16,11 @@
   export let value = "#3ec1d3ff";
   export let format = "hexa";
   
+  let recentColors = []
+
+  export let pickerHeight = 0;
+  export let pickerWidth = 0;
+
   let h = null;
   let s = null;
   let v = null;
@@ -23,11 +29,30 @@
   const dispatch = createEventDispatcher();
 
   onMount(() => {
+    getRecentColors()
+
     if (format) {
       convertAndSetHSVA()
     }
   });
 
+  function getRecentColors() {
+    let colorStore = localStorage.getItem("cp:recent-colors")
+    if (colorStore) {
+      recentColors = JSON.parse(colorStore)
+    }
+  }
+
+  function setRecentColor(color) {
+    if (recentColors.length === 6) {
+      recentColors.splice(0, 1)
+    }
+    if (!recentColors.includes(color)) {
+      recentColors = [...recentColors, color]
+      localStorage.setItem("cp:recent-colors", JSON.stringify(recentColors))
+    }
+  }
+
   function convertAndSetHSVA() {
     let hsva = convertToHSVA(value, format);
     setHSVA(hsva);
@@ -45,35 +70,64 @@
     s = detail.s;
     v = detail.v;
     value = convertHsvaToFormat([h, s, v, a], format);
+    setRecentColor(value)
+    dispatchValue()
+  }
+
+  function setHue({color, isDrag}) {
+    h = color;
+    value = convertHsvaToFormat([h, s, v, a], format);   
+    if(!isDrag) {
+      setRecentColor(value)
+      dispatchValue()
+    } 
+  }
+
+  function setAlpha({color, isDrag}) {
+    a = color === "1.00" ? "1" : color;
+    value = convertHsvaToFormat([h, s, v, a], format);    
+    if(!isDrag) {
+        setRecentColor(value)
+        dispatchValue()
+      } 
+  }
+
+  function dispatchValue() {
     dispatch("change", value)
   }
 
-  function setHue(hue) {
-    h = hue;
-    value = convertHsvaToFormat([h, s, v, a], format);    
-  }
-
-  function setAlpha(alpha) {
-    a = alpha === "1.00" ? "1" :alpha;
-    value = convertHsvaToFormat([h, s, v, a], format);    
-  }
-
   function changeFormatAndConvert(f) {
     format = f;
     value = convertHsvaToFormat([h, s, v, a], format);
   }
 
   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) {
+      setRecentColor(value)
+      dispatchValue()
+    }
+  }
+  
+
+  function applyRecentColor(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})
 </script>
 
@@ -83,7 +137,8 @@
     font-size: 11px;
     font-weight: 400;
     flex-direction: column;
-    height: 265px;
+    /* height: 265px; */
+    height: auto;
     width: 220px;
     background: #ffffff;
     border-radius: 2px;
@@ -118,6 +173,24 @@
     border-radius: 50%;
   }
 
+  .recent-color-panel {
+    flex: 0 0 15px;
+    display: grid;
+    grid-gap: 10px;
+    justify-content: flex-start;
+    grid-auto-flow: column;
+    padding: 5px;
+    margin-left: 6px;
+  }
+
+  .recent-color {
+    cursor: pointer;
+    border-radius: 6px;
+    border: 1px solid #dedada;  
+    height: 20px; 
+    width: 20px;   
+  }
+
   .format-input-panel {
     display: flex;
     flex-direction: column;
@@ -125,7 +198,7 @@
   }
 </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 +212,33 @@
         </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 recentColors.length > 0}
+      <div transition:fade class="recent-color-panel">
+        {#each recentColors as color}
+          <CheckedBackground borderRadius="6px"> 
+            <div transition:fade class="recent-color" style={`background: ${color};`} on:click={() => applyRecentColor(color)} />
+          </CheckedBackground>
+        {/each}
+      </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,6 +2,7 @@
     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"
@@ -17,8 +18,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,6 +62,11 @@
 
     function openColorpicker(event) {
         if(colorPreview) {
+            open = true;        
+        }
+    }
+
+    $: if(open && colorPreview) {
         const {top: spaceAbove, width, bottom, right, left: spaceLeft} = colorPreview.getBoundingClientRect()   
         const {innerHeight, innerWidth} = window
 
@@ -76,15 +82,13 @@
         const left = spaceRight > spaceLeft ? (offsetLeft + previewWidth) : offsetLeft - pickerWidth
 
         dimensions = {top, left}
-
-            open = true;        
-        }
     }
 
     function onColorChange(color) {
         value = color.detail;
         dispatch("change", color.detail)
     }
+
 </script>
 
 <div class="color-preview-container">
@@ -94,8 +98,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} bind:format bind:value bind:pickerHeight bind:pickerWidth />
         </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/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)