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

making the onboarding modal inline and shown when you have no apps

This commit is contained in:
Martin McKeaveney 2021-10-06 10:54:24 +01:00
parent 9e41b9cd8f
commit 0072f1cd6b
2 changed files with 6 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,6 @@
<script> <script>
import { ModalContent, Body } from "@budibase/bbui" import { ModalContent, Body } from "@budibase/bbui"
// import { auth } from "stores/portal" import { auth } from "stores/portal"
import TemplateList from "./TemplateList.svelte" import TemplateList from "./TemplateList.svelte"
import CreateAppModal from "./CreateAppModal.svelte" import CreateAppModal from "./CreateAppModal.svelte"
import BudiWorldImage from "assets/budiworld.webp" import BudiWorldImage from "assets/budiworld.webp"
@ -17,15 +17,6 @@
template = selectedTemplate template = selectedTemplate
nextStep() nextStep()
} }
// TODO: mark user as onboarded if they close this?
// async function userOnboarded() {
// try {
// await auth.updateSelf({ onboarded: true })
// } catch (error) {
// notifications.error("An onboarding error has occurred.")
// }
// }
</script> </script>
{#if step === 0} {#if step === 0}
@ -33,6 +24,8 @@
title={`Welcome ${$auth.user?.firstName + "!" || "!"}`} title={`Welcome ${$auth.user?.firstName + "!" || "!"}`}
confirmText="Next" confirmText="Next"
onConfirm={nextStep} onConfirm={nextStep}
showCancelButton={false}
showCloseIcon={false}
> >
<Body size="S"> <Body size="S">
<p>Welcome to Budibase!</p> <p>Welcome to Budibase!</p>
@ -53,6 +46,8 @@
confirmText="Start from Scratch" confirmText="Start from Scratch"
size="L" size="L"
onConfirm={nextStep} onConfirm={nextStep}
showCancelButton={false}
showCloseIcon={false}
> >
<Body size="S"> <Body size="S">
One of the coolest things about Budibase is that you don't have to start One of the coolest things about Budibase is that you don't have to start

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

@ -8,10 +8,8 @@
ButtonGroup, ButtonGroup,
Select, Select,
Modal, Modal,
ModalContent,
Page, Page,
notifications, notifications,
Body,
Search, Search,
} from "@budibase/bbui" } from "@budibase/bbui"
import CreateAppModal from "components/start/CreateAppModal.svelte" import CreateAppModal from "components/start/CreateAppModal.svelte"
@ -35,7 +33,6 @@
let updatingModal let updatingModal
let deletionModal let deletionModal
let unpublishModal let unpublishModal
let onboardingModal
let creatingApp = false let creatingApp = false
let loaded = false let loaded = false
let searchTerm = "" let searchTerm = ""
@ -45,7 +42,6 @@
$: filteredApps = enrichedApps.filter(app => $: filteredApps = enrichedApps.filter(app =>
app?.name?.toLowerCase().includes(searchTerm.toLowerCase()) app?.name?.toLowerCase().includes(searchTerm.toLowerCase())
) )
$: loaded && enrichedApps.length === 0 && onboardingModal?.show()
const enrichApps = (apps, user, sortBy) => { const enrichApps = (apps, user, sortBy) => {
const enrichedApps = apps.map(app => ({ const enrichedApps = apps.map(app => ({
@ -273,22 +269,7 @@
{#if !enrichedApps.length && !creatingApp && loaded} {#if !enrichedApps.length && !creatingApp && loaded}
<div class="empty-wrapper"> <div class="empty-wrapper">
<Modal inline> <Modal inline>
<ModalContent <OnboardingModal />
title="Create your first app"
confirmText="Create app"
showCancelButton={false}
showCloseIcon={false}
onConfirm={initiateAppCreation}
size="M"
>
<div slot="footer">
<Button on:click={initiateAppImport} secondary>Import app</Button>
</div>
<Body size="S">
The purpose of the Budibase builder is to help you build beautiful,
powerful applications quickly and easily.
</Body>
</ModalContent>
</Modal> </Modal>
</div> </div>
{/if} {/if}
@ -319,9 +300,6 @@
</ConfirmDialog> </ConfirmDialog>
<UpdateAppModal app={selectedApp} bind:this={updatingModal} /> <UpdateAppModal app={selectedApp} bind:this={updatingModal} />
<Modal bind:this={onboardingModal}>
<OnboardingModal />
</Modal>
<style> <style>
.title, .title,