remove uneeded app creation modal
This commit is contained in:
Peter Clement
parent
3c1414dc18
commit
7ab4d5f3d3
|
|
@ -11,7 +11,6 @@
|
|||
import { capitalise } from "helpers"
|
||||
import { goto } from "@roxi/routify"
|
||||
import { APP_NAME_REGEX } from "constants"
|
||||
import TemplateList from "./TemplateList.svelte"
|
||||
|
||||
export let template
|
||||
export let inline
|
||||
|
|
@ -147,58 +146,34 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
{#if showTemplateSelection}
|
||||
<ModalContent
|
||||
title={"Get started quickly"}
|
||||
showConfirmButton={false}
|
||||
size="L"
|
||||
onConfirm={() => {
|
||||
template = {}
|
||||
return false
|
||||
}}
|
||||
showCancelButton={!inline}
|
||||
showCloseIcon={!inline}
|
||||
>
|
||||
<TemplateList
|
||||
onSelect={(selected, { useImport } = {}) => {
|
||||
if (!selected) {
|
||||
template = useImport ? { fromFile: true } : {}
|
||||
return
|
||||
}
|
||||
template = selected
|
||||
<ModalContent
|
||||
title={"Name your app"}
|
||||
confirmText={template?.fromFile ? "Import app" : "Create app"}
|
||||
onConfirm={createNewApp}
|
||||
onCancel={inline ? onCancel : null}
|
||||
cancelText={inline ? "Back" : undefined}
|
||||
showCloseIcon={!inline}
|
||||
disabled={!valid}
|
||||
>
|
||||
{#if template?.fromFile}
|
||||
<Dropzone
|
||||
error={$touched.file && $errors.file}
|
||||
gallery={false}
|
||||
label="File to import"
|
||||
value={[$values.file]}
|
||||
on:change={e => {
|
||||
$values.file = e.detail?.[0]
|
||||
$touched.file = true
|
||||
}}
|
||||
/>
|
||||
</ModalContent>
|
||||
{:else}
|
||||
<ModalContent
|
||||
title={"Name your app"}
|
||||
confirmText={template?.fromFile ? "Import app" : "Create app"}
|
||||
onConfirm={createNewApp}
|
||||
onCancel={inline ? onCancel : null}
|
||||
cancelText={inline ? "Back" : undefined}
|
||||
showCloseIcon={!inline}
|
||||
disabled={!valid}
|
||||
>
|
||||
{#if template?.fromFile}
|
||||
<Dropzone
|
||||
error={$touched.file && $errors.file}
|
||||
gallery={false}
|
||||
label="File to import"
|
||||
value={[$values.file]}
|
||||
on:change={e => {
|
||||
$values.file = e.detail?.[0]
|
||||
$touched.file = true
|
||||
}}
|
||||
/>
|
||||
{/if}
|
||||
<Input
|
||||
bind:value={$values.name}
|
||||
error={$touched.name && $errors.name}
|
||||
on:blur={() => ($touched.name = true)}
|
||||
label="Name"
|
||||
placeholder={$auth.user.firstName
|
||||
? `${$auth.user.firstName}'s app`
|
||||
: "My app"}
|
||||
/>
|
||||
</ModalContent>
|
||||
{/if}
|
||||
{/if}
|
||||
<Input
|
||||
bind:value={$values.name}
|
||||
error={$touched.name && $errors.name}
|
||||
on:blur={() => ($touched.name = true)}
|
||||
label="Name"
|
||||
placeholder={$auth.user.firstName
|
||||
? `${$auth.user.firstName}'s app`
|
||||
: "My app"}
|
||||
/>
|
||||
</ModalContent>
|
||||
|
|
|
|||
|
|
@ -1,69 +0,0 @@
|
|||
<script>
|
||||
import { Heading, Layout, Icon } from "@budibase/bbui"
|
||||
|
||||
export let onSelect
|
||||
</script>
|
||||
|
||||
<Layout gap="XS" noPadding>
|
||||
<div class="template start-from-scratch" on:click={() => onSelect(null)}>
|
||||
<div
|
||||
class="background-icon"
|
||||
style={`background: rgb(50, 50, 50); color: white;`}
|
||||
>
|
||||
<Icon name="Add" />
|
||||
</div>
|
||||
<Heading size="XS">Start from scratch</Heading>
|
||||
<p class="detail">BLANK</p>
|
||||
</div>
|
||||
<div
|
||||
class="template import"
|
||||
on:click={() => onSelect(null, { useImport: true })}
|
||||
>
|
||||
<div
|
||||
class="background-icon"
|
||||
style={`background: rgb(50, 50, 50); color: white;`}
|
||||
>
|
||||
<Icon name="Add" />
|
||||
</div>
|
||||
<Heading size="XS">Import an app</Heading>
|
||||
<p class="detail">BLANK</p>
|
||||
</div>
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
.background-icon {
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 18px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.template {
|
||||
min-height: 60px;
|
||||
display: grid;
|
||||
grid-gap: var(--layout-s);
|
||||
grid-template-columns: auto 1fr auto;
|
||||
border: 1px solid #494949;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
background: var(--background-alt);
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
.detail {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.start-from-scratch {
|
||||
background: var(--spectrum-global-color-gray-50);
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.import {
|
||||
background: var(--spectrum-global-color-gray-50);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -78,6 +78,7 @@
|
|||
}
|
||||
|
||||
const initiateAppCreation = () => {
|
||||
template = {}
|
||||
creationModal.show()
|
||||
creatingApp = true
|
||||
}
|
||||
|
|
@ -304,10 +305,16 @@
|
|||
Export apps
|
||||
</Button>
|
||||
{/if}
|
||||
<Button icon="Import" quiet secondary on:click={initiateAppImport}>
|
||||
<Button
|
||||
icon="Import"
|
||||
size="L"
|
||||
quiet
|
||||
secondary
|
||||
on:click={initiateAppImport}
|
||||
>
|
||||
Import app
|
||||
</Button>
|
||||
<Button icon="Add" cta on:click={initiateAppCreation}>
|
||||
<Button size="L" icon="Add" cta on:click={initiateAppCreation}>
|
||||
Create app
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue