From 0aedcafdef78ee1c220ea35a9a86bd2a24ab0d28 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Tue, 21 May 2024 14:10:38 +0100 Subject: [PATCH] Improve default option color assignment and selection state --- .../DataTable/modals/OptionsEditor.svelte | 29 ++++++++++++------- 1 file changed, 18 insertions(+), 11 deletions(-) diff --git a/packages/builder/src/components/backend/DataTable/modals/OptionsEditor.svelte b/packages/builder/src/components/backend/DataTable/modals/OptionsEditor.svelte index 354995ce7a..26d4e39c36 100644 --- a/packages/builder/src/components/backend/DataTable/modals/OptionsEditor.svelte +++ b/packages/builder/src/components/backend/DataTable/modals/OptionsEditor.svelte @@ -9,6 +9,7 @@ export let optionColors = {} const flipDurationMs = 150 + const { OptionColours } = Constants let options = [] let colorPopovers = [] @@ -27,7 +28,8 @@ const id = Math.random() options = [...options, { name: newName, id }] constraints.inclusion = [...constraints.inclusion, newName] - optionColors[newName] = Constants.OptionColours[(options.length - 1) % 9] + optionColors[newName] = + OptionColours[(options.length - 1) % OptionColours.length] colorPopovers.push(undefined) anchors.push(undefined) await tick() @@ -64,6 +66,10 @@ } } + const getOptionColor = (name, idx) => { + return optionColors?.[name] || OptionColours[idx % OptionColours.length] + } + onMount(() => { // Initialize anchor arrays on mount, assuming 'options' is already populated colorPopovers = constraints.inclusion.map(() => undefined) @@ -89,6 +95,7 @@ on:finalize={handleDndFinalize} > {#each options as option, idx (`${option.id}-${idx}`)} + {@const color = getOptionColor(option.name, idx)}
@@ -98,24 +105,23 @@ class="color-picker" on:click={e => openColorPickerPopover(idx, e.target)} > -
+
- {#each Constants.OptionColours as color} + {#each OptionColours as colorOption}
handleColorChange(option.name, color, idx)} - style="--color:{color};" - class="circle circle-hover" + on:click={() => + handleColorChange(option.name, colorOption, idx)} + style="--color:{colorOption};" + class="circle" + class:selected={colorOption === color} /> {/each}
@@ -183,7 +189,8 @@ border: 1px solid transparent; transition: border 130ms ease-out; } - .circle:hover { + .circle:hover, + .circle.selected { border: 1px solid var(--spectrum-global-color-blue-600); cursor: pointer; }