MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Improve app list empty state screen and fix order of app context menu options

This commit is contained in:
Andrew Kingston 2021-05-21 10:37:19 +01:00
parent f63f9a7c51
commit cc21ed354b
3 changed files with 58 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/builder/src/components/start/AppCard.svelte
View File

@ -39,23 +39,25 @@
<MenuItem on:click={() => viewApp(app)} icon="GlobeOutline">
View published app
</MenuItem>
<MenuItem on:click={() => unpublishApp(app)} icon="GlobeRemove">
Unpublish
</MenuItem>
{/if}
{#if app.lockedBy && app.lockedBy?.email === $auth.user?.email}
<MenuItem on:click={() => releaseLock(app)} icon="LockOpen">
Release lock
</MenuItem>
{/if}
<MenuItem on:click={() => exportApp(app)} icon="Download">
Export
</MenuItem>
{#if app.deployed}
<MenuItem on:click={() => unpublishApp(app)} icon="GlobeRemove">
Unpublish
</MenuItem>
{/if}
{#if !app.deployed}
<MenuItem on:click={() => deleteApp(app)} icon="Delete">
Delete
</MenuItem>
{/if}
<MenuItem on:click={() => exportApp(app)} icon="Download">
Export
</MenuItem>
</ActionMenu>
</div>
<div class="status">

21
packages/builder/src/components/start/AppRow.svelte
View File

@ -17,10 +17,9 @@
export let deleteApp
export let unpublishApp
export let releaseLock
export let last
</script>
<div class="title" class:last>
<div class="title">
<div class="preview" use:gradient={{ seed: app.name }} />
<div class="name" on:click={() => editApp(app)}>
<Heading size="XS">
@ -28,10 +27,10 @@
</Heading>
</div>
</div>
<div class:last>
<div>
Updated {Math.round(Math.random() * 10 + 1)} months ago
</div>
<div class:last>
<div>
<StatusLight
positive={!app.lockedYou && !app.lockedOther}
notice={app.lockedYou}
@ -46,12 +45,12 @@
{/if}
</StatusLight>
</div>
<div class:last>
<div>
<StatusLight active={app.deployed} neutral={!app.deployed}>
{#if app.deployed}Published{:else}Unpublished{/if}
</StatusLight>
</div>
<div class:last>
<div>
<Button
disabled={app.lockedOther}
on:click={() => editApp(app)}
@ -64,19 +63,21 @@
<MenuItem on:click={() => viewApp(app)} icon="GlobeOutline">
View published app
</MenuItem>
<MenuItem on:click={() => unpublishApp(app)} icon="GlobeRemove">
Unpublish
</MenuItem>
{/if}
{#if app.lockedBy && app.lockedBy?.email === $auth.user?.email}
<MenuItem on:click={() => releaseLock(app)} icon="LockOpen">
Release lock
</MenuItem>
{/if}
<MenuItem on:click={() => exportApp(app)} icon="Download">Export</MenuItem>
{#if app.deployed}
<MenuItem on:click={() => unpublishApp(app)} icon="GlobeRemove">
Unpublish
</MenuItem>
{/if}
{#if !app.deployed}
<MenuItem on:click={() => deleteApp(app)} icon="Delete">Delete</MenuItem>
{/if}
<MenuItem on:click={() => exportApp(app)} icon="Download">Export</MenuItem>
</ActionMenu>
</div>

79
packages/builder/src/pages/builder/portal/apps/index.svelte
View File

@ -179,47 +179,47 @@
</script>
<Page wide>
<Layout noPadding>
<div class="title">
<Heading>Apps</Heading>
<ButtonGroup>
<Button secondary on:click={initiateAppImport}>Import app</Button>
<Button cta on:click={initiateAppCreation}>Create new app</Button>
</ButtonGroup>
</div>
<div class="filter">
<div class="select">
<Select
bind:value={sortBy}
placeholder={null}
options={[
{ label: "Sort by name", value: "name" },
{ label: "Sort by recently updated", value: "updated" },
{ label: "Sort by status", value: "status" },
]}
/>
{#if loaded && enrichedApps.length}
<Layout noPadding>
<div class="title">
<Heading>Apps</Heading>
<ButtonGroup>
<Button secondary on:click={initiateAppImport}>Import app</Button>
<Button cta on:click={initiateAppCreation}>Create new app</Button>
</ButtonGroup>
</div>
<div class="filter">
<div class="select">
<Select
bind:value={sortBy}
placeholder={null}
options={[
{ label: "Sort by name", value: "name" },
{ label: "Sort by recently updated", value: "updated" },
{ label: "Sort by status", value: "status" },
]}
/>
</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>
<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>
{#if loaded && enrichedApps.length}
<div
class:appGrid={layout === "grid"}
class:appTable={layout === "table"}
>
{#each enrichedApps as app, idx (app.appId)}
{#each enrichedApps as app (app.appId)}
<svelte:component
this={layout === "grid" ? AppCard : AppRow}
{releaseLock}
@ -229,12 +229,11 @@
{editApp}
{exportApp}
{deleteApp}
last={idx === enrichedApps.length - 1}
/>
{/each}
</div>
{/if}
</Layout>
</Layout>
{/if}
{#if !enrichedApps.length && !creatingApp && loaded}
<div class="empty-wrapper">
<Modal inline>
@ -318,7 +317,7 @@
text-overflow: ellipsis;
padding: 0 var(--spacing-s);
}
.appTable :global(> div:not(.last)) {
.appTable :global(> div) {
border-bottom: var(--border-light);
}
.empty-wrapper {