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

add splash screen to automation

This commit is contained in:
Peter Clement 2021-09-01 15:23:40 +01:00
parent 3fe70fa7ca
commit ca866378d0
4 changed files with 50 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19,7 +19,6 @@
} }
</script> </script>
{#if !blocks.length}<i>Add a trigger to your automation to get started</i>{/if}
<section class="canvas"> <section class="canvas">
{#each blocks as block, idx (block.id)} {#each blocks as block, idx (block.id)}
<div <div
@ -57,9 +56,4 @@
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
} }
i {
font-size: var(--font-size-m);
color: var(--grey-5);
}
</style> </style>

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

@ -2,7 +2,8 @@
import AutomationList from "./AutomationList.svelte" import AutomationList from "./AutomationList.svelte"
import CreateAutomationModal from "./CreateAutomationModal.svelte" import CreateAutomationModal from "./CreateAutomationModal.svelte"
import { Icon, Modal, Tabs, Tab } from "@budibase/bbui" import { Icon, Modal, Tabs, Tab } from "@budibase/bbui"
let modal
export let modal
</script> </script>
<div class="title"> <div class="title">

50
packages/builder/src/pages/builder/app/[application]/automate/_layout.svelte
View File

@ -1,22 +1,51 @@
<script> <script>
import { Heading, Body, Layout, Button, Modal } from "@budibase/bbui"
import { automationStore } from "builderStore" import { automationStore } from "builderStore"
import AutomationPanel from "components/automation/AutomationPanel/AutomationPanel.svelte" import AutomationPanel from "components/automation/AutomationPanel/AutomationPanel.svelte"
import SetupPanel from "components/automation/SetupPanel/SetupPanel.svelte" import SetupPanel from "components/automation/SetupPanel/SetupPanel.svelte"
import CreateAutomationModal from "components/automation/AutomationPanel/CreateAutomationModal.svelte"
$: automation = $automationStore.selectedAutomation?.automation
let modal
</script> </script>
<!-- routify:options index=3 --> <!-- routify:options index=3 -->
<div class="root"> <div class="root">
<div class="nav"> <div class="nav">
<AutomationPanel /> <AutomationPanel modal />
</div> </div>
<div class="content"> <div class="content">
<slot /> {#if automation}
<slot />
{:else}
<div class="centered">
<div class="main">
<Layout gap="S" justifyItems="center">
<svg
width="60px"
height="60px"
class="spectrum-Icon"
focusable="false"
>
<use xlink:href="#spectrum-icon-18-WorkflowAdd" />
</svg>
<Heading size="S">You have no automations</Heading>
<Body size="S">Let's fix that. Call the bots!</Body>
<Button on:click={() => modal.show()} size="S" cta
>Create automation</Button
>
</Layout>
</div>
</div>
{/if}
</div> </div>
{#if $automationStore.selectedAutomation} {#if $automationStore.selectedAutomation}
<div class="setup"> <div class="setup">
<SetupPanel /> <SetupPanel />
</div> </div>
{/if} {/if}
<Modal bind:this={modal}>
<CreateAutomationModal />
</Modal>
</div> </div>
<style> <style>
@ -60,4 +89,21 @@
background-color: var(--background); background-color: var(--background);
overflow-y: auto; overflow-y: auto;
} }
.centered {
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.main {
width: 300px;
}
</style> </style>

10
packages/builder/src/pages/builder/app/[application]/automate/index.svelte
View File

@ -15,13 +15,3 @@
} }
}) })
</script> </script>
<i>Create your first automation to get started</i>
<style>
i {
font-size: var(--font-size-m);
color: var(--grey-5);
margin-top: 2px;
}
</style>