From 51da9f4c7cb1952bac57c454e8edfdca3e02ab00 Mon Sep 17 00:00:00 2001
From: Alice Gaudon <alice@gaudon.pro>
Date: Thu, 22 Apr 2021 19:25:20 +0200
Subject: [PATCH] Prevent upload list from overflowing and add standalone copy
 text button

---
 assets/sass/app.scss       |  2 +-
 assets/sass/layout.scss    | 17 +++++++++++++++++
 assets/ts/copyable_text.ts |  8 ++++++++
 views/file-uploader.njk    | 15 +++++----------
 4 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/assets/sass/app.scss b/assets/sass/app.scss
index 0a709c7..65b166c 100644
--- a/assets/sass/app.scss
+++ b/assets/sass/app.scss
@@ -1,2 +1,2 @@
 @import "layout";
-@import "fm";
\ No newline at end of file
+@import "fm";
diff --git a/assets/sass/layout.scss b/assets/sass/layout.scss
index e00af32..65f7b4a 100644
--- a/assets/sass/layout.scss
+++ b/assets/sass/layout.scss
@@ -928,6 +928,23 @@ td.actions {
 	width: 100%;
 }
 
+.table-col-grow-cell {
+	display: flex;
+	flex-direction: row;
+
+	> * {
+		width: 0;
+		flex-grow: 1;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+	}
+
+	* {
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+}
+
 .pagination {
 	ul {
 		display: flex;
diff --git a/assets/ts/copyable_text.ts b/assets/ts/copyable_text.ts
index 60d58ab..d5f079a 100644
--- a/assets/ts/copyable_text.ts
+++ b/assets/ts/copyable_text.ts
@@ -12,4 +12,12 @@ document.addEventListener('DOMContentLoaded', () => {
             });
         }
     });
+
+    document.querySelectorAll<HTMLElement>('.copy-button[data-content]').forEach(el => {
+        el.addEventListener('click', () => {
+            navigator.clipboard.writeText(`${el.dataset.content}`)
+                .then(() => console.log('copy success'))
+                .catch(console.error);
+        });
+    });
 });
diff --git a/views/file-uploader.njk b/views/file-uploader.njk
index d58a148..7e1b1d1 100644
--- a/views/file-uploader.njk
+++ b/views/file-uploader.njk
@@ -61,8 +61,7 @@
                 <thead>
                 <tr>
                     <th>#</th>
-                    <th class="table-col-grow">URL</th>
-                    <th>Name</th>
+                    <th class="table-col-grow">Name</th>
                     <th>Size</th>
                     <th>Expires at</th>
                     <th>Actions</th>
@@ -73,19 +72,15 @@
                 {% for file in files %}
                     <tr>
                         <td>{{ file.id }}</td>
-                        <td>
-                            <div class="copyable-text">
-                                <a class="content" href="{{ file.getURL() }}" target="_blank">{{ file.getURL() }}</a>
-                                <button class="copy-button"><i data-feather="copy"></i></button>
-                            </div>
-                        </td>
-                        <td><pre>{{ file.real_name }}</pre></td>
+                        <td class="table-col-grow-cell"><a href="{{ file.getURL() }}"><pre>{{ file.real_name }}</pre></a></td>
                         <td>{{ (file.size / (1024 * 1024)).toFixed(2) }}MB</td>
                         <td>{% if file.expires_at %}{{ file.expires_at.toISOString() }}{% else %}Never{% endif %}</td>
                         <td class="actions">
                             {% if file.shouldBeDeleted() %}
                                 Pending deletion
                             {% else %}
+                                <button class="copy-button" data-content="{{ file.getURL() }}"><i data-feather="copy"></i> <span class="tip">Copy URL</span></button>
+
                                 <form action="{{ route('delete-file-frontend', file.slug) }}" method="post">
                                     {{ macros.csrf(getCsrfToken) }}
                                     <button class="button danger"><i data-feather="trash"></i> <span class="tip">Delete</span></button>
@@ -95,7 +90,7 @@
                     </tr>
                 {% else %}
                     <tr>
-                        <td colspan="6" class="center">You haven't uploaded any file yet.</td>
+                        <td colspan="5" class="center">You haven't uploaded any file yet.</td>
                     </tr>
                 {% endfor %}
                 </tbody>