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 #183 from appwrite/fix-table-update

Browse Source 
feat: update tables for smaller screens
This commit is contained in:
Torsten Dittmann
2023-01-10 15:57:21 +01:00
committed by GitHub
parent 838953a420 a085bf5f46
commit aea8c5f2bb
21 changed files with 130 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+6 -6
View File
@@ -5399,9 +5399,9 @@
"dev": true
},
"node_modules/json5": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz",
"integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==",
"version": "2.2.3",
"resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
"integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
"dev": true,
"peer": true,
"bin": {
@@ -11827,9 +11827,9 @@
"dev": true
},
"json5": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz",
"integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==",
"version": "2.2.3",
"resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
"integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
"dev": true,
"peer": true
},
src/lib/components/permissions/permissions.svelte
+2 -2
View File
@@ -142,9 +142,9 @@
</script>
{#if [...$groups]?.length}
<Table noMargin noStyles noMobile>
<Table noMargin noStyles>
<TableHeader>
<TableCellHead>Role</TableCellHead>
<TableCellHead width={70}>Role</TableCellHead>
{#if withCreate}
<TableCellHead width={70}>Create</TableCellHead>
{/if}
src/lib/components/permissions/roles.svelte
+2 -2
View File
@@ -92,9 +92,9 @@
</script>
{#if [...$groups.keys()]?.length}
<Table noMargin noStyles noMobile>
<Table noMargin noStyles>
<TableHeader>
<TableCellHead>Role</TableCellHead>
<TableCellHead width={70}>Role</TableCellHead>
<TableCellHead width={40} />
</TableHeader>
<TableBody>
src/lib/elements/table/cellHead.svelte
+2
View File
@@ -1,9 +1,11 @@
<script lang="ts">
export let width: number = null;
export let onlyDesktop = false;
</script>
<div
style={width ? `--p-col-width:${width?.toString()}` : ''}
class:is-only-desktop={onlyDesktop}
class="table-thead-col"
role="columnheader">
<span class="eyebrow-heading-3">
src/lib/elements/table/cellText.svelte
+7 -1
View File
@@ -2,8 +2,14 @@
import { Trim } from '$lib/components';
export let title: string;
export let showOverflow = false;
export let onlyDesktop = false;
</script>
<div class="table-col" class:u-overflow-visible={showOverflow} data-title={title} role="cell">
<div
class="table-col"
class:is-only-desktop={onlyDesktop}
class:u-overflow-visible={showOverflow}
data-title={title}
role="cell">
<Trim><slot /></Trim>
</div>
src/lib/elements/table/table.svelte
+1 -3
View File
@@ -1,12 +1,10 @@
<script lang="ts">
export let noMargin = false;
export let noStyles = false;
export let noMobile = false;
</script>
<div
class="table is-vertical"
class:is-vertical={!noMobile}
class="table is-selected-columns-mobile"
class:u-margin-block-start-32={!noMargin}
class:is-remove-outer-styles={noStyles}
role="table">
src/lib/elements/table/tableScroll.svelte
+6 -2
View File
@@ -1,7 +1,11 @@
<script lang="ts">
export let isSticky = false;
</script>
<div class="table-with-scroll u-margin-block-start-32">
<div class="table-wrapper">
<div class="table is-sticky-scroll" role="table">
<table class="table" class:is-sticky-scroll={isSticky}>
<slot />
</div>
</table>
</div>
</div>
src/lib/layout/activity.svelte
+9 -9
View File
@@ -1,13 +1,13 @@
<script lang="ts">
import { EmptySearch, Pagination, Trim } from '$lib/components';
import {
Table,
TableBody,
TableHeader,
TableRow,
TableCellHead,
TableCell,
TableCellText
TableCellText,
TableScroll
} from '$lib/elements/table';
import { Container } from '$lib/layout';
import { toLocaleDateTime } from '$lib/helpers/date';
@@ -26,13 +26,13 @@
<Container>
{#if logs.total}
<Table>
<TableScroll>
<TableHeader>
<TableCellHead>Client</TableCellHead>
<TableCellHead>Event</TableCellHead>
<TableCellHead>Location</TableCellHead>
<TableCellHead>IP</TableCellHead>
<TableCellHead>Date</TableCellHead>
<TableCellHead width={150}>Client</TableCellHead>
<TableCellHead width={100}>Event</TableCellHead>
<TableCellHead width={80}>Location</TableCellHead>
<TableCellHead width={90}>IP</TableCellHead>
<TableCellHead width={140}>Date</TableCellHead>
</TableHeader>
<TableBody>
{#each logs.logs as log}
@@ -75,7 +75,7 @@
</TableRow>
{/each}
</TableBody>
</Table>
</TableScroll>
<div class="u-flex u-margin-block-start-32 u-main-space-between">
<p class="text">Total results: {logs.total}</p>
<Pagination limit={PAGE_LIMIT} {path} {offset} sum={logs.total} />
src/routes/console/account/sessions/[[page]]/+page.svelte
+29 -30
View File
@@ -1,15 +1,15 @@
<script lang="ts">
import { Empty, Heading } from '$lib/components';
import { Empty, Heading, Trim } from '$lib/components';
import { Button } from '$lib/elements/forms';
import { Pill } from '$lib/elements';
import {
Table,
TableBody,
TableHeader,
TableRow,
TableCellHead,
TableCell,
TableCellText
TableCellText,
TableScroll
} from '$lib/elements/table';
import { Container } from '$lib/layout';
import { sdkForConsole } from '$lib/stores/sdk';
@@ -52,40 +52,39 @@
</div>
{#if data.sessions.total}
<Table>
<TableScroll>
<TableHeader>
<TableCellHead>Client</TableCellHead>
<TableCellHead width={100}>Location</TableCellHead>
<TableCellHead width={150}>IP</TableCellHead>
<TableCellHead width={100} />
<TableCellHead width={250}>Client</TableCellHead>
<TableCellHead width={70}>Location</TableCellHead>
<TableCellHead width={90}>IP</TableCellHead>
<TableCellHead width={60} />
</TableHeader>
<TableBody>
{#each data.sessions.sessions as session}
<TableRow>
<TableCell title="Client">
<div class="u-flex u-gap-12 u-cross-center">
<div class="u-flex u-cross-center u-gap-12">
{#if session.clientName}
<div class="avatar is-small">
<img
height="20"
width="20"
src={getBrowser(session.clientCode).toString()}
alt={session.clientName} />
</div>
<p class="text u-trim">
{session.clientName}
{session.clientVersion}
on {session.osName}
{session.osVersion}
</p>
{:else}
<span class="avatar is-color-empty" />
<p class="text u-trim">Unknown</p>
{/if}
{#if session.clientName}
<div class="avatar is-small">
<img
height="20"
width="20"
src={getBrowser(session.clientCode).toString()}
alt={session.clientName} />
</div>
<Trim>
{session.clientName}
{session.clientVersion}
on {session.osName}
{session.osVersion}
</Trim>
{:else}
<span class="avatar is-color-empty" />
<p class="text u-trim">Unknown</p>
{/if}
<div class="is-only-desktop">
<Pill>{session.provider}</Pill>
</div>
<Pill>{session.provider}</Pill>
{#if session.current}
<Pill success>current session</Pill>
{/if}
@@ -105,7 +104,7 @@
</TableRow>
{/each}
</TableBody>
</Table>
</TableScroll>
{:else}
<Empty>
<div class="u-flex u-flex-vertical u-cross-center">
src/routes/console/organization-[organization]/members/[[page]]/+page.svelte
+7 -7
View File
@@ -1,12 +1,12 @@
<script lang="ts">
import {
Table,
TableHeader,
TableBody,
TableCellHead,
TableCell,
TableCellText,
TableRow
TableRow,
TableScroll
} from '$lib/elements/table';
import { AvatarInitials, Heading, Pagination } from '$lib/components';
import { Pill } from '$lib/elements';
@@ -64,11 +64,11 @@
</Button>
</div>
<Table>
<TableScroll>
<TableHeader>
<TableCellHead>Name</TableCellHead>
<TableCellHead>Email</TableCellHead>
<TableCellHead width={100}>Role</TableCellHead>
<TableCellHead width={140}>Name</TableCellHead>
<TableCellHead width={120}>Email</TableCellHead>
<TableCellHead width={90}>Role</TableCellHead>
<TableCellHead width={30} />
</TableHeader>
<TableBody>
@@ -112,7 +112,7 @@
</TableRow>
{/each}
</TableBody>
</Table>
</TableScroll>
<div class="u-flex u-margin-block-start-32 u-main-space-between">
<p class="text">Total results: {data.organizationMembers.total}</p>
<Pagination
src/routes/console/project-[project]/auth/[[page]]/+page.svelte
+8 -8
View File
@@ -47,10 +47,10 @@
<Table>
<TableHeader>
<TableCellHead>Name</TableCellHead>
<TableCellHead>Identifiers</TableCellHead>
<TableCellHead width={130}>Status</TableCellHead>
<TableCellHead width={100}>ID</TableCellHead>
<TableCellHead>Joined</TableCellHead>
<TableCellHead onlyDesktop>Identifiers</TableCellHead>
<TableCellHead onlyDesktop width={130}>Status</TableCellHead>
<TableCellHead onlyDesktop width={100}>ID</TableCellHead>
<TableCellHead onlyDesktop>Joined</TableCellHead>
</TableHeader>
<TableBody>
{#each data.users.users as user}
@@ -75,12 +75,12 @@
{/if}
</div>
</TableCell>
<TableCellText title="Identifiers">
<TableCellText onlyDesktop title="Identifiers">
{user.email && user.phone
? [user.email, user.phone].join(',')
: user.email || user.phone}
</TableCellText>
<TableCell title="Status">
<TableCell onlyDesktop title="Status">
{#if user.status}
<Pill success={user.emailVerification || user.phoneVerification}>
{user.emailVerification && user.phoneVerification
@@ -95,7 +95,7 @@
<Pill danger>blocked</Pill>
{/if}
</TableCell>
<TableCell showOverflow title="ID">
<TableCell onlyDesktop showOverflow title="ID">
<Copy value={user.$id} event="user">
<Pill button>
<span class="icon-duplicate" aria-hidden="true" />
@@ -103,7 +103,7 @@
</Pill>
</Copy>
</TableCell>
<TableCellText title="Joined">
<TableCellText onlyDesktop title="Joined">
{toLocaleDateTime(user.registration)}
</TableCellText>
</TableRowLink>
src/routes/console/project-[project]/auth/teams/[[page]]/+page.svelte
+6 -5
View File
@@ -40,21 +40,22 @@
<Table>
<TableHeader>
<TableCellHead>Name</TableCellHead>
<TableCellHead>Members</TableCellHead>
<TableCellHead>Created</TableCellHead>
<TableCellHead onlyDesktop>Members</TableCellHead>
<TableCellHead onlyDesktop>Created</TableCellHead>
</TableHeader>
<TableBody>
{#each data.teams.teams as team}
<TableRowLink
href={`${base}/console/project-${project}/auth/teams/team-${team.$id}`}>
<TableCell title="ID">
<TableCell title="Name">
<div class="u-flex u-gap-12">
<AvatarInitials size={32} name={team.name} />
<span class="text u-trim">{team.name}</span>
</div>
</TableCell>
<TableCellText title="Members">{team.total} members</TableCellText>
<TableCellText title="Members">
<TableCellText onlyDesktop title="Members"
>{team.total} members</TableCellText>
<TableCellText onlyDesktop title="Created">
{toLocaleDateTime(team.$createdAt)}
</TableCellText>
</TableRowLink>
src/routes/console/project-[project]/auth/teams/team-[team]/members/[[page]]/+page.svelte
+4 -4
View File
@@ -46,8 +46,8 @@
<Table>
<TableHeader>
<TableCellHead>Name</TableCellHead>
<TableCellHead>Roles</TableCellHead>
<TableCellHead>Joined</TableCellHead>
<TableCellHead onlyDesktop>Roles</TableCellHead>
<TableCellHead onlyDesktop>Joined</TableCellHead>
<TableCellHead width={30} />
</TableHeader>
<TableBody>
@@ -60,8 +60,8 @@
<span>{membership.userName ? membership.userName : 'n/a'}</span>
</div>
</TableCellText>
<TableCellText title="Roles">{membership.roles}</TableCellText>
<TableCellText title="Joined">
<TableCellText onlyDesktop title="Roles">{membership.roles}</TableCellText>
<TableCellText onlyDesktop title="Joined">
{toLocaleDateTime(membership.joined)}
</TableCellText>
<TableCell>
src/routes/console/project-[project]/auth/user-[user]/memberships/[[page]]/+page.svelte
+4 -4
View File
@@ -32,8 +32,8 @@
<Table>
<TableHeader>
<TableCellHead>Name</TableCellHead>
<TableCellHead>Roles</TableCellHead>
<TableCellHead>Joined</TableCellHead>
<TableCellHead onlyDesktop>Roles</TableCellHead>
<TableCellHead onlyDesktop>Joined</TableCellHead>
<TableCellHead width={30} />
</TableHeader>
<TableBody>
@@ -46,8 +46,8 @@
<span>{membership.teamName ? membership.teamName : 'n/a'}</span>
</div>
</TableCellText>
<TableCellText title="Roles">{membership.roles}</TableCellText>
<TableCellText title="Joined">
<TableCellText onlyDesktop title="Roles">{membership.roles}</TableCellText>
<TableCellText onlyDesktop title="Joined">
{toLocaleDateTime(membership.joined)}
</TableCellText>
<TableCell width={30}>
src/routes/console/project-[project]/auth/user-[user]/sessions/[[page]]/+page.svelte
+1 -1
View File
@@ -35,7 +35,7 @@
</div>
<Table>
<TableHeader>
<TableCellHead>Browser and Device</TableCellHead>
<TableCellHead width={140}>Browser and Device</TableCellHead>
<TableCellHead width={140}>Session</TableCellHead>
<TableCellHead width={140}>Location</TableCellHead>
<TableCellHead width={140}>IP</TableCellHead>
src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/[[page]]/+page.svelte
+1 -1
View File
@@ -50,7 +50,7 @@
{#if $collection?.attributes?.length}
{#if data.documents.total}
<TableScroll>
<TableScroll isSticky>
<TableHeader>
<TableCellHead>Document ID</TableCellHead>
{#each columns as column}
src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
+4 -4
View File
@@ -40,8 +40,8 @@
<Table>
<TableHeader>
<TableCellHead>Key</TableCellHead>
<TableCellHead>Type</TableCellHead>
<TableCellHead>Default Value</TableCellHead>
<TableCellHead onlyDesktop>Type</TableCellHead>
<TableCellHead onlyDesktop>Default Value</TableCellHead>
<TableCellHead width={30} />
</TableHeader>
<TableBody>
@@ -63,10 +63,10 @@
{/if}
</div>
</TableCell>
<TableCellText title="Type">
<TableCellText onlyDesktop title="Type">
{`${attribute.type}${attribute.array ? '[]' : ''}`}
</TableCellText>
<TableCellText title="Default Value">
<TableCellText onlyDesktop title="Default Value">
{attribute.default !== null ? attribute.default : '-'}
</TableCellText>
<TableCell showOverflow>
src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte
+6 -6
View File
@@ -50,9 +50,9 @@
<Table>
<TableHeader>
<TableCellHead>Key</TableCellHead>
<TableCellHead>Type</TableCellHead>
<TableCellHead>Attributes</TableCellHead>
<TableCellHead>Asc/Desc</TableCellHead>
<TableCellHead onlyDesktop>Type</TableCellHead>
<TableCellHead onlyDesktop>Attributes</TableCellHead>
<TableCellHead onlyDesktop>Asc/Desc</TableCellHead>
<TableCellHead width={30} />
</TableHeader>
<TableBody>
@@ -72,11 +72,11 @@
{/if}
</div>
</TableCell>
<TableCellText title="Type">{index.type}</TableCellText>
<TableCellText title="Attributes">
<TableCellText title="Type" onlyDesktop>{index.type}</TableCellText>
<TableCellText title="Attributes" onlyDesktop>
{index.attributes}
</TableCellText>
<TableCellText title="ASC/DESC">
<TableCellText title="ASC/DESC" onlyDesktop>
{index.orders}
</TableCellText>
<TableCell showOverflow>
src/routes/console/project-[project]/overview/keys/+page.svelte
+6 -6
View File
@@ -35,9 +35,9 @@
<Table>
<TableHeader>
<TableCellHead>Name</TableCellHead>
<TableCellHead>last accessed</TableCellHead>
<TableCellHead>expiration date</TableCellHead>
<TableCellHead>scopes</TableCellHead>
<TableCellHead onlyDesktop>last accessed</TableCellHead>
<TableCellHead onlyDesktop>expiration date</TableCellHead>
<TableCellHead onlyDesktop>scopes</TableCellHead>
</TableHeader>
<TableBody>
{#each data.keys.keys as key}
@@ -45,13 +45,13 @@
<TableCellText title="Name">
{key.name}
</TableCellText>
<TableCellText title="Last Accessed">
<TableCellText onlyDesktop title="Last Accessed">
{key.accessedAt ? toLocaleDateTime(key.accessedAt) : 'never'}
</TableCellText>
<TableCellText title="Expiration Date">
<TableCellText onlyDesktop title="Expiration Date">
{key.expire ? toLocaleDateTime(key.expire) : 'never'}
</TableCellText>
<TableCellText title="Expiration Date">
<TableCellText onlyDesktop title="Expiration Date">
{key.scopes.length} Scopes
</TableCellText>
</TableRowLink>
src/routes/console/project-[project]/settings/domains/[[page]]/+page.svelte
+8 -8
View File
@@ -4,13 +4,13 @@
import { Pill } from '$lib/elements';
import { Button } from '$lib/elements/forms';
import {
Table,
TableBody,
TableCell,
TableCellHead,
TableCellText,
TableHeader,
TableRow
TableRow,
TableScroll
} from '$lib/elements/table';
import { Container } from '$lib/layout';
import { addNotification } from '$lib/stores/notifications';
@@ -68,14 +68,14 @@
</Button>
</div>
{#if data.domains.total}
<Table>
<TableScroll>
<TableHeader>
<TableCellHead>Domain Name</TableCellHead>
<TableCellHead width={150}>Domain Name</TableCellHead>
<TableCellHead width={100} />
<TableCellHead width={60}>Type</TableCellHead>
<TableCellHead>Name</TableCellHead>
<TableCellHead>Value</TableCellHead>
<TableCellHead />
<TableCellHead width={90}>Name</TableCellHead>
<TableCellHead width={90}>Value</TableCellHead>
<TableCellHead width={40} />
</TableHeader>
<TableBody>
{#each data.domains.domains as domain}
@@ -131,7 +131,7 @@
</TableRow>
{/each}
</TableBody>
</Table>
</TableScroll>
{:else}
<Empty
single
src/routes/console/project-[project]/storage/bucket-[bucket]/[[page]]/+page.svelte
+11 -11
View File
@@ -86,9 +86,9 @@
<Table>
<TableHeader>
<TableCellHead>Filename</TableCellHead>
<TableCellHead width={140}>Type</TableCellHead>
<TableCellHead width={100}>Size</TableCellHead>
<TableCellHead width={120}>Created</TableCellHead>
<TableCellHead onlyDesktop width={140}>Type</TableCellHead>
<TableCellHead onlyDesktop width={100}>Size</TableCellHead>
<TableCellHead onlyDesktop width={120}>Created</TableCellHead>
<TableCellHead width={30} />
</TableHeader>
<TableBody>
@@ -99,17 +99,17 @@
<div class="u-flex u-gap-12 u-main-space-between">
<span class="avatar is-size-small is-color-empty" />
<span class="text u-trim"> {file.name}</span>
<span class="text u-trim">{file.name}</span>
<div>
<Pill warning>Pending</Pill>
</div>
</div>
</TableCell>
<TableCellText title="Type">{file.mimeType}</TableCellText>
<TableCellText title="Size">
<TableCellText onlyDesktop title="Type">{file.mimeType}</TableCellText>
<TableCellText onlyDesktop title="Size">
{calculateSize(file.sizeOriginal)}
</TableCellText>
<TableCellText title="Date Created">
<TableCellText onlyDesktop title="Date Created">
{toLocaleDate(file.$createdAt)}
</TableCellText>
<TableCell>
@@ -137,14 +137,14 @@
<TableCell title="Name">
<div class="u-flex u-gap-12">
<Avatar size={32} src={getPreview(file.$id)} name={file.name} />
<span class="text u-trim"> {file.name}</span>
<span class="text u-trim">{file.name}</span>
</div>
</TableCell>
<TableCellText title="Type">{file.mimeType}</TableCellText>
<TableCellText title="Size">
<TableCellText onlyDesktop title="Type">{file.mimeType}</TableCellText>
<TableCellText onlyDesktop title="Size">
{calculateSize(file.sizeOriginal)}
</TableCellText>
<TableCellText title="Date Created">
<TableCellText onlyDesktop title="Date Created">
{toLocaleDate(file.$createdAt)}
</TableCellText>
<TableCell showOverflow>