CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-10-04 12:03:31 +13:00
Code Issues Projects Releases Wiki Activity

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

Browse source
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"> <MenuItem on:click={() => viewApp(app)} icon="GlobeOutline">
View published app View published app
</MenuItem> </MenuItem>
<MenuItem on:click={() => unpublishApp(app)} icon="GlobeRemove">
Unpublish
</MenuItem>
{/if} {/if}
{#if app.lockedBy && app.lockedBy?.email === $auth.user?.email} {#if app.lockedBy && app.lockedBy?.email === $auth.user?.email}
<MenuItem on:click={() => releaseLock(app)} icon="LockOpen"> <MenuItem on:click={() => releaseLock(app)} icon="LockOpen">
Release lock Release lock
</MenuItem> </MenuItem>
{/if} {/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} {#if !app.deployed}
<MenuItem on:click={() => deleteApp(app)} icon="Delete"> <MenuItem on:click={() => deleteApp(app)} icon="Delete">
Delete Delete
</MenuItem> </MenuItem>
{/if} {/if}
<MenuItem on:click={() => exportApp(app)} icon="Download">
Export
</MenuItem>
</ActionMenu> </ActionMenu>
</div> </div>
<div class="status"> <div class="status">

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

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

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

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