file download icon + styling
This commit is contained in:
parent
fed8575daa
commit
828be4b8e6
|
@ -32,11 +32,11 @@
|
|||
<TextButton text medium blue href="/_builder/{_id}">
|
||||
Open {name} →
|
||||
</TextButton>
|
||||
<TextButton text medium blue on:click={exportApp}>
|
||||
{#if appExportLoading}
|
||||
<Spinner size="10" />
|
||||
{:else}Export{/if}
|
||||
</TextButton>
|
||||
{#if appExportLoading}
|
||||
<Spinner size="10" />
|
||||
{:else}
|
||||
<i class="ri-folder-download-line" on:click={exportApp} />
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
@ -54,7 +54,17 @@
|
|||
.card-footer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: baseline;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: var(--font-size-l);
|
||||
cursor: pointer;
|
||||
transition: 0.2s all;
|
||||
}
|
||||
|
||||
i:hover {
|
||||
color: var(--blue);
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -2,22 +2,48 @@
|
|||
import { Label, Heading, Input } from "@budibase/bbui"
|
||||
import Dropzone from "components/common/Dropzone.svelte"
|
||||
|
||||
const BYTES_IN_MB = 1000000
|
||||
const FILE_SIZE_LIMIT = BYTES_IN_MB * 5
|
||||
|
||||
export let validationErrors
|
||||
export let template
|
||||
|
||||
let blurred = { appName: false }
|
||||
let files
|
||||
let file
|
||||
|
||||
$: if (files) {
|
||||
template.fileImportPath = files[0]
|
||||
function handleFile(evt) {
|
||||
const fileArray = Array.from(evt.target.files)
|
||||
if (fileArray.some(file => file.size >= FILE_SIZE_LIMIT)) {
|
||||
notifier.danger(
|
||||
`Files cannot exceed ${FILE_SIZE_LIMIT /
|
||||
BYTES_IN_MB}MB. Please try again with smaller files.`
|
||||
)
|
||||
return
|
||||
}
|
||||
file = fileArray[0]
|
||||
template.fileImportPath = file.path
|
||||
}
|
||||
</script>
|
||||
|
||||
<h2>Create your Web App</h2>
|
||||
{#if template.fromFile}
|
||||
<h2>Import Your Web App From A File</h2>
|
||||
{:else}
|
||||
<h2>Create your Web App</h2>
|
||||
{/if}
|
||||
<div class="container">
|
||||
{#if template.fromFile}
|
||||
<div class="template">
|
||||
<Dropzone bind:files />
|
||||
<Label extraSmall grey>Import File</Label>
|
||||
<div class="dropzone">
|
||||
<input
|
||||
id="file-upload"
|
||||
accept=".txt"
|
||||
type="file"
|
||||
on:change={handleFile} />
|
||||
<label for="file-upload" class:uploaded={file}>
|
||||
{#if file}{file.name}{:else}Import{/if}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
{:else if template}
|
||||
<div class="template">
|
||||
|
@ -44,4 +70,48 @@
|
|||
/* Fix layout due to LH 0 on heading */
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.dropzone {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
border-radius: 10px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.uploaded {
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
input[type="file"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
label {
|
||||
font-family: var(--font-sans);
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
border-radius: var(--border-radius-s);
|
||||
color: var(--ink);
|
||||
padding: var(--spacing-m) var(--spacing-l);
|
||||
transition: all 0.2s ease 0s;
|
||||
display: inline-flex;
|
||||
text-rendering: optimizeLegibility;
|
||||
min-width: auto;
|
||||
outline: none;
|
||||
font-feature-settings: "case" 1, "rlig" 1, "calt" 0;
|
||||
-webkit-box-align: center;
|
||||
user-select: none;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
background-color: var(--grey-2);
|
||||
font-size: var(--font-size-xs);
|
||||
line-height: normal;
|
||||
border: var(--border-transparent);
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
import AppList from "components/start/AppList.svelte"
|
||||
import { get } from "builderStore/api"
|
||||
import CreateAppModal from "components/start/CreateAppModal.svelte"
|
||||
import { Button, Heading, Modal } from "@budibase/bbui"
|
||||
import { Button, Heading, Modal, Spacer } from "@budibase/bbui"
|
||||
import TemplateList from "components/start/TemplateList.svelte"
|
||||
import analytics from "analytics"
|
||||
|
||||
|
@ -57,8 +57,11 @@
|
|||
<div class="container">
|
||||
<div class="header">
|
||||
<Heading medium black>Welcome to the Budibase Beta</Heading>
|
||||
<Button secondary on:click={initiateAppImport}>Import Web App</Button>
|
||||
<Button primary on:click={modal.show}>Create New Web App</Button>
|
||||
<div class="button-group">
|
||||
<Button secondary on:click={initiateAppImport}>Import Web App</Button>
|
||||
<Spacer medium />
|
||||
<Button primary on:click={modal.show}>Create New Web App</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="banner">
|
||||
|
@ -112,4 +115,9 @@
|
|||
color: white;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
</style>
|
||||
|
|
Loading…
Reference in New Issue