diff --git a/packages/bbui/src/Accordion/Accordion.svelte b/packages/bbui/src/Accordion/Accordion.svelte index 1c88450c9a..12ff417609 100644 --- a/packages/bbui/src/Accordion/Accordion.svelte +++ b/packages/bbui/src/Accordion/Accordion.svelte @@ -26,7 +26,7 @@ {header} diff --git a/packages/bbui/src/Form/Core/PickerDropdown.svelte b/packages/bbui/src/Form/Core/PickerDropdown.svelte index cad8b484ee..21149e7b37 100644 --- a/packages/bbui/src/Form/Core/PickerDropdown.svelte +++ b/packages/bbui/src/Form/Core/PickerDropdown.svelte @@ -287,7 +287,7 @@ focusable="false" aria-hidden="true" > - + {#if secondaryOpen} diff --git a/packages/bbui/src/Form/Core/Stepper.svelte b/packages/bbui/src/Form/Core/Stepper.svelte index 816add249f..eb393b5087 100644 --- a/packages/bbui/src/Form/Core/Stepper.svelte +++ b/packages/bbui/src/Form/Core/Stepper.svelte @@ -140,7 +140,7 @@ on:click={stepDown} >
{header}
- {#each split as splitMsg} -
{splitMsg}
- {/each} + {#if message} + {#each split as splitMsg} +
{splitMsg}
+ {/each} + {/if} {#if onConfirm}
@@ -64,4 +66,7 @@ margin: 0; border-width: 1px; } + .spectrum-InLineAlert-header { + line-height: 1.2; + } diff --git a/packages/bbui/src/Layout/Page.svelte b/packages/bbui/src/Layout/Page.svelte index 62dd9cc909..602fe27f45 100644 --- a/packages/bbui/src/Layout/Page.svelte +++ b/packages/bbui/src/Layout/Page.svelte @@ -43,7 +43,7 @@ flex-direction: row; justify-content: flex-start; align-items: stretch; - overflow-y: scroll !important; + overflow-y: auto; flex: 1 1 auto; overflow-x: hidden; } diff --git a/packages/bbui/src/Modal/Modal.svelte b/packages/bbui/src/Modal/Modal.svelte index c5a6ffc17b..c58b615a38 100644 --- a/packages/bbui/src/Modal/Modal.svelte +++ b/packages/bbui/src/Modal/Modal.svelte @@ -182,6 +182,7 @@ --spectrum-global-dimension-size-100 ); max-width: 100%; + background-color: var(--background); } :global(.spectrum--lightest .spectrum-Modal.inline) { border: var(--border-light); diff --git a/packages/bbui/src/Modal/ModalContent.svelte b/packages/bbui/src/Modal/ModalContent.svelte index 8a80b2fdb9..d36480d039 100644 --- a/packages/bbui/src/Modal/ModalContent.svelte +++ b/packages/bbui/src/Modal/ModalContent.svelte @@ -182,6 +182,7 @@ .spectrum-Dialog-heading { font-family: var(--font-accent); font-weight: 600; + font-size: 20px; } .spectrum-Dialog-heading.noDivider { margin-bottom: 12px; diff --git a/packages/bbui/src/Pagination/Pagination.svelte b/packages/bbui/src/Pagination/Pagination.svelte index 2339dcd013..448930f5a4 100644 --- a/packages/bbui/src/Pagination/Pagination.svelte +++ b/packages/bbui/src/Pagination/Pagination.svelte @@ -38,7 +38,7 @@ class:is-disabled={!hasNextPage} >
diff --git a/packages/bbui/src/TreeView/Item.svelte b/packages/bbui/src/TreeView/Item.svelte index 7c56a40771..27175fc9dc 100644 --- a/packages/bbui/src/TreeView/Item.svelte +++ b/packages/bbui/src/TreeView/Item.svelte @@ -14,7 +14,7 @@ {#if $$slots.default}
- {#each Object.entries(external) as [idx, action]} -
selectAction(action)} - > -
- {externalActions[action.stepId].name} - - - {action.stepTitle || idx.charAt(0).toUpperCase() + idx.slice(1)} - - -
-
- {/each} -
- - - - Actions + Actions
{#each Object.entries(internal) as [idx, action]} {@const isDisabled = disabled()[idx] && disabled()[idx].disabled} @@ -176,16 +148,22 @@ on:click={isDisabled ? null : () => selectAction(action)} >
- - {action.name} +
+ +
+

+ {action.name} +

{#if isDisabled && !syncAutomationsEnabled && !triggerAutomationRunEnabled && lockedFeatures.includes(action.stepId)} -
- - Premium - -
+ + Premium + {:else if isDisabled} - + {/if}
@@ -195,7 +173,7 @@ {#if Object.keys(plugins).length} - Plugins + Plugins
{#each Object.entries(plugins) as [_, action]}
selectAction(action)} >
- - {action.name} +
+ +
+

+ {action.name} +

{/each}
{/if} + + Apps +
+ {#each Object.entries(external) as [idx, action]} +
selectAction(action)} + > +
+
+ {externalActions[action.stepId].name} +
+

+ {action.stepTitle || idx.charAt(0).toUpperCase() + idx.slice(1)} +

+
+
+ {/each} +
+ diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/BranchNode.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/BranchNode.svelte index 59cd911ec9..cedf219132 100644 --- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/BranchNode.svelte +++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/BranchNode.svelte @@ -8,8 +8,6 @@ Layout, Body, Divider, - TooltipPosition, - TooltipType, Button, Modal, ModalContent, @@ -29,7 +27,6 @@ export let pathTo export let branchIdx export let step - export let isLast export let bindings export let automation @@ -37,7 +34,7 @@ let drawer let condition - let open = true + let open = false let confirmDeleteModal $: branch = step.inputs?.branches?.[branchIdx] @@ -145,40 +142,7 @@ await automationStore.actions.save(updatedAuto) }} on:toggle={() => (open = !open)} - > -
- { - automationStore.actions.branchLeft( - branchBlockRef.pathTo, - $selectedAutomation.data, - step - ) - }} - tooltip={"Move left"} - tooltipType={TooltipType.Info} - tooltipPosition={TooltipPosition.Top} - hoverable - disabled={branchIdx == 0} - name="chevron-left" - /> - { - automationStore.actions.branchRight( - branchBlockRef.pathTo, - $selectedAutomation.data, - step - ) - }} - tooltip={"Move right"} - tooltipType={TooltipType.Info} - tooltipPosition={TooltipPosition.Top} - hoverable - disabled={isLast} - name="chevron-right" - /> -
- + /> {#if open}
@@ -256,11 +220,11 @@ display: inline-block; } .block { - width: 480px; + width: 380px; font-size: 16px; background-color: var(--background); border: 1px solid var(--spectrum-global-color-gray-300); - border-radius: 4px 4px 4px 4px; + border-radius: 12px; } .blockSection { diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte index bd3f3df185..2ec0bec345 100644 --- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte +++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte @@ -224,6 +224,8 @@ display: flex; justify-content: space-between; align-items: center; + background-color: var(--background); + border-bottom: var(--border-light); padding-left: var(--spacing-l); transition: background 130ms ease-out; flex: 0 0 60px; diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte index 0619b7d0e5..c382bce006 100644 --- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte +++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte @@ -9,10 +9,10 @@ Icon, Divider, Layout, - Detail, Modal, Label, AbsTooltip, + InlineAlert, } from "@budibase/bbui" import { sdk } from "@budibase/shared-core" import AutomationBlockSetup from "../../SetupPanel/AutomationBlockSetup.svelte" @@ -25,7 +25,6 @@ import DragHandle from "components/design/settings/controls/DraggableList/drag-handle.svelte" import { getContext } from "svelte" import DragZone from "./DragZone.svelte" - import InfoDisplay from "pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/InfoDisplay.svelte" export let block export let blockRef @@ -40,8 +39,8 @@ const contentPos = getContext("contentPos") let webhookModal - let open = true - let showLooping = false + let open = false + let showLooping = true let role let blockEle let positionStyles @@ -227,17 +226,19 @@ class="splitHeader" >
- - - +
+ + + +
- Looping +

Looping

@@ -245,8 +246,7 @@ - -
{}}> +
{}}> {#if isTrigger && triggerInfo} - {/if} @@ -371,6 +370,9 @@ display: flex; align-items: center; } + .label { + margin: 0; + } .splitHeader { display: flex; justify-content: space-between; @@ -381,9 +383,8 @@ display: inline-block; } .block { - width: 480px; + width: 360px; font-size: 16px; - border-radius: 4px; } .block .wrap { width: 100%; @@ -394,32 +395,57 @@ flex-direction: row; } .block.draggable .wrap .handle { - height: auto; + position: absolute; + top: -0.5px; + left: -14px; display: flex; justify-content: center; align-items: center; background-color: var(--grey-3); - padding: 6px; + padding: 0 4px; + height: 100%; color: var(--grey-6); cursor: grab; + border-top-left-radius: 12px; + border-bottom-left-radius: 12px; + transition: background 200ms ease; + } + .block.draggable .wrap .handle:hover { + background-color: var(--grey-4); } .block.draggable .wrap .handle.grabbing { cursor: grabbing; } .block.draggable .wrap .handle :global(.drag-handle) { width: 6px; + margin-left: 1px; + padding-top: 4px; } .block .wrap .block-content { width: 100%; display: flex; flex-direction: row; background-color: var(--background); - border: 1px solid var(--grey-3); - border-radius: 4px; + border: 1px solid var(--spectrum-global-color-gray-300); + border-radius: 12px; + } + .block-content:has(.handle) { + border-top-left-radius: 0 !important; + border-bottom-left-radius: 0 !important; } .blockSection { padding: var(--spacing-xl); } + .icon-background-loop { + background-color: #6afdef; + padding: 0; + border-radius: 8px; + min-height: 32px; + min-width: 32px; + display: inline-flex; + justify-content: center; + align-items: center; + } .separator { width: 1px; height: 25px; @@ -430,7 +456,7 @@ .blockTitle { display: flex; align-items: center; - gap: var(--spacing-s); + gap: var(--spacing-l); } .drag-placeholder { height: calc(var(--psheight) - 2px); diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemActions.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemActions.svelte index 8b5cdace56..1e90973676 100644 --- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemActions.svelte +++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemActions.svelte @@ -43,7 +43,7 @@ diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte index eb686875f1..abe573afe7 100644 --- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte +++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte @@ -653,7 +653,7 @@ {#if stepLayouts[block.stepId]} {#each Object.keys(stepLayouts[block.stepId] || {}) as key} - {#if canShowField(stepLayouts[block.stepId].schema)} + {#if canShowField(key, stepLayouts[block.stepId].schema)} {#each stepLayouts[block.stepId][key].content as config} {#if config.title} @@ -678,12 +678,12 @@ {:else} {#each schemaProperties as [key, value]} - {#if canShowField(value)} + {#if canShowField(key, value)} {@const label = getFieldLabel(key, value)}
{#if key !== "fields" && value.type !== "boolean" && shouldRenderField(value)}
-
{/if} -
- {#if value.type === "string" && value.enum && canShowField(value)} +
+ {#if value.type === "string" && value.enum && canShowField(key, value)}