From a6b333fa6d6b6e327d38f19a198fd6862c47c734 Mon Sep 17 00:00:00 2001 From: Conor_Mack Date: Wed, 1 Jul 2020 17:12:55 +0100 Subject: [PATCH 1/3] Key Events, Folder Tidyup, Bugs --- .../Colorpicker/{ => actions}/drag.js | 0 .../Colorpicker/actions/index.js | 2 + .../Colorpicker/actions/key-events.js | 41 +++++++++++++++++++ .../{ => components}/ButtonGroup.svelte | 0 .../{ => components}/CheckedBackground.svelte | 2 +- .../{ => components}/Colorpicker.svelte | 35 +++++++++------- .../{ => components}/Colorpreview.svelte | 20 +++++---- .../{ => components}/FlatButton.svelte | 10 ++++- .../Colorpicker/{ => components}/Input.svelte | 0 .../{ => components}/Palette.svelte | 0 .../{ => components}/Portal.svelte | 0 .../{ => components}/Slider.svelte | 31 ++++++++++++-- .../{ => components}/Swatch.svelte | 5 +++ .../userInterface/Colorpicker/helpers.js | 8 +++- .../userInterface/Colorpicker/index.js | 2 +- .../userInterface/Colorpicker/utils.js | 14 ++++--- .../userInterface/Colorpicker/utils.test.js | 2 +- .../userInterface/propertyCategories.js | 1 + 18 files changed, 137 insertions(+), 36 deletions(-) rename packages/builder/src/components/userInterface/Colorpicker/{ => actions}/drag.js (100%) create mode 100644 packages/builder/src/components/userInterface/Colorpicker/actions/index.js create mode 100644 packages/builder/src/components/userInterface/Colorpicker/actions/key-events.js rename packages/builder/src/components/userInterface/Colorpicker/{ => components}/ButtonGroup.svelte (100%) rename packages/builder/src/components/userInterface/Colorpicker/{ => components}/CheckedBackground.svelte (93%) rename packages/builder/src/components/userInterface/Colorpicker/{ => components}/Colorpicker.svelte (92%) rename packages/builder/src/components/userInterface/Colorpicker/{ => components}/Colorpreview.svelte (90%) rename packages/builder/src/components/userInterface/Colorpicker/{ => components}/FlatButton.svelte (59%) rename packages/builder/src/components/userInterface/Colorpicker/{ => components}/Input.svelte (100%) rename packages/builder/src/components/userInterface/Colorpicker/{ => components}/Palette.svelte (100%) rename packages/builder/src/components/userInterface/Colorpicker/{ => components}/Portal.svelte (100%) rename packages/builder/src/components/userInterface/Colorpicker/{ => components}/Slider.svelte (73%) rename packages/builder/src/components/userInterface/Colorpicker/{ => components}/Swatch.svelte (88%) diff --git a/packages/builder/src/components/userInterface/Colorpicker/drag.js b/packages/builder/src/components/userInterface/Colorpicker/actions/drag.js similarity index 100% rename from packages/builder/src/components/userInterface/Colorpicker/drag.js rename to packages/builder/src/components/userInterface/Colorpicker/actions/drag.js diff --git a/packages/builder/src/components/userInterface/Colorpicker/actions/index.js b/packages/builder/src/components/userInterface/Colorpicker/actions/index.js new file mode 100644 index 0000000000..c89a4b95c5 --- /dev/null +++ b/packages/builder/src/components/userInterface/Colorpicker/actions/index.js @@ -0,0 +1,2 @@ +export { default as drag } from "./drag.js" +export { default as keyevents } from "./key-events.js" diff --git a/packages/builder/src/components/userInterface/Colorpicker/actions/key-events.js b/packages/builder/src/components/userInterface/Colorpicker/actions/key-events.js new file mode 100644 index 0000000000..90acfb089b --- /dev/null +++ b/packages/builder/src/components/userInterface/Colorpicker/actions/key-events.js @@ -0,0 +1,41 @@ +//events: Array<{trigger: fn}> +export default function(node, events = []) { + const ev = Object.entries(events) + let fns = [] + + for (let [trigger, fn] of ev) { + let f = addEvent(trigger, fn) + fns = [...fns, f] + } + + function _scaffold(trigger, fn) { + return () => { + let trig = parseInt(trigger) + if (trig) { + if (event.keyCode === trig) { + fn(event) + } + } else { + if (event.key === trigger) { + fn(event) + } + } + } + } + + function addEvent(trigger, fn) { + let f = _scaffold(trigger, fn) + node.addEventListener("keydown", f) + return f + } + + function removeEvents() { + fns.forEach(f => node.removeEventListener("keypress", f)) + } + + return { + destroy() { + removeEvents() + }, + } +} diff --git a/packages/builder/src/components/userInterface/Colorpicker/ButtonGroup.svelte b/packages/builder/src/components/userInterface/Colorpicker/components/ButtonGroup.svelte similarity index 100% rename from packages/builder/src/components/userInterface/Colorpicker/ButtonGroup.svelte rename to packages/builder/src/components/userInterface/Colorpicker/components/ButtonGroup.svelte diff --git a/packages/builder/src/components/userInterface/Colorpicker/CheckedBackground.svelte b/packages/builder/src/components/userInterface/Colorpicker/components/CheckedBackground.svelte similarity index 93% rename from packages/builder/src/components/userInterface/Colorpicker/CheckedBackground.svelte rename to packages/builder/src/components/userInterface/Colorpicker/components/CheckedBackground.svelte index e612fb5393..2baa6b466e 100644 --- a/packages/builder/src/components/userInterface/Colorpicker/CheckedBackground.svelte +++ b/packages/builder/src/components/userInterface/Colorpicker/components/CheckedBackground.svelte @@ -1,5 +1,5 @@ -
@@ -215,11 +215,13 @@ {/if} {#if swatches.length !== 12}
+ class:shrink + on:click={addSwatch}> +
{/if} @@ -246,6 +248,7 @@ display: flex; font-size: 11px; font-weight: 400; + transition: top 0.1s, left 0.1s; flex-direction: column; margin: 5px 0px; height: auto; @@ -297,7 +300,7 @@ flex: 1; height: 20px; display: flex; - transition: flex 0.5s; + transition: flex 0.3s; justify-content: center; align-items: center; background: #f1f3f4; @@ -307,6 +310,8 @@ margin-left: 5px; margin-top: 3px; font-weight: 500; + outline-color: #003cb0; + outline-width: thin; } .shrink { diff --git a/packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte b/packages/builder/src/components/userInterface/Colorpicker/components/Colorpreview.svelte similarity index 90% rename from packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte rename to packages/builder/src/components/userInterface/Colorpicker/components/Colorpreview.svelte index fc85b12f30..8c4d193a00 100644 --- a/packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte +++ b/packages/builder/src/components/userInterface/Colorpicker/components/Colorpreview.svelte @@ -1,11 +1,11 @@ + +
{#if !errorMsg} diff --git a/packages/builder/src/components/userInterface/Colorpicker/FlatButton.svelte b/packages/builder/src/components/userInterface/Colorpicker/components/FlatButton.svelte similarity index 59% rename from packages/builder/src/components/userInterface/Colorpicker/FlatButton.svelte rename to packages/builder/src/components/userInterface/Colorpicker/components/FlatButton.svelte index 15bc72fe3c..a8da25706a 100644 --- a/packages/builder/src/components/userInterface/Colorpicker/FlatButton.svelte +++ b/packages/builder/src/components/userInterface/Colorpicker/components/FlatButton.svelte @@ -1,9 +1,14 @@ -
{text}
+
dispatch("click")}} class:selected on:click>{text}
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Input.svelte b/packages/builder/src/components/userInterface/Colorpicker/components/Input.svelte similarity index 100% rename from packages/builder/src/components/userInterface/Colorpicker/Input.svelte rename to packages/builder/src/components/userInterface/Colorpicker/components/Input.svelte diff --git a/packages/builder/src/components/userInterface/Colorpicker/Palette.svelte b/packages/builder/src/components/userInterface/Colorpicker/components/Palette.svelte similarity index 100% rename from packages/builder/src/components/userInterface/Colorpicker/Palette.svelte rename to packages/builder/src/components/userInterface/Colorpicker/components/Palette.svelte diff --git a/packages/builder/src/components/userInterface/Colorpicker/Portal.svelte b/packages/builder/src/components/userInterface/Colorpicker/components/Portal.svelte similarity index 100% rename from packages/builder/src/components/userInterface/Colorpicker/Portal.svelte rename to packages/builder/src/components/userInterface/Colorpicker/components/Portal.svelte diff --git a/packages/builder/src/components/userInterface/Colorpicker/Slider.svelte b/packages/builder/src/components/userInterface/Colorpicker/components/Slider.svelte similarity index 73% rename from packages/builder/src/components/userInterface/Colorpicker/Slider.svelte rename to packages/builder/src/components/userInterface/Colorpicker/components/Slider.svelte index a6abab6ca1..7ccde884d9 100644 --- a/packages/builder/src/components/userInterface/Colorpicker/Slider.svelte +++ b/packages/builder/src/components/userInterface/Colorpicker/components/Slider.svelte @@ -1,6 +1,6 @@
onSliderChange(event.clientX)} class="color-format-slider" class:hue={type === 'hue'} class:alpha={type === 'alpha'}>
onSliderChange(e.detail, true)} on:dragend class="slider-thumb" @@ -54,6 +77,8 @@ margin: 10px 0px; border: 1px solid #e8e8ef; cursor: pointer; + outline-color: #003cb0; + outline-width: thin; } .hue { diff --git a/packages/builder/src/components/userInterface/Colorpicker/Swatch.svelte b/packages/builder/src/components/userInterface/Colorpicker/components/Swatch.svelte similarity index 88% rename from packages/builder/src/components/userInterface/Colorpicker/Swatch.svelte rename to packages/builder/src/components/userInterface/Colorpicker/components/Swatch.svelte index 2424df2003..066178677c 100644 --- a/packages/builder/src/components/userInterface/Colorpicker/Swatch.svelte +++ b/packages/builder/src/components/userInterface/Colorpicker/components/Swatch.svelte @@ -2,6 +2,7 @@ import { createEventDispatcher } from "svelte" import { fade } from "svelte/transition" import CheckedBackground from "./CheckedBackground.svelte" + import {keyevents} from "../actions" export let hovered = false export let color = "#fff" @@ -12,6 +13,8 @@
dispatch("click")}} in:fade class="swatch" style={`background: ${color};`} @@ -38,6 +41,8 @@ border: 1px solid #dedada; height: 20px; width: 20px; + outline-color: #003cb0; + outline-width: thin; } .space { diff --git a/packages/builder/src/components/userInterface/Colorpicker/helpers.js b/packages/builder/src/components/userInterface/Colorpicker/helpers.js index 5d9ff750af..bd4d666bc1 100644 --- a/packages/builder/src/components/userInterface/Colorpicker/helpers.js +++ b/packages/builder/src/components/userInterface/Colorpicker/helpers.js @@ -1,4 +1,4 @@ -export const buildStyle = styles => { +export function buildStyle(styles) { let str = "" for (let s in styles) { if (styles[s]) { @@ -12,3 +12,9 @@ export const buildStyle = styles => { export const convertCamel = str => { return str.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`) } + +export const debounce = (fn, milliseconds) => { + return () => { + setTimeout(fn, milliseconds) + } +} diff --git a/packages/builder/src/components/userInterface/Colorpicker/index.js b/packages/builder/src/components/userInterface/Colorpicker/index.js index 21e19acc9b..80a44b8a85 100644 --- a/packages/builder/src/components/userInterface/Colorpicker/index.js +++ b/packages/builder/src/components/userInterface/Colorpicker/index.js @@ -1,2 +1,2 @@ -import Colorpreview from "./Colorpreview.svelte" +import Colorpreview from "./components/Colorpreview.svelte" export default Colorpreview diff --git a/packages/builder/src/components/userInterface/Colorpicker/utils.js b/packages/builder/src/components/userInterface/Colorpicker/utils.js index e14c8711ab..6049046e60 100644 --- a/packages/builder/src/components/userInterface/Colorpicker/utils.js +++ b/packages/builder/src/components/userInterface/Colorpicker/utils.js @@ -144,13 +144,15 @@ export const hslaToHSVA = ([h, s, l, a = 1]) => { export const hsvaToHexa = (hsva, asString = false) => { const [r, g, b, a] = hsvaToRgba(hsva) + const padSingle = hex => (hex.length === 1 ? `0${hex}` : hex) - const hexa = [r, g, b] - .map(v => { - let hex = Math.round(v).toString(16) - return hex.length === 1 ? `0${hex}` : hex - }) - .concat(Math.round(a * 255).toString(16)) + let hexa = [r, g, b].map(v => { + let hex = Math.round(v).toString(16) + return padSingle(hex) + }) + + let alpha = padSingle(Math.round(a * 255).toString(16)) + hexa = [...hexa, alpha] return asString ? `#${hexa.join("")}` : hexa } diff --git a/packages/builder/src/components/userInterface/Colorpicker/utils.test.js b/packages/builder/src/components/userInterface/Colorpicker/utils.test.js index c47d54ed1b..e86be71885 100644 --- a/packages/builder/src/components/userInterface/Colorpicker/utils.test.js +++ b/packages/builder/src/components/userInterface/Colorpicker/utils.test.js @@ -1,4 +1,4 @@ -import { getColorFormat, convertToHSVA, convertHsvaToFormat } from "./utils" +import { getColorFormat, convertToHSVA, convertHsvaToFormat } from "./../utils" describe("convertToHSVA - convert to hsva from format", () => { test("convert from hexa", () => { diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js index d3605210e9..9824c846d6 100644 --- a/packages/builder/src/components/userInterface/propertyCategories.js +++ b/packages/builder/src/components/userInterface/propertyCategories.js @@ -395,6 +395,7 @@ export const typography = [ label: "Color", key: "color", control: Colorpicker, + swatches: ["#fff", "#000", "#111", "#ccc", "ede"], defaultValue: "#000", }, { From 30323ecc3568afe9737bb359fc7bbac444169989 Mon Sep 17 00:00:00 2001 From: Conor_Mack Date: Wed, 1 Jul 2020 17:18:29 +0100 Subject: [PATCH 2/3] Remove swatch prop test --- .../builder/src/components/userInterface/propertyCategories.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js index 9824c846d6..d3605210e9 100644 --- a/packages/builder/src/components/userInterface/propertyCategories.js +++ b/packages/builder/src/components/userInterface/propertyCategories.js @@ -395,7 +395,6 @@ export const typography = [ label: "Color", key: "color", control: Colorpicker, - swatches: ["#fff", "#000", "#111", "#ccc", "ede"], defaultValue: "#000", }, { From e40ce475b65e43b415e1048d08b7374e780d081b Mon Sep 17 00:00:00 2001 From: Conor_Mack Date: Wed, 1 Jul 2020 17:29:18 +0100 Subject: [PATCH 3/3] Lint --- .../src/components/userInterface/Colorpicker/utils.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/builder/src/components/userInterface/Colorpicker/utils.test.js b/packages/builder/src/components/userInterface/Colorpicker/utils.test.js index e86be71885..c47d54ed1b 100644 --- a/packages/builder/src/components/userInterface/Colorpicker/utils.test.js +++ b/packages/builder/src/components/userInterface/Colorpicker/utils.test.js @@ -1,4 +1,4 @@ -import { getColorFormat, convertToHSVA, convertHsvaToFormat } from "./../utils" +import { getColorFormat, convertToHSVA, convertHsvaToFormat } from "./utils" describe("convertToHSVA - convert to hsva from format", () => { test("convert from hexa", () => {