Merge pull request #381 from appwrite/feat-id-component

feat: new id component
appwrite · Apr 11, 2023 · e3e9948 · e3e9948
2 parents 8c33a1d + acff569
commit e3e9948
Show file tree

Hide file tree

Showing 30 changed files with 148 additions and 213 deletions.
diff --git a/src/lib/components/copy.svelte b/src/lib/components/copy.svelte
@@ -33,6 +33,7 @@
 </script>
 
 <span
+    data-private
     style:cursor="pointer"
     on:click|preventDefault={handleClick}
     on:keyup={clickOnEnter}

diff --git a/src/lib/components/id.svelte b/src/lib/components/id.svelte
@@ -0,0 +1,67 @@
+<script lang="ts">
+    import { Copy } from '.';
+
+    export let value: string;
+    export let event: string = null;
+
+    function truncateText(node: HTMLElement) {
+        const MAX_TRIES = 100;
+        let originalText = node.textContent;
+        function checkOverflow() {
+            node.textContent = originalText;
+
+            if (node.scrollWidth > node.clientWidth) {
+                let truncatedText = originalText;
+                let tries = 0;
+                while (
+                    node.scrollWidth > node.clientWidth &&
+                    truncatedText.length > 0 &&
+                    tries < MAX_TRIES
+                ) {
+                    tries++;
+                    if (truncatedText.includes('…')) {
+                        const [left, right] = truncatedText.split('…');
+                        truncatedText = `${left.slice(0, -1)}…${right.slice(1)}`;
+                    } else {
+                        const left = truncatedText.slice(0, truncatedText.length / 2);
+                        const right = truncatedText.slice(truncatedText.length / 2);
+                        truncatedText = `${left.slice(0, -1)}…${right.slice(1)}`;
+                    }
+                    node.textContent = truncatedText;
+                }
+            }
+        }
+        checkOverflow();
+        window.addEventListener('resize', checkOverflow);
+
+        return {
+            update() {
+                originalText = node.textContent;
+                checkOverflow();
+            },
+            destroy() {
+                window.removeEventListener('resize', checkOverflow);
+            }
+        };
+    }
+</script>
+
+<div
+    class="interactive-text-output is-buttons-on-top"
+    style:min-inline-size="0"
+    style:display="inline-flex">
+    <span
+        style:white-space="nowrap"
+        class="text u-line-height-1-5"
+        style:overflow="hidden"
+        use:truncateText>
+        <slot />
+    </span>
+    <div class="interactive-text-output-buttons">
+        <Copy {value} {event}>
+            <button class="interactive-text-output-button is-hidden" aria-label="copy text">
+                <span class="icon-duplicate" aria-hidden="true" />
+            </button>
+        </Copy>
+    </div>
+</div>
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
@@ -53,3 +53,4 @@ export { default as Limit } from './limit.svelte';
 export { default as PaginationWithLimit } from './paginationWithLimit.svelte';
 export { default as ClickableList } from './clickableList.svelte';
 export { default as ClickableListItem } from './clickableListItem.svelte';
+export { default as Id } from './id.svelte';
diff --git a/src/lib/elements/pill.svelte b/src/lib/elements/pill.svelte
@@ -9,34 +9,6 @@
     export let submit = false;
     export let external = false;
     export let href: string = null;
