CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-09-12 23:43:09 +12:00
Code Issues Projects Releases Wiki Activity

Improve default option color assignment and selection state

Browse source
This commit is contained in:
Andrew Kingston 2024-05-21 14:10:38 +01:00
parent 5581ac6b39
commit 0aedcafdef
1 changed files with 18 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
packages/builder/src/components/backend/DataTable/modals/OptionsEditor.svelte
View file

@ -9,6 +9,7 @@
export let optionColors = {} export let optionColors = {}
const flipDurationMs = 150 const flipDurationMs = 150
const { OptionColours } = Constants
let options = [] let options = []
let colorPopovers = [] let colorPopovers = []
@ -27,7 +28,8 @@
const id = Math.random() const id = Math.random()
options = [...options, { name: newName, id }] options = [...options, { name: newName, id }]
constraints.inclusion = [...constraints.inclusion, newName] constraints.inclusion = [...constraints.inclusion, newName]
optionColors[newName] = Constants.OptionColours[(options.length - 1) % 9] optionColors[newName] =
OptionColours[(options.length - 1) % OptionColours.length]
colorPopovers.push(undefined) colorPopovers.push(undefined)
anchors.push(undefined) anchors.push(undefined)
await tick() await tick()
@ -64,6 +66,10 @@
} }
} }
const getOptionColor = (name, idx) => {
return optionColors?.[name] || OptionColours[idx % OptionColours.length]
}
onMount(() => { onMount(() => {
// Initialize anchor arrays on mount, assuming 'options' is already populated // Initialize anchor arrays on mount, assuming 'options' is already populated
colorPopovers = constraints.inclusion.map(() => undefined) colorPopovers = constraints.inclusion.map(() => undefined)
@ -89,6 +95,7 @@
on:finalize={handleDndFinalize} on:finalize={handleDndFinalize}
> >
{#each options as option, idx (`${option.id}-${idx}`)} {#each options as option, idx (`${option.id}-${idx}`)}
{@const color = getOptionColor(option.name, idx)}
<div class="option" animate:flip={{ duration: flipDurationMs }}> <div class="option" animate:flip={{ duration: flipDurationMs }}>
<div class="drag-handle"> <div class="drag-handle">
<Icon name="DragHandle" size="L" /> <Icon name="DragHandle" size="L" />
@ -98,24 +105,23 @@
class="color-picker" class="color-picker"
on:click={e => openColorPickerPopover(idx, e.target)} on:click={e => openColorPickerPopover(idx, e.target)}
> >
<div <div class="circle" style="--color:{color}">
class="circle"
style="--color:{optionColors?.[option.name] ||
'hsla(0, 1%, 50%, 0.3)'}"
>
<Popover <Popover
bind:this={colorPopovers[idx]} bind:this={colorPopovers[idx]}
anchor={anchors[idx]} anchor={anchors[idx]}
align="left" align="left"
offset={0} offset={0}
animate={false} animate={false}
resizable={false}
> >
<div class="colors" data-ignore-click-outside="true"> <div class="colors" data-ignore-click-outside="true">
{#each Constants.OptionColours as color} {#each OptionColours as colorOption}
<div <div
on:click={() => handleColorChange(option.name, color, idx)} on:click={() =>
style="--color:{color};" handleColorChange(option.name, colorOption, idx)}
class="circle circle-hover" style="--color:{colorOption};"
class="circle"
class:selected={colorOption === color}
/> />
{/each} {/each}
</div> </div>
@ -183,7 +189,8 @@
border: 1px solid transparent; border: 1px solid transparent;
transition: border 130ms ease-out; transition: border 130ms ease-out;
} }
.circle:hover { .circle:hover,
.circle.selected {
border: 1px solid var(--spectrum-global-color-blue-600); border: 1px solid var(--spectrum-global-color-blue-600);
cursor: pointer; cursor: pointer;
} }