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

Updated add automation step modal 

Modal size and layout
- increase the size of the modal header (and others)
- increased modal size
- changed the grid to 3 columns rather than 2
- increase the size of the label text
- moved actions to the top and apps to the bottom

Items:
- increased the size of the automation labels
- added a background color to action icons
- increase the size of all icons
- changed the color of action icons to gray 900

item cards:
- updated the spacing within the item cards
- changed border color of items

disabled items:
- added opacity to the disabled actions
This commit is contained in:
Joe 2024-10-18 22:10:27 +01:00
parent d9deba6337
commit 3f19a26aad
4 changed files with 146 additions and 1405 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -179,6 +179,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;

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

@ -126,40 +126,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}
@ -170,8 +143,12 @@
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"> <div class="tag-color">
<Tags> <Tags>
@ -189,7 +166,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
@ -198,14 +175,42 @@
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">
<img
width={24}
height={24}
src={externalActions[action.stepId].icon}
alt={externalActions[action.stepId].name}
/>
<p>
{action.stepTitle || idx.charAt(0).toUpperCase() + idx.slice(1)}
</p>
</div>
</div>
{/each}
</div>
</Layout>
</ModalContent> </ModalContent>
<style> <style>
@ -217,8 +222,8 @@
} }
.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 {
@ -227,18 +232,24 @@
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);
}
.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); opacity: 0.5;
} }
.disabled :global(.spectrum-Body) { .disabled :global(.spectrum-Body) {
color: var(--spectrum-global-color-gray-600); color: var(--spectrum-global-color-gray-600);
@ -247,4 +258,21 @@
.tag-color :global(.spectrum-Tags-item) { .tag-color :global(.spectrum-Tags-item) {
background: var(--spectrum-global-color-gray-200); background: var(--spectrum-global-color-gray-200);
} }
.icon-background {
background-color: var(--spectrum-global-color-indigo-400);
padding: 0;
border-radius: 6px;
min-height: 28px;
min-width: 28px;
display: inline-flex;
justify-content: center;
align-items: center;
}
div:has(svg) {
color: var(--spectrum-global-color-gray-900);
}
img {
border-radius: 6px;
padding: 2px;
}
</style> </style>

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

@ -15,7 +15,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: "Sync", icon: "Sync",
description: "Triggers an automation synchronously", description: "Triggers an automation synchronously",

1440
yarn.lock
View File

File diff suppressed because it is too large Load Diff