CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-03 21:40:55 +12:00
Code Issues Projects Releases Wiki Activity

initial home screen redesign layout

Browse source
This commit is contained in:
Peter Clement 2021-12-06 11:55:23 +00:00
parent 68978c5ed1
commit 53557e1bb1
2 changed files with 104 additions and 92 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
packages/builder/src/components/start/AppRow.svelte
View file

@ -1,14 +1,6 @@
<script>
import { gradient } from "actions"
import {
Heading,
Button,
Icon,
ActionMenu,
MenuItem,
StatusLight,
} from "@budibase/bbui"
import { processStringSync } from "@budibase/string-templates"
import { Heading, Button, Icon, ActionMenu, MenuItem } from "@budibase/bbui"
export let app
export let exportApp
@ -28,40 +20,15 @@
</Heading>
</div>
</div>
<div class="desktop">
{#if app.updatedAt}
{processStringSync("Updated {{ duration time 'millisecond' }} ago", {
time: new Date().getTime() - new Date(app.updatedAt).getTime(),
})}
{:else}
Never updated
{/if}
</div>
<div class="desktop">
<StatusLight
positive={!app.lockedYou && !app.lockedOther}
notice={app.lockedYou}
negative={app.lockedOther}
>
{#if app.lockedYou}
Locked by you
{:else if app.lockedOther}
Locked by {app.lockedBy.email}
{:else}
Open
{/if}
</StatusLight>
</div>
<div class="desktop">
<StatusLight active={app.deployed} neutral={!app.deployed}>
{#if app.deployed}Published{:else}Unpublished{/if}
</StatusLight>
</div>
<div class="desktop" />
<div class="desktop" />
<div class="desktop" />
<div>
<Button
disabled={app.lockedOther}
on:click={() => editApp(app)}
size="S"
quiet
secondary>Open</Button
>
<ActionMenu align="right">

153
packages/builder/src/pages/builder/portal/apps/index.svelte
View file

@ -2,15 +2,15 @@
import {
Heading,
Layout,
Detail,
Button,
ActionButton,
ActionGroup,
ButtonGroup,
Input,
Select,
Modal,
Page,
notifications,
Body,
Search,
} from "@budibase/bbui"
import Spinner from "components/common/Spinner.svelte"
@ -23,12 +23,10 @@
import download from "downloadjs"
import { goto } from "@roxi/routify"
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
import AppCard from "components/start/AppCard.svelte"
import AppRow from "components/start/AppRow.svelte"
import { AppStatus } from "constants"
import analytics, { Events } from "analytics"
let layout = "grid"
let sortBy = "name"
let template
let selectedApp
@ -42,7 +40,7 @@
let cloud = $admin.cloud
let appName = ""
let creatingFromTemplate = false
let templates = []
$: enrichedApps = enrichApps($apps, $auth.user, sortBy)
$: filteredApps = enrichedApps.filter(app =>
app?.name?.toLowerCase().includes(searchTerm.toLowerCase())
@ -260,8 +258,15 @@
}
}
async function fetchTemplates() {
const response = await api.get("/api/templates?type=app")
templates = await response.json()
console.log(templates)
}
onMount(async () => {
await apps.load()
await fetchTemplates()
// if the portal is loaded from an external URL with a template param
const initInfo = await auth.getInitInfo()
if (initInfo?.init_template) {
@ -274,17 +279,49 @@
</script>
<Page wide>
{#if loaded && enrichedApps.length}
<Layout noPadding>
<Layout gap="S" noPadding>
<div class="title">
<Heading size="S">Welcome to Budibase</Heading>
<ButtonGroup>
{#if cloud}
<Button secondary on:click={initiateAppsExport}>Export apps</Button>
{/if}
<Button secondary on:click={initiateAppImport}>Import app</Button>
<Button cta on:click={initiateAppCreation}>Create app</Button>
</ButtonGroup>
</div>
<Body size="XS">Manage your apps and get a head start with templates</Body>
<Detail>Quick Start Templates</Detail>
<div class="grid">
{#each templates as val}
<div class="template-card">
<div class="card-body">
<div style="color: {val.background}" class="iconAlign">
<svg
width="26px"
height="26px"
class="spectrum-Icon"
style="color:{val.background};"
focusable="false"
>
<use xlink:href="#spectrum-icon-18-{val.icon}" />
</svg>
</div>
<div class="iconAlign">
<Body weight="900" size="XS">{val.name}</Body>
<div style="font-size: 10px;">
<Body size="XS">{val.category.toUpperCase()}</Body>
</div>
</div>
</div>
</div>
{/each}
</div>
{#if loaded && enrichedApps.length}
<div class="title">
<Heading>Apps</Heading>
<ButtonGroup>
{#if cloud}
<Button secondary on:click={initiateAppsExport}>Export apps</Button>
{/if}
<Button secondary on:click={initiateAppImport}>Import app</Button>
<Button cta on:click={initiateAppCreation}>Create app</Button>
</ButtonGroup>
<Detail>My Apps</Detail>
</div>
<div class="filter">
<div class="select">
@ -302,31 +339,14 @@
<Search placeholder="Search" bind:value={searchTerm} />
</div>
</div>
<ActionGroup>
<ActionButton
on:click={() => (layout = "grid")}
selected={layout === "grid"}
quiet
icon="ClassicGridView"
/>
<ActionButton
on:click={() => (layout = "table")}
selected={layout === "table"}
quiet
icon="ViewRow"
/>
</ActionGroup>
</div>
<div class="mobile-search">
<Search placeholder="Search" bind:value={searchTerm} />
</div>
<div
class:appGrid={layout === "grid"}
class:appTable={layout === "table"}
>
<div class="appTable">
{#each filteredApps as app (app.appId)}
<svelte:component
this={layout === "grid" ? AppCard : AppRow}
this={AppRow}
{releaseLock}
{app}
{unpublishApp}
@ -338,21 +358,21 @@
/>
{/each}
</div>
</Layout>
{/if}
{#if !enrichedApps.length && !creatingApp && loaded}
<div class="empty-wrapper">
<Modal inline>
<CreateAppModal {template} inline={true} />
</Modal>
</div>
{/if}
{#if creatingFromTemplate}
<div class="empty-wrapper">
<p>Creating your Budibase app from your selected template...</p>
<Spinner size="10" />
</div>
{/if}
{/if}
{#if !enrichedApps.length && !creatingApp && loaded}
<div class="empty-wrapper">
<Modal inline>
<CreateAppModal {template} inline={true} />
</Modal>
</div>
{/if}
{#if creatingFromTemplate}
<div class="empty-wrapper">
<p>Creating your Budibase app from your selected template...</p>
<Spinner size="10" />
</div>
{/if}
</Layout>
</Page>
<Modal
bind:this={creationModal}
@ -405,6 +425,36 @@
flex-direction: column;
align-items: flex-start;
}
.grid {
grid-template-columns: repeat(2, 1fr);
}
}
.iconAlign {
padding: 0 0 0 var(--spacing-m);
display: inline-block;
}
.template-card {
height: 60px;
width: 255px;
border-radius: var(--border-radius-s);
margin-bottom: var(--spacing-m);
border: 1px solid var(--spectrum-global-color-gray-300);
}
.card-body {
display: flex;
align-items: center;
padding: 12px;
}
.grid {
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
}
@media (min-width: 200px) {
}
.select {
@ -419,11 +469,6 @@
display: none;
}
.appGrid {
display: grid;
grid-gap: 50px;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.appTable {
display: grid;
grid-template-rows: auto;