Redesign UX, get rid of welcome screen
This commit is contained in:
Martin McKeaveney
parent
50fad056a3
commit
2f669e7b26
|
|
@ -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
|
||||
}}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
img {
|
||||
margin-bottom: var(--layout-s);
|
||||
.background-icon {
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 18px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.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>
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
Loading…
Reference in New Issue