Merge pull request #411 from Budibase/colorpicker/swatch-updates

Swatch and Title Attributes Updates / Fixes

packages/builder/package.json

@@ -87,6 +87,7 @@
     "babel-jest": "^24.8.0",
     "browser-sync": "^2.26.7",
     "cypress": "^4.8.0",
+    "eslint-plugin-cypress": "^2.11.1",
     "http-proxy-middleware": "^0.19.1",
     "jest": "^24.8.0",
     "ncp": "^2.0.0",
@@ -109,4 +110,4 @@
     "svelte-jester": "^1.0.6"
   },
   "gitHead": "115189f72a850bfb52b65ec61d932531bf327072"
-}
+}

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

@@ -3,7 +3,7 @@
   import { fade } from "svelte/transition"
   import Swatch from "./Swatch.svelte"
   import CheckedBackground from "./CheckedBackground.svelte"
-  import {buildStyle} from "../helpers.js"
+  import { buildStyle } from "../helpers.js"
   import {
     getColorFormat,
     convertToHSVA,
@@ -14,11 +14,12 @@
   import ButtonGroup from "./ButtonGroup.svelte"
   import Input from "./Input.svelte"
   import Portal from "./Portal.svelte"
-  import {keyevents} from "../actions"
+  import { keyevents } from "../actions"
 
   export let value = "#3ec1d3ff"
   export let open = false
-  export let swatches = [] //TODO: Safe swatches - limit to 12. warn in console
+  export let swatches = []
+
   export let disableSwatches = false
   export let format = "hexa"
   export let style = ""
@@ -27,6 +28,7 @@
 
   let colorPicker = null
   let adder = null
+  let swatchesSetFromLocalStore = false
 
   let h = 0
   let s = 0
@@ -38,7 +40,14 @@
   onMount(() => {
     if (!swatches.length > 0) {
       //Don't use locally stored recent colors if swatches have been passed as props
-      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) {
@@ -53,24 +62,21 @@
   function getRecentColors() {
     let colorStore = localStorage.getItem("cp:recent-colors")
     if (colorStore) {
-      swatches = JSON.parse(colorStore)
+      return JSON.parse(colorStore)
     }
   }
 
   function handleEscape() {
-    if(open) {
+    if (open) {
-      open = false;
+      open = false
     }
   }
 
-  function setRecentColor(color) {
+  function setRecentColors(color) {
-    if (swatches.length === 12) {
+    const s = swatchesSetFromLocalStore
-      swatches.splice(0, 1)
+      ? swatches
-    }
+      : [...getRecentColors(), color]
-    if (!swatches.includes(color)) {
+    localStorage.setItem("cp:recent-colors", JSON.stringify(s))
-      swatches = [...swatches, color]
-      localStorage.setItem("cp:recent-colors", JSON.stringify(swatches))
-    }
   }
 
   function convertAndSetHSVA() {
@@ -134,8 +140,16 @@
 
   function addSwatch() {
     if (format) {
+      if (swatches.length === 12) {
+        swatches.splice(0, 1)
+      }
+
+      if (!swatches.includes(value)) {
+        swatches = [...swatches, value]
+        setRecentColors(value)
+      }
+
       dispatch("addswatch", value)
-      setRecentColor(value)
     }
   }
 
@@ -143,7 +157,10 @@
     let removedSwatch = swatches.splice(idx, 1)
     swatches = swatches
     dispatch("removeswatch", removedSwatch)
-    localStorage.setItem("cp:recent-colors", JSON.stringify(swatches))
+    if (swatchesSetFromLocalStore) {
+      //as could be a swatch not present in local storage
+      setRecentColors()
+    }
   }
 
   function applySwatch(color) {
@@ -159,13 +176,14 @@
 
   $: border = v > 90 && s < 5 ? "1px dashed #dedada" : ""
   $: selectedColorStyle = buildStyle({ background: value, border })
-  $: shrink = swatches.length > 0
+  $: hasSwatches = swatches.length > 0
+
 </script>
 
 <Portal>
   <div
     class="colorpicker-container"
-    use:keyevents={{"Escape": handleEscape}}
+    use:keyevents={{ Escape: handleEscape }}
     transition:fade
     bind:this={colorPicker}
     {style}
@@ -181,7 +199,10 @@
       <div class="alpha-hue-panel">
         <div>
           <CheckedBackground borderRadius="50%" backgroundSize="8px">
-            <div class="selected-color" style={selectedColorStyle} />
+            <div
+              class="selected-color"
+              title={value}
+              style={selectedColorStyle} />
           </CheckedBackground>
         </div>
         <div>
@@ -204,22 +225,24 @@
 
       {#if !disableSwatches}
         <div transition:fade class="swatch-panel">
-          {#if swatches.length > 0}
+          {#if hasSwatches}
             {#each swatches as color, idx}
-              <Swatch
+              {#if idx < 12}
-                {color}
+                <Swatch
-                on:click={() => applySwatch(color)}
+                  {color}
-                on:removeswatch={() => removeSwatch(idx)} />
+                  on:click={() => applySwatch(color)}
+                  on:removeswatch={() => removeSwatch(idx)} />
+              {/if}
             {/each}
           {/if}
-          {#if swatches.length !== 12}
+          {#if swatches.length < 12}
             <div
               tabindex="0"
-              use:keyevents={{"Enter": addSwatch}}
+              use:keyevents={{ Enter: addSwatch }}
               bind:this={adder}
               transition:fade
               class="adder"
-              class:shrink
+              class:shrink={hasSwatches}
               on:click={addSwatch}>
               <span>&plus;</span>
             </div>
@@ -309,7 +332,7 @@
     margin-left: 5px;
     margin-top: 3px;
     font-weight: 500;
-    outline-color:  #003cb0;
+    outline-color: #003cb0;
     outline-width: thin;
   }
 

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

@@ -3,7 +3,7 @@
   import CheckedBackground from "./CheckedBackground.svelte"
   import { createEventDispatcher, beforeUpdate, onMount } from "svelte"
 
-  import {buildStyle, debounce} from "../helpers.js"
+  import { buildStyle, debounce } from "../helpers.js"
   import { fade } from "svelte/transition"
   import { getColorFormat } from "../utils.js"
 
@@ -50,7 +50,7 @@
   }
 
   function calculateDimensions() {
-   const {
+    const {
       top: spaceAbove,
       width,
       bottom,
@@ -71,12 +71,12 @@
       y = bottom
     }
 
-    x = (left + previewCenter) - (220 / 2)
+    x = left + previewCenter - 220 / 2
 
-    dimensions = { [positionSide]: y.toFixed(1), left: x.toFixed(1) } 
+    dimensions = { [positionSide]: y.toFixed(1), left: x.toFixed(1) }
   }
 
-  $: if(open && colorPreview) {
+  $: if (open && colorPreview) {
     calculateDimensions()
   }
 
@@ -97,6 +97,7 @@
         bind:this={colorPreview}
         bind:clientHeight={previewHeight}
         bind:clientWidth={previewWidth}
+        title={value}
         class="color-preview"
         style={previewStyle}
         on:click={openColorpicker} />
@@ -118,7 +119,10 @@
       <div on:click|self={() => (open = false)} class="overlay" />
     {/if}
   {:else}
-    <div class="color-preview preview-error" style={errorPreviewStyle}>
+    <div
+      class="color-preview preview-error"
+      title="Invalid Color"
+      style={errorPreviewStyle}>
       <span>&times;</span>
     </div>
   {/if}

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

@@ -2,7 +2,7 @@
   import { createEventDispatcher } from "svelte"
   import { fade } from "svelte/transition"
   import CheckedBackground from "./CheckedBackground.svelte"
-  import {keyevents} from "../actions"
+  import { keyevents } from "../actions"
 
   export let hovered = false
   export let color = "#fff"
@@ -14,8 +14,9 @@
   <CheckedBackground borderRadius="6px">
     <div
       tabindex="0"
-      use:keyevents={{"Enter": () => dispatch("click")}}
+      use:keyevents={{ Enter: () => dispatch('click') }}
       in:fade
+      title={color}
       class="swatch"
       style={`background: ${color};`}
       on:click|self
@@ -41,7 +42,7 @@
     border: 1px solid #dedada;
     height: 20px;
     width: 20px;
-    outline-color:  #003cb0;
+    outline-color: #003cb0;
     outline-width: thin;
   }