Redesign UX, get rid of welcome screen

5 years ago · 2f669e7b26
4 changed files with 58 additions and 68 deletions
--- a/packages/builder/src/components/start/CreateAppModal.svelte
+++ b/packages/builder/src/components/start/CreateAppModal.svelte
@ -140,8 +140,8 @@

 {#if showTemplateSelection}
  <ModalContent
-    title={"Start from scratch or select a template"}
-    confirmText="Start from Scratch"
+    title={"Get started quickly"}
+    showConfirmButton={false}
    size="L"
    onConfirm={() => {
      showTemplateSelection = false
@ -150,12 +150,14 @@
    showCancelButton={false}
    showCloseIcon={false}
  >
-    <Body size="S">
-      One of the coolest things about Budibase is that you don't have to start
-      from scratch. Simply select a template below, and get to work.
-    </Body>
+    <Body size="M">Select a template below, or start from scratch.</Body>
    <TemplateList
      onSelect={selected => {
+        if (!selected) {
+          showTemplateSelection = false
+          return
+        }
+
        template = selected
      }}
    />
--- a/packages/builder/src/components/start/OnboardingModal.svelte
+++ b/packages/builder/src/components/start/OnboardingModal.svelte
@ -1,45 +0,0 @@
-<script>
-  import { ModalContent, Body } from "@budibase/bbui"
-  import { auth } from "stores/portal"
-  import CreateAppModal from "./CreateAppModal.svelte"
-  import BudiWorldImage from "assets/budiworld.webp"
-
-  let step = 0
-  let template
-
-  function nextStep() {
-    step += 1
-    return false
-  }
-</script>
-
-{#if step === 0}
-  <ModalContent
-    title={`Welcome ${$auth.user?.firstName + "!" || "!"}`}
-    confirmText="Next"
-    onConfirm={nextStep}
-    showCancelButton={false}
-    showCloseIcon={false}
-  >
-    <Body size="S">
-      <p>Welcome to Budibase!</p>
-      <p>
-        We're different from other development tools in some really special
-        ways, so we'd like to take you through them.
-      </p>
-    </Body>
-    <img
-      alt="Budibase community world"
-      class="budibase-world-image"
-      src={BudiWorldImage}
-    />
-  </ModalContent>
-{:else if step === 1}
-  <CreateAppModal {template} />
-{/if}
-
-<style>
-  .budibase-world-image {
-    height: 200px;
-  }
-</style>
--- a/packages/builder/src/components/start/TemplateList.svelte
+++ b/packages/builder/src/components/start/TemplateList.svelte
@ -1,5 +1,5 @@
 <script>
-  import { Heading, Body, Layout } from "@budibase/bbui"
+  import { Heading, Layout, Icon } from "@budibase/bbui"
  import Spinner from "components/common/Spinner.svelte"
  import api from "builderStore/api"

@ -21,17 +21,24 @@
  {:then templates}
    <div class="templates">
      {#each templates as template}
-        <Layout gap="XS" noPadding>
-          <img
-            alt="template"
-            on:click={() => onSelect(template)}
-            src={template.image}
-            width="100%"
-          />
+        <div class="template" on:click={() => onSelect(template)}>
+          <div
+            class="background-icon"
+            style={`background: ${template.background};`}
+          >
+            <Icon name={template.icon} />
+          </div>
          <Heading size="XS">{template.name}</Heading>
-          <Body size="S" black>{template.description}</Body>
-        </Layout>
+          <p class="detail">{template?.category?.toUpperCase()}</p>
+        </div>
      {/each}
+      <div class="template start-from-scratch" on:click={() => onSelect(null)}>
+        <div class="background-icon" style={`background: var(--background);`}>
+          <Icon name="Add" />
+        </div>
+        <Heading size="XS">Start from scratch</Heading>
+        <p class="detail">BLANK</p>
+      </div>
    </div>
  {:catch err}
    <h1 style="color:red">{err}</h1>
@ -42,14 +49,41 @@
  .templates {
    display: grid;
    width: 100%;
-    grid-template-columns: 1fr 1fr;
-    grid-gap: var(--layout-m);
+    grid-gap: var(--spacing-m);
+    grid-template-columns: 1fr;
    justify-content: start;
-    margin-top: var(--layout-s);
+    margin-top: 15px;
+  }
+
+  .background-icon {
+    padding: 10px;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    color: white;
  }

-  img {
-    margin-bottom: var(--layout-s);
+  .template {
+    height: 60px;
+    display: grid;
+    grid-gap: var(--layout-m);
+    grid-template-columns: 5% 1fr 15%;
+    border: 1px solid #494949;
+    align-items: center;
    cursor: pointer;
+    border-radius: 4px;
+    background: #1a1a1a;
+    padding: 8px 16px;
+  }
+
+  .detail {
+    text-align: right;
+  }
+
+  .start-from-scratch {
+    background: var(--spectrum-global-color-gray-50);
+    margin-top: 20px;
  }
 </style>
--- a/packages/builder/src/pages/builder/portal/apps/index.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/index.svelte
@ -14,7 +14,6 @@
  } from "@budibase/bbui"
  import CreateAppModal from "components/start/CreateAppModal.svelte"
  import UpdateAppModal from "components/start/UpdateAppModal.svelte"
-  import OnboardingModal from "components/start/OnboardingModal.svelte"
  import { del } from "builderStore/api"
  import { onMount } from "svelte"
  import { apps, auth, admin } from "stores/portal"
@ -269,7 +268,7 @@
  {#if !enrichedApps.length && !creatingApp && loaded}
    <div class="empty-wrapper">
      <Modal inline>
-        <OnboardingModal />
+        <CreateAppModal {template} />
      </Modal>
    </div>
  {/if}