Merge pull request #1352 from appwrite/feat-update-file-overview-card

Feat update file overview card
appwrite · Sep 16, 2024 · d0145c0 · d0145c0
2 parents 0588839 + caf6476
commit d0145c0
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 10 deletions.
diff --git a/src/lib/components/heading.svelte b/src/lib/components/heading.svelte
@@ -5,6 +5,7 @@
     export let tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
     export let size: Size;
     export let trimmed = true;
+    export let trimmedSecondLine = false;
     export let id: string = null;
     let classes = '';
     export { classes as class };
@@ -15,6 +16,7 @@
     this={tag}
     class={`heading-level-${size} u-min-width-0 ${classes}`}
     class:u-trim-1={trimmed}
+    class:u-trim-2={trimmedSecondLine}
     {style}
     {id}>
     <slot />

diff --git a/src/lib/layout/footer.svelte b/src/lib/layout/footer.svelte
@@ -1,6 +1,4 @@
 <script>
-    import { settings } from '$lib/components/consent.svelte';
-    import { clickOnEnter } from '$lib/helpers/a11y';
     import { isCloud } from '$lib/system';
     import { version } from '$routes/(console)/store';
 

diff --git a/src/routes/(console)/project-[project]/storage/bucket-[bucket]/file-[file]/+page.svelte b/src/routes/(console)/project-[project]/storage/bucket-[bucket]/file-[file]/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { CardGrid, BoxAvatar, Heading, Alert, Id } from '$lib/components';
+    import { CardGrid, BoxAvatar, Heading, Alert, CopyInput } from '$lib/components';
     import { Container } from '$lib/layout';
     import { Button } from '$lib/elements/forms';
     import { file } from './store';
@@ -92,18 +92,22 @@
                         </div>
                     </div>
                 </a>
-                <div class="u-flex u-flex-vertical u-gap-16">
-                    <Heading tag="h2" size="7">{$file.name}</Heading>
-                    <Id value={getView($file.$id)}>File URL</Id>
+                <div class="u-flex u-flex-vertical u-gap-4">
+                    <Heading tag="h2" size="7" trimmed={false} trimmedSecondLine={true}
+                        >{$file.name}</Heading>
+                    <p>{$file.mimeType}</p>
                 </div>
             </div>
             <svelte:fragment slot="aside">
                 <div>
-                    <p>MIME Type: {$file.mimeType}</p>
-                    <p>Size: {calculateSize($file.sizeOriginal)}</p>
-                    <p>Created: {toLocaleDate($file.$createdAt)}</p>
-                    <p>Last updated: {toLocaleDate($file.$updatedAt)}</p>
+                    <p><span class="u-bold">Size:</span> {calculateSize($file.sizeOriginal)}</p>
+                    <p><span class="u-bold">Created:</span> {toLocaleDate($file.$createdAt)}</p>
+                    <p>
+                        <span class="u-bold">Last updated:</span>
+                        {toLocaleDate($file.$updatedAt)}
+                    </p>
                 </div>
+                <CopyInput label="File URL" showLabel={true} value={getView($file.$id)} />
             </svelte:fragment>
 
             <svelte:fragment slot="actions">