forked from tsai/budibase
Andrew Kingston
5 years ago
committed by
GitHub
GitHub
31 changed files with 620 additions and 1922 deletions
@ -1,25 +0,0 @@ |
|||||
<script> |
|
||||
import { onMount } from "svelte" |
|
||||
import AppCard from "./AppCard.svelte" |
|
||||
import { apps } from "stores/portal" |
|
||||
|
|
||||
onMount(apps.load) |
|
||||
</script> |
|
||||
|
|
||||
{#if $apps.length} |
|
||||
<div class="appList"> |
|
||||
{#each $apps as app} |
|
||||
<AppCard {...app} /> |
|
||||
{/each} |
|
||||
</div> |
|
||||
{:else} |
|
||||
<div>No apps found.</div> |
|
||||
{/if} |
|
||||
|
|
||||
<style> |
|
||||
.appList { |
|
||||
display: grid; |
|
||||
grid-gap: 50px; |
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); |
|
||||
} |
|
||||
</style> |
|
||||
@ -0,0 +1,80 @@ |
|||||
|
<script> |
||||
|
import { gradient } from "actions" |
||||
|
import { |
||||
|
Heading, |
||||
|
Button, |
||||
|
Icon, |
||||
|
ActionMenu, |
||||
|
MenuItem, |
||||
|
Link, |
||||
|
} from "@budibase/bbui" |
||||
|
import { url } from "@roxi/routify" |
||||
|
|
||||
|
export let app |
||||
|
export let openApp |
||||
|
export let exportApp |
||||
|
export let deleteApp |
||||
|
export let last |
||||
|
</script> |
||||
|
|
||||
|
<div class="title" class:last> |
||||
|
<div class="preview" use:gradient={{ seed: app.name }} /> |
||||
|
<Link href={$url(`../../app/${app._id}`)}> |
||||
|
<Heading size="XS"> |
||||
|
{app.name} |
||||
|
</Heading> |
||||
|
</Link> |
||||
|
</div> |
||||
|
<div class:last> |
||||
|
Edited {Math.round(Math.random() * 10 + 1)} months ago |
||||
|
</div> |
||||
|
<div class:last> |
||||
|
{#if Math.random() < 0.33} |
||||
|
<div class="status status--open" /> |
||||
|
Open |
||||
|
{:else if Math.random() < 0.33} |
||||
|
<div class="status status--locked-other" /> |
||||
|
Locked by Will Wheaton |
||||
|
{:else} |
||||
|
<div class="status status--locked-you" /> |
||||
|
Locked by you |
||||
|
{/if} |
||||
|
</div> |
||||
|
<div class:last> |
||||
|
<Button on:click={() => openApp(app)} size="S" secondary>Open</Button> |
||||
|
<ActionMenu align="right"> |
||||
|
<Icon hoverable slot="control" name="More" /> |
||||
|
<MenuItem on:click={() => exportApp(app)} icon="Download">Export</MenuItem> |
||||
|
<MenuItem on:click={() => deleteApp(app)} icon="Delete">Delete</MenuItem> |
||||
|
</ActionMenu> |
||||
|
</div> |
||||
|
|
||||
|
<style> |
||||
|
.preview { |
||||
|
height: 40px; |
||||
|
width: 40px; |
||||
|
border-radius: var(--border-radius-s); |
||||
|
} |
||||
|
.title :global(a) { |
||||
|
text-decoration: none; |
||||
|
} |
||||
|
.title :global(h1:hover) { |
||||
|
color: var(--spectrum-global-color-blue-600); |
||||
|
cursor: pointer; |
||||
|
transition: color 130ms ease; |
||||
|
} |
||||
|
.status { |
||||
|
height: 10px; |
||||
|
width: 10px; |
||||
|
border-radius: 50%; |
||||
|
} |
||||
|
.status--locked-you { |
||||
|
background-color: var(--spectrum-global-color-orange-600); |
||||
|
} |
||||
|
.status--locked-other { |
||||
|
background-color: var(--spectrum-global-color-red-600); |
||||
|
} |
||||
|
.status--open { |
||||
|
background-color: var(--spectrum-global-color-green-600); |
||||
|
} |
||||
|
</style> |
||||
@ -1,83 +0,0 @@ |
|||||
<script> |
|
||||
export let step, done, active |
|
||||
</script> |
|
||||
|
|
||||
<div class="container" class:active class:done> |
|
||||
<div class="circle" class:active class:done> |
|
||||
{#if done} |
|
||||
<svg |
|
||||
width="12" |
|
||||
height="10" |
|
||||
viewBox="0 0 12 10" |
|
||||
fill="none" |
|
||||
xmlns="http://www.w3.org/2000/svg" |
|
||||
> |
|
||||
<path |
|
||||
fill-rule="evenodd" |
|
||||
clip-rule="evenodd" |
|
||||
d="M10.1212 0.319527C10.327 0.115582 10.6047 0.000803464 10.8944 |
|
||||
4.20219e-06C11.1841 -0.00079506 11.4624 0.11245 11.6693 |
|
||||
0.315256C11.8762 0.518062 11.9949 0.794134 11.9998 1.08379C12.0048 |
|
||||
1.37344 11.8955 1.65339 11.6957 1.86313L5.82705 9.19893C5.72619 |
|
||||
9.30757 5.60445 9.39475 5.46913 9.45527C5.3338 9.51578 5.18766 9.54839 |
|
||||
5.03944 9.55113C4.89123 9.55388 4.74398 9.52671 4.60651 |
|
||||
9.47124C4.46903 9.41578 4.34416 9.33316 4.23934 9.22833L0.350925 |
|
||||
5.33845C0.242598 5.23751 0.155712 5.11578 0.0954499 4.98054C0.0351876 |
|
||||
4.84529 0.00278364 4.69929 0.00017159 4.55124C-0.00244046 4.4032 |
|
||||
0.024793 4.25615 0.0802466 4.11886C0.1357 3.98157 0.218238 3.85685 |
|
||||
0.322937 3.75215C0.427636 3.64746 0.55235 3.56492 0.68964 |
|
||||
3.50946C0.82693 3.45401 0.973983 3.42678 1.12203 3.42939C1.27007 3.432 |
|
||||
1.41607 3.46441 1.55132 3.52467C1.68657 3.58493 1.80829 3.67182 |
|
||||
1.90923 3.78014L4.98762 6.85706L10.0933 0.35187C10.1024 0.340482 |
|
||||
10.1122 0.329679 10.1227 0.319527H10.1212Z" |
|
||||
fill="var(--background)" |
|
||||
/> |
|
||||
</svg> |
|
||||
{:else}{step}{/if} |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<style> |
|
||||
.container::before { |
|
||||
content: ""; |
|
||||
position: absolute; |
|
||||
top: -30px; |
|
||||
width: 1px; |
|
||||
height: 30px; |
|
||||
background: var(--grey-5); |
|
||||
} |
|
||||
.container:first-child::before { |
|
||||
display: none; |
|
||||
} |
|
||||
.container { |
|
||||
position: relative; |
|
||||
height: 45px; |
|
||||
display: grid; |
|
||||
place-items: center; |
|
||||
} |
|
||||
.container.active { |
|
||||
box-shadow: inset 3px 0 0 0 var(--blue); |
|
||||
} |
|
||||
.circle.active { |
|
||||
background: var(--blue); |
|
||||
color: white; |
|
||||
border: none; |
|
||||
} |
|
||||
.circle.done { |
|
||||
background: var(--grey-5); |
|
||||
color: white; |
|
||||
border: none; |
|
||||
} |
|
||||
.circle { |
|
||||
color: var(--grey-5); |
|
||||
font-size: 14px; |
|
||||
font-weight: 500; |
|
||||
display: grid; |
|
||||
place-items: center; |
|
||||
width: 30px; |
|
||||
height: 30px; |
|
||||
border-radius: 50%; |
|
||||
border: 1px solid var(--grey-5); |
|
||||
box-sizing: border-box; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,121 +0,0 @@ |
|||||
<script> |
|
||||
import { Label, Heading, Input, notifications } from "@budibase/bbui" |
|
||||
|
|
||||
const BYTES_IN_MB = 1000000 |
|
||||
const FILE_SIZE_LIMIT = BYTES_IN_MB * 5 |
|
||||
|
|
||||
export let template |
|
||||
export let values |
|
||||
export let errors |
|
||||
export let touched |
|
||||
|
|
||||
let blurred = { appName: false } |
|
||||
let file |
|
||||
|
|
||||
function handleFile(evt) { |
|
||||
const fileArray = Array.from(evt.target.files) |
|
||||
if (fileArray.some(file => file.size >= FILE_SIZE_LIMIT)) { |
|
||||
notifications.error( |
|
||||
`Files cannot exceed ${ |
|
||||
FILE_SIZE_LIMIT / BYTES_IN_MB |
|
||||
}MB. Please try again with smaller files.` |
|
||||
) |
|
||||
return |
|
||||
} |
|
||||
file = evt.target.files[0] |
|
||||
template.file = file |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<div class="container"> |
|
||||
{#if template?.fromFile} |
|
||||
<Heading size="L">Import your Web App</Heading> |
|
||||
{:else} |
|
||||
<Heading size="L">Create your Web App</Heading> |
|
||||
{/if} |
|
||||
{#if template?.fromFile} |
|
||||
<div class="template"> |
|
||||
<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"> |
|
||||
<Label extraSmall grey>Selected Template</Label> |
|
||||
<Heading size="S">{template.name}</Heading> |
|
||||
</div> |
|
||||
{/if} |
|
||||
<Input |
|
||||
on:change={() => ($touched.applicationName = true)} |
|
||||
bind:value={$values.applicationName} |
|
||||
label="Web App Name" |
|
||||
placeholder="Enter name of your web application" |
|
||||
error={$touched.applicationName && $errors.applicationName} |
|
||||
/> |
|
||||
</div> |
|
||||
|
|
||||
<style> |
|
||||
.container { |
|
||||
display: grid; |
|
||||
grid-gap: var(--spacing-xl); |
|
||||
margin-top: var(--spacing-xl); |
|
||||
} |
|
||||
|
|
||||
.template :global(label) { |
|
||||
/* 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> |
|
||||
@ -1,29 +0,0 @@ |
|||||
<script> |
|
||||
import { Select, Heading } from "@budibase/bbui" |
|
||||
|
|
||||
export let values |
|
||||
export let errors |
|
||||
export let touched |
|
||||
</script> |
|
||||
|
|
||||
<div class="container"> |
|
||||
<Heading size="L">What's your role for this app?</Heading> |
|
||||
<Select |
|
||||
bind:value={$values.roleId} |
|
||||
label="Role" |
|
||||
options={[ |
|
||||
{ label: "Admin", value: "ADMIN" }, |
|
||||
{ label: "Power User", value: "POWER_USER" }, |
|
||||
]} |
|
||||
getOptionLabel={option => option.label} |
|
||||
getOptionValue={option => option.value} |
|
||||
error={$errors.roleId} |
|
||||
/> |
|
||||
</div> |
|
||||
|
|
||||
<style> |
|
||||
.container { |
|
||||
display: grid; |
|
||||
grid-gap: var(--spacing-xl); |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,2 +0,0 @@ |
|||||
export { default as Info } from "./Info.svelte" |
|
||||
export { default as User } from "./User.svelte" |
|
||||
@ -1,7 +0,0 @@ |
|||||
<script> |
|
||||
import { Page } from "@budibase/bbui" |
|
||||
</script> |
|
||||
|
|
||||
<Page wide> |
|
||||
<slot /> |
|
||||
</Page> |
|
||||
File diff suppressed because it is too large
Loading…
Reference in new issue