fix animation of test panel

This commit is contained in:
Peter Clement 2022-05-20 14:20:53 +01:00
parent b43fe44468
commit fd5711bcd3
2 changed files with 12 additions and 2 deletions

View File

@ -81,7 +81,7 @@
onSelect(block) onSelect(block)
}} }}
> >
<Icon name={blockComplete ? "ChevronDown" : "ChevronUp"} /> <Icon name={blockComplete ? "ChevronUp" : "ChevronDown"} />
</div> </div>
</div> </div>
</div> </div>

View File

@ -5,6 +5,8 @@
import CreateAutomationModal from "components/automation/AutomationPanel/CreateAutomationModal.svelte" import CreateAutomationModal from "components/automation/AutomationPanel/CreateAutomationModal.svelte"
import CreateWebhookModal from "components/automation/Shared/CreateWebhookModal.svelte" import CreateWebhookModal from "components/automation/Shared/CreateWebhookModal.svelte"
import TestPanel from "components/automation/AutomationBuilder/TestPanel.svelte" import TestPanel from "components/automation/AutomationBuilder/TestPanel.svelte"
import { fly } from "svelte/transition"
$: automation = $: automation =
$automationStore.selectedAutomation?.automation || $automationStore.selectedAutomation?.automation ||
$automationStore.automations[0] $automationStore.automations[0]
@ -45,7 +47,13 @@
</div> </div>
{#if automation?.showTestPanel} {#if automation?.showTestPanel}
<div class="setup"><TestPanel {automation} /></div> <div
in:fly|local={{ x: 500, duration: 500 }}
out:fly|local={{ x: 500, duration: 500 }}
class="setup"
>
<TestPanel {automation} />
</div>
{/if} {/if}
<Modal bind:this={modal}> <Modal bind:this={modal}>
<CreateAutomationModal {webhookModal} /> <CreateAutomationModal {webhookModal} />
@ -62,6 +70,7 @@
display: grid; display: grid;
grid-auto-flow: column dense; grid-auto-flow: column dense;
grid-template-columns: 260px minmax(510px, 1fr) fit-content(500px); grid-template-columns: 260px minmax(510px, 1fr) fit-content(500px);
overflow: hidden;
} }
.nav { .nav {
@ -73,6 +82,7 @@
border-right: var(--border-light); border-right: var(--border-light);
background-color: var(--background); background-color: var(--background);
padding-bottom: 60px; padding-bottom: 60px;
overflow: hidden;
} }
.content { .content {