From 8cc5eb19e64774a0190eab4dec8c3974743b6e30 Mon Sep 17 00:00:00 2001 From: Dean Date: Thu, 23 Nov 2023 18:08:39 +0000 Subject: [PATCH 1/8] Formblock fixes --- packages/bbui/src/Form/Core/Switch.svelte | 1 + packages/bbui/src/Form/Toggle.svelte | 2 +- .../ButtonConfiguration/ButtonSetting.svelte | 5 ++- .../DraggableList/DraggableList.svelte | 40 ++++++++++++++----- .../FieldConfiguration.svelte | 6 ++- .../FieldConfiguration/FieldSetting.svelte | 10 ++++- packages/client/manifest.json | 28 ++++++------- 7 files changed, 63 insertions(+), 29 deletions(-) diff --git a/packages/bbui/src/Form/Core/Switch.svelte b/packages/bbui/src/Form/Core/Switch.svelte index ffbef6b27d..deffc19167 100644 --- a/packages/bbui/src/Form/Core/Switch.svelte +++ b/packages/bbui/src/Form/Core/Switch.svelte @@ -18,6 +18,7 @@ checked={value} {disabled} on:change={onChange} + on:click {id} type="checkbox" class="spectrum-Switch-input" diff --git a/packages/bbui/src/Form/Toggle.svelte b/packages/bbui/src/Form/Toggle.svelte index d452aa8f80..1fbad949ca 100644 --- a/packages/bbui/src/Form/Toggle.svelte +++ b/packages/bbui/src/Form/Toggle.svelte @@ -19,5 +19,5 @@ - + diff --git a/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonSetting.svelte b/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonSetting.svelte index 56b5deace4..77c4458d01 100644 --- a/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonSetting.svelte +++ b/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonSetting.svelte @@ -55,7 +55,10 @@ size="S" name="Close" hoverable - on:click={() => removeButton(item._id)} + on:click={e => { + e.stopPropagation() + removeButton(item._id) + }} /> diff --git a/packages/builder/src/components/design/settings/controls/DraggableList/DraggableList.svelte b/packages/builder/src/components/design/settings/controls/DraggableList/DraggableList.svelte index 69d3c382cd..18b6700040 100644 --- a/packages/builder/src/components/design/settings/controls/DraggableList/DraggableList.svelte +++ b/packages/builder/src/components/design/settings/controls/DraggableList/DraggableList.svelte @@ -32,11 +32,14 @@ } const dispatch = createEventDispatcher() - const flipDurationMs = 150 let anchors = {} let draggableItems = [] + // Used for controlling cursor behaviour in order to limit drag behaviour + // to the drag handle + let inactive = true + const buildDraggable = items => { return items .map(item => { @@ -64,6 +67,7 @@ } const handleFinalize = e => { + inactive = true updateRowOrder(e) dispatch("change", serialiseUpdate()) } @@ -77,24 +81,36 @@ class="list-wrap" use:dndzone={{ items: draggableItems, - flipDurationMs, dropTargetStyle: { outline: "none" }, - dragDisabled: !draggable, + dragDisabled: !draggable || inactive, }} on:finalize={handleFinalize} on:consider={updateRowOrder} > - {#each draggableItems as draggable (draggable.id)} + {#each draggableItems as draggableItem (draggableItem.id)}
  • { + on:click={() => { + get(store).actions.select(draggableItem.id) + }} + on:mousedown={e => { get(store).actions.select() }} - bind:this={anchors[draggable.id]} - class:highlighted={draggable.id === $store.selected} + bind:this={anchors[draggableItem.id]} + class:highlighted={draggableItem.id === $store.selected} >
    {#if showHandle} -
    +
    { + inactive = false + }} + on:mouseup={() => { + inactive = true + }} + >
    {/if} @@ -102,8 +118,8 @@
    @@ -143,6 +159,7 @@ --spectrum-table-row-background-color-hover, var(--spectrum-alias-highlight-hover) ); + cursor: pointer; } .list-wrap > li:first-child { border-top-left-radius: 4px; @@ -165,6 +182,9 @@ display: flex; height: var(--spectrum-global-dimension-size-150); } + .handle:hover { + cursor: grab; + } .handle :global(svg) { fill: var(--spectrum-global-color-gray-500); margin-right: var(--spacing-m); diff --git a/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldConfiguration.svelte b/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldConfiguration.svelte index dfc4ddddc1..b0e0691790 100644 --- a/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldConfiguration.svelte +++ b/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldConfiguration.svelte @@ -156,7 +156,7 @@
    - + Fields { let update = fieldList.map(field => ({ @@ -186,6 +186,9 @@
    diff --git a/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldSetting.svelte b/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldSetting.svelte index 1d9ce733b8..8c40c455c8 100644 --- a/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldSetting.svelte +++ b/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldSetting.svelte @@ -58,7 +58,15 @@
    {readableText}
    - + { + e.stopPropagation() + }} + text="" + value={item.active} + thin + />
    diff --git a/packages/client/manifest.json b/packages/client/manifest.json index 07645d874a..8573d0a376 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -6040,18 +6040,6 @@ "options": ["Create", "Update", "View"], "defaultValue": "Create" }, - { - "type": "text", - "label": "Title", - "key": "title", - "nested": true - }, - { - "type": "text", - "label": "Description", - "key": "description", - "nested": true - }, { "section": true, "dependsOn": { @@ -6059,7 +6047,7 @@ "value": "Create", "invert": true }, - "name": "Row details", + "name": "Row ID", "info": "How to pass a row ID using bindings", "settings": [ { @@ -6079,8 +6067,20 @@ }, { "section": true, - "name": "Fields", + "name": "Details", "settings": [ + { + "type": "text", + "label": "Title", + "key": "title", + "nested": true + }, + { + "type": "text", + "label": "Description", + "key": "description", + "nested": true + }, { "type": "fieldConfiguration", "key": "fields", From 22dc6a682b870691fb05a9fa9cc4dead31a7db28 Mon Sep 17 00:00:00 2001 From: Dean Date: Thu, 23 Nov 2023 18:15:33 +0000 Subject: [PATCH 2/8] Lint --- .../design/settings/controls/DraggableList/DraggableList.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/builder/src/components/design/settings/controls/DraggableList/DraggableList.svelte b/packages/builder/src/components/design/settings/controls/DraggableList/DraggableList.svelte index 18b6700040..cce11e4b17 100644 --- a/packages/builder/src/components/design/settings/controls/DraggableList/DraggableList.svelte +++ b/packages/builder/src/components/design/settings/controls/DraggableList/DraggableList.svelte @@ -92,7 +92,7 @@ on:click={() => { get(store).actions.select(draggableItem.id) }} - on:mousedown={e => { + on:mousedown={() => { get(store).actions.select() }} bind:this={anchors[draggableItem.id]} From c3c7a5980db334f4fc01face556a93d2e4caf3a3 Mon Sep 17 00:00:00 2001 From: Dean Date: Tue, 28 Nov 2023 09:31:06 +0000 Subject: [PATCH 3/8] PR Feedback --- .../controls/FieldConfiguration/FieldConfiguration.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldConfiguration.svelte b/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldConfiguration.svelte index b0e0691790..7f1ac1cf25 100644 --- a/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldConfiguration.svelte +++ b/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldConfiguration.svelte @@ -187,7 +187,7 @@