From 1d1de31c3514a1be58fe951c702d951a0509bae2 Mon Sep 17 00:00:00 2001 From: Dean Date: Fri, 8 Jul 2022 09:09:21 +0100 Subject: [PATCH 1/4] Action drawer updates. Actions now grouped by type and filterable in the action drawer --- .../ButtonActionDrawer.svelte | 110 +++++++++++++++--- .../ButtonActionEditor.svelte | 12 ++ .../ButtonActionEditor/manifest.json | 19 ++- 3 files changed, 124 insertions(+), 17 deletions(-) diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/ButtonActionDrawer.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/ButtonActionDrawer.svelte index 5b0ab4a6a3..c78611c950 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/ButtonActionDrawer.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/ButtonActionDrawer.svelte @@ -6,8 +6,8 @@ Button, Layout, DrawerContent, - ActionMenu, - MenuItem, + ActionButton, + Search, } from "@budibase/bbui" import { getAvailableActions } from "./index" import { generate } from "shortid" @@ -22,8 +22,24 @@ export let actions export let bindings = [] + let showAvailableActions = false + + let actionQuery + $: parsedQuery = + typeof actionQuery === "string" ? actionQuery.toLowerCase().trim() : "" + let selectedAction = actions?.length ? actions[0] : null + $: mappedActionTypes = actionTypes.reduce((acc, action) => { + let parsedName = action.name.toLowerCase().trim() + if (parsedQuery.length && parsedName.indexOf(parsedQuery) < 0) { + return acc + } + acc[action.type] = acc[action.type] || [] + acc[action.type].push(action) + return acc + }, {}) + // These are ephemeral bindings which only exist while executing actions $: buttonContextBindings = getButtonContextBindings( $currentAsset, @@ -61,7 +77,12 @@ actions = actions } - const addAction = actionType => () => { + const toggleActionList = () => { + actionQuery = null + showAvailableActions = !showAvailableActions + } + + const addAction = actionType => { const newAction = { parameters: {}, [EVENT_TYPE_KEY]: actionType.name, @@ -78,6 +99,11 @@ selectedAction = action } + const onAddAction = actionType => { + addAction(actionType) + toggleActionList() + } + function handleDndConsider(e) { actions = e.detail.items } @@ -88,7 +114,29 @@ - {#if actions && actions.length > 0} + {#if showAvailableActions} +
+ + Back + +
+ + {#each Object.entries(mappedActionTypes) as [categoryId, category]} +
{categoryId}
+
    + {#each category as actionType} +
  • + {actionType.name} +
    • + {/each} +
+ {/each} + {/if} + + {#if actions && actions.length > 0 && !showAvailableActions} +
+ +
{/if} - - - {#each actionTypes as actionType} - - {actionType.name} - - {/each} - - {#if selectedActionComponent} + {#if selectedActionComponent && !showAvailableActions} {#key selectedAction.id}
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/ButtonActionEditor.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/ButtonActionEditor.svelte index 550d982013..8e5954f078 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/ButtonActionEditor.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/ButtonActionEditor.svelte @@ -69,9 +69,15 @@ notifications.error("Error creating automation") } } + + $: actionCount = value?.length + $: actionText = `${actionCount || "No"} action${ + actionCount !== 1 ? "s" : "" + } set` Define actions +
{actionText}
Define what actions to run. @@ -85,3 +91,9 @@ {key} /> + + diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/manifest.json b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/manifest.json index cf18fee3a6..40aa606f88 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/manifest.json +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/manifest.json @@ -2,6 +2,7 @@ "actions": [ { "name": "Save Row", + "type": "data", "component": "SaveRow", "context": [ { @@ -12,6 +13,7 @@ }, { "name": "Duplicate Row", + "type": "data", "component": "DuplicateRow", "context": [ { @@ -22,14 +24,17 @@ }, { "name": "Delete Row", + "type": "data", "component": "DeleteRow" }, { "name": "Navigate To", + "type": "ui/ux", "component": "NavigateTo" }, { "name": "Execute Query", + "type": "data", "component": "ExecuteQuery", "context": [ { @@ -40,43 +45,53 @@ }, { "name": "Trigger Automation", + "type": "ui/ux", "component": "TriggerAutomation" }, { "name": "Update Field Value", + "type": "form", "component": "UpdateFieldValue" }, { "name": "Validate Form", + "type": "form", "component": "ValidateForm" }, { "name": "Change Form Step", + "type": "form", "component": "ChangeFormStep" }, { "name": "Clear Form", + "type": "form", "component": "ClearForm" }, { "name": "Log Out", + "type": "ui/ux", "component": "LogOut" }, { "name": "Close Screen Modal", + "type": "ui/ux", "component": "CloseScreenModal" }, { "name": "Refresh Data Provider", + "type": "data", "component": "RefreshDataProvider" }, { "name": "Update State", + "type": "data", "component": "UpdateState", "dependsOnFeature": "state" }, { "name": "Upload File to S3", + "type": "data", "component": "S3Upload", "context": [ { @@ -87,12 +102,14 @@ }, { "name": "Export Data", + "type": "data", "component": "ExportData" }, { "name": "Continue if / Stop if", + "type": "ui/ux", "component": "ContinueIf", "dependsOnFeature": "continueIfAction" } ] -} +} \ No newline at end of file From 00eb3bfee3d7f673403bc074659d709337b946ac Mon Sep 17 00:00:00 2001 From: Dean Date: Wed, 13 Jul 2022 09:09:00 +0100 Subject: [PATCH 2/4] Made action visibility react based on the number of loaded actions --- .../ButtonActionDrawer.svelte | 20 ++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/ButtonActionDrawer.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/ButtonActionDrawer.svelte index c78611c950..63fd952026 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/ButtonActionDrawer.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/ButtonActionDrawer.svelte @@ -22,7 +22,7 @@ export let actions export let bindings = [] - let showAvailableActions = false + $: showAvailableActions = !actions?.length let actionQuery $: parsedQuery = @@ -114,12 +114,18 @@ - {#if showAvailableActions} -
- - Back - -
+ {#if showAvailableActions || !actions?.length} + {#if actions?.length > 0} +
+ + Back + +
+ {/if} {#each Object.entries(mappedActionTypes) as [categoryId, category]}
{categoryId}
From e3170c2a2f3511d913dded1eb9162ecf051464d2 Mon Sep 17 00:00:00 2001 From: Dean Date: Wed, 13 Jul 2022 12:30:58 +0100 Subject: [PATCH 3/4] Updated action categories, adding a logic specific entry for the conditional step. Shift the action text above the button. --- .../ButtonActionEditor/ButtonActionEditor.svelte | 6 ++++-- .../settings/controls/ButtonActionEditor/manifest.json | 10 +++++----- 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionEditor.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionEditor.svelte index 8e5954f078..331d9e4c5d 100644 --- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionEditor.svelte +++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionEditor.svelte @@ -76,8 +76,9 @@ } set` -Define actions
{actionText}
+Define actions + Define what actions to run. @@ -94,6 +95,7 @@ diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/manifest.json b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/manifest.json index 40aa606f88..c00b8dddec 100644 --- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/manifest.json +++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/manifest.json @@ -29,7 +29,7 @@ }, { "name": "Navigate To", - "type": "ui/ux", + "type": "application", "component": "NavigateTo" }, { @@ -45,7 +45,7 @@ }, { "name": "Trigger Automation", - "type": "ui/ux", + "type": "application", "component": "TriggerAutomation" }, { @@ -70,12 +70,12 @@ }, { "name": "Log Out", - "type": "ui/ux", + "type": "application", "component": "LogOut" }, { "name": "Close Screen Modal", - "type": "ui/ux", + "type": "application", "component": "CloseScreenModal" }, { @@ -107,7 +107,7 @@ }, { "name": "Continue if / Stop if", - "type": "ui/ux", + "type": "logic", "component": "ContinueIf", "dependsOnFeature": "continueIfAction" } From 8426088c2adc0b879d32c31d9cac2a34cabd3060 Mon Sep 17 00:00:00 2001 From: Dean Date: Wed, 13 Jul 2022 16:53:08 +0100 Subject: [PATCH 4/4] Refactoring of the button actions layout, updating the padding of the action categories to better separate them. --- .../ButtonActionDrawer.svelte | 68 +++++++++++-------- 1 file changed, 41 insertions(+), 27 deletions(-) diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionDrawer.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionDrawer.svelte index 63fd952026..31962077fc 100644 --- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionDrawer.svelte +++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionDrawer.svelte @@ -115,28 +115,32 @@ {#if showAvailableActions || !actions?.length} - {#if actions?.length > 0} -
- - Back - +
+ {#if actions?.length > 0} +
+ + Back + +
+ {/if} +
+
- {/if} - - {#each Object.entries(mappedActionTypes) as [categoryId, category]} -
{categoryId}
-
    - {#each category as actionType} -
  • - {actionType.name} -
    • - {/each} -
- {/each} + {#each Object.entries(mappedActionTypes) as [categoryId, category], idx} +
{categoryId}
+
    + {#each category as actionType} +
  • + {actionType.name} +
    • + {/each} +
+ {/each} +
{/if} {#if actions && actions.length > 0 && !showAvailableActions} @@ -226,6 +230,19 @@ color: var(--spectrum-global-color-gray-900); } + .actions-list > * { + padding-bottom: var(--spectrum-global-dimension-static-size-200); + } + + .actions-list .heading { + padding-bottom: var(--spectrum-global-dimension-static-size-100); + padding-top: var(--spectrum-global-dimension-static-size-50); + } + + .actions-list .heading.top-entry { + padding-top: 0px; + } + ul { list-style: none; padding: 0; @@ -236,7 +253,7 @@ font-size: var(--font-size-s); padding: var(--spacing-m); border-radius: 4px; - border: var(--border-light); + background-color: var(--spectrum-global-color-gray-200); transition: background-color 130ms ease-in-out, color 130ms ease-in-out, border-color 130ms ease-in-out; word-wrap: break-word; @@ -250,13 +267,10 @@ li:hover { color: var(--spectrum-global-color-gray-900); background-color: var(--spectrum-global-color-gray-50); - border-color: var(--spectrum-global-color-gray-500); cursor: pointer; } - li:hover :global(*) { - color: var(--spectrum-global-color-gray-900) !important; - } - .binding__label { + + .action-name { font-weight: 600; text-transform: capitalize; }