mirror of https://github.com/Budibase/budibase.git
Andrew Kingston
5 years ago
11 changed files with 174 additions and 382 deletions
@ -1,22 +0,0 @@ |
|||
<script> |
|||
import AppCard from "./AppCard.svelte" |
|||
import { apps } from "stores/portal" |
|||
|
|||
export let exportApp |
|||
</script> |
|||
|
|||
{#if $apps.length} |
|||
<div class="appList"> |
|||
{#each $apps as app} |
|||
<AppCard {exportApp} {app} /> |
|||
{/each} |
|||
</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 /> |
|||
<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,106 +0,0 @@ |
|||
<script> |
|||
import { apps } from "stores/portal" |
|||
import { gradient } from "actions" |
|||
import { |
|||
Heading, |
|||
Button, |
|||
Icon, |
|||
ActionMenu, |
|||
MenuItem, |
|||
Link, |
|||
} from "@budibase/bbui" |
|||
import { goto, url } from "@roxi/routify" |
|||
|
|||
export let exportApp |
|||
|
|||
const openApp = app => { |
|||
$goto(`../../app/${app._id}`) |
|||
} |
|||
</script> |
|||
|
|||
{#if $apps.length} |
|||
<div class="appTable"> |
|||
{#each $apps as app} |
|||
<div class="title"> |
|||
<div class="preview" use:gradient /> |
|||
<Link href={$url(`../../app/${app._id}`)}> |
|||
<Heading size="XS"> |
|||
{app.name} |
|||
</Heading> |
|||
</Link> |
|||
</div> |
|||
<div> |
|||
Edited {Math.round(Math.random() * 10 + 1)} months ago |
|||
</div> |
|||
<div> |
|||
{#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> |
|||
<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> |
|||
</ActionMenu> |
|||
</div> |
|||
{/each} |
|||
</div> |
|||
{/if} |
|||
|
|||
<style> |
|||
.appTable { |
|||
display: grid; |
|||
grid-template-rows: auto; |
|||
grid-template-columns: 1fr 1fr 1fr auto; |
|||
align-items: center; |
|||
} |
|||
.appTable > div { |
|||
border-bottom: var(--border-light); |
|||
height: 70px; |
|||
display: grid; |
|||
align-items: center; |
|||
gap: var(--spacing-xl); |
|||
grid-template-columns: auto 1fr; |
|||
white-space: nowrap; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
padding: 0 var(--spacing-s); |
|||
} |
|||
.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" |
|||
Loading…
Reference in new issue