From 7f421b421fd62eb9e7a93a0c73db3eb56a9ccccf Mon Sep 17 00:00:00 2001
From: filippofinke <filippofinke@protonmail.ch>
Date: Tue, 15 Feb 2022 22:22:31 +0100
Subject: [PATCH] feat: add uploadFiles prompt

---
 frontend/src/components/prompts/Prompts.vue   |  7 +--
 .../src/components/prompts/UploadFiles.vue    | 36 ++++++++++++++
 frontend/src/css/base.css                     | 48 +++++++++++++------
 frontend/src/i18n/en.json                     |  3 +-
 4 files changed, 76 insertions(+), 18 deletions(-)
 create mode 100644 frontend/src/components/prompts/UploadFiles.vue

diff --git a/frontend/src/components/prompts/Prompts.vue b/frontend/src/components/prompts/Prompts.vue
index 36cb0349..3bd80f99 100644
--- a/frontend/src/components/prompts/Prompts.vue
+++ b/frontend/src/components/prompts/Prompts.vue
@@ -19,6 +19,7 @@ import Replace from "./Replace";
 import ReplaceRename from "./ReplaceRename";
 import Share from "./Share";
 import Upload from "./Upload";
+import UploadFiles from "./UploadFiles";
 import ShareDelete from "./ShareDelete";
 import { mapState } from "vuex";
 import buttons from "@/utils/buttons";
@@ -40,6 +41,7 @@ export default {
     ReplaceRename,
     Upload,
     ShareDelete,
+    UploadFiles,
   },
   data: function () {
     return {
@@ -99,15 +101,14 @@ export default {
           "replace-rename",
           "share",
           "upload",
+          "uploadFiles",
           "share-delete",
         ].indexOf(this.show) >= 0;
 
       return (matched && this.show) || null;
     },
     showOverlay: function () {
-      return (
-        this.show !== null && this.show !== "search" && this.show !== "more"
-      );
+      return this.show !== null && this.show !== "search" && this.show !== "more";
     },
   },
   methods: {
diff --git a/frontend/src/components/prompts/UploadFiles.vue b/frontend/src/components/prompts/UploadFiles.vue
new file mode 100644
index 00000000..9ef86eff
--- /dev/null
+++ b/frontend/src/components/prompts/UploadFiles.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="upload-files">
+    <div class="card floating">
+      <div class="card-title">
+        <h2>{{ $t("prompts.uploadFiles") }}</h2>
+      </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="file-progress">
+            <div v-bind:style="{ width: file.progress + '%' }"></div>
+          </div>
+        </div>
+      </div>
+
+      <div class="card-action">
+        <button type="submit" @click="$store.commit('closeHovers')" class="button button--flat" :aria-label="$t('buttons.close')" :title="$t('buttons.close')">
+          {{ $t("buttons.close") }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+
+export default {
+  name: "uploadFiles",
+  computed: {
+    ...mapGetters(["filesInUpload"]),
+  },
+  methods: {},
+};
+</script>
diff --git a/frontend/src/css/base.css b/frontend/src/css/base.css
index 3ead3883..a91a076a 100644
--- a/frontend/src/css/base.css
+++ b/frontend/src/css/base.css
@@ -116,30 +116,50 @@ main {
 }
 
 .progress {
-  position: absolute;
-  bottom: 0;
+  position: fixed;
+  top: 0;
+  left: 0;
   width: 100%;
-  height: 30px;
+  height: 3px;
   z-index: 9999999999;
 }
 
-.progress div,
-.files div div {
+.progress div {
   height: 100%;
   background-color: #40c4ff;
   width: 0;
   transition: 0.2s ease width;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.files div div {
-  height: 30px;
-  overflow: hidden;
-  background-color: #329fd1;
 }
 
 .break-word {
   word-break: break-all;
 }
+
+.upload-files .card.floating {
+  top: 4em;
+  left: auto;
+  right: 0;
+  transform: none;
+}
+
+.upload-files .file {
+  margin-bottom: 8px;
+}
+
+.upload-files .file .file-name {
+  font-size: 1.1em;
+}
+
+.upload-files .file .file-progress {
+  margin-top: 2px;
+  width: 100%;
+  height: 5px;
+}
+
+.upload-files .file .file-progress div {
+  height: 100%;
+  background-color: #40c4ff;
+  width: 0;
+  transition: 0.2s ease width;
+  border-radius: 10px;
+}
diff --git a/frontend/src/i18n/en.json b/frontend/src/i18n/en.json
index 76a1d06a..001764e3 100644
--- a/frontend/src/i18n/en.json
+++ b/frontend/src/i18n/en.json
@@ -100,7 +100,7 @@
     "ru": "Русский",
     "sk": "Slovenčina",
     "svSE": "Swedish (Sweden)",
-    "tr" : "Türkçe",
+    "tr": "Türkçe",
     "ua": "Українська",
     "zhCN": "中文 (简体)",
     "zhTW": "中文 (繁體)"
@@ -151,6 +151,7 @@
     "show": "Show",
     "size": "Size",
     "upload": "Upload",
+    "uploadFiles": "Files in upload",
     "uploadMessage": "Select an option to upload.",
     "optionalPassword": "Optional password"
   },