From 7a639e410bc13f0d35dc19d50b72379fa56990ad Mon Sep 17 00:00:00 2001
From: filippofinke <filippofinke@protonmail.ch>
Date: Thu, 17 Feb 2022 22:58:34 +0100
Subject: [PATCH] feat: add icons

---
 frontend/src/components/prompts/UploadFiles.vue | 17 ++++++++++++-----
 frontend/src/css/base.css                       | 14 +++++++++++---
 frontend/src/store/getters.js                   |  8 +++++++-
 frontend/src/utils/upload.js                    | 10 ++++++++++
 4 files changed, 40 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/prompts/UploadFiles.vue b/frontend/src/components/prompts/UploadFiles.vue
index 8ba6ff62..20b9f5bf 100644
--- a/frontend/src/components/prompts/UploadFiles.vue
+++ b/frontend/src/components/prompts/UploadFiles.vue
@@ -11,8 +11,8 @@
         <button
           class="action"
           @click="toggle"
-          :aria-label="$t('sidebar.newFolder')"
-          :title="$t('sidebar.newFolder')"
+          aria-label="Toggle file upload list"
+          title="Toggle file upload list"
         >
           <i class="material-icons">{{
             open ? "keyboard_arrow_down" : "keyboard_arrow_up"
@@ -20,9 +20,16 @@
         </button>
       </div>
 
-      <div class="card-content">
-        <div class="file" v-for="file in filesInUpload" :key="file.id">
-          <div class="file-name">{{ file.name }}</div>
+      <div class="card-content file-icons">
+        <div
+          class="file"
+          v-for="file in filesInUpload"
+          :key="file.id"
+          :data-type="file.type"
+        >
+          <div class="file-name">
+            <i class="material-icons"></i> {{ file.name }}
+          </div>
           <div class="file-progress">
             <div v-bind:style="{ width: file.progress + '%' }"></div>
           </div>
diff --git a/frontend/src/css/base.css b/frontend/src/css/base.css
index 124d9054..ac2d4c93 100644
--- a/frontend/src/css/base.css
+++ b/frontend/src/css/base.css
@@ -150,6 +150,12 @@ main {
 
 .upload-files .file .file-name {
   font-size: 1.1em;
+  display: flex;
+  align-items: center;
+}
+
+.upload-files .file .file-name i {
+  margin-right: 5px;
 }
 
 .upload-files .file .file-progress {
@@ -168,16 +174,18 @@ main {
 
 .upload-files.closed .card-content {
   display: none;
-  padding: 0em 1em;
+  padding: 0em 1em 1em 1em;
 }
 
-.upload-files .card-title {
+.upload-files .card .card-title {
   display: flex;
   align-items: center;
   justify-content: center;
+  font-size: 0.8em;
+  padding: 1em 1em 0em;
 }
 
 .upload-files.closed .card-title {
   font-size: 0.7em;
   padding: 0.5em 1em;
-}
+}
\ No newline at end of file
diff --git a/frontend/src/store/getters.js b/frontend/src/store/getters.js
index ed3e3b4c..eee94fe2 100644
--- a/frontend/src/store/getters.js
+++ b/frontend/src/store/getters.js
@@ -24,11 +24,17 @@ const getters = {
     for (let index in state.upload.uploads) {
       let upload = state.upload.uploads[index];
       let id = upload.id;
+      let type = upload.type;
       let name = decodeURIComponent(upload.path.replace(/^.*[\\/]/, ""));
       let progress = state.upload.progress[id];
       let size = state.upload.sizes[id];
 
-      files.push({ id, name, progress: Math.ceil((progress / size) * 100) });
+      files.push({
+        id,
+        name,
+        progress: Math.ceil((progress / size) * 100),
+        type,
+      });
     }
 
     return files.sort((a, b) => a.progress - b.progress);
diff --git a/frontend/src/utils/upload.js b/frontend/src/utils/upload.js
index 1ab4bb65..e1222024 100644
--- a/frontend/src/utils/upload.js
+++ b/frontend/src/utils/upload.js
@@ -99,6 +99,15 @@ export function scanFiles(dt) {
   });
 }
 
+function detectType(mimetype) {
+  if (mimetype.startsWith("video")) return "video";
+  if (mimetype.startsWith("audio")) return "audio";
+  if (mimetype.startsWith("image")) return "image";
+  if (mimetype.startsWith("pdf")) return "pdf";
+  if (mimetype.startsWith("text")) return "text";
+  return "blob";
+}
+
 export function handleFiles(files, base, overwrite = false) {
   for (let i = 0; i < files.length; i++) {
     let id = store.state.upload.id;
@@ -120,6 +129,7 @@ export function handleFiles(files, base, overwrite = false) {
       path,
       file,
       overwrite,
+      type: detectType(file.type),
     };
 
     store.dispatch("upload/upload", item);