MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

merge updates

This commit is contained in:
Joe 2024-12-31 14:42:45 +00:00
parent a726825eb1 9ff9569ad2
commit ebaea883d6
34 changed files with 357 additions and 238 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/bbui/src/Accordion/Accordion.svelte
View File

@ -26,7 +26,7 @@
{header} {header}
</button> </button>
<svg <svg
class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Accordion-itemIndicator" class="spectrum-Icon spectrum-UIIcon-chevron-right100 spectrum-Accordion-itemIndicator"
focusable="false" focusable="false"
aria-hidden="true" aria-hidden="true"
> >

4
packages/bbui/src/Form/Core/Combobox.svelte
View File

@ -73,11 +73,11 @@
on:click={() => (open = !open)} on:click={() => (open = !open)}
> >
<svg <svg
class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon spectrum-InputGroup-icon" class="spectrum-Icon spectrum-Picker-menuIcon spectrum-InputGroup-icon"
focusable="false" focusable="false"
aria-hidden="true" aria-hidden="true"
> >
<use xlink:href="#spectrum-css-icon-Chevron100" /> <use xlink:href="#chevron-down-size300" />
</svg> </svg>
</button> </button>
</div> </div>

2
packages/bbui/src/Form/Core/DatePicker/Calendar.svelte
View File

@ -121,7 +121,7 @@
on:click={() => (calendarDate = calendarDate.add(1, "month"))} on:click={() => (calendarDate = calendarDate.add(1, "month"))}
> >
<svg <svg
class="spectrum-Icon spectrum-UIIcon-ChevronRight100" class="spectrum-Icon spectrum-UIIcon-chevron-right100"
focusable="false" focusable="false"
aria-hidden="true" aria-hidden="true"
> >

2
packages/bbui/src/Form/Core/InputDropdown.svelte
View File

@ -155,7 +155,7 @@
focusable="false" focusable="false"
aria-hidden="true" aria-hidden="true"
> >
<use xlink:href="#spectrum-css-icon-Chevron100" /> <use xlink:href="#icon-chevron-down-size300" />
</svg> </svg>
</button> </button>
</div> </div>

2
packages/bbui/src/Form/Core/Picker.svelte
View File

@ -144,7 +144,7 @@
focusable="false" focusable="false"
aria-hidden="true" aria-hidden="true"
> >
<use xlink:href="#spectrum-css-icon-Chevron100" /> <use xlink:href="#icon-chevron-down-size300" />
</svg> </svg>
</button> </button>

2
packages/bbui/src/Form/Core/PickerDropdown.svelte
View File

@ -287,7 +287,7 @@
focusable="false" focusable="false"
aria-hidden="true" aria-hidden="true"
> >
<use xlink:href="#spectrum-css-icon-Chevron100" /> <use xlink:href="#icon-chevron-down-size300" />
</svg> </svg>
</button> </button>
{#if secondaryOpen} {#if secondaryOpen}

2
packages/bbui/src/Form/Core/Stepper.svelte
View File

@ -140,7 +140,7 @@
on:click={stepDown} on:click={stepDown}
> >
<svg <svg
class="spectrum-Icon spectrum-UIIcon-ChevronDown75" class="spectrum-Icon spectrum-UIIcon-Chevron-down-size30075"
focusable="false" focusable="false"
aria-hidden="true" aria-hidden="true"
> >

11
packages/bbui/src/InlineAlert/InlineAlert.svelte
View File

@ -38,9 +38,11 @@
</svg> </svg>
<div class="spectrum-InLineAlert-header">{header}</div> <div class="spectrum-InLineAlert-header">{header}</div>
<slot> <slot>
{#each split as splitMsg} {#if message}
<div class="spectrum-InLineAlert-content">{splitMsg}</div> {#each split as splitMsg}
{/each} <div class="spectrum-InLineAlert-content">{splitMsg}</div>
{/each}
{/if}
</slot> </slot>
{#if onConfirm} {#if onConfirm}
<div class="spectrum-InLineAlert-footer button"> <div class="spectrum-InLineAlert-footer button">
@ -64,4 +66,7 @@
margin: 0; margin: 0;
border-width: 1px; border-width: 1px;
} }
.spectrum-InLineAlert-header {
line-height: 1.2;
}
</style> </style>

2
packages/bbui/src/Layout/Page.svelte
View File

@ -43,7 +43,7 @@
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
align-items: stretch; align-items: stretch;
overflow-y: scroll !important; overflow-y: auto;
flex: 1 1 auto; flex: 1 1 auto;
overflow-x: hidden; overflow-x: hidden;
} }

1
packages/bbui/src/Modal/Modal.svelte
View File

