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

Redesign UX, get rid of welcome screen

This commit is contained in:
Martin McKeaveney 2021-10-06 14:33:21 +01:00
parent 50fad056a3
commit 2f669e7b26
4 changed files with 58 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/builder/src/components/start/CreateAppModal.svelte
View File

@ -140,8 +140,8 @@
{#if showTemplateSelection} {#if showTemplateSelection}
<ModalContent <ModalContent
title={"Start from scratch or select a template"} title={"Get started quickly"}
confirmText="Start from Scratch" showConfirmButton={false}
size="L" size="L"
onConfirm={() => { onConfirm={() => {
showTemplateSelection = false showTemplateSelection = false
@ -150,12 +150,14 @@
showCancelButton={false} showCancelButton={false}
showCloseIcon={false} showCloseIcon={false}
> >
<Body size="S"> <Body size="M">Select a template below, or start from scratch.</Body>
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>
<TemplateList <TemplateList
onSelect={selected => { onSelect={selected => {
if (!selected) {
showTemplateSelection = false
return
}
template = selected template = selected
}} }}
/> />

45
packages/builder/src/components/start/OnboardingModal.svelte
View File

@ -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>

64
packages/builder/src/components/start/TemplateList.svelte
View File

@ -1,5 +1,5 @@
<script> <script>
import { Heading, Body, Layout } from "@budibase/bbui" import { Heading, Layout, Icon } from "@budibase/bbui"
import Spinner from "components/common/Spinner.svelte" import Spinner from "components/common/Spinner.svelte"
import api from "builderStore/api" import api from "builderStore/api"
@ -21,17 +21,24 @@
{:then templates} {:then templates}
<div class="templates"> <div class="templates">
{#each templates as template} {#each templates as template}
<Layout gap="XS" noPadding> <div class="template" on:click={() => onSelect(template)}>
<img <div
alt="template" class="background-icon"
on:click={() => onSelect(template)} style={`background: ${template.background};`}
src={template.image} >
width="100%" <Icon name={template.icon} />
/> </div>
<Heading size="XS">{template.name}</Heading> <Heading size="XS">{template.name}</Heading>
<Body size="S" black>{template.description}</Body> <p class="detail">{template?.category?.toUpperCase()}</p>
</Layout> </div>
{/each} {/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> </div>
{:catch err} {:catch err}
<h1 style="color:red">{err}</h1> <h1 style="color:red">{err}</h1>
@ -42,14 +49,41 @@
.templates { .templates {
display: grid; display: grid;
width: 100%; width: 100%;
grid-template-columns: 1fr 1fr; grid-gap: var(--spacing-m);
grid-gap: var(--layout-m); grid-template-columns: 1fr;
justify-content: start; justify-content: start;
margin-top: var(--layout-s); margin-top: 15px;
} }
img { .background-icon {
margin-bottom: var(--layout-s); 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; 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> </style>

3
packages/builder/src/pages/builder/portal/apps/index.svelte
View File

@ -14,7 +14,6 @@
} from "@budibase/bbui" } from "@budibase/bbui"
import CreateAppModal from "components/start/CreateAppModal.svelte" import CreateAppModal from "components/start/CreateAppModal.svelte"
import UpdateAppModal from "components/start/UpdateAppModal.svelte" import UpdateAppModal from "components/start/UpdateAppModal.svelte"
import OnboardingModal from "components/start/OnboardingModal.svelte"
import { del } from "builderStore/api" import { del } from "builderStore/api"
import { onMount } from "svelte" import { onMount } from "svelte"
import { apps, auth, admin } from "stores/portal" import { apps, auth, admin } from "stores/portal"
@ -269,7 +268,7 @@
{#if !enrichedApps.length && !creatingApp && loaded} {#if !enrichedApps.length && !creatingApp && loaded}
<div class="empty-wrapper"> <div class="empty-wrapper">
<Modal inline> <Modal inline>
<OnboardingModal /> <CreateAppModal {template} />
</Modal> </Modal>
</div> </div>
{/if} {/if}