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

update icon padding and block background-color

This commit is contained in:
Peter Clement 2021-10-06 15:07:51 +01:00
parent 89dc9f886a
commit 5229954b22
1 changed files with 15 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,9 +4,9 @@
import FlowItem from "./FlowItem.svelte" import FlowItem from "./FlowItem.svelte"
import TestDataModal from "./TestDataModal.svelte" import TestDataModal from "./TestDataModal.svelte"
import { flip } from "svelte/animate" import { flip } from "svelte/animate"
import { fade, fly } from "svelte/transition" import { fly } from "svelte/transition"
import { import {
Detail, Heading,
Icon, Icon,
ActionButton, ActionButton,
notifications, notifications,
@ -57,26 +57,24 @@
<div class="content"> <div class="content">
<div class="title"> <div class="title">
<div class="subtitle"> <div class="subtitle">
<Detail size="L">{automation.name}</Detail> <Heading size="S">{automation.name}</Heading>
<div <div style="display:flex;">
style="display:flex; <div class="iconPadding">
color: var(--spectrum-global-color-gray-400);"
>
<span class="iconPadding">
<div class="icon"> <div class="icon">
<Icon <Icon
on:click={confirmDeleteDialog.show} on:click={confirmDeleteDialog.show}
hoverable hoverable
size="M"
name="DeleteOutline" name="DeleteOutline"
/> />
</div> </div>
</span> </div>
<ActionButton <ActionButton
on:click={() => { on:click={() => {
testDataModal.show() testDataModal.show()
}} }}
icon="MultipleCheck" icon="MultipleCheck"
size="S">Run test</ActionButton size="M">Run test</ActionButton
> >
</div> </div>
</div> </div>
@ -84,16 +82,11 @@
{#each blocks as block, idx (block.id)} {#each blocks as block, idx (block.id)}
<div <div
class="block" class="block"
animate:flip={{ duration: 800 }} animate:flip={{ duration: 500 }}
in:fade|local in:fly|local={{ x: 500, duration: 1500 }}
out:fly|local={{ x: 500 }} out:fly|local={{ x: 500, duration: 800 }}
> >
<FlowItem {testDataModal} {testAutomation} {onSelect} {block} /> <FlowItem {testDataModal} {testAutomation} {onSelect} {block} />
{#if idx !== blocks.length - 1}
<div class="separator" />
<Icon name="AddCircle" size="S" />
<div class="separator" />
{/if}
</div> </div>
{/each} {/each}
</div> </div>
@ -114,14 +107,6 @@
</div> </div>
<style> <style>
.separator {
width: 1px;
height: 25px;
border-left: 1px dashed var(--grey-4);
color: var(--grey-4);
/* center horizontally */
align-self: center;
}
.canvas { .canvas {
margin: 0 -40px calc(-1 * var(--spacing-l)) -40px; margin: 0 -40px calc(-1 * var(--spacing-l)) -40px;
overflow-y: auto; overflow-y: auto;
@ -153,11 +138,14 @@
padding-bottom: var(--spacing-xl); padding-bottom: var(--spacing-xl);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center;
}
.iconPadding {
padding-top: var(--spacing-s);
} }
.icon { .icon {
cursor: pointer; cursor: pointer;
display: flex;
padding-right: var(--spacing-m); padding-right: var(--spacing-m);
} }
</style> </style>