Multiple improvement to option configuration

This commit is contained in:
Andrew Kingston 2024-05-21 13:59:33 +01:00
parent f30142831e
commit d9a00cc6d4
1 changed files with 107 additions and 136 deletions

View File

@ -2,7 +2,7 @@
import { flip } from "svelte/animate" import { flip } from "svelte/animate"
import { dndzone } from "svelte-dnd-action" import { dndzone } from "svelte-dnd-action"
import { Icon, Popover } from "@budibase/bbui" import { Icon, Popover } from "@budibase/bbui"
import { onMount } from "svelte" import { onMount, tick } from "svelte"
import { Constants } from "@budibase/frontend-core" import { Constants } from "@budibase/frontend-core"
export let constraints export let constraints
@ -22,13 +22,16 @@
anchors.pop(undefined) anchors.pop(undefined)
} }
const addNewInput = () => { const addNewInput = async () => {
const newOption = `Option ${constraints.inclusion.length + 1}` const newName = `Option ${constraints.inclusion.length + 1}`
options = [...options, { name: newOption, id: Math.random() }] const id = Math.random()
constraints.inclusion = [...constraints.inclusion, newOption] options = [...options, { name: newName, id }]
optionColors[newOption] = Constants.OptionColours[(options.length - 1) % 9] constraints.inclusion = [...constraints.inclusion, newName]
optionColors[newName] = Constants.OptionColours[(options.length - 1) % 9]
colorPopovers.push(undefined) colorPopovers.push(undefined)
anchors.push(undefined) anchors.push(undefined)
await tick()
document.getElementById(`option-${id}`)?.focus()
} }
const handleDndConsider = e => { const handleDndConsider = e => {
@ -75,9 +78,8 @@
<!-- svelte-ignore a11y-no-static-element-interactions --> <!-- svelte-ignore a11y-no-static-element-interactions -->
<!-- svelte-ignore a11y-click-events-have-key-events --> <!-- svelte-ignore a11y-click-events-have-key-events -->
<div>
<div <div
class="actions" class="options"
use:dndzone={{ use:dndzone={{
items: options, items: options,
flipDurationMs, flipDurationMs,
@ -87,16 +89,13 @@
on:finalize={handleDndFinalize} on:finalize={handleDndFinalize}
> >
{#each options as option, idx (`${option.id}-${idx}`)} {#each options as option, idx (`${option.id}-${idx}`)}
<div <div class="option" animate:flip={{ duration: flipDurationMs }}>
class="no-border action-container" <div class="drag-handle">
animate:flip={{ duration: flipDurationMs }}
>
<div class="child drag-handle-spacing">
<Icon name="DragHandle" size="L" /> <Icon name="DragHandle" size="L" />
</div> </div>
<div <div
bind:this={anchors[idx]} bind:this={anchors[idx]}
class="child color-picker" class="color-picker"
on:click={e => openColorPickerPopover(idx, e.target)} on:click={e => openColorPickerPopover(idx, e.target)}
> >
<div <div
@ -123,106 +122,57 @@
</Popover> </Popover>
</div> </div>
</div> </div>
<div class="child">
<input <input
class="input-field" class="option-name"
type="text" type="text"
on:change={e => handleNameChange(option.name, idx, e.target.value)} on:change={e => handleNameChange(option.name, idx, e.target.value)}
value={option.name} value={option.name}
placeholder="Option name" placeholder="Option name"
id="option-{option.id}"
/> />
</div>
<div class="child">
<Icon name="Close" hoverable size="S" on:click={removeInput(idx)} /> <Icon name="Close" hoverable size="S" on:click={removeInput(idx)} />
</div> </div>
</div>
{/each} {/each}
</div>
<div on:click={addNewInput} class="add-option"> <div on:click={addNewInput} class="add-option">
<Icon hoverable name="Add" /> <Icon name="Add" />
<div>Add option</div> <div>Add option</div>
</div> </div>
</div> </div>
<style> <style>
.action-container { /* Container */
background-color: var(--spectrum-alias-background-color-primary); .options {
border-radius: 0px; overflow: hidden;
border-radius: 4px;
border: 1px solid var(--spectrum-global-color-gray-300); border: 1px solid var(--spectrum-global-color-gray-300);
background-color: var(--spectrum-global-color-gray-50);
}
.options > * {
height: 32px;
}
/* Options row */
.option {
transition: background-color 130ms ease-in-out, color 130ms ease-in-out, transition: background-color 130ms ease-in-out, color 130ms ease-in-out,
border-color 130ms ease-in-out; border-color 130ms ease-in-out;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
} border-bottom: 1px solid var(--spectrum-global-color-gray-300);
.no-border {
border-bottom: none;
}
.action-container:last-child {
border-bottom: 1px solid var(--spectrum-global-color-gray-300) !important;
}
.child {
height: 30px;
}
.child:hover,
.child:focus {
background: var(--spectrum-global-color-gray-200);
}
.add-option {
display: flex;
flex-direction: row;
align-items: center;
padding: var(--spacing-m);
gap: var(--spacing-m); gap: var(--spacing-m);
cursor: pointer; padding: 0 var(--spacing-m) 0 var(--spacing-s);
}
.option:hover,
.option:focus {
background: var(--spectrum-global-color-gray-100);
} }
.input-field { /* Option row components */
border: none; .color-picker {
outline: none; align-self: stretch;
background-color: transparent; display: grid;
width: 100%; place-items: center;
color: var(--text);
} }
.child input[type="text"] {
padding-left: 10px;
}
.input-field:hover,
.input-field:focus {
background: var(--spectrum-global-color-gray-200);
}
.action-container > :nth-child(1) {
flex-grow: 1;
justify-content: center;
display: flex;
}
.action-container > :nth-child(2) {
flex-grow: 1;
display: flex;
justify-content: center;
align-items: center;
}
.action-container > :nth-child(3) {
flex-grow: 4;
display: flex;
}
.action-container > :nth-child(4) {
flex-grow: 1;
justify-content: center;
display: flex;
}
.color-picker:hover {
cursor: pointer;
}
.circle { .circle {
height: 20px; height: 20px;
width: 20px; width: 20px;
@ -230,18 +180,39 @@
border-radius: 50%; border-radius: 50%;
display: inline-block; display: inline-block;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid transparent;
transition: border 130ms ease-out;
} }
.circle:hover {
.circle-hover:hover { border: 1px solid var(--spectrum-global-color-blue-600);
border: 1px solid var(--spectrum-global-color-blue-400);
cursor: pointer; cursor: pointer;
} }
.colors { .colors {
display: grid; display: grid;
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr;
gap: var(--spacing-xl); gap: var(--spacing-xl);
justify-items: center; justify-items: center;
margin: var(--spacing-m); margin: var(--spacing-m);
} }
.option-name {
border: none;
outline: none;
background-color: transparent;
width: 100%;
color: var(--text);
}
/* Add option */
.add-option {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: var(--spacing-m);
gap: var(--spacing-m);
}
.add-option:hover {
cursor: pointer !important;
background: var(--spectrum-global-color-gray-200);
}
</style> </style>