add splash screen to automation

5 years ago · 4869ecbf3a
4 changed files with 50 additions and 19 deletions
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
@ -19,7 +19,6 @@
  }
 </script>

-{#if !blocks.length}<i>Add a trigger to your automation to get started</i>{/if}
 <section class="canvas">
  {#each blocks as block, idx (block.id)}
    <div
@ -57,9 +56,4 @@
    justify-content: flex-start;
    align-items: center;
  }
-
-  i {
-    font-size: var(--font-size-m);
-    color: var(--grey-5);
-  }
 </style>
--- a/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
+++ b/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
@ -2,7 +2,8 @@
  import AutomationList from "./AutomationList.svelte"
  import CreateAutomationModal from "./CreateAutomationModal.svelte"
  import { Icon, Modal, Tabs, Tab } from "@budibase/bbui"
-  let modal
+
+  export let modal
 </script>

 <div class="title">
--- a/packages/builder/src/pages/builder/app/[application]/automate/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/automate/_layout.svelte
@ -1,22 +1,51 @@
 <script>
+  import { Heading, Body, Layout, Button, Modal } from "@budibase/bbui"
  import { automationStore } from "builderStore"
  import AutomationPanel from "components/automation/AutomationPanel/AutomationPanel.svelte"
  import SetupPanel from "components/automation/SetupPanel/SetupPanel.svelte"
+  import CreateAutomationModal from "components/automation/AutomationPanel/CreateAutomationModal.svelte"
+  $: automation = $automationStore.selectedAutomation?.automation
+  let modal
 </script>

 <!-- routify:options index=3 -->
 <div class="root">
  <div class="nav">
-    <AutomationPanel />
+    <AutomationPanel modal />
  </div>
  <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>
  {#if $automationStore.selectedAutomation}
    <div class="setup">
      <SetupPanel />
    </div>
  {/if}
+  <Modal bind:this={modal}>
+    <CreateAutomationModal />
+  </Modal>
 </div>

 <style>
@ -60,4 +89,21 @@
    background-color: var(--background);
    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>
--- a/packages/builder/src/pages/builder/app/[application]/automate/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/automate/index.svelte
@ -15,13 +15,3 @@
    }
  })
 </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>