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}
</button>
<svg
class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Accordion-itemIndicator"
class="spectrum-Icon spectrum-UIIcon-chevron-right100 spectrum-Accordion-itemIndicator"
focusable="false"
aria-hidden="true"
>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -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;
}

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

@ -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);

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

@ -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;

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

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

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

@ -31,13 +31,59 @@
{/if}
<span class="spectrum-Tags-itemLabel"><slot /></span>
{#if closable}
<ClearButton on:click />
<ClearButton small id="clear" on:click />
{/if}
</div>
<style>
.spectrum-Tags-item > .spectrum-Icon {
margin-right: 2px !important;
}
.spectrum-Tags-item {
margin-bottom: 0;
margin-top: 0;
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);
}
/* 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>

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

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

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

@ -3,7 +3,6 @@
ModalContent,
Layout,
Detail,
Body,
Icon,
notifications,
Tags,
@ -132,40 +131,13 @@
<!-- svelte-ignore a11y-no-static-element-interactions -->
<ModalContent
title="Add automation step"
size="L"
size="XL"
showConfirmButton={false}
showCancelButton={false}
disabled={!selectedAction}
>
<Layout noPadding gap="XS">
<Detail size="S">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">
<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>
<Detail size="L">Actions</Detail>
<div class="item-list">
{#each Object.entries(internal) as [idx, action]}
{@const isDisabled = disabled()[idx] && disabled()[idx].disabled}
@ -176,16 +148,22 @@
on:click={isDisabled ? null : () => selectAction(action)}
>
<div class="item-body">
<Icon name={action.icon} />
<Body size="XS">{action.name}</Body>
<div class="icon-background">
<Icon size="M" name={action.icon} />
</div>
<p>
{action.name}
</p>
{#if isDisabled && !syncAutomationsEnabled && !triggerAutomationRunEnabled && lockedFeatures.includes(action.stepId)}
<div class="tag-color">
<Tags>
<Tag icon="lock">Premium</Tag>
</Tags>
</div>
<Tags>
<Tag icon="lock">Premium</Tag>
</Tags>
{: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}
</div>
</div>
@ -195,7 +173,7 @@
{#if Object.keys(plugins).length}
<Layout noPadding gap="XS">
<Detail size="S">Plugins</Detail>
<Detail size="L">Plugins</Detail>
<div class="item-list">
{#each Object.entries(plugins) as [_, action]}
<div
@ -204,27 +182,57 @@
on:click={() => selectAction(action)}
>
<div class="item-body">
<Icon name={action.icon} />
<Body size="XS">{action.name}</Body>
<div class="icon-background">
<Icon size="M" name={action.icon} />
</div>
<p>
{action.name}
</p>
</div>
</div>
{/each}
</div>
</Layout>
{/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>
<style>
.item-body {
display: flex;
margin-left: var(--spacing-m);
margin-left: var(--spacing-xs);
gap: var(--spacing-m);
align-items: center;
}
.item-list {
display: grid;
grid-template-columns: repeat(2, minmax(150px, 1fr));
grid-gap: var(--spectrum-alias-grid-baseline);
grid-template-columns: repeat(3, minmax(200px, 1fr));
grid-gap: 10px;
}
.item {
@ -233,24 +241,52 @@
padding: var(--spectrum-alias-item-padding-s);
background: var(--spectrum-alias-background-color-secondary);
transition: 0.3s all;
border: solid var(--spectrum-alias-border-color);
border-radius: 5px;
border: solid var(--spectrum-global-color-gray-200);
border-radius: 6px;
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,
.selected {
background: var(--spectrum-alias-background-color-tertiary);
}
.disabled {
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) {
color: var(--spectrum-global-color-gray-600);
.icon-background {
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;
}
.tag-color :global(.spectrum-Tags-item) {
background: var(--spectrum-global-color-gray-200);
.icon-background-external {
background-color: 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>

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

@ -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)}
>
<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}
<Divider noMargin />
<div class="blockSection">
@ -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 {

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

@ -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;

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

@ -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"
>
<div class="center-items">
<svg
width="28px"
height="28px"
class="spectrum-Icon"
style="color:var(--spectrum-global-color-gray-700);"
focusable="false"
>
<use xlink:href="#icon-refresh" />
</svg>
<div class="icon-background-loop">
<svg
width="20px"
height="20px"
class="spectrum-Icon"
style="color:#000000;"
focusable="false"
>
<use xlink:href="#spectrum-icon-18-Reuse" />
</svg>
</div>
<div class="iconAlign">
<Detail size="S">Looping</Detail>
<p class="label">Looping</p>
</div>
</div>
@ -245,8 +246,7 @@
<AbsTooltip type="negative" text="Remove looping">
<Icon on:click={removeLooping} hoverable name="delete" />
</AbsTooltip>
<div style="margin-left: 10px;" on:click={() => {}}>
<div on:click={() => {}}>
<Icon
hoverable
name={showLooping
@ -319,10 +319,9 @@
{bindings}
/>
{#if isTrigger && triggerInfo}
<InfoDisplay
title={triggerInfo.title}
body="This trigger is tied to your '{triggerInfo.tableName}' table"
icon="info-circle"
<InlineAlert
header={triggerInfo.type}
message={`This trigger is tied to the "${triggerInfo.rowAction.name}" row action in your ${triggerInfo.table.name} table`}
/>
{/if}
</Layout>
@ -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);

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

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

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

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

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

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

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

@ -59,23 +59,16 @@
onConfirm={createAutomation}
disabled={!selectedTrigger || !name}
>
<InlineAlert
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>
<InlineAlert header="Click Publish to activate your automation." />
<Input
bind:value={name}
on:input={() => (nameTouched = true)}
bind:error={nameError}
label="Name"
placeholder="Name your automation"
/>
<Layout noPadding gap="XS">
<Label size="S">Trigger</Label>
<Label size="L">Trigger</Label>
<div class="item-list">
{#each triggers as [_, trigger]}
<div
@ -84,10 +77,10 @@
on:click={() => selectTrigger(trigger)}
>
<div class="item-body">
<Icon name={trigger.icon} />
<span class="icon-spacing">
<Body size="S">{trigger.name}</Body></span
>
<div class="icon-background-trigger">
<Icon name={trigger.icon} />
</div>
<Body size="S">{trigger.name}</Body>
</div>
</div>
{/each}
@ -96,35 +89,45 @@
</ModalContent>
<style>
.icon-spacing {
margin-left: var(--spacing-m);
}
.item-body {
display: flex;
margin-left: var(--spacing-m);
margin-left: var(--spacing-xs);
gap: var(--spacing-m);
align-items: center;
}
.item-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
grid-gap: var(--spectrum-alias-grid-baseline);
grid-template-columns: repeat(2, minmax(200px, 1fr));
grid-gap: 10px;
}
.item {
cursor: pointer;
display: grid;
grid-gap: var(--spectrum-alias-grid-margin-xsmall);
padding: var(--spectrum-alias-item-padding-s);
background: var(--spectrum-alias-background-color-secondary);
transition: 0.3s all;
border-radius: 5px;
border: solid var(--spectrum-global-color-gray-200);
border-radius: 6px;
box-sizing: border-box;
border-width: 2px;
border-width: 1px;
}
.item:hover {
background: var(--spectrum-alias-background-color-tertiary);
}
.item:not(.disabled):hover,
.selected {
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>

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

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

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

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

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

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

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

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

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

@ -17,7 +17,7 @@
</span>
<span class="dash-card-action">
{#if actionDefined}
<Icon name={actionIcon || "ChevronRight"} />
<Icon name={actionIcon || "chevron-right"} />
{/if}
</span>
</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 XCircleIcon } from "./XCircle.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 CheckIcon } from "./Check.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">
<a
class="nav-icon"
href={`/builder/app/${$appStore.appId}/data/datasource/${datasource?._id}`}
>
<IntegrationIcon
@ -339,6 +340,9 @@
gap: 8px;
background: var(--background);
}
.nav-icon {
display: flex;
}
.nav__views {
flex: 0 1 auto;
display: flex;

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

@ -18,7 +18,8 @@
$: expanded = !!$navStateStore[text]
$: renderLeftNav = leftNav || mobile
$: icon = !renderLeftNav || expanded ? "chevron-down-size300" : "ChevronRight"
$: icon =
!renderLeftNav || expanded ? "chevron-down-size300" : "chevron-right"
const onClickLink = () => {
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)",
primaryColorHover: "var(--spectrum-glo" + "bal-color-blue-500)",
buttonBorderRadius: "16px",
navBackground: "var(--spectrum-glo" + "bal-color-gray-100)",
navTextColor: "var(--spectrum-glo" + "bal-color-gray-800)",
navBackground: "var(--spectrum-glo" + "bal-color-gray-50)",
navTextColor: "var(--spectrum-glo" + "bal-color-gray-900)",
}
const createThemeStore = () => {

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

@ -314,7 +314,7 @@ async function performAppCreate(
navigation: "Top",
title: name,
navWidth: "Large",
navBackground: "var(--spectrum-global-color-gray-100)",
navBackground: "var(--spectrum-global-color-gray-50)",
links: [],
},
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"
export const definition: AutomationStepDefinition = {
name: "Trigger an automation",
name: "Trigger automation",
tagline: "Triggers an automation synchronously",
icon: "prototyping",
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,
name: "Backend log",
tagline: "Console log a value in the backend",
icon: "Monitoring",
icon: "FileCode",
description: "Logs the given text to the server (using console.log)",
internal: true,
features: {