Merge pull request #12432 from Budibase/fix/formblock-ux-updates

Formblock fixes and DraggableList updates

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"

packages/bbui/src/Form/Toggle.svelte

@@ -19,5 +19,5 @@
 </script>
 
 <Field {helpText} {label} {labelPosition} {error}>
-  <Switch {error} {disabled} {text} {value} on:change={onChange} />
+  <Switch {error} {disabled} {text} {value} on:change={onChange} on:click />
 </Field>

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)
+      }}
     />
   </div>
 </div>

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)}
     <li
+      on:click={() => {
+        get(store).actions.select(draggableItem.id)
+      }}
       on:mousedown={() => {
         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}
     >
       <div class="left-content">
         {#if showHandle}
-          <div class="handle">
+          <div
+            class="handle"
+            aria-label="drag-handle"
+            style={!inactive ? "cursor:grabbing" : "cursor:grab"}
+            on:mousedown={() => {
+              inactive = false
+            }}
+            on:mouseup={() => {
+              inactive = true
+            }}
+          >
             <DragHandle />
           </div>
         {/if}
@@ -102,8 +118,8 @@
       <div class="right-content">
         <svelte:component
           this={listType}
-          anchor={anchors[draggable.item._id]}
-          item={draggable.item}
+          anchor={anchors[draggableItem.item._id]}
+          item={draggableItem.item}
           {...listTypeProps}
           on:change={onItemChanged}
         />
@@ -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);

packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldConfiguration.svelte

@@ -156,7 +156,7 @@
 
 <div class="field-configuration">
   <div class="toggle-all">
-    <span />
+    <span>Fields</span>
     <Toggle
       on:change={() => {
         let update = fieldList.map(field => ({
@@ -186,6 +186,9 @@
 </div>
 
 <style>
+  .field-configuration {
+    padding-top: 8px;
+  }
   .field-configuration :global(.spectrum-ActionButton) {
     width: 100%;
   }
@@ -204,6 +207,5 @@
   .toggle-all span {
     color: var(--spectrum-global-color-gray-700);
     font-size: 12px;
-    margin-left: calc(var(--spacing-s) - 1px);
   }
 </style>

packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldSetting.svelte

@@ -58,7 +58,15 @@
     <div class="field-label">{readableText}</div>
   </div>
   <div class="list-item-right">
-    <Toggle on:change={onToggle(item)} text="" value={item.active} thin />
+    <Toggle
+      on:change={onToggle(item)}
+      on:click={e => {
+        e.stopPropagation()
+      }}
+      text=""
+      value={item.active}
+      thin
+    />
   </div>
 </div>
 

packages/client/manifest.json

@@ -6056,18 +6056,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": {
@@ -6075,7 +6063,7 @@
           "value": "Create",
           "invert": true
         },
-        "name": "Row details",
+        "name": "Row ID",
         "info": "<a href='https://docs.budibase.com/docs/form-block' target='_blank'>How to pass a row ID using bindings</a>",
         "settings": [
           {
@@ -6095,8 +6083,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",