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

Merge template and index page styles with new BBUI

This commit is contained in:
Andrew Kingston 2020-10-05 12:20:59 +01:00
parent 68a03eceb4
commit 701786dc25
6 changed files with 94 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/builder/src/components/start/AppList.svelte
View File

@ -19,7 +19,7 @@
</script> </script>
<div class="root"> <div class="root">
<Heading medium black>Your Apps</Heading> <Heading lh medium black>Your Apps</Heading>
{#await promise} {#await promise}
<div class="spinner-container"> <div class="spinner-container">
<Spinner size="30" /> <Spinner size="30" />
@ -48,8 +48,4 @@
grid-gap: var(--layout-m); grid-gap: var(--layout-m);
justify-content: start; justify-content: start;
} }
.root {
margin: 20px 80px;
}
</style> </style>

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

@ -216,6 +216,10 @@
step={i + 1} /> step={i + 1} />
{/each} {/each}
</div> </div>
<div class="body">
<div class="heading">
<h3 class="header">Get Started with Budibase</h3>
</div>
<div class="step"> <div class="step">
<Form bind:values={$createAppStore.values}> <Form bind:values={$createAppStore.values}>
{#each steps as step, i (i)} {#each steps as step, i (i)}
@ -249,6 +253,7 @@
</Button> </Button>
{/if} {/if}
</div> </div>
</div>
<img src="/_builder/assets/bb-logo.svg" alt="budibase icon" /> <img src="/_builder/assets/bb-logo.svg" alt="budibase icon" />
{#if submitting} {#if submitting}
<div in:fade class="spinner-container"> <div in:fade class="spinner-container">

21
packages/builder/src/components/start/Steps/Info.svelte
View File

@ -1,20 +1,22 @@
<script> <script>
import { Input, Heading, Body } from "@budibase/bbui" import { Label, Heading, Input } from "@budibase/bbui"
export let validationErrors export let validationErrors
export let template export let template
let blurred = { appName: false } let blurred = { appName: false }
</script> </script>
{#if template}
<Heading small black>Selected Template</Heading>
<Body>{template.name}</Body>
{/if}
<h2>Create your web app</h2> <h2>Create your web app</h2>
<div class="container"> <div class="container">
{#if template}
<div class="template">
<Label extraSmall grey>Selected Template</Label>
<Heading small>{template.name}</Heading>
</div>
{/if}
<Input <Input
on:input={() => (blurred.appName = true)} on:input={() => (blurred.appName = true)}
label="Web app name" label="Web App Name"
name="applicationName" name="applicationName"
placeholder="Enter name of your web application" placeholder="Enter name of your web application"
type="name" type="name"
@ -24,6 +26,11 @@
<style> <style>
.container { .container {
display: grid; display: grid;
grid-gap: 40px; grid-gap: var(--spacing-xl);
}
.template :global(label) {
/* Fix layout due to LH 0 on heading */
margin-bottom: 16px;
} }
</style> </style>

4
packages/builder/src/components/start/Steps/User.svelte
View File

@ -21,7 +21,7 @@
placeholder="Password" placeholder="Password"
type="pasword" type="pasword"
error={blurred.password && validationErrors.password} /> error={blurred.password && validationErrors.password} />
<Select secondary name="accessLevelId"> <Select label="Access Level" secondary name="accessLevelId">
<option value="ADMIN">Admin</option> <option value="ADMIN">Admin</option>
<option value="POWER_USER">Power User</option> <option value="POWER_USER">Power User</option>
</Select> </Select>
@ -30,6 +30,6 @@
<style> <style>
.container { .container {
display: grid; display: grid;
grid-gap: 40px; grid-gap: var(--spacing-xl);
} }
</style> </style>

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

@ -1,5 +1,5 @@
<script> <script>
import { Button, Heading, Body } from "@budibase/bbui" import { Button, Heading, Body, Spacer } from "@budibase/bbui"
import AppCard from "./AppCard.svelte" import AppCard from "./AppCard.svelte"
import Spinner from "components/common/Spinner.svelte" import Spinner from "components/common/Spinner.svelte"
import api from "builderStore/api" import api from "builderStore/api"
@ -15,7 +15,7 @@
</script> </script>
<div class="root"> <div class="root">
<Heading medium black>Start With a Template</Heading> <Heading lh medium black>Start With a Template</Heading>
{#await templatesPromise} {#await templatesPromise}
<div class="spinner-container"> <div class="spinner-container">
<Spinner size="30" /> <Spinner size="30" />
@ -24,11 +24,12 @@
<div class="templates"> <div class="templates">
{#each templates as template} {#each templates as template}
<div class="templates-card"> <div class="templates-card">
<Heading black medium>{template.name}</Heading> <Heading black small>{template.name}</Heading>
<Spacer small />
<Body medium grey>{template.category}</Body> <Body medium grey>{template.category}</Body>
<Body small black>{template.description}</Body> <Body lh small black>{template.description}</Body>
<div> <div>
<img src={template.image} width="300" /> <img src={template.image} width="100%" />
</div> </div>
<div class="card-footer"> <div class="card-footer">
<Button secondary on:click={() => onSelect(template)}> <Button secondary on:click={() => onSelect(template)}>
@ -68,8 +69,4 @@
color: var(--ink); color: var(--ink);
text-transform: capitalize; text-transform: capitalize;
} }
.root {
margin: 20px 80px;
}
</style> </style>

43
packages/builder/src/pages/index.svelte
View File

@ -4,6 +4,7 @@
import AppList from "components/start/AppList.svelte" import AppList from "components/start/AppList.svelte"
import { onMount } from "svelte" import { onMount } from "svelte"
import ActionButton from "components/common/ActionButton.svelte" import ActionButton from "components/common/ActionButton.svelte"
import { get } from "builderStore/api"
import Spinner from "components/common/Spinner.svelte" import Spinner from "components/common/Spinner.svelte"
import CreateAppModal from "components/start/CreateAppModal.svelte" import CreateAppModal from "components/start/CreateAppModal.svelte"
import { Button, Heading } from "@budibase/bbui" import { Button, Heading } from "@budibase/bbui"
@ -13,6 +14,7 @@
let promise = getApps() let promise = getApps()
let hasKey let hasKey
let template
let modalVisible = false let modalVisible = false
async function getApps() { async function getApps() {
@ -44,41 +46,49 @@
} }
} }
function selectTemplate(newTemplate) {
template = newTemplate
modalVisible = true
}
checkIfKeysAndApps() checkIfKeysAndApps()
</script> </script>
<div class="header"> <div class="container">
<div class="header">
<Heading medium black>Welcome to the Budibase Beta</Heading> <Heading medium black>Welcome to the Budibase Beta</Heading>
<Button primary purple on:click={() => (modalVisible = true)}> <Button primary purple on:click={() => (modalVisible = true)}>
Create New Web App Create New Web App
</Button> </Button>
</div> </div>
<div class="banner"> <div class="banner">
<img src="/_builder/assets/orange-landscape.png" alt="rocket" /> <img src="/_builder/assets/orange-landscape.png" alt="rocket" />
<div class="banner-content"> <div class="banner-content">
Every accomplishment starts with a decision to try. Every accomplishment starts with a decision to try.
</div> </div>
</div>
<TemplateList onSelect={selectTemplate} />
<AppList />
{#if modalVisible}
<CreateAppModal bind:visible={modalVisible} {hasKey} {template} />
{/if}
</div> </div>
<TemplateList onSelect={() => (modalVisible = true)} />
<AppList />
{#if modalVisible}
<CreateAppModal bind:visible={modalVisible} {hasKey} {template} />
{/if}
<style> <style>
.container {
display: grid;
gap: var(--spacing-xl);
margin: 40px 80px;
}
.header { .header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin: 40px 80px 0px 80px;
}
.welcome {
font-size: var(--font-size-3xl);
color: var(--ink);
font-weight: 600;
} }
.banner { .banner {
@ -88,7 +98,6 @@
position: relative; position: relative;
text-align: center; text-align: center;
color: white; color: white;
margin: 20px 80px 40px 80px;
border-radius: 16px; border-radius: 16px;
} }