From e3b0eebe7d30d50a92ed9e4e028158e31799758a Mon Sep 17 00:00:00 2001
From: nekobit <nekobit@noemail.net>
Date: Wed, 13 Jul 2022 05:09:21 +0000
Subject: [PATCH] More file upload info

FossilOrigin-Name: 31096b2a5f627274d407d26ff417f63c038b27c6c5eb96d5553fd39b69e4ce38
---
 dist/js/main.js   | 23 ++++++++++++++++++++---
 dist/treebird.css | 33 ++++++++++++++++++++++++++++-----
 2 files changed, 48 insertions(+), 8 deletions(-)

diff --git a/dist/js/main.js b/dist/js/main.js
index df0eeb8..fb65821 100644
--- a/dist/js/main.js
+++ b/dist/js/main.js
@@ -246,16 +246,33 @@
         rightbar_frame.height = rbar_frame_win.document.body.scrollHeight;
     }
 
+    function filesize_to_str(bs)
+    {
+        const val = bs === 0 ? 0 : Math.floor(Math.log(bs) / Math.log(1024));
+        return (bs / 1024**val).toFixed(1) * 1 + ['B', 'kB', 'MB', 'GB', 'TB'][val];
+    }
+
+    function html_encode(str)
+    {
+        let en = document.createElement("span");
+        en.textContent = str;
+        return en.innerHTML;
+    }
+
     function construct_file_upload(id, file, file_content)
     {
         let container = document.createElement("div");
-        container.className = "file-upload";
-        container.id = "file-id-" + id;
         let content = document.createElement("img");
         let info = document.createElement("span");
+        container.className = "file-upload";
+        container.id = "file-id-" + id;
+        
         info.className = "upload-info";
+        info.innerHTML = `<span class="filesize">${filesize_to_str(file.size)}</span> &bull; <span class="filename">${html_encode(file.name)}</span>`;
+        
         content.src = file_content;
         content.className = "upload-content";
+        
         container.appendChild(content);
         container.appendChild(info);
         return container;
@@ -313,7 +330,7 @@
                 return (e) => {
                     let file_id = filepicker_add(id, file);
                     
-                    file_upload_dom.appendChild(construct_file_upload(file_id, files, e.target.result));
+                    file_upload_dom.appendChild(construct_file_upload(file_id, file, e.target.result));
                 }
             })(file);
             reader.readAsDataURL(file);
diff --git a/dist/treebird.css b/dist/treebird.css
index 2ebaff5..cfbff8e 100644
--- a/dist/treebird.css
+++ b/dist/treebird.css
@@ -1694,13 +1694,18 @@ input[type=radio].hidden:not(:checked) + .emoji-picker-emojos
 }
 
 /* Attachments */
-.attachments img
-{
-    min-width: 100px;
-}
+/* .attachments img */
+/* { */
+/*     display: block; */
+/*     width: 487px; */
+/*     min-height: 700px; */
+/* } */
 
 .attachments
 {
+    display: block;
+    width: 487px;
+    min-height: 700px;
     margin: 10px 0 3px 0;
 }
 
@@ -2079,10 +2084,11 @@ input[type=checkbox].hidden:not(:checked) + .list-edit-content
 {
     overflow: hidden;
     display: inline-block;
+    width: 200px;
     margin: 2px 4px;
     background: linear-gradient(#fff, #f7f7f7);
     border: 1px solid #cacaca;
-    border-radius: 8px;
+    border-radius: 4px;
 }
 
 .file-upload .upload-content
@@ -2091,8 +2097,25 @@ input[type=checkbox].hidden:not(:checked) + .list-edit-content
     height: 130px;
     object-fit: cover;
     opacity: 0.4;
+    display: block;
 }
 
+.file-upload .upload-info
+{
+    background: linear-gradient(#fbfbfb, #f0f0f4);
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    padding: 4px;
+    border-top: 1px solid #bfbfc4;
+    font-size: 0.9rem;
+    color: #505050;
+}
+
+.upload-info .filesize
+{
+    font-weight: bold;
+}
 
 /******************************
  *         Scrobbles          *