CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-09-30 17:18:14 +13:00
Code Issues Projects Releases Wiki Activity

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

Browse source
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>
import { ModalContent, Body } from "@budibase/bbui"
// import { auth } from "stores/portal"
import { auth } from "stores/portal"
import TemplateList from "./TemplateList.svelte"
import CreateAppModal from "./CreateAppModal.svelte"
import BudiWorldImage from "assets/budiworld.webp"
@ -17,15 +17,6 @@
template = selectedTemplate
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>
{#if step === 0}
@ -33,6 +24,8 @@
title={`Welcome ${$auth.user?.firstName + "!" || "!"}`}
confirmText="Next"
onConfirm={nextStep}
showCancelButton={false}
showCloseIcon={false}
>
<Body size="S">
<p>Welcome to Budibase!</p>
@ -53,6 +46,8 @@
confirmText="Start from Scratch"
size="L"
onConfirm={nextStep}
showCancelButton={false}
showCloseIcon={false}
>
<Body size="S">
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,
Select,
Modal,
ModalContent,
Page,
notifications,
Body,
Search,
} from "@budibase/bbui"
import CreateAppModal from "components/start/CreateAppModal.svelte"
@ -35,7 +33,6 @@
let updatingModal
let deletionModal
let unpublishModal
let onboardingModal
let creatingApp = false
let loaded = false
let searchTerm = ""
@ -45,7 +42,6 @@
$: filteredApps = enrichedApps.filter(app =>
app?.name?.toLowerCase().includes(searchTerm.toLowerCase())
)
$: loaded && enrichedApps.length === 0 && onboardingModal?.show()
const enrichApps = (apps, user, sortBy) => {
const enrichedApps = apps.map(app => ({
@ -273,22 +269,7 @@
{#if !enrichedApps.length && !creatingApp && loaded}
<div class="empty-wrapper">
<Modal inline>
<ModalContent
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>
<OnboardingModal />
</Modal>
</div>
{/if}
@ -319,9 +300,6 @@
</ConfirmDialog>
<UpdateAppModal app={selectedApp} bind:this={updatingModal} />
<Modal bind:this={onboardingModal}>
<OnboardingModal />
</Modal>
<style>
.title,