UX improvements
This commit is contained in:
Martin McKeaveney
parent
4c59087904
commit
ab24e02941
|
|
@ -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"
|
||||
|
|
@ -10,27 +10,32 @@
|
|||
|
||||
function nextStep() {
|
||||
step += 1
|
||||
return false
|
||||
}
|
||||
|
||||
function selectTemplate(selectedTemplate) {
|
||||
// get the template from the URL
|
||||
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}
|
||||
<ModalContent
|
||||
title={`Welcome ${$auth.user?.firstName + "!" || "!"}`}
|
||||
confirmText="Next"
|
||||
onConfirm={() => {
|
||||
nextStep()
|
||||
return false
|
||||
}}
|
||||
onConfirm={nextStep}
|
||||
>
|
||||
<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.
|
||||
|
|
@ -46,10 +51,8 @@
|
|||
<ModalContent
|
||||
title={"Start from scratch or select a template"}
|
||||
confirmText="Start from Scratch"
|
||||
onConfirm={() => {
|
||||
nextStep()
|
||||
return false
|
||||
}}
|
||||
size="L"
|
||||
onConfirm={nextStep}
|
||||
>
|
||||
<Body size="S">
|
||||
One of the coolest things about Budibase is that you don't have to start
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script>
|
||||
import { Heading, Body } from "@budibase/bbui"
|
||||
import { Heading, Body, Layout } from "@budibase/bbui"
|
||||
import Spinner from "components/common/Spinner.svelte"
|
||||
import api from "builderStore/api"
|
||||
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
let templatesPromise = fetchTemplates()
|
||||
</script>
|
||||
|
||||
<div class="root">
|
||||
<Layout gap="XS" noPadding>
|
||||
{#await templatesPromise}
|
||||
<div class="spinner-container">
|
||||
<Spinner size="30" />
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
{:then templates}
|
||||
<div class="templates">
|
||||
{#each templates as template}
|
||||
<div class="templates-card">
|
||||
<Layout gap="XS" noPadding>
|
||||
<img
|
||||
alt="template"
|
||||
on:click={() => onSelect(template)}
|
||||
|
|
@ -30,13 +30,13 @@
|
|||
/>
|
||||
<Heading size="XS">{template.name}</Heading>
|
||||
<Body size="S" black>{template.description}</Body>
|
||||
</div>
|
||||
</Layout>
|
||||
{/each}
|
||||
</div>
|
||||
{:catch err}
|
||||
<h1 style="color:red">{err}</h1>
|
||||
{/await}
|
||||
</div>
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
.templates {
|
||||
|
|
@ -45,16 +45,11 @@
|
|||
grid-template-columns: 1fr 1fr;
|
||||
grid-gap: var(--layout-m);
|
||||
justify-content: start;
|
||||
}
|
||||
|
||||
.templates-card {
|
||||
background-color: var(--background);
|
||||
margin-top: var(--layout-s);
|
||||
}
|
||||
|
||||
img {
|
||||
height: 135px;
|
||||
width: 278px;
|
||||
margin-bottom: var(--layout-m);
|
||||
margin-bottom: var(--layout-s);
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -45,6 +45,7 @@
|
|||
$: 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 => ({
|
||||
|
|
@ -199,9 +200,6 @@
|
|||
onMount(async () => {
|
||||
await apps.load()
|
||||
loaded = true
|
||||
// TODO: only show when they have not onboarded yet
|
||||
// If apps = 0 or user isn't onboarded?
|
||||
onboardingModal.show()
|
||||
})
|
||||
</script>
|
||||
|
||||
|
|
@ -321,7 +319,7 @@
|
|||
</ConfirmDialog>
|
||||
|
||||
<UpdateAppModal app={selectedApp} bind:this={updatingModal} />
|
||||
<Modal width={"100px"} bind:this={onboardingModal}>
|
||||
<Modal bind:this={onboardingModal}>
|
||||
<OnboardingModal />
|
||||
</Modal>
|
||||
|
||||
|
|
|
|||
|
|
@ -76,8 +76,9 @@ exports.getTemplateStream = async template => {
|
|||
if (template.file) {
|
||||
return fs.createReadStream(template.file.path)
|
||||
} else {
|
||||
const tmpPath = await exports.downloadTemplate(template.key)
|
||||
return fs.createReadStream(join(tmpPath, "db", "dump.txt"))
|
||||
const [type, name] = template.key.split("/")
|
||||
const tmpPath = await exports.downloadTemplate(type, name)
|
||||
return fs.createReadStream(join(tmpPath, name, "db", "dump.txt"))
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -218,13 +219,11 @@ exports.deleteApp = async appId => {
|
|||
* @param name
|
||||
* @return {Promise<*>}
|
||||
*/
|
||||
exports.downloadTemplate = async path => {
|
||||
const [type, name] = path.split("/")
|
||||
|
||||
exports.downloadTemplate = async (type, name) => {
|
||||
const DEFAULT_TEMPLATES_BUCKET =
|
||||
"prod-budi-templates.s3-eu-west-1.amazonaws.com"
|
||||
const templateUrl = `https://${DEFAULT_TEMPLATES_BUCKET}/templates/${type}/${name}.tar.gz`
|
||||
return downloadTarball(templateUrl, ObjectStoreBuckets.TEMPLATES, path)
|
||||
return downloadTarball(templateUrl, ObjectStoreBuckets.TEMPLATES, type)
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
Loading…
Reference in New Issue