From 7ad0eac6db2b98aef9c9ce372d86c6048c59c93e Mon Sep 17 00:00:00 2001
From: Alice Gaudon <alice@gaudon.pro>
Date: Wed, 2 Mar 2022 11:09:55 +0100
Subject: [PATCH] feat(front/file-uploader): reduce page height
 changes/unnecessary visual changes, improve ux

---
 src/assets/views/file-uploader.svelte | 51 +++++++++++++++++++++++----
 1 file changed, 44 insertions(+), 7 deletions(-)

diff --git a/src/assets/views/file-uploader.svelte b/src/assets/views/file-uploader.svelte
index c28a325..a84fbfd 100644
--- a/src/assets/views/file-uploader.svelte
+++ b/src/assets/views/file-uploader.svelte
@@ -78,6 +78,30 @@
 			display: none;
 		}
 	}
+
+    .new-files {
+        h3 {
+			text-align: center;
+
+			:global(.icon) {
+				color: var(--success);
+			}
+        }
+
+        hr {
+            margin: 24px;
+            border: 0;
+            border-top: 1px solid var(--on-subsurface);
+            opacity: 0.25;
+        }
+    }
+
+    .upload-form-container.disabled {
+        :global(button) {
+            cursor: not-allowed;
+            opacity: 0.1;
+        }
+    }
 </style>
 
 <BaseTemplate title="{$locals.app.name} - Upload file" description="File upload web interface." noH1>
@@ -91,14 +115,8 @@
             </h2>
             <p>You are responsible for the files that you upload.</p>
 
-            {#each finishedFileUploads as fileUpload}
-                <CopyableText title="{fileUpload.name}" content="{fileUpload.finalUrl}"/>
-            {/each}
 
-            {#if uploading}
-                <FileUpload file={currentFile} form={uploadForm} fileFieldName="upload"
-                            onEnd={onUploadEnd} autostart/>
-            {:else}
+            <div class="upload-form-container" class:disabled={uploading}>
                 <Form action={route('post-file-frontend')} withFiles
                       submitText="Upload" submitIcon="upload"
                       onSubmit={uploadFiles}>
@@ -129,6 +147,25 @@
                                  content="When upload multiple files, URLs will be generated automatically."/>
                     {/if}
                 </Form>
+            </div>
+
+            {#if uploading}
+                <FileUpload file={currentFile} form={uploadForm} fileFieldName="upload"
+                            onEnd={onUploadEnd} autostart/>
+            {/if}
+
+            {#if finishedFileUploads.length > 0}
+                <section class="sub-panel new-files">
+                    <hr>
+                    <h3>
+                        <Icon name="file-check"/>
+                        Newly uploaded files
+                    </h3>
+
+                    {#each finishedFileUploads as fileUpload}
+                        <CopyableText title="{fileUpload.name}" content="{fileUpload.finalUrl}"/>
+                    {/each}
+                </section>
             {/if}
 
             {#if $locals.flash.url}