From e1dd79190acca91b11e60031d2b31cd9b6a27bea Mon Sep 17 00:00:00 2001 From: cmack Date: Thu, 2 Jul 2020 16:08:07 +0100 Subject: [PATCH 1/2] Swatch and Title Attributes Updates / Fixes --- .../Colorpicker/components/Colorpicker.svelte | 84 ++++++++++++------- .../components/Colorpreview.svelte | 51 +++++------ .../Colorpicker/components/Swatch.svelte | 7 +- .../userInterface/propertyCategories.js | 2 +- 4 files changed, 83 insertions(+), 61 deletions(-) diff --git a/packages/builder/src/components/userInterface/Colorpicker/components/Colorpicker.svelte b/packages/builder/src/components/userInterface/Colorpicker/components/Colorpicker.svelte index f96852e614..33fccdf098 100644 --- a/packages/builder/src/components/userInterface/Colorpicker/components/Colorpicker.svelte +++ b/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,11 @@ 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 open = false + export let swatches = [] export let disableSwatches = false export let format = "hexa" export let style = "" @@ -27,6 +27,7 @@ let colorPicker = null let adder = null + let swatchesSetFromLocalStore = false let h = 0 let s = 0 @@ -38,10 +39,17 @@ 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(colorPicker) { + if (swatches.length > 12) { + console.warn( + `Colorpicker - ${swatches.length} swatches were provided. Only the first 12 swatches will be displayed.` + ) + } + + if (colorPicker) { colorPicker.focus() } @@ -53,24 +61,21 @@ function getRecentColors() { let colorStore = localStorage.getItem("cp:recent-colors") if (colorStore) { - swatches = JSON.parse(colorStore) + return JSON.parse(colorStore) } } function handleEscape() { - if(open) { - open = false; + if (open) { + open = false } } - 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 setRecentColors(color) { + const s = swatchesSetFromLocalStore + ? swatches + : [...getRecentColors(), color] + localStorage.setItem("cp:recent-colors", JSON.stringify(s)) } function convertAndSetHSVA() { @@ -134,8 +139,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 +156,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,14 +175,13 @@ $: border = v > 90 && s < 5 ? "1px dashed #dedada" : "" $: selectedColorStyle = buildStyle({ background: value, border }) - $: shrink = swatches.length > 0 - + $: hasSwatches = swatches.length > 0
-
+
@@ -205,22 +223,24 @@ {#if !disableSwatches}
- {#if swatches.length > 0} + {#if hasSwatches} {#each swatches as color, idx} - applySwatch(color)} - on:removeswatch={() => removeSwatch(idx)} /> + {#if idx < 12} + applySwatch(color)} + on:removeswatch={() => removeSwatch(idx)} /> + {/if} {/each} {/if} - {#if swatches.length !== 12} + {#if swatches.length < 12}
+
@@ -310,7 +330,7 @@ margin-left: 5px; margin-top: 3px; font-weight: 500; - outline-color: #003cb0; + outline-color: #003cb0; outline-width: thin; } diff --git a/packages/builder/src/components/userInterface/Colorpicker/components/Colorpreview.svelte b/packages/builder/src/components/userInterface/Colorpicker/components/Colorpreview.svelte index 8c4d193a00..a28c8d2560 100644 --- a/packages/builder/src/components/userInterface/Colorpicker/components/Colorpreview.svelte +++ b/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" @@ -38,7 +38,6 @@ } }) - function openColorpicker(event) { if (colorPreview) { open = true @@ -51,7 +50,7 @@ } function calculateDimensions() { - const { + const { top: spaceAbove, width, bottom, @@ -62,22 +61,22 @@ const spaceBelow = window.innerHeight - bottom const previewCenter = previewWidth / 2 - let y, x; + let y, x - if(spaceAbove > spaceBelow) { + if (spaceAbove > spaceBelow) { positionSide = "bottom" - y = (window.innerHeight - spaceAbove) - }else{ + y = window.innerHeight - spaceAbove + } else { positionSide = "top" 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() } @@ -87,7 +86,6 @@ [positionSide]: `${dimensions[positionSide]}px`, left: `${dimensions.left}px`, }) - @@ -99,29 +97,32 @@ bind:this={colorPreview} bind:clientHeight={previewHeight} bind:clientWidth={previewWidth} + title={value} class="color-preview" style={previewStyle} on:click={openColorpicker} /> {#if open} - +
(open = false)} class="overlay" /> {/if} {:else} -
+
×
{/if} diff --git a/packages/builder/src/components/userInterface/Colorpicker/components/Swatch.svelte b/packages/builder/src/components/userInterface/Colorpicker/components/Swatch.svelte index 066178677c..11bd4d3821 100644 --- a/packages/builder/src/components/userInterface/Colorpicker/components/Swatch.svelte +++ b/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 @@
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; } diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js index d3605210e9..0d2e4a6a68 100644 --- a/packages/builder/src/components/userInterface/propertyCategories.js +++ b/packages/builder/src/components/userInterface/propertyCategories.js @@ -394,7 +394,7 @@ export const typography = [ { label: "Color", key: "color", - control: Colorpicker, + control: Colorpicker, defaultValue: "#000", }, { From 7371a1f8e907027b759f52108d3cdec6f01529bc Mon Sep 17 00:00:00 2001 From: cmack Date: Thu, 2 Jul 2020 16:26:43 +0100 Subject: [PATCH 2/2] Lint and Cypress Lint Plugin --- packages/builder/package.json | 3 ++- .../builder/src/components/userInterface/propertyCategories.js | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/builder/package.json b/packages/builder/package.json index ba1ff617e5..45caf54803 100644 --- a/packages/builder/package.json +++ b/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" -} \ No newline at end of file +} diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js index 0d2e4a6a68..d3605210e9 100644 --- a/packages/builder/src/components/userInterface/propertyCategories.js +++ b/packages/builder/src/components/userInterface/propertyCategories.js @@ -394,7 +394,7 @@ export const typography = [ { label: "Color", key: "color", - control: Colorpicker, + control: Colorpicker, defaultValue: "#000", }, {