@ -182,6 +182,7 @@
--spectrum-global-dimension-size-100 --spectrum-global-dimension-size-100
); );
max-width: 100%; max-width: 100%;
background-color: var(--background);
} }
:global(.spectrum--lightest .spectrum-Modal.inline) { :global(.spectrum--lightest .spectrum-Modal.inline) {
border: var(--border-light); border: var(--border-light);

1
packages/bbui/src/Modal/ModalContent.svelte
View File

@ -182,6 +182,7 @@
.spectrum-Dialog-heading { .spectrum-Dialog-heading {
font-family: var(--font-accent); font-family: var(--font-accent);
font-weight: 600; font-weight: 600;
font-size: 20px;
} }
.spectrum-Dialog-heading.noDivider { .spectrum-Dialog-heading.noDivider {
margin-bottom: 12px; margin-bottom: 12px;

2
packages/bbui/src/Pagination/Pagination.svelte
View File

@ -38,7 +38,7 @@
class:is-disabled={!hasNextPage} class:is-disabled={!hasNextPage}
> >
<svg <svg
class="spectrum-Icon spectrum-UIIcon-ChevronRight100" class="spectrum-Icon spectrum-UIIcon-chevron-right100"
focusable="false" focusable="false"
aria-hidden="true" aria-hidden="true"
aria-label="ChevronLeft" aria-label="ChevronLeft"

52
packages/bbui/src/Tags/Tag.svelte
View File

@ -31,13 +31,59 @@
{/if} {/if}
<span class="spectrum-Tags-itemLabel"><slot /></span> <span class="spectrum-Tags-itemLabel"><slot /></span>
{#if closable} {#if closable}
<ClearButton on:click /> <ClearButton small id="clear" on:click />
{/if} {/if}
</div> </div>
<style> <style>
.spectrum-Tags-item > .spectrum-Icon {
margin-right: 2px !important;
}
.spectrum-Tags-item { .spectrum-Tags-item {
margin-bottom: 0; position: relative;
margin-top: 0; display: inline-flex !important;
max-width: 100%;
align-items: center !important;
padding: 2px 8px !important;
background-color: var(--spectrum-global-color-gray-300);
border: none;
border-radius: 7px;
text-decoration: none;
color: var(--spectrum-global-color-gray-900);
}
/* Change the color of the tag to draw the eye */
.spectrum-Tags-item:has(.spectrum-Icon) {
position: relative;
display: inline-flex !important;
max-width: 100%;
align-items: center !important;
padding: 2px 8px !important;
background-color: var(--spectrum-global-color-indigo-700);
border: none;
border-radius: 7px;
text-decoration: none;
color: var(--spectrum-global-color-indigo-100);
}
/* Change the color of the tag to match the default tag when it has a close button */
.spectrum-Tags-item:has(.spectrum-Icon):has(button):has(svg) {
position: relative;
display: inline-flex !important;
max-width: 100%;
align-items: center !important;
padding: 2px 8px !important;
background-color: var(--spectrum-global-color-gray-300);
border: none;
border-radius: 7px;
text-decoration: none;
color: var(--spectrum-global-color-gray-900);
}
.spectrum-Tags-itemLabel {
font-size: 13px;
font-weight: 400;
pointer-events: auto;
margin: 0 !important;
line-height: 1 !important;
height: auto;
} }
</style> </style>

2
packages/bbui/src/TreeView/Item.svelte
View File

@ -14,7 +14,7 @@
<a on:click class="spectrum-TreeView-itemLink" {href}> <a on:click class="spectrum-TreeView-itemLink" {href}>
{#if $$slots.default} {#if $$slots.default}
<svg <svg
class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" class="spectrum-Icon spectrum-UIIcon-chevron-right100 spectrum-TreeView-itemIndicator"
focusable="false" focusable="false"
aria-hidden="true" aria-hidden="true"
> >

142
packages/builder/src/components/automation/AutomationBuilder/FlowChart/ActionModal.svelte
View File

@ -3,7 +3,6 @@
ModalContent, ModalContent,
Layout, Layout,
Detail, Detail,
Body,
Icon, Icon,
notifications, notifications,
Tags, Tags,
@ -132,40 +131,13 @@
<!-- svelte-ignore a11y-no-static-element-interactions --> <!-- svelte-ignore a11y-no-static-element-interactions -->
<ModalContent <ModalContent
title="Add automation step" title="Add automation step"
size="L" size="XL"
showConfirmButton={false} showConfirmButton={false}
showCancelButton={false} showCancelButton={false}
disabled={!selectedAction} disabled={!selectedAction}
> >
<Layout noPadding gap="XS"> <Layout noPadding gap="XS">
<Detail size="S">Apps</Detail> <Detail size="L">Actions</Detail>
<div class="item-list">
{#each Object.entries(external) as [idx, action]}
<div
class="item"
class:selected={selectedAction === action.name}
on:click={() => selectAction(action)}
>
<div class="item-body">
<img
width={20}
height={20}
src={externalActions[action.stepId].icon}
alt={externalActions[action.stepId].name}
/>
<span class="icon-spacing">
<Body size="XS">
{action.stepTitle || idx.charAt(0).toUpperCase() + idx.slice(1)}
</Body>
</span>
</div>
</div>
{/each}
</div>
</Layout>
<Layout noPadding gap="XS">
<Detail size="S">Actions</Detail>
<div class="item-list"> <div class="item-list">
{#each Object.entries(internal) as [idx, action]} {#each Object.entries(internal) as [idx, action]}
{@const isDisabled = disabled()[idx] && disabled()[idx].disabled} {@const isDisabled = disabled()[idx] && disabled()[idx].disabled}
@ -176,16 +148,22 @@
on:click={isDisabled ? null : () => selectAction(action)} on:click={isDisabled ? null : () => selectAction(action)}
> >
<div class="item-body"> <div class="item-body">
<Icon name={action.icon} /> <div class="icon-background">
<Body size="XS">{action.name}</Body> <Icon size="M" name={action.icon} />
</div>
<p>
{action.name}
</p>
{#if isDisabled && !syncAutomationsEnabled && !triggerAutomationRunEnabled && lockedFeatures.includes(action.stepId)} {#if isDisabled && !syncAutomationsEnabled && !triggerAutomationRunEnabled && lockedFeatures.includes(action.stepId)}
<div class="tag-color"> <Tags>
<Tags> <Tag icon="lock">Premium</Tag>
<Tag icon="lock">Premium</Tag> </Tags>
</Tags>
</div>
{:else if isDisabled} {:else if isDisabled}
<Icon name="Help" tooltip={disabled()[idx].message} /> <Icon
name="Help"
tooltip={disabled()[idx].message}
color="var(--spectrum-global-color-gray-700)"
/>
{/if} {/if}
</div> </div>
</div> </div>
@ -195,7 +173,7 @@
{#if Object.keys(plugins).length} {#if Object.keys(plugins).length}
<Layout noPadding gap="XS"> <Layout noPadding gap="XS">
<Detail size="S">Plugins</Detail> <Detail size="L">Plugins</Detail>
<div class="item-list"> <div class="item-list">
{#each Object.entries(plugins) as [_, action]} {#each Object.entries(plugins) as [_, action]}
<div <div
@ -204,27 +182,57 @@
on:click={() => selectAction(action)} on:click={() => selectAction(action)}
> >
<div class="item-body"> <div class="item-body">
<Icon name={action.icon} /> <div class="icon-background">
<Body size="XS">{action.name}</Body> <Icon size="M" name={action.icon} />
</div>
<p>
{action.name}
</p>
</div> </div>
</div> </div>
{/each} {/each}
</div> </div>
</Layout> </Layout>
{/if} {/if}
<Layout noPadding gap="XS">
<Detail size="L">Apps</Detail>
<div class="item-list">
{#each Object.entries(external) as [idx, action]}
<div
class="item"
class:selected={selectedAction === action.name}
on:click={() => selectAction(action)}
>
<div class="item-body">
<div class="icon-background-external">
<img
width={20}
height={20}
src={externalActions[action.stepId].icon}
alt={externalActions[action.stepId].name}
/>
</div>
<p>
{action.stepTitle || idx.charAt(0).toUpperCase() + idx.slice(1)}
</p>
</div>
</div>
{/each}
</div>
</Layout>
</ModalContent> </ModalContent>
<style> <style>
.item-body { .item-body {
display: flex; display: flex;
margin-left: var(--spacing-m); margin-left: var(--spacing-xs);
gap: var(--spacing-m); gap: var(--spacing-m);
align-items: center; align-items: center;
} }
.item-list { .item-list {
display: grid; display: grid;
grid-template-columns: repeat(2, minmax(150px, 1fr)); grid-template-columns: repeat(3, minmax(200px, 1fr));
grid-gap: var(--spectrum-alias-grid-baseline); grid-gap: 10px;
} }
.item { .item {
@ -233,24 +241,52 @@
padding: var(--spectrum-alias-item-padding-s); padding: var(--spectrum-alias-item-padding-s);
background: var(--spectrum-alias-background-color-secondary); background: var(--spectrum-alias-background-color-secondary);
transition: 0.3s all; transition: 0.3s all;
border: solid var(--spectrum-alias-border-color); border: solid var(--spectrum-global-color-gray-200);
border-radius: 5px; border-radius: 6px;
box-sizing: border-box; box-sizing: border-box;
border-width: 2px; border-width: 1px;
} }
.item p {
font-size: 16px !important;
margin: 0;
color: var(--spectrum-global-color-gray-900);
}
:is(.disabled) p {
color: var(--spectrum-global-color-gray-600);
}
.item:not(.disabled):hover, .item:not(.disabled):hover,
.selected { .selected {
background: var(--spectrum-alias-background-color-tertiary); background: var(--spectrum-alias-background-color-tertiary);
} }
.disabled { .disabled {
background: var(--spectrum-global-color-gray-200); background: var(--spectrum-global-color-gray-200);
color: var(--spectrum-global-color-gray-500); cursor: auto;
color: var(--spectrum-global-color-gray-300) !important;
} }
.disabled :global(.spectrum-Body) { .icon-background {
color: var(--spectrum-global-color-gray-600); background-color: #5e12f7;
padding: 0;
border-radius: 6px;
min-height: 28px;
min-width: 28px;
display: inline-flex;
justify-content: center;
align-items: center;
color: white;
} }
.icon-background-external {
.tag-color :global(.spectrum-Tags-item) { background-color: var(--spectrum-global-color-gray-200);
background: var(--spectrum-global-color-gray-200); padding: 0;
border-radius: 6px;
min-height: 28px;
min-width: 28px;
display: inline-flex;
justify-content: center;
align-items: center;
}
img {
border-radius: 6px;
padding: 2px;
} }
</style> </style>

44
packages/builder/src/components/automation/AutomationBuilder/FlowChart/BranchNode.svelte
View File

@ -8,8 +8,6 @@
Layout, Layout,
Body, Body,
Divider, Divider,
TooltipPosition,
TooltipType,
Button, Button,
Modal, Modal,
ModalContent, ModalContent,
@ -29,7 +27,6 @@
export let pathTo export let pathTo
export let branchIdx export let branchIdx
export let step export let step
export let isLast
export let bindings export let bindings
export let automation export let automation
@ -37,7 +34,7 @@
let drawer let drawer
let condition let condition
let open = true let open = false
let confirmDeleteModal let confirmDeleteModal
$: branch = step.inputs?.branches?.[branchIdx] $: branch = step.inputs?.branches?.[branchIdx]
@ -145,40 +142,7 @@
await automationStore.actions.save(updatedAuto) await automationStore.actions.save(updatedAuto)
}} }}
on:toggle={() => (open = !open)} on:toggle={() => (open = !open)}
> />
<div slot="custom-actions" class="branch-actions">
<Icon
on:click={() => {
automationStore.actions.branchLeft(
branchBlockRef.pathTo,
$selectedAutomation.data,
step
)
}}
tooltip={"Move left"}
tooltipType={TooltipType.Info}
tooltipPosition={TooltipPosition.Top}
hoverable
disabled={branchIdx == 0}
name="chevron-left"
/>
<Icon
on:click={() => {
automationStore.actions.branchRight(
branchBlockRef.pathTo,
$selectedAutomation.data,
step
)
}}
tooltip={"Move right"}
tooltipType={TooltipType.Info}
tooltipPosition={TooltipPosition.Top}
hoverable
disabled={isLast}
name="chevron-right"
/>
</div>
</FlowItemHeader>
{#if open} {#if open}
<Divider noMargin /> <Divider noMargin />
<div class="blockSection"> <div class="blockSection">
@ -256,11 +220,11 @@
display: inline-block; display: inline-block;
} }
.block { .block {
width: 480px; width: 380px;
font-size: 16px; font-size: 16px;
background-color: var(--background); background-color: var(--background);
border: 1px solid var(--spectrum-global-color-gray-300); border: 1px solid var(--spectrum-global-color-gray-300);
border-radius: 4px 4px 4px 4px; border-radius: 12px;
} }
.blockSection { .blockSection {

2
packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
View File

@ -224,6 +224,8 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
background-color: var(--background);
border-bottom: var(--border-light);
padding-left: var(--spacing-l); padding-left: var(--spacing-l);
transition: background 130ms ease-out; transition: background 130ms ease-out;
flex: 0 0 60px; flex: 0 0 60px;

80
packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
View File

@ -9,10 +9,10 @@
Icon, Icon,
Divider, Divider,
Layout, Layout,
Detail,
Modal, Modal,
Label, Label,
AbsTooltip, AbsTooltip,
InlineAlert,
} from "@budibase/bbui" } from "@budibase/bbui"
import { sdk } from "@budibase/shared-core" import { sdk } from "@budibase/shared-core"
import AutomationBlockSetup from "../../SetupPanel/AutomationBlockSetup.svelte" import AutomationBlockSetup from "../../SetupPanel/AutomationBlockSetup.svelte"
@ -25,7 +25,6 @@
import DragHandle from "components/design/settings/controls/DraggableList/drag-handle.svelte" import DragHandle from "components/design/settings/controls/DraggableList/drag-handle.svelte"
import { getContext } from "svelte" import { getContext } from "svelte"
import DragZone from "./DragZone.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 block
export let blockRef export let blockRef
@ -40,8 +39,8 @@
const contentPos = getContext("contentPos") const contentPos = getContext("contentPos")
let webhookModal let webhookModal
let open = true let open = false
let showLooping = false let showLooping = true
let role let role
let blockEle let blockEle
let positionStyles let positionStyles
@ -227,17 +226,19 @@
class="splitHeader" class="splitHeader"
> >
<div class="center-items"> <div class="center-items">
<svg <div class="icon-background-loop">
width="28px" <svg
height="28px" width="20px"
class="spectrum-Icon" height="20px"
style="color:var(--spectrum-global-color-gray-700);" class="spectrum-Icon"
focusable="false" style="color:#000000;"
> focusable="false"
<use xlink:href="#icon-refresh" /> >
</svg> <use xlink:href="#spectrum-icon-18-Reuse" />
</svg>
</div>
<div class="iconAlign"> <div class="iconAlign">
<Detail size="S">Looping</Detail> <p class="label">Looping</p>
</div> </div>
</div> </div>
@ -245,8 +246,7 @@
<AbsTooltip type="negative" text="Remove looping"> <AbsTooltip type="negative" text="Remove looping">
<Icon on:click={removeLooping} hoverable name="delete" /> <Icon on:click={removeLooping} hoverable name="delete" />
</AbsTooltip> </AbsTooltip>
<div on:click={() => {}}>
<div style="margin-left: 10px;" on:click={() => {}}>
<Icon <Icon
hoverable hoverable
name={showLooping name={showLooping
@ -319,10 +319,9 @@
{bindings} {bindings}
/> />
{#if isTrigger && triggerInfo} {#if isTrigger && triggerInfo}
<InfoDisplay <InlineAlert
title={triggerInfo.title} header={triggerInfo.type}
body="This trigger is tied to your '{triggerInfo.tableName}' table" message={`This trigger is tied to the "${triggerInfo.rowAction.name}" row action in your ${triggerInfo.table.name} table`}
icon="info-circle"
/> />
{/if} {/if}
</Layout> </Layout>
@ -371,6 +370,9 @@
display: flex; display: flex;
align-items: center; align-items: center;
} }
.label {
margin: 0;
}
.splitHeader { .splitHeader {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -381,9 +383,8 @@
display: inline-block; display: inline-block;
} }
.block { .block {
width: 480px; width: 360px;
font-size: 16px; font-size: 16px;
border-radius: 4px;
} }
.block .wrap { .block .wrap {
width: 100%; width: 100%;
@ -394,32 +395,57 @@
flex-direction: row; flex-direction: row;
} }
.block.draggable .wrap .handle { .block.draggable .wrap .handle {
height: auto; position: absolute;
top: -0.5px;
left: -14px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-color: var(--grey-3); background-color: var(--grey-3);
padding: 6px; padding: 0 4px;
height: 100%;
color: var(--grey-6); color: var(--grey-6);
cursor: grab; 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 { .block.draggable .wrap .handle.grabbing {
cursor: grabbing; cursor: grabbing;
} }
.block.draggable .wrap .handle :global(.drag-handle) { .block.draggable .wrap .handle :global(.drag-handle) {
width: 6px; width: 6px;
margin-left: 1px;
padding-top: 4px;
} }
.block .wrap .block-content { .block .wrap .block-content {
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
background-color: var(--background); background-color: var(--background);
border: 1px solid var(--grey-3); border: 1px solid var(--spectrum-global-color-gray-300);
border-radius: 4px; border-radius: 12px;
}
.block-content:has(.handle) {
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
} }
.blockSection { .blockSection {
padding: var(--spacing-xl); 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 { .separator {
width: 1px; width: 1px;
height: 25px; height: 25px;
@ -430,7 +456,7 @@
.blockTitle { .blockTitle {
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--spacing-s); gap: var(--spacing-l);
} }
.drag-placeholder { .drag-placeholder {
height: calc(var(--psheight) - 2px); height: calc(var(--psheight) - 2px);

2
packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemActions.svelte
View File

@ -43,7 +43,7 @@
<style> <style>
.action-bar { .action-bar {
background-color: var(--background); background-color: var(--background);
border-radius: 4px 4px 4px 4px; border-radius: 8px;
display: flex; display: flex;
gap: var(--spacing-m); gap: var(--spacing-m);
padding: 8px 12px; padding: 8px 12px;

109
packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte
View File

@ -114,30 +114,40 @@
<div class="splitHeader"> <div class="splitHeader">
<div class="center-items"> <div class="center-items">
{#if externalActions[block.stepId]} {#if externalActions[block.stepId]}
<img <div class="icon-background-external">
alt={externalActions[block.stepId].name} <img
width="28px" alt={externalActions[block.stepId].name}
height="28px" width="20px"
src={externalActions[block.stepId].icon} height="20px"
/> src={externalActions[block.stepId].icon}
/>
</div>
{:else if isHeaderTrigger}
<div class="icon-background-trigger">
<svg
width="20px"
height="20px"
class="spectrum-Icon"
style="color: black;"
focusable="false"
>
<use xlink:href="#spectrum-icon-18-{block.icon}" />
</svg>
</div>
{:else} {:else}
<svg <div class="icon-background">
width="28px" <svg
height="28px" width="20px"
class="spectrum-Icon" height="20px"
style="color:var(--spectrum-global-color-gray-700);" class="spectrum-Icon"
focusable="false" style="color: white;"
> focusable="false"
<use xlink:href="#icon-{block.icon}" /> >
</svg> <use xlink:href="#icon-{block.icon}" />
</svg>
</div>
{/if} {/if}
<div class="iconAlign"> <div class="iconAlign">
{#if isHeaderTrigger}
<Body size="XS"><b>Trigger</b></Body>
{:else}
<Body size="XS"><b>{isBranch ? "Branch" : "Step"}</b></Body>
{/if}
{#if enableNaming} {#if enableNaming}
<input <input
class="input-text" class="input-text"
@ -167,6 +177,7 @@
{/if} {/if}
</div> </div>
</div> </div>
<div class="blockTitle"> <div class="blockTitle">
{#if showTestStatus && testResult} {#if showTestStatus && testResult}
<div class="status-container"> <div class="status-container">
@ -186,7 +197,7 @@
dispatch("toggle") dispatch("toggle")
}} }}
hoverable hoverable
name={open ? "chevron-down-size300" : "chevron-right"} name={open ? "Chevron-down-size300" : "chevron-right"}
/> />
</div> </div>
{/if} {/if}
@ -201,7 +212,12 @@
{#if !showTestStatus} {#if !showTestStatus}
{#if !isHeaderTrigger && !isLooped && !isBranch && (block?.features?.[Features.LOOPING] || !block.features)} {#if !isHeaderTrigger && !isLooped && !isBranch && (block?.features?.[Features.LOOPING] || !block.features)}
<AbsTooltip type="info" text="Add looping"> <AbsTooltip type="info" text="Add looping">
<Icon on:click={addLooping} hoverable name="rotate-cw" /> <Icon
on:click={addLooping}
tooltip={"Loop automation step"}
hoverable
name="RotateCW"
/>
</AbsTooltip> </AbsTooltip>
{/if} {/if}
{#if !isHeaderTrigger} {#if !isHeaderTrigger}
@ -210,9 +226,6 @@
</AbsTooltip> </AbsTooltip>
{/if} {/if}
{/if} {/if}
{#if !showTestStatus && !isHeaderTrigger}
<span class="action-spacer" />
{/if}
{#if !showTestStatus} {#if !showTestStatus}
<Icon <Icon
on:click={e => { on:click={e => {
@ -220,7 +233,7 @@
dispatch("toggle") dispatch("toggle")
}} }}
hoverable hoverable
name={open ? "chevron-down-size300" : "chevron-right"} name={open ? "Chevron-down-size300" : "chevron-right"}
/> />
{/if} {/if}
</div> </div>
@ -238,9 +251,6 @@
</div> </div>
<style> <style>
.action-spacer {
border-left: 1px solid var(--spectrum-global-color-gray-300);
}
.status-container { .status-container {
display: flex; display: flex;
align-items: center; align-items: center;
@ -248,7 +258,6 @@
gap: var(--spacing-m); gap: var(--spacing-m);
/* You can also add padding or margin to adjust the spacing between the text and the chevron if needed. */ /* You can also add padding or margin to adjust the spacing between the text and the chevron if needed. */
} }
.context-actions { .context-actions {
display: flex; display: flex;
gap: var(--spacing-l); gap: var(--spacing-l);
@ -258,6 +267,36 @@
display: flex; display: flex;
align-items: center; align-items: center;
} }
.icon-background-trigger {
background-color: #ffd230;
padding: 0;
border-radius: 8px;
min-height: 32px;
min-width: 32px;
display: inline-flex;
justify-content: center;
align-items: center;
}
.icon-background {
background-color: #5e12f7;
padding: 0;
border-radius: 8px;
min-height: 32px;
min-width: 32px;
display: inline-flex;
justify-content: center;
align-items: center;
}
.icon-background-external {
background-color: var(--spectrum-global-color-gray-200);
padding: 0;
border-radius: 8px;
min-height: 32px;
min-width: 32px;
display: inline-flex;
justify-content: center;
align-items: center;
}
.splitHeader { .splitHeader {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -267,16 +306,13 @@
padding: 0 0 0 var(--spacing-m); padding: 0 0 0 var(--spacing-m);
display: inline-block; display: inline-block;
} }
.blockSection { .blockSection {
padding: var(--spacing-xl); padding: var(--spacing-xl);
border: 1px solid transparent; border: 1px solid transparent;
} }
.blockTitle { .blockTitle {
display: flex; display: flex;
} }
.hide-context-actions { .hide-context-actions {
display: none; display: none;
} }
@ -284,14 +320,13 @@
color: var(--ink); color: var(--ink);
background-color: transparent; background-color: transparent;
border: 1px solid transparent; border: 1px solid transparent;
width: 230px; width: 100%;
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
} }
.input-text { .input-text {
font-size: var(--spectrum-alias-font-size-default); font-size: 16px;
font-family: var(--font-sans); font-family: var(--font-sans);
text-overflow: ellipsis; text-overflow: ellipsis;
padding-left: 0px; padding-left: 0px;

2
packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
View File

@ -140,7 +140,7 @@
flex-direction: column; flex-direction: column;
align-items: stretch; align-items: stretch;
border-right: var(--border-light); border-right: var(--border-light);
background: var(--spectrum-global-color-gray-100); background: var(--background);
overflow: hidden; overflow: hidden;
transition: margin-left 300ms ease-out; transition: margin-left 300ms ease-out;
} }

57
packages/builder/src/components/automation/AutomationPanel/CreateAutomationModal.svelte
View File

@ -59,23 +59,16 @@
onConfirm={createAutomation} onConfirm={createAutomation}
disabled={!selectedTrigger || !name} disabled={!selectedTrigger || !name}
> >
<InlineAlert <InlineAlert header="Click Publish to activate your automation." />
header="You must publish your app to activate your automations."
message="To test your automation before publishing, you can use the 'Run Test' functionality on the next screen."
/>
<Body size="S">
Please name your automation, then select a trigger.<br />
Every automation must start with a trigger.
</Body>
<Input <Input
bind:value={name} bind:value={name}
on:input={() => (nameTouched = true)} on:input={() => (nameTouched = true)}
bind:error={nameError} bind:error={nameError}
label="Name" placeholder="Name your automation"
/> />
<Layout noPadding gap="XS"> <Layout noPadding gap="XS">
<Label size="S">Trigger</Label> <Label size="L">Trigger</Label>
<div class="item-list"> <div class="item-list">
{#each triggers as [_, trigger]} {#each triggers as [_, trigger]}
<div <div
@ -84,10 +77,10 @@
on:click={() => selectTrigger(trigger)} on:click={() => selectTrigger(trigger)}
> >
<div class="item-body"> <div class="item-body">
<Icon name={trigger.icon} /> <div class="icon-background-trigger">
<span class="icon-spacing"> <Icon name={trigger.icon} />
<Body size="S">{trigger.name}</Body></span </div>
> <Body size="S">{trigger.name}</Body>
</div> </div>
</div> </div>
{/each} {/each}
@ -96,35 +89,45 @@
</ModalContent> </ModalContent>
<style> <style>
.icon-spacing {
margin-left: var(--spacing-m);
}
.item-body { .item-body {
display: flex; display: flex;
margin-left: var(--spacing-m); margin-left: var(--spacing-xs);
gap: var(--spacing-m);
align-items: center;
} }
.item-list { .item-list {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); grid-template-columns: repeat(2, minmax(200px, 1fr));
grid-gap: var(--spectrum-alias-grid-baseline); grid-gap: 10px;
} }
.item { .item {
cursor: pointer; cursor: pointer;
display: grid;
grid-gap: var(--spectrum-alias-grid-margin-xsmall); grid-gap: var(--spectrum-alias-grid-margin-xsmall);
padding: var(--spectrum-alias-item-padding-s); padding: var(--spectrum-alias-item-padding-s);
background: var(--spectrum-alias-background-color-secondary); background: var(--spectrum-alias-background-color-secondary);
transition: 0.3s all; transition: 0.3s all;
border-radius: 5px; border: solid var(--spectrum-global-color-gray-200);
border-radius: 6px;
box-sizing: border-box; box-sizing: border-box;
border-width: 2px; border-width: 1px;
} }
.item:hover { .item:not(.disabled):hover,
background: var(--spectrum-alias-background-color-tertiary);
}
.selected { .selected {
background: var(--spectrum-alias-background-color-tertiary); background: var(--spectrum-alias-background-color-tertiary);
} }
.icon-background-trigger {
background-color: #ffd230;
/*background-color: #6afdef;*/
padding: 0;
border-radius: 6px;
min-height: 28px;
min-width: 28px;
display: inline-flex;
justify-content: center;
align-items: center;
}
div:has(svg) {
color: black;
}
</style> </style>

24
packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
View File

@ -653,7 +653,7 @@
<!-- Custom Layouts --> <!-- Custom Layouts -->
{#if stepLayouts[block.stepId]} {#if stepLayouts[block.stepId]}
{#each Object.keys(stepLayouts[block.stepId] || {}) as key} {#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} {#each stepLayouts[block.stepId][key].content as config}
{#if config.title} {#if config.title}
<PropField label={config.title} labelTooltip={config.tooltip}> <PropField label={config.title} labelTooltip={config.tooltip}>
@ -678,12 +678,12 @@
{:else} {:else}
<!-- Default Schema Property Layout --> <!-- Default Schema Property Layout -->
{#each schemaProperties as [key, value]} {#each schemaProperties as [key, value]}
{#if canShowField(value)} {#if canShowField(key, value)}
{@const label = getFieldLabel(key, value)} {@const label = getFieldLabel(key, value)}
<div class:block-field={shouldRenderField(value)}> <div class:block-field={shouldRenderField(value)}>
{#if key !== "fields" && value.type !== "boolean" && shouldRenderField(value)} {#if key !== "fields" && value.type !== "boolean" && shouldRenderField(value)}
<div class="label-container"> <div class="label-container">
<Label> <Label size="L">
{label} {label}
</Label> </Label>
{#if value.customType === AutomationCustomIOType.TRIGGER_FILTER} {#if value.customType === AutomationCustomIOType.TRIGGER_FILTER}
@ -700,8 +700,8 @@
{/if} {/if}
</div> </div>
{/if} {/if}
<div> <div class:field-width={shouldRenderField(value)}>
{#if value.type === "string" && value.enum && canShowField(value)} {#if value.type === "string" && value.enum && canShowField(key, value)}
<Select <Select
on:change={e => onChange({ [key]: e.detail })} on:change={e => onChange({ [key]: e.detail })}
value={inputData[key]} value={inputData[key]}
@ -757,7 +757,7 @@
{:else if value.type === "attachment" || value.type === "signature_single"} {:else if value.type === "attachment" || value.type === "signature_single"}
<div class="attachment-field-wrapper"> <div class="attachment-field-wrapper">
<div class="label-wrapper"> <div class="label-wrapper">
<Label>{label}</Label> <Label size="L">{label}</Label>
</div> </div>
<div class="toggle-container"> <div class="toggle-container">
<Toggle <Toggle
@ -996,9 +996,8 @@
align-items: center; align-items: center;
gap: var(--spacing-s); gap: var(--spacing-s);
} }
.field-width {
.label-container :global(label) { width: 320px;
white-space: unset;
} }
.step-fields { .step-fields {
@ -1010,9 +1009,12 @@
} }
.block-field { .block-field {
display: flex;
justify-content: space-between; justify-content: space-between;
display: grid; flex-direction: column;
grid-template-columns: 1fr 320px; align-items: flex-start;
gap: 8px;
flex: 1;
} }
.attachment-field-width { .attachment-field-width {

4
packages/builder/src/components/automation/SetupPanel/AutomationSelector.svelte
View File

@ -73,8 +73,8 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
flex-direction: row; flex-direction: column;
align-items: center; align-items: flex-start;
gap: 10px; gap: 10px;
flex: 1; flex: 1;
margin-bottom: 10px; margin-bottom: 10px;

17
packages/builder/src/components/automation/SetupPanel/PropField.svelte
View File

@ -13,17 +13,18 @@
style={`--comp-width: ${componentWidth}px;`} style={`--comp-width: ${componentWidth}px;`}
> >
<div class="prop-label" title={label}> <div class="prop-label" title={label}>
<Label tooltip={labelTooltip}>{label}</Label> <Label size="L" tooltip={labelTooltip}>{label}</Label>
</div> </div>
<div class="prop-control"> <div>
<slot /> <slot />
</div> </div>
</div> </div>
<style> <style>
.prop-field { .prop-field {
display: grid; display: flex;
grid-template-columns: 1fr var(--comp-width); flex-direction: column;
gap: 8px;
} }
.prop-field.fullWidth { .prop-field.fullWidth {
@ -49,12 +50,4 @@
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
} }
.prop-control {
margin-left: var(--spacing-s);
}
.prop-field.fullWidth .prop-control {
margin-left: 0px;
}
</style> </style>

4
packages/builder/src/components/automation/SetupPanel/QueryParamSelector.svelte
View File

@ -68,8 +68,8 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
flex-direction: row; flex-direction: column;
align-items: center; align-items: flex-start;
gap: 10px; gap: 10px;
flex: 1; flex: 1;
margin-bottom: 10px; margin-bottom: 10px;

2
packages/builder/src/components/common/DashCard.svelte
View File

@ -17,7 +17,7 @@
</span> </span>
<span class="dash-card-action"> <span class="dash-card-action">
{#if actionDefined} {#if actionDefined}
<Icon name={actionIcon || "ChevronRight"} /> <Icon name={actionIcon || "chevron-right"} />
{/if} {/if}
</span> </span>
</div> </div>

2
packages/builder/src/components/common/Icons/index.js
View File

@ -10,7 +10,7 @@ export { default as PencilIcon } from "./Pencil.svelte"
export { default as EventsIcon } from "./Events.svelte" export { default as EventsIcon } from "./Events.svelte"
export { default as XCircleIcon } from "./XCircle.svelte" export { default as XCircleIcon } from "./XCircle.svelte"
export { default as ChevronUpIcon } from "./ChevronUp.svelte" export { default as ChevronUpIcon } from "./ChevronUp.svelte"
export { default as ChevronDownIcon } from "./ChevronDown.svelte" export { default as Chevron-down-size300Icon } from "./Chevron-down-size300.svelte"
export { default as CopyIcon } from "./Copy.svelte" export { default as CopyIcon } from "./Copy.svelte"
export { default as CheckIcon } from "./Check.svelte" export { default as CheckIcon } from "./Check.svelte"
export { default as GridIcon } from "./Grid.svelte" export { default as GridIcon } from "./Grid.svelte"

4
packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_components/ViewNavBar.svelte
View File

@ -181,6 +181,7 @@
<div class="nav"> <div class="nav">
<a <a
class="nav-icon"
href={`/builder/app/${$appStore.appId}/data/datasource/${datasource?._id}`} href={`/builder/app/${$appStore.appId}/data/datasource/${datasource?._id}`}
> >
<IntegrationIcon <IntegrationIcon
@ -339,6 +340,9 @@
gap: 8px; gap: 8px;
background: var(--background); background: var(--background);
} }
.nav-icon {
display: flex;
}
.nav__views { .nav__views {
flex: 0 1 auto; flex: 0 1 auto;
display: flex; display: flex;

3
packages/client/src/components/app/NavItem.svelte
View File

@ -18,7 +18,8 @@
$: expanded = !!$navStateStore[text] $: expanded = !!$navStateStore[text]
$: renderLeftNav = leftNav || mobile $: renderLeftNav = leftNav || mobile
$: icon = !renderLeftNav || expanded ? "chevron-down-size300" : "ChevronRight" $: icon =
!renderLeftNav || expanded ? "chevron-down-size300" : "chevron-right"
const onClickLink = () => { const onClickLink = () => {
dispatch("clickLink") dispatch("clickLink")

4
packages/client/src/stores/theme.js
View File

@ -10,8 +10,8 @@ const defaultCustomTheme = {
primaryColor: "var(--spectrum-glo" + "bal-color-blue-600)", primaryColor: "var(--spectrum-glo" + "bal-color-blue-600)",
primaryColorHover: "var(--spectrum-glo" + "bal-color-blue-500)", primaryColorHover: "var(--spectrum-glo" + "bal-color-blue-500)",
buttonBorderRadius: "16px", buttonBorderRadius: "16px",
navBackground: "var(--spectrum-glo" + "bal-color-gray-100)", navBackground: "var(--spectrum-glo" + "bal-color-gray-50)",
navTextColor: "var(--spectrum-glo" + "bal-color-gray-800)", navTextColor: "var(--spectrum-glo" + "bal-color-gray-900)",
} }
const createThemeStore = () => { const createThemeStore = () => {

2
packages/server/src/api/controllers/application.ts
View File

@ -314,7 +314,7 @@ async function performAppCreate(
navigation: "Top", navigation: "Top",
title: name, title: name,
navWidth: "Large", navWidth: "Large",
navBackground: "var(--spectrum-global-color-gray-100)", navBackground: "var(--spectrum-global-color-gray-50)",
links: [], links: [],
}, },
theme: DefaultAppTheme, theme: DefaultAppTheme,

2
packages/server/src/automations/steps/triggerAutomationRun.ts
View File

@ -14,7 +14,7 @@ import { features } from "@budibase/pro"
import env from "../../environment" import env from "../../environment"
export const definition: AutomationStepDefinition = { export const definition: AutomationStepDefinition = {
name: "Trigger an automation", name: "Trigger automation",
tagline: "Triggers an automation synchronously", tagline: "Triggers an automation synchronously",
icon: "prototyping", icon: "prototyping",
description: "Triggers an automation synchronously", description: "Triggers an automation synchronously",

2
packages/server/src/tests/utilities/structures.ts
View File

@ -307,7 +307,7 @@ export function serverLogAutomation(appId?: string): Automation {
stepId: AutomationActionStepId.SERVER_LOG, stepId: AutomationActionStepId.SERVER_LOG,
name: "Backend log", name: "Backend log",
tagline: "Console log a value in the backend", tagline: "Console log a value in the backend",
icon: "Monitoring", icon: "FileCode",
description: "Logs the given text to the server (using console.log)", description: "Logs the given text to the server (using console.log)",
internal: true, internal: true,
features: { features: {