CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-06 23:10:57 +12:00
Code Issues Projects Releases Wiki Activity

Add better animations when editing workflow blocks and changing workflows

Browse source
This commit is contained in:
Andrew Kingston 2020-09-11 14:31:01 +01:00
parent bee9415942
commit 715c0ab170
2 changed files with 19 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
packages/builder/src/components/workflow/WorkflowBuilder/flowchart/FlowChart.svelte
View file

@ -19,12 +19,18 @@
} }
</script> </script>
<section> <section class="canvas">
{#each blocks as block, idx (block.id)} {#each blocks as block, idx (block.id)}
<FlowItem {onSelect} {block} /> <div
{#if idx !== blocks.length - 1} class="block"
<Arrow /> animate:flip={{ duration: 600 }}
{/if} in:fade
out:fly={{ x: 100 }}>
<FlowItem {onSelect} {block} />
{#if idx !== blocks.length - 1}
<Arrow />
{/if}
</div>
{/each} {/each}
</section> </section>
@ -36,4 +42,11 @@
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
} }
.block {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
</style> </style>

7
packages/builder/src/components/workflow/WorkflowBuilder/flowchart/FlowItem.svelte
View file

@ -1,6 +1,5 @@
<script> <script>
import mustache from "mustache" import mustache from "mustache"
import { fade } from "svelte/transition"
import { workflowStore } from "builderStore" import { workflowStore } from "builderStore"
export let onSelect export let onSelect
@ -16,11 +15,7 @@
} }
</script> </script>
<div <div class={`${block.type} hoverable`} class:selected on:click={selectBlock}>
transition:fade
class={`${block.type} hoverable`}
class:selected
on:click={selectBlock}>
<header> <header>
{#if block.type === 'TRIGGER'} {#if block.type === 'TRIGGER'}
<i class="ri-lightbulb-fill" /> <i class="ri-lightbulb-fill" />