-    export let trim = false;
-
-    let element: HTMLButtonElement;
-
-    const isOverflowing = (elem: HTMLButtonElement, iterator = 1) => {
-        let parent = elem?.parentElement;
-        if (
-            trim &&
-            elem &&
-            elem.scrollWidth + 10 >
-                (parent.clientWidth ? parent.clientWidth : parent.parentElement.clientWidth)
-        )
-            trimText(iterator);
-        else return;
-    };
-
-    function trimText(iterator: number) {
-        if (iterator > 3) {
-            element.childNodes[element.childElementCount].textContent = '...';
-        } else {
-            let text = element.childNodes[element.childElementCount].textContent;
-            element.childNodes[element.childElementCount].textContent =
-                text.slice(0, 3) + '...' + text.slice(-9 + iterator * 2);
-            isOverflowing(element, iterator + 1);
-        }
-    }
-
-    $: isOverflowing(element);
 </script>
 
 {#if href}
@@ -55,7 +27,6 @@
     </a>
 {:else if button}
     <button
-        bind:this={element}
         on:click
         {disabled}
         type={submit ? 'submit' : 'button'}

diff --git a/src/lib/elements/table/cellHead.svelte b/src/lib/elements/table/cellHead.svelte
@@ -5,7 +5,7 @@
 </script>
 
 <div
-    style={width ? `--p-col-width:${width?.toString()}` : ''}
+    style:--p-col-width={width?.toString()}
     class:is-only-desktop={onlyDesktop}
     class="table-thead-col"
     role="columnheader">

diff --git a/src/lib/elements/table/cellText.svelte b/src/lib/elements/table/cellText.svelte
@@ -3,10 +3,12 @@
     export let title: string;
     export let showOverflow = false;
     export let onlyDesktop = false;
+    export let width: number = null;
 </script>
 
 <div
     class="table-col"
+    style:--p-col-width={width?.toString()}
     class:is-only-desktop={onlyDesktop}
     class:u-overflow-visible={showOverflow}
     data-title={title}

diff --git a/src/routes/console/project-[project]/auth/teams/team-[team]/header.svelte b/src/routes/console/project-[project]/auth/teams/team-[team]/header.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { Copy, Tab, Tabs } from '$lib/components';
-    import { Pill } from '$lib/elements';
+    import { Id, Tab, Tabs } from '$lib/components';
     import { isTabSelected } from '$lib/helpers/load';
     import { Cover, CoverTitle } from '$lib/layout';
     import { team } from './store';
@@ -35,12 +34,7 @@
         <CoverTitle href={`/console/project-${projectId}/auth/teams`}>
             {$team?.name}
         </CoverTitle>
-        <Copy value={$team?.$id} event="team">
-            <Pill button>
-                <span class="icon-duplicate" aria-hidden="true" />
-                Team ID
-            </Pill>
-        </Copy>
+        <Id value={$team?.$id} event="team">{$team?.$id}</Id>
     </svelte:fragment>
 
     <Tabs>

diff --git a/src/routes/console/project-[project]/auth/user-[user]/header.svelte b/src/routes/console/project-[project]/auth/user-[user]/header.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { Copy, Tab, Tabs } from '$lib/components';
-    import { Pill } from '$lib/elements';
+    import { Id, Tab, Tabs } from '$lib/components';
     import { isTabSelected } from '$lib/helpers/load';
     import { Cover, CoverTitle } from '$lib/layout';
     import { user } from './store';
@@ -39,12 +38,7 @@
         <CoverTitle href={`/console/project-${projectId}/auth`}>
             {$user.name ? $user.name : '-'}
         </CoverTitle>
-        <Copy value={$user.$id} event="user">
-            <Pill button>
-                <span class="icon-duplicate" aria-hidden="true" />
-                User ID
-            </Pill>
-        </Copy>
+        <Id value={$user.$id} event="user">{$user.$id}</Id>
     </svelte:fragment>
 
     <Tabs>

diff --git a/src/routes/console/project-[project]/databases/database-[database]/[[page]]/store.ts b/src/routes/console/project-[project]/databases/database-[database]/[[page]]/store.ts
@@ -8,7 +8,7 @@ export type Column = {
 };
 
 export const columns = writable<Column[]>([
-    { id: '$id', title: 'Database ID', show: true, width: 50 },
+    { id: '$id', title: 'Database ID', show: true, width: 150 },
     { id: 'name', title: 'Name', show: true, width: 120 },
     { id: '$createdAt', title: 'Created', show: true, width: 120 },
     { id: '$updatedAt', title: 'Updated', show: true, width: 120 }

diff --git a/...]/databases/database-[database]/collection-[collection]/document-[document]/header.svelte b/...]/databases/database-[database]/collection-[collection]/document-[document]/header.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { Copy, Tab, Tabs } from '$lib/components';
-    import { Pill } from '$lib/elements';
+    import { Id, Tab, Tabs } from '$lib/components';
     import { isTabSelected } from '$lib/helpers/load';
     import { Cover, CoverTitle } from '$lib/layout';
     import { doc } from './store';
@@ -38,12 +37,7 @@
             href={`/console/project-${projectId}/databases/database-${databaseId}/collection-${collectionId}`}>
             {$doc?.$id}
         </CoverTitle>
-        <Copy value={$doc.$id} event="document">
-            <Pill button>
-                <span class="icon-duplicate" aria-hidden="true" />
-                Document ID
-            </Pill>
-        </Copy>
+        <Id value={$doc?.$id} event="document">Document ID</Id>
     </svelte:fragment>
 
     <Tabs>

diff --git a/...ole/project-[project]/databases/database-[database]/collection-[collection]/header.svelte b/...ole/project-[project]/databases/database-[database]/collection-[collection]/header.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { Copy, Tab, Tabs } from '$lib/components';
-    import { Pill } from '$lib/elements';
+    import { Id, Tab, Tabs } from '$lib/components';
     import { isTabSelected } from '$lib/helpers/load';
     import { Cover, CoverTitle } from '$lib/layout';
     import { collection } from './store';
@@ -52,12 +51,7 @@
         <CoverTitle href={`/console/project-${projectId}/databases/database-${databaseId}`}>
             {$collection?.name}
         </CoverTitle>
-        <Copy value={$collection?.$id}>
-            <Pill button>
-                <span class="icon-duplicate" aria-hidden="true" />
-                Collection ID
-            </Pill>
-        </Copy>
+        <Id value={$collection?.$id}>{$collection?.$id}</Id>
     </svelte:fragment>
 
     <Tabs>

diff --git a/...sole/project-[project]/databases/database-[database]/collection-[collection]/table.svelte b/...sole/project-[project]/databases/database-[database]/collection-[collection]/table.svelte
@@ -3,8 +3,7 @@
     import { base } from '$app/paths';
     import { page } from '$app/stores';
     import { tooltip } from '$lib/actions/tooltip';
-    import { Copy } from '$lib/components';
-    import { Pill } from '$lib/elements';
+    import { Id } from '$lib/components';
     import {
         TableBody,
         TableCell,
@@ -97,13 +96,10 @@
         {#each data.documents.documents as document}
             <TableRowLink
                 href={`${base}/console/project-${projectId}/databases/database-${databaseId}/collection-${$collection.$id}/document-${document.$id}`}>
-                <TableCell>
-                    <Copy value={document.$id}>
-                        <Pill button trim>
-                            <span class="icon-duplicate" aria-hidden="true" />
-                            <span class="text">{document.$id}</span>
-                        </Pill>
-                    </Copy>
+                <TableCell width={150}>
+                    <Id value={document.$id}>
+                        {document.$id}
+                    </Id>
                 </TableCell>
 
                 {#each $columns as column}

diff --git a/src/routes/console/project-[project]/databases/database-[database]/grid.svelte b/src/routes/console/project-[project]/databases/database-[database]/grid.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { base } from '$app/paths';
     import { page } from '$app/stores';
-    import { CardContainer, Copy, GridItem1 } from '$lib/components';
+    import { CardContainer, GridItem1, Id } from '$lib/components';
     import { Pill } from '$lib/elements';
     import type { PageData } from './$types';
     export let data: PageData;
@@ -23,9 +23,7 @@
                     <Pill>disabled</Pill>
                 {/if}</svelte:fragment>
 
-            <Copy value={collection.$id}>
-                <Pill button><i class="icon-duplicate" />Collection ID</Pill>
-            </Copy>
+            <Id value={collection.$id}>{collection.$id}</Id>
         </GridItem1>
     {/each}
 </CardContainer>
diff --git a/src/routes/console/project-[project]/databases/database-[database]/header.svelte b/src/routes/console/project-[project]/databases/database-[database]/header.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { Copy, Tab, Tabs } from '$lib/components';
-    import { Pill } from '$lib/elements';
+    import { Id, Tab, Tabs } from '$lib/components';
     import { isTabSelected } from '$lib/helpers/load';
     import { Cover, CoverTitle } from '$lib/layout';
     import { database } from './store';
@@ -35,12 +34,7 @@
         <CoverTitle href={`/console/project-${projectId}/databases`}>
             {$database.name}
         </CoverTitle>
-        <Copy value={$database.$id}>
-            <Pill button>
-                <span class="icon-duplicate" aria-hidden="true" />
-                Database ID
-            </Pill>
-        </Copy>
+        <Id value={$database.$id}>{$database.$id}</Id>
     </svelte:fragment>
 
     <Tabs>

diff --git a/src/routes/console/project-[project]/databases/database-[database]/store.ts b/src/routes/console/project-[project]/databases/database-[database]/store.ts
@@ -7,7 +7,7 @@ export const database = derived(page, ($page) => $page.data.database as Models.D
 export const showCreate = writable(false);
 
 export const columns = writable<Column[]>([
-    { id: '$id', title: 'Collection ID', show: true, width: 50 },
+    { id: '$id', title: 'Collection ID', show: true, width: 150 },
     { id: 'name', title: 'Name', show: true, width: 120 },
     { id: '$createdAt', title: 'Created', show: true, width: 120 },
     { id: '$updatedAt', title: 'Updated', show: true, width: 120 }

diff --git a/src/routes/console/project-[project]/databases/database-[database]/table.svelte b/src/routes/console/project-[project]/databases/database-[database]/table.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
     import { base } from '$app/paths';
     import { page } from '$app/stores';
-    import { Copy } from '$lib/components';
-    import { Pill } from '$lib/elements';
+    import { Id } from '$lib/components';
     import {
         Table,
         TableBody,
@@ -37,21 +36,16 @@
                     {#if column.show}
                         {#if column.id === '$id'}
                             {#key $columns}
-                                <TableCell title={column.title}>
-                                    <Copy value={collection.$id}>
-                                        <Pill button trim>
-                                            <span class="icon-duplicate" aria-hidden="true" />
-                                            <span class="text u-trim">{collection.$id}</span>
-                                        </Pill>
-                                    </Copy>
+                                <TableCell title={column.title} width={column.width}>
+                                    <Id value={collection.$id}>{collection.$id}</Id>
                                 </TableCell>
                             {/key}
                         {:else if column.id === 'name'}
-                            <TableCellText title={column.title}>
+                            <TableCellText title={column.title} width={column.width}>
                                 {collection.name}
                             </TableCellText>
                         {:else}
-                            <TableCellText title={column.title}>
+                            <TableCellText title={column.title} width={column.width}>
                                 {toLocaleDateTime(collection[column.id])}
                             </TableCellText>
                         {/if}

diff --git a/src/routes/console/project-[project]/databases/grid.svelte b/src/routes/console/project-[project]/databases/grid.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
     import { base } from '$app/paths';
     import { page } from '$app/stores';
-    import { CardContainer, Copy, GridItem1 } from '$lib/components';
-    import { Pill } from '$lib/elements';
+    import { CardContainer, GridItem1, Id } from '$lib/components';
     import type { PageData } from './$types';
     export let data: PageData;
     export let showCreate = false;
@@ -13,10 +12,7 @@
     {#each data.databases.databases as database}
         <GridItem1 href={`${base}/console/project-${project}/databases/database-${database.$id}`}>
             <svelte:fragment slot="title">{database.name}</svelte:fragment>
-
-            <Copy value={database.$id}>
-                <Pill button><i class="icon-duplicate" />Database ID</Pill>
-            </Copy>
+            <Id value={database.$id}>{database.$id}</Id>
         </GridItem1>
     {/each}
     <svelte:fragment slot="empty">

diff --git a/src/routes/console/project-[project]/databases/store.ts b/src/routes/console/project-[project]/databases/store.ts
@@ -2,7 +2,7 @@ import type { Column } from '$lib/components/viewSelector.svelte';
 import { writable } from 'svelte/store';
 
 export const columns = writable<Column[]>([
-    { id: '$id', title: 'Database ID', show: true, width: 50 },
+    { id: '$id', title: 'Database ID', show: true, width: 150 },
     { id: 'name', title: 'Name', show: true, width: 120 },
     { id: '$createdAt', title: 'Created', show: true, width: 120 },
     { id: '$updatedAt', title: 'Updated', show: true, width: 120 }