From de13f4ea11cf84b9c34c8f7954dc716fa5a1791f Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Mon, 20 May 2024 14:50:39 +0100 Subject: [PATCH 01/27] Fix multiple issue with colour selection for options --- .../OptionSelectDnD/OptionSelectDnD.svelte | 34 ++++++++++++------- 1 file changed, 21 insertions(+), 13 deletions(-) diff --git a/packages/bbui/src/OptionSelectDnD/OptionSelectDnD.svelte b/packages/bbui/src/OptionSelectDnD/OptionSelectDnD.svelte index 22d0fd03a0..09405325a6 100644 --- a/packages/bbui/src/OptionSelectDnD/OptionSelectDnD.svelte +++ b/packages/bbui/src/OptionSelectDnD/OptionSelectDnD.svelte @@ -9,8 +9,8 @@ export let constraints export let optionColors = {} - let options = [] + let options = [] let colorPopovers = [] let anchors = [] @@ -64,9 +64,14 @@ delete optionColors[optionName] } - const openColorPickerPopover = (optionIdx, target) => { - colorPopovers[optionIdx].show() - anchors[optionIdx] = target + const openColorPickerPopover = optionIdx => { + for (let i = 0; i < colorPopovers.length; i++) { + if (i === optionIdx) { + colorPopovers[i].show() + } else { + colorPopovers[i]?.hide() + } + } } onMount(() => { @@ -94,7 +99,7 @@ on:consider={handleDndConsider} on:finalize={handleDndFinalize} > - {#each options as option, idx (option.id)} + {#each options as option, idx (`${option.id}-${idx}`)}
-
+
openColorPickerPopover(idx, e.target)} + >
openColorPickerPopover(idx, e.target)} > -
+
{#each colorsArray as color}
handleColorChange(option.name, color, idx)} @@ -228,6 +232,10 @@ display: flex; } + .color-picker:hover { + cursor: pointer; + } + .circle { height: 20px; width: 20px; From 4ede31acf60d1d3cf9140b873cb40d2a25112c43 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Mon, 20 May 2024 15:02:06 +0100 Subject: [PATCH 02/27] Add double click to edit columns in grids --- packages/bbui/src/index.js | 1 - .../backend/DataTable/modals/CreateEditColumn.svelte | 6 +++--- .../backend/DataTable/modals/OptionsEditor.svelte} | 7 +++---- .../src/components/grid/cells/HeaderCell.svelte | 11 ++++++++++- 4 files changed, 16 insertions(+), 9 deletions(-) rename packages/{bbui/src/OptionSelectDnD/OptionSelectDnD.svelte => builder/src/components/backend/DataTable/modals/OptionsEditor.svelte} (98%) diff --git a/packages/bbui/src/index.js b/packages/bbui/src/index.js index f28e185305..d45ca5eb0f 100644 --- a/packages/bbui/src/index.js +++ b/packages/bbui/src/index.js @@ -88,7 +88,6 @@ export { default as ListItem } from "./List/ListItem.svelte" export { default as IconSideNav } from "./IconSideNav/IconSideNav.svelte" export { default as IconSideNavItem } from "./IconSideNav/IconSideNavItem.svelte" export { default as Accordion } from "./Accordion/Accordion.svelte" -export { default as OptionSelectDnD } from "./OptionSelectDnD/OptionSelectDnD.svelte" export { default as AbsTooltip } from "./Tooltip/AbsTooltip.svelte" export { TooltipPosition, TooltipType } from "./Tooltip/AbsTooltip.svelte" diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte index 4e74e38f9a..5dee6a34d7 100644 --- a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte +++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte @@ -9,7 +9,6 @@ DatePicker, Modal, notifications, - OptionSelectDnD, Layout, AbsTooltip, ProgressCircle, @@ -42,6 +41,7 @@ import RelationshipSelector from "components/common/RelationshipSelector.svelte" import { RowUtils } from "@budibase/frontend-core" import ServerBindingPanel from "components/common/bindings/ServerBindingPanel.svelte" + import OptionsEditor from "./OptionsEditor.svelte" const AUTO_TYPE = FieldType.AUTO const FORMULA_TYPE = FieldType.FORMULA @@ -558,7 +558,7 @@ bind:value={editableColumn.constraints.length.maximum} /> {:else if editableColumn.type === FieldType.OPTIONS} - @@ -581,7 +581,7 @@ />
{:else if editableColumn.type === FieldType.ARRAY} - diff --git a/packages/bbui/src/OptionSelectDnD/OptionSelectDnD.svelte b/packages/builder/src/components/backend/DataTable/modals/OptionsEditor.svelte similarity index 98% rename from packages/bbui/src/OptionSelectDnD/OptionSelectDnD.svelte rename to packages/builder/src/components/backend/DataTable/modals/OptionsEditor.svelte index 09405325a6..9068d5bc73 100644 --- a/packages/bbui/src/OptionSelectDnD/OptionSelectDnD.svelte +++ b/packages/builder/src/components/backend/DataTable/modals/OptionsEditor.svelte @@ -1,15 +1,14 @@ @@ -254,6 +262,7 @@ bind:this={anchor} class:disabled={$isReordering || $isResizing} class:sticky={idx === "sticky"} + on:dblclick={handleDoubleClick} > Date: Mon, 20 May 2024 15:03:25 +0100 Subject: [PATCH 03/27] Dedupe some logix --- .../src/components/grid/cells/HeaderCell.svelte | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/packages/frontend-core/src/components/grid/cells/HeaderCell.svelte b/packages/frontend-core/src/components/grid/cells/HeaderCell.svelte index d5c2884a60..049ef389c2 100644 --- a/packages/frontend-core/src/components/grid/cells/HeaderCell.svelte +++ b/packages/frontend-core/src/components/grid/cells/HeaderCell.svelte @@ -58,6 +58,7 @@ $: searching = searchValue != null $: debouncedUpdateFilter(searchValue) $: orderable = !column.primaryDisplay + $: editable = $config.canEditColumns && !column.schema.disabled const close = () => { open = false @@ -237,7 +238,7 @@ const debouncedUpdateFilter = debounce(updateFilter, 250) const handleDoubleClick = () => { - if (!$config.canEditColumns || column.schema.disabled || searching) { + if (!editable || searching) { return } open = true @@ -254,12 +255,12 @@
{:else} - + Edit column Date: Tue, 21 May 2024 09:03:53 +0100 Subject: [PATCH 04/27] Assign colours to new options by defaults and use consistent colour set across the board --- .../DataTable/modals/OptionsEditor.svelte | 24 +++++-------------- .../components/grid/cells/OptionsCell.svelte | 9 ++++--- .../grid/cells/RelationshipCell.svelte | 4 ++-- .../src/components/grid/lib/utils.js | 7 ------ packages/frontend-core/src/constants.js | 4 ++++ 5 files changed, 18 insertions(+), 30 deletions(-) diff --git a/packages/builder/src/components/backend/DataTable/modals/OptionsEditor.svelte b/packages/builder/src/components/backend/DataTable/modals/OptionsEditor.svelte index 9068d5bc73..f903edfd2b 100644 --- a/packages/builder/src/components/backend/DataTable/modals/OptionsEditor.svelte +++ b/packages/builder/src/components/backend/DataTable/modals/OptionsEditor.svelte @@ -3,6 +3,7 @@ import { dndzone } from "svelte-dnd-action" import { Icon, Popover } from "@budibase/bbui" import { onMount } from "svelte" + import { Constants } from "@budibase/frontend-core" export let constraints export let optionColors = {} @@ -13,14 +14,6 @@ let colorPopovers = [] let anchors = [] - let colorsArray = [ - "hsla(0, 90%, 75%, 0.3)", - "hsla(50, 80%, 75%, 0.3)", - "hsla(120, 90%, 75%, 0.3)", - "hsla(200, 90%, 75%, 0.3)", - "hsla(240, 90%, 75%, 0.3)", - "hsla(320, 90%, 75%, 0.3)", - ] const removeInput = idx => { delete optionColors[options[idx].name] constraints.inclusion = constraints.inclusion.filter((e, i) => i !== idx) @@ -30,15 +23,10 @@ } const addNewInput = () => { - options = [ - ...options, - { name: `Option ${constraints.inclusion.length + 1}`, id: Math.random() }, - ] - constraints.inclusion = [ - ...constraints.inclusion, - `Option ${constraints.inclusion.length + 1}`, - ] - + const newOption = `Option ${constraints.inclusion.length + 1}` + options = [...options, { name: newOption, id: Math.random() }] + constraints.inclusion = [...constraints.inclusion, newOption] + optionColors[newOption] = Constants.OptionColours[(options.length - 1) % 9] colorPopovers.push(undefined) anchors.push(undefined) } @@ -124,7 +112,7 @@ animate={false} >
- {#each colorsArray as color} + {#each Constants.OptionColours as color}
handleColorChange(option.name, color, idx)} style="--color:{color};" diff --git a/packages/frontend-core/src/components/grid/cells/OptionsCell.svelte b/packages/frontend-core/src/components/grid/cells/OptionsCell.svelte index a815855b09..cb13e1db41 100644 --- a/packages/frontend-core/src/components/grid/cells/OptionsCell.svelte +++ b/packages/frontend-core/src/components/grid/cells/OptionsCell.svelte @@ -1,8 +1,8 @@ -
- {#each options as option, idx (`${option.id}-${idx}`)} - {@const color = getOptionColor(option.name, idx)} -
-
- -
+
+
+ {#each enrichedOptions as option, idx (option.id)}
openColorPickerPopover(idx, e.target)} + class="option" + animate:flip={{ duration: flipDurationMs }} + class:invalid={option.invalid} > -
- -
- {#each OptionColours as colorOption} -
- handleColorChange(option.name, colorOption, idx)} - style="--color:{colorOption};" - class="circle" - class:selected={colorOption === color} - /> - {/each} -
- +
+
+
openColorPickerPopover(idx, e.target)} + > +
+ +
+ {#each OptionColours as colorOption} +
+ handleColorChange(option.name, colorOption, idx)} + style="--color:{colorOption};" + class="circle" + class:selected={colorOption === option.color} + /> + {/each} +
+ +
+
+ handleNameChange(option.name, idx, e.target.value)} + /> +
- handleNameChange(option.name, idx, e.target.value)} - value={option.name} - placeholder="Option name" - id="option-{option.id}" - /> - -
- {/each} + {/each} +
Add option
@@ -147,13 +174,14 @@