ufkc7e3d
/
budibase
forked from tsai/budibase
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

UX improvements

master
Martin McKeaveney 5 years ago
parent
4c59087904
commit
ab24e02941
4 changed files with 28 additions and 33 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 25
      packages/builder/src/components/start/OnboardingModal.svelte
  2. 19
      packages/builder/src/components/start/TemplateList.svelte
  3. 6
      packages/builder/src/pages/builder/portal/apps/index.svelte
  4. 11
      packages/server/src/utilities/fileSystem/index.js

25
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"
@ -10,27 +10,32 @@
function nextStep() { function nextStep() {
step += 1 step += 1
return false
} }
function selectTemplate(selectedTemplate) { function selectTemplate(selectedTemplate) {
// get the template from the URL
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}
<ModalContent <ModalContent
title={`Welcome ${$auth.user?.firstName + "!" || "!"}`} title={`Welcome ${$auth.user?.firstName + "!" || "!"}`}
confirmText="Next" confirmText="Next"
onConfirm={() => { onConfirm={nextStep}
nextStep()
return false
}}
> >
<Body size="S"> <Body size="S">
<p>Welcome to Budibase!</p> <p>Welcome to Budibase!</p>
<p> <p>
We're different from other development tools in some really special We're different from other development tools in some really special
ways, so we'd like to take you through them. ways, so we'd like to take you through them.
@ -46,10 +51,8 @@
<ModalContent <ModalContent
title={"Start from scratch or select a template"} title={"Start from scratch or select a template"}
confirmText="Start from Scratch" confirmText="Start from Scratch"
onConfirm={() => { size="L"
nextStep() onConfirm={nextStep}
return 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

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

@ -1,5 +1,5 @@
<script> <script>
import { Heading, Body } from "@budibase/bbui" import { Heading, Body, Layout } 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"
@ -13,7 +13,7 @@
let templatesPromise = fetchTemplates() let templatesPromise = fetchTemplates()
</script> </script>
<div class="root"> <Layout gap="XS" noPadding>
{#await templatesPromise} {#await templatesPromise}
<div class="spinner-container"> <div class="spinner-container">
<Spinner size="30" /> <Spinner size="30" />
@ -21,7 +21,7 @@
{:then templates} {:then templates}
<div class="templates"> <div class="templates">
{#each templates as template} {#each templates as template}
<div class="templates-card"> <Layout gap="XS" noPadding>
<img <img
alt="template" alt="template"
on:click={() => onSelect(template)} on:click={() => onSelect(template)}
@ -30,13 +30,13 @@
/> />
<Heading size="XS">{template.name}</Heading> <Heading size="XS">{template.name}</Heading>
<Body size="S" black>{template.description}</Body> <Body size="S" black>{template.description}</Body>
</div> </Layout>
{/each} {/each}
</div> </div>
{:catch err} {:catch err}
<h1 style="color:red">{err}</h1> <h1 style="color:red">{err}</h1>
{/await} {/await}
</div> </Layout>
<style> <style>
.templates { .templates {
@ -45,16 +45,11 @@
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
grid-gap: var(--layout-m); grid-gap: var(--layout-m);
justify-content: start; justify-content: start;
} margin-top: var(--layout-s);
.templates-card {
background-color: var(--background);
} }
img { img {
height: 135px; margin-bottom: var(--layout-s);
width: 278px;
margin-bottom: var(--layout-m);
cursor: pointer; cursor: pointer;
} }
</style> </style>

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

@ -45,6 +45,7 @@
$: 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 => ({
@ -199,9 +200,6 @@
onMount(async () => { onMount(async () => {
await apps.load() await apps.load()
loaded = true loaded = true
// TODO: only show when they have not onboarded yet
// If apps = 0 or user isn't onboarded?
onboardingModal.show()
}) })
</script> </script>
@ -321,7 +319,7 @@
</ConfirmDialog> </ConfirmDialog>
<UpdateAppModal app={selectedApp} bind:this={updatingModal} /> <UpdateAppModal app={selectedApp} bind:this={updatingModal} />
<Modal width={"100px"} bind:this={onboardingModal}> <Modal bind:this={onboardingModal}>
<OnboardingModal /> <OnboardingModal />
</Modal> </Modal>

11
packages/server/src/utilities/fileSystem/index.js
View File

@ -76,8 +76,9 @@ exports.getTemplateStream = async template => {
if (template.file) { if (template.file) {
return fs.createReadStream(template.file.path) return fs.createReadStream(template.file.path)
} else { } else {
const tmpPath = await exports.downloadTemplate(template.key) const [type, name] = template.key.split("/")
return fs.createReadStream(join(tmpPath, "db", "dump.txt")) 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 * @param name
* @return {Promise<*>} * @return {Promise<*>}
*/ */
exports.downloadTemplate = async path => { exports.downloadTemplate = async (type, name) => {
const [type, name] = path.split("/")
const DEFAULT_TEMPLATES_BUCKET = const DEFAULT_TEMPLATES_BUCKET =
"prod-budi-templates.s3-eu-west-1.amazonaws.com" "prod-budi-templates.s3-eu-west-1.amazonaws.com"
const templateUrl = `https://${DEFAULT_TEMPLATES_BUCKET}/templates/${type}/${name}.tar.gz` const templateUrl = `https://${DEFAULT_TEMPLATES_BUCKET}/templates/${type}/${name}.tar.gz`
return downloadTarball(templateUrl, ObjectStoreBuckets.TEMPLATES, path) return downloadTarball(templateUrl, ObjectStoreBuckets.TEMPLATES, type)
} }
/** /**

Write Preview
Loading…
Cancel
Save