From bf9b8e49f9f8434215192ba3203d1e30e5920502 Mon Sep 17 00:00:00 2001 From: Conor_Mack Date: Fri, 19 Jun 2020 17:07:11 +0100 Subject: [PATCH 1/2] Recent Colors and UI Updates --- .../Colorpicker/CheckedBackground.svelte | 3 +- .../Colorpicker/Colorpicker.svelte | 125 +++++++++++++++--- .../Colorpicker/Colorpreview.svelte | 44 +++--- .../userInterface/Colorpicker/Input.svelte | 2 +- .../userInterface/Colorpicker/Slider.svelte | 10 +- .../userInterface/Colorpicker/drag.js | 1 + 6 files changed, 139 insertions(+), 46 deletions(-) diff --git a/packages/builder/src/components/userInterface/Colorpicker/CheckedBackground.svelte b/packages/builder/src/components/userInterface/Colorpicker/CheckedBackground.svelte index c6acd8f18a..9ed2899203 100644 --- a/packages/builder/src/components/userInterface/Colorpicker/CheckedBackground.svelte +++ b/packages/builder/src/components/userInterface/Colorpicker/CheckedBackground.svelte @@ -1,5 +1,6 @@ @@ -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 @@ } -
+
@@ -139,21 +212,33 @@
- setHue(hue.detail)} /> + setHue(hue.detail)} on:dragend={dispatchValue} /> setAlpha(alpha.detail)} /> + on:change={(alpha, isDrag) => setAlpha(alpha.detail, isDrag)} + on:dragend={dispatchValue} + />
+ {#if recentColors.length > 0} +
+ {#each recentColors as color} + +
applyRecentColor(color)} /> + + {/each} +
+ {/if} +
- handleColorInput(event.target.value)} /> + handleColorInput(event.target.value)} on:change={dispatchInputChange} />
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte b/packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte index 8f5bf64f70..0534666e1c 100644 --- a/packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte +++ b/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,30 +62,33 @@ function openColorpicker(event) { if(colorPreview) { - const {top: spaceAbove, width, bottom, right, left: spaceLeft} = colorPreview.getBoundingClientRect() - const {innerHeight, innerWidth} = window - - const {offsetLeft, offsetTop} = colorPreview - //get the scrollTop value for all scrollable parent elements - let scrollTop = parentNodes.reduce((scrollAcc, el) => scrollAcc += el.scrollTop, 0); - - 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 - - dimensions = {top, left} - open = true; } } + $: if(open && colorPreview) { + const {top: spaceAbove, width, bottom, right, left: spaceLeft} = colorPreview.getBoundingClientRect() + const {innerHeight, innerWidth} = window + + const {offsetLeft, offsetTop} = colorPreview + //get the scrollTop value for all scrollable parent elements + let scrollTop = parentNodes.reduce((scrollAcc, el) => scrollAcc += el.scrollTop, 0); + + 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 + + dimensions = {top, left} + } + function onColorChange(color) { value = color.detail; dispatch("change", color.detail) } +
@@ -94,8 +98,8 @@ {#if open} -
- +
+
open = false} class="overlay">
{/if} diff --git a/packages/builder/src/components/userInterface/Colorpicker/Input.svelte b/packages/builder/src/components/userInterface/Colorpicker/Input.svelte index 483fcd450d..811a51cea6 100644 --- a/packages/builder/src/components/userInterface/Colorpicker/Input.svelte +++ b/packages/builder/src/components/userInterface/Colorpicker/Input.svelte @@ -24,5 +24,5 @@
- +
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Slider.svelte b/packages/builder/src/components/userInterface/Colorpicker/Slider.svelte index 47736d7b69..edf0888432 100644 --- a/packages/builder/src/components/userInterface/Colorpicker/Slider.svelte +++ b/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 @@
handleClick(event.clientX)} + on:click={event => onSliderChange(event.clientX)} class="color-format-slider" class:hue={type === 'hue'} class:alpha={type === 'alpha'}>
handleClick(e.detail)} + on:drag={e => onSliderChange(e.detail, true)} + on:dragend class="slider-thumb" {style} />
diff --git a/packages/builder/src/components/userInterface/Colorpicker/drag.js b/packages/builder/src/components/userInterface/Colorpicker/drag.js index 0d7a9c2481..54fa5e924b 100644 --- a/packages/builder/src/components/userInterface/Colorpicker/drag.js +++ b/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) From 897a0a875b950509b61a0f8d07a160dae94747d7 Mon Sep 17 00:00:00 2001 From: Conor_Mack Date: Mon, 22 Jun 2020 16:32:57 +0100 Subject: [PATCH 2/2] Swatch Panel, Logic and UI Updates --- .../Colorpicker/CheckedBackground.svelte | 5 +- .../Colorpicker/Colorpicker.svelte | 104 ++++++++++++------ .../Colorpicker/Colorpreview.svelte | 4 +- .../userInterface/Colorpicker/Swatch.svelte | 53 +++++++++ 4 files changed, 129 insertions(+), 37 deletions(-) create mode 100644 packages/builder/src/components/userInterface/Colorpicker/Swatch.svelte diff --git a/packages/builder/src/components/userInterface/Colorpicker/CheckedBackground.svelte b/packages/builder/src/components/userInterface/Colorpicker/CheckedBackground.svelte index 9ed2899203..19d54523b2 100644 --- a/packages/builder/src/components/userInterface/Colorpicker/CheckedBackground.svelte +++ b/packages/builder/src/components/userInterface/Colorpicker/CheckedBackground.svelte @@ -6,8 +6,9 @@ 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}) @@ -19,6 +20,6 @@ } -
+
\ No newline at end of file diff --git a/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte b/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte index 2e80f826bd..5989e6b3ed 100644 --- a/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte +++ b/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte @@ -1,6 +1,7 @@ @@ -226,15 +257,20 @@
- {#if recentColors.length > 0} -
- {#each recentColors as color} - -
applyRecentColor(color)} /> - - {/each} -
- {/if} + {#if !disableSwatches} +
+ {#if swatches.length > 0} + {#each swatches as color, idx} + applySwatch(color)} on:removeswatch={() => removeSwatch(idx)} /> + {/each} + {/if} + {#if swatches.length !== 12} +
+ + +
+ {/if} +
+ {/if}
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte b/packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte index 0534666e1c..32a5e63ff3 100644 --- a/packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte +++ b/packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte @@ -8,6 +8,8 @@ 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" @@ -99,7 +101,7 @@ {#if open}
- +
open = false} class="overlay">
{/if} diff --git a/packages/builder/src/components/userInterface/Colorpicker/Swatch.svelte b/packages/builder/src/components/userInterface/Colorpicker/Swatch.svelte new file mode 100644 index 0000000000..e602b72d33 --- /dev/null +++ b/packages/builder/src/components/userInterface/Colorpicker/Swatch.svelte @@ -0,0 +1,53 @@ + + + + +
+ +
hovered = true} on:mouseleave={() => hovered = false}> + {#if hovered} +
dispatch("removeswatch")}> + dispatch("removeswatch")}>× +
+ {/if} +
+
+
\ No newline at end of file