Appwrite/console
1
0
Fork 0
mirror of https://github.com/appwrite/console.git synced 2026-06-06 19:27:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #56 from appwrite/empty-card

Browse Source 
draft: empty card refactor
This commit is contained in:
Torsten Dittmann
2022-09-29 22:49:41 +02:00
committed by GitHub
parent 104d799d67 adb2af00ee
commit 814ff68f4f
26 changed files with 109 additions and 268 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/empty.svelte
+26 -9
View File
@@ -1,11 +1,28 @@
<script>
export let dashed = false;
export let centered = false;
<script lang="ts">
import { app } from '$lib/stores/app';
import EmptyLight from '$lib/images/empty-light.svg';
import EmptyDark from '$lib/images/empty-dark.svg';
export let isButton = false;
export let single = false;
</script>
<article
class="card common-section u-flex u-flex-vertical"
class:is-border-dashed={dashed}
class:u-cross-center={centered}>
<slot />
</article>
{#if isButton}
<button
on:click
class="card u-grid u-cross-center u-width-full-line dashed"
class:common-section={single}>
<div class="u-flex u-flex-vertical u-cross-center">
{#if $app.themeInUse === 'dark'}
<img src={EmptyDark} alt="create" aria-hidden="true" />
{:else}
<img src={EmptyLight} alt="create" aria-hidden="true" />
{/if}
<slot />
</div>
</button>
{:else}
<article class="card u-grid u-cross-center u-width-full-line" class:common-section={single}>
<slot />
</article>
{/if}
src/lib/components/emptyGridItem.svelte
-5
View File
@@ -1,5 +0,0 @@
<button on:click class="card is-border-dashed u-grid u-cross-center">
<div class="u-flex u-flex-vertical u-cross-center">
<slot />
</div>
</button>
src/lib/components/index.ts
-1
View File
@@ -24,6 +24,5 @@ export { default as Alert } from './alert.svelte';
export { default as Box } from './box.svelte';
export { default as Search } from './search.svelte';
export { default as GridItem1 } from './gridItem1.svelte';
export { default as EmptyGridItem } from './emptyGridItem.svelte';
export { default as Steps } from './steps.svelte';
export { default as Step } from './step.svelte';
src/lib/images/empty-dark.svg
+1
View File
File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 6.3 KiB

src/lib/images/empty-light.svg
+1
View File
File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 6.3 KiB

src/routes/console/account/activity/+page.svelte
+1 -1
View File
@@ -87,7 +87,7 @@
</TableBody>
</Table>
{:else}
<Empty centered>
<Empty>
<div class="u-flex u-flex-vertical u-cross-center">
<div class="common-section">
<p>No logs available</p>
src/routes/console/account/organizations/+page.svelte
+6 -24
View File
@@ -1,6 +1,6 @@
<script lang="ts">
import { base } from '$app/paths';
import { GridItem1, EmptyGridItem, Empty, Pagination, AvatarGroup } from '$lib/components';
import { GridItem1, Empty, Pagination, AvatarGroup } from '$lib/components';
import { Button } from '$lib/elements/forms';
import { Container } from '$lib/layout';
import CreateOrganization from '../../_createOrganization.svelte';
@@ -68,16 +68,9 @@
{/if}
{/each}
{#if $organizationList?.total < limit + offset && ($organizationList?.total % 2 !== 0 || $organizationList?.total % 4 === 0)}
<EmptyGridItem on:click={() => (addOrganization = true)}>
<div class="common-section">
<Button secondary round>
<i class="icon-plus" />
</Button>
</div>
<div class="common-section">
<p>Create a new organization</p>
</div>
</EmptyGridItem>
<Empty isButton on:click={() => (addOrganization = true)}>
<p>Create a new organization</p>
</Empty>
{/if}
</ul>
@@ -86,19 +79,8 @@
<Pagination {limit} bind:offset sum={$organizationList?.total} />
</div>
{:else}
<Empty dashed centered>
<div class="grid-item-1">
<div class="u-flex u-flex-vertical u-cross-center ">
<div class="common-section">
<Button secondary round on:click={() => (addOrganization = true)}>
<i class="icon-plus" />
</Button>
</div>
<div class="common-section">
<p>Create a new organization</p>
</div>
</div>
</div>
<Empty isButton single on:click={() => (addOrganization = true)}>
<p>Create a new organization</p>
</Empty>
<div class="u-flex u-margin-block-start-32 u-main-space-between">
<p class="text">Total results: {$organizationList?.total}</p>
src/routes/console/account/sessions/+page.svelte
+1 -1
View File
@@ -103,7 +103,7 @@
</TableBody>
</Table>
{:else}
<Empty centered>
<Empty>
<div class="u-flex u-flex-vertical u-cross-center">
<div class="common-section">
<p>No sessions available</p>
src/routes/console/organization-[organization]/+page.svelte
+6 -24
View File
@@ -2,7 +2,7 @@
import { afterNavigate, goto } from '$app/navigation';
import { base } from '$app/paths';
import { Pill } from '$lib/elements';
import { GridItem1, EmptyGridItem, Empty, Pagination } from '$lib/components';
import { GridItem1, Empty, Pagination } from '$lib/components';
import { Button } from '$lib/elements/forms';
import { Container } from '$lib/layout';
import { Query, type Models } from '@aw-labs/appwrite-console';
@@ -113,16 +113,9 @@
{/if}
{/each}
{#if projects.length < limit + offset && (projects.length % 2 !== 0 || projects.length % 4 === 0)}
<EmptyGridItem on:click={() => (showCreate = true)}>
<div class="common-section">
<Button secondary round>
<i class="icon-plus" />
</Button>
</div>
<div class="common-section">
<p>Create a new project</p>
</div>
</EmptyGridItem>
<Empty isButton on:click={() => (showCreate = true)}>
<p>Create a new project</p>
</Empty>
{/if}
</ul>
@@ -131,19 +124,8 @@
<Pagination {limit} bind:offset sum={projects.length} />
</div>
{:else}
<Empty dashed centered>
<div class="grid-item-1">
<div class="u-flex u-flex-vertical u-cross-center ">
<div class="common-section">
<Button secondary round on:click={() => (showCreate = true)}>
<i class="icon-plus" />
</Button>
</div>
<div class="common-section">
<p>Create a new project</p>
</div>
</div>
</div>
<Empty isButton single on:click={() => (showCreate = true)}>
<p>Create a new project</p>
</Empty>
<div class="u-flex u-margin-block-start-32 u-main-space-between">
<p class="text">Total results: {projects?.length}</p>
src/routes/console/project-[project]/authentication/+page.svelte
+11 -21
View File
@@ -118,27 +118,17 @@
<Pagination limit={$pageLimit} bind:offset sum={$usersList.total} />
</div>
{:else}
<Empty dashed centered>
<div class="u-flex u-flex-vertical u-cross-center">
<div
class="common-section"
use:event={{
name: 'console_users',
action: 'click_create',
parameters: {
type: 'user'
}
}}>
<Button secondary round on:click={() => (showCreate = true)}>
<span class="icon-plus" aria-hidden="true" />
</Button>
</div>
<div class="common-section">
<p>Add Your First User To Get Started</p>
</div>
<div class="common-section">
<Button secondary href="#">Documentation</Button>
</div>
<Empty isButton single on:click={() => (showCreate = true)}>
<div
class="common-section"
use:event={{
name: 'console_users',
action: 'click_create',
parameters: {
type: 'user'
}
}}>
<p>Add Your First User To Get Started</p>
</div>
</Empty>
{/if}
src/routes/console/project-[project]/authentication/teams/+page.svelte
+1 -9
View File
@@ -97,7 +97,7 @@
<Pagination {limit} bind:offset sum={$teamsList.total} />
</div>
{:else}
<Empty dashed centered>
<Empty isButton single on:click={() => (showCreate = true)}>
<div
class="common-section"
use:event={{
@@ -107,16 +107,8 @@
type: 'team'
}
}}>
<Button secondary round on:click={() => (showCreate = true)}>
<span class="icon-plus" aria-hidden="true" />
</Button>
</div>
<div class="common-section">
<p>Create your first team to get started</p>
</div>
<div class="common-section">
<Button secondary href="#">Documentation</Button>
</div>
</Empty>
{/if}
</Container>
src/routes/console/project-[project]/authentication/teams/[team]/activity/+page.svelte
+1 -1
View File
@@ -88,7 +88,7 @@
</TableBody>
</Table>
{:else}
<Empty centered>
<Empty>
<div class="u-flex u-flex-vertical u-cross-center">
<div class="common-section">
<p>No logs available</p>
src/routes/console/project-[project]/authentication/teams/[team]/members/+page.svelte
+2 -14
View File
@@ -124,20 +124,8 @@
<Pagination limit={$pageLimit} bind:offset sum={$memberships.total} />
</div>
{:else}
<Empty dashed centered>
<div class="u-flex u-flex-vertical u-cross-center">
<div class="common-section">
<Button secondary round on:click={() => (showCreate = true)}>
<span class="icon-plus" aria-hidden="true" />
</Button>
</div>
<div class="common-section">
<p>Add your first member to get started</p>
</div>
<div class="common-section">
<Button external secondary href="#">Documentation</Button>
</div>
</div>
<Empty isButton single on:click={() => (showCreate = true)}>
<p>Add your first member to get started</p>
</Empty>
{/if}
</Container>
src/routes/console/project-[project]/authentication/user/[user]/activity/+page.svelte
+1 -1
View File
@@ -88,7 +88,7 @@
</TableBody>
</Table>
{:else}
<Empty centered>
<Empty>
<div class="u-flex u-flex-vertical u-cross-center">
<div class="common-section">
<p>No logs available</p>
src/routes/console/project-[project]/authentication/user/[user]/memberships/+page.svelte
+1 -1
View File
@@ -78,7 +78,7 @@
</TableBody>
</Table>
{:else}
<Empty centered>
<Empty>
<div class="u-flex u-flex-vertical u-cross-center">
<div class="common-section">
<p>No memberships available</p>
src/routes/console/project-[project]/authentication/user/[user]/sessions/+page.svelte
+1 -1
View File
@@ -91,7 +91,7 @@
</TableBody>
</Table>
{:else}
<Empty centered>
<Empty>
<div class="u-flex u-flex-vertical u-cross-center">
<div class="common-section">
<p>No session available</p>
src/routes/console/project-[project]/databases/+page.svelte
+6 -25
View File
@@ -2,7 +2,7 @@
import { page } from '$app/stores';
import { goto } from '$app/navigation';
import { Button } from '$lib/elements/forms';
import { Empty, EmptyGridItem, Pagination, Copy, GridItem1 } from '$lib/components';
import { Empty, Pagination, Copy, GridItem1 } from '$lib/components';
import { Pill } from '$lib/elements';
import { Query, type Models } from '@aw-labs/appwrite-console';
import Create from './_create.svelte';
@@ -49,16 +49,9 @@
</GridItem1>
{/each}
{#if ($databaseList.total % 2 !== 0 || $databaseList.total % 4 === 0) && $databaseList.total - offset <= limit}
<EmptyGridItem on:click={() => (showCreate = true)}>
<div class="common-section">
<Button secondary round>
<i class="icon-plus" />
</Button>
</div>
<div class="common-section">
<p>Create a new database</p>
</div>
</EmptyGridItem>
<Empty isButton on:click={() => (showCreate = true)}>
<p>Create a new database</p>
</Empty>
{/if}
</div>
@@ -67,20 +60,8 @@
<Pagination {limit} bind:offset sum={$databaseList.total} />
</div>
{:else}
<Empty dashed centered>
<div class="u-flex u-flex-vertical u-cross-center">
<div class="common-section">
<Button secondary round on:click={() => (showCreate = true)}>
<i class="icon-plus" />
</Button>
</div>
<div class="common-section">
<p>Create your first Database to get started</p>
</div>
<div class="common-section">
<Button secondary href="#">Documentation</Button>
</div>
</div>
<Empty isButton single on:click={() => (showCreate = true)}>
<p>Create your first Database to get started</p>
</Empty>
{/if}
</Container>
src/routes/console/project-[project]/databases/database/[database]/+page.svelte
+6 -25
View File
@@ -2,7 +2,7 @@
import { page } from '$app/stores';
import { goto } from '$app/navigation';
import { Button } from '$lib/elements/forms';
import { Empty, EmptyGridItem, Pagination, Copy, GridItem1 } from '$lib/components';
import { Empty, Pagination, Copy, GridItem1 } from '$lib/components';
import { Pill } from '$lib/elements';
import { Query, type Models } from '@aw-labs/appwrite-console';
import Create from './_create.svelte';
@@ -63,16 +63,9 @@
</GridItem1>
{/each}
{#if ($collections.total % 2 !== 0 || $collections.total % 4 === 0) && $collections.total - offset <= limit}
<EmptyGridItem on:click={() => (showCreate = true)}>
<div class="common-section">
<Button secondary round>
<i class="icon-plus" />
</Button>
</div>
<div class="common-section">
<p>Create a new collection</p>
</div>
</EmptyGridItem>
<Empty isButton on:click={() => (showCreate = true)}>
<p>Create a new collection</p>
</Empty>
{/if}
</div>
@@ -97,20 +90,8 @@
<Pagination {limit} bind:offset sum={$collections?.total} />
</div>
{:else}
<Empty dashed centered>
<div class="u-flex u-flex-vertical u-cross-center">
<div class="common-section">
<Button secondary round on:click={() => (showCreate = true)}>
<i class="icon-plus" />
</Button>
</div>
<div class="common-section">
<p>Create your first collection to get started</p>
</div>
<div class="common-section">
<Button secondary href="#">Documentation</Button>
</div>
</div>
<Empty isButton single on:click={() => (showCreate = true)}>
<p>Create your first collection to get started</p>
</Empty>
{/if}
</Container>
src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/+page.svelte
+2 -14
View File
@@ -82,20 +82,8 @@
<Pagination {limit} bind:offset sum={$documentList.total} />
</div>
{:else}
<Empty dashed centered>
<div class="u-flex u-flex-vertical u-cross-center">
<div class="common-section">
<Button secondary round on:click={openWizard}>
<span class="icon-plus" aria-hidden="true" />
</Button>
</div>
<div class="common-section">
<p>Crate your first document to get started</p>
</div>
<div class="common-section">
<Button secondary href="#">Documentation</Button>
</div>
</div>
<Empty isButton single on:click={openWizard}>
<p>Crate your first document to get started</p>
</Empty>
{/if}
</Container>
src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/+page.svelte
+2 -14
View File
@@ -115,20 +115,8 @@
<Pagination {limit} bind:offset sum={$collection?.attributes?.length} />
</div>
{:else}
<Empty dashed centered>
<div class="u-flex u-flex-vertical u-cross-center">
<div class="common-section">
<Button secondary round on:click={() => (showCreate = true)}>
<span class="icon-plus" aria-hidden="true" />
</Button>
</div>
<div class="common-section">
<p>Crate your first attribute to get started</p>
</div>
<div class="common-section">
<Button secondary href="#">Documentation</Button>
</div>
</div>
<Empty isButton single on:click={() => (showCreate = true)}>
<p>Crate your first attribute to get started</p>
</Empty>
{/if}
</Container>
src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/indexes/+page.svelte
+4 -28
View File
@@ -157,36 +157,12 @@
<Pagination {limit} bind:offset sum={$indexList?.total} />
</div>
{:else if $collection.indexes?.length}
<Empty dashed centered>
<div class="u-flex u-flex-vertical u-cross-center">
<div class="common-section">
<Button secondary round on:click={() => (showCreateIndex = true)}>
<span class="icon-plus" aria-hidden="true" />
</Button>
</div>
<div class="common-section">
<p>Create your first attribute to get started</p>
</div>
<div class="common-section">
<Button secondary href="#?">Documentation</Button>
</div>
</div>
<Empty isButton single on:click={() => (showCreateIndex = true)}>
<p>Create your first attribute to get started</p>
</Empty>
{:else}
<Empty dashed centered>
<div class="u-flex u-flex-vertical u-cross-center">
<div class="common-section">
<Button secondary round on:click={() => (showCreateIndex = true)}>
<span class="icon-plus" aria-hidden="true" />
</Button>
</div>
<div class="common-section">
<p>Create your first index to get started</p>
</div>
<div class="common-section">
<Button secondary href="#">Documentation</Button>
</div>
</div>
<Empty isButton single on:click={() => (showCreateIndex = true)}>
<p>Create your first index to get started</p>
</Empty>
{/if}
</Container>
src/routes/console/project-[project]/functions/+page.svelte
+9 -4
View File
@@ -41,13 +41,18 @@
<Pagination {limit} bind:offset sum={response.total} />
{:else if search}
<Empty>
<svelte:fragment slot="header"
>No results found for <b>{search}</b></svelte:fragment>
<div class="u-flex u-flex-vertical">
No results found for <b>{search}</b>
</div>
</Empty>
{:else}
<Empty>
<svelte:fragment slot="header">No Functions Found</svelte:fragment>
You haven't created any functions for your project yet.
<div class="u-flex u-flex-vertical">
<div class="common-section">No Functions Found</div>
<div class="common-section">
You haven't created any functions for your project yet.
</div>
</div>
</Empty>
{/if}
{/await}
src/routes/console/project-[project]/keys/+page.svelte
+6 -2
View File
@@ -48,8 +48,12 @@
</Table>
{:else}
<Empty>
<svelte:fragment slot="header">No API Keys Found</svelte:fragment>
You haven't created any API keys for your project yet.
<div class="u-flex u-flex-vertical">
<div class="common-section">No API Keys Found</div>
<div class="common-section">
You haven't created any API keys for your project yet.
</div>
</div>
</Empty>
{/if}
<Button on:click={() => (showCreate = true)}>Add API Key</Button>
src/routes/console/project-[project]/storage/+page.svelte
+6 -27
View File
@@ -2,7 +2,7 @@
import { page } from '$app/stores';
import { goto } from '$app/navigation';
import { Button } from '$lib/elements/forms';
import { Empty, Pagination, Copy, GridItem1, EmptyGridItem } from '$lib/components';
import { Empty, Pagination, Copy, GridItem1 } from '$lib/components';
import { Pill } from '$lib/elements';
import { Query, type Models } from '@aw-labs/appwrite-console';
import Create from './_create.svelte';
@@ -82,16 +82,9 @@
</GridItem1>
{/each}
{#if $bucketList.total % 2 !== 0}
<EmptyGridItem on:click={() => (showCreate = true)}>
<div class="common-section">
<Button secondary round>
<i class="icon-plus" />
</Button>
</div>
<div class="common-section">
<p>Add a new bucket</p>
</div>
</EmptyGridItem>
<Empty isButton on:click={() => (showCreate = true)}>
<p>Add a new bucket</p>
</Empty>
{/if}
</ul>
@@ -116,22 +109,8 @@
<Pagination limit={$pageLimit} bind:offset sum={$bucketList?.total} />
</div>
{:else}
<Empty dashed centered>
<div class="grid-item-1">
<div class="u-flex u-flex-vertical u-cross-center">
<div class="common-section">
<Button secondary round on:click={() => (showCreate = true)}>
<i class="icon-plus" />
</Button>
</div>
<div class="common-section">
<p>Add your first bucket to get started</p>
</div>
<div class="common-section">
<Button secondary href="#">Documentation</Button>
</div>
</div>
</div>
<Empty isButton single on:click={() => (showCreate = true)}>
<p>Add your first bucket to get started</p>
</Empty>
{/if}
</Container>
src/routes/console/project-[project]/storage/bucket/[bucket]/+page.svelte
+2 -14
View File
@@ -195,20 +195,8 @@
<Pagination limit={$pageLimit} bind:offset sum={$files?.total} />
</div>
{:else}
<Empty dashed centered>
<div class="u-flex u-flex-vertical u-cross-center">
<div class="common-section">
<Button secondary round on:click={() => (showCreate = true)}>
<i class="icon-plus" />
</Button>
</div>
<div class="common-section">
<p>Upload some files to get started</p>
</div>
<div class="common-section">
<Button secondary href="#">Documentation</Button>
</div>
</div>
<Empty isButton single on:click={() => (showCreate = true)}>
<p>Upload some files to get started</p>
</Empty>
{/if}
</Container>
src/routes/console/project-[project]/webhooks/+page.svelte
+6 -2
View File
@@ -46,8 +46,12 @@
</Table>
{:else}
<Empty>
<svelte:fragment slot="header">No Webhooks Found</svelte:fragment>
You haven't created any webhooks for your project yet.
<div class="u-flex u-flex-vertical">
<div class="common-section">No Webhooks Found</div>
<div class="common-section">
You haven't created any webhooks for your project yet.
</div>
</div>
</Empty>
{/if}
{/await}