From 897a0a875b950509b61a0f8d07a160dae94747d7 Mon Sep 17 00:00:00 2001 From: Conor_Mack Date: Mon, 22 Jun 2020 16:32:57 +0100 Subject: [PATCH] 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