feat: add minimizable/expandable prompt

frontend/src/components/prompts/UploadFiles.vue

@@ -1,8 +1,23 @@
 <template>
-  <div class="upload-files">
+  <div
+    v-if="filesInUploadCount > 0"
+    class="upload-files"
+    v-bind:class="{ closed: !open }"
+  >
     <div class="card floating">
       <div class="card-title">
-        <h2>{{ $t("prompts.uploadFiles") }}</h2>
+        <h2>{{ $t("prompts.uploadFiles", { files: filesInUploadCount }) }}</h2>
+
+        <button
+          class="action"
+          @click="toggle"
+          :aria-label="$t('sidebar.newFolder')"
+          :title="$t('sidebar.newFolder')"
+        >
+          <i class="material-icons">{{
+            open ? "keyboard_arrow_down" : "keyboard_arrow_up"
+          }}</i>
+        </button>
       </div>
 
       <div class="card-content">
@@ -13,18 +28,6 @@
           </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>
@@ -34,9 +37,18 @@ import { mapGetters } from "vuex";
 
 export default {
   name: "uploadFiles",
-  computed: {
+  data: function () {
-    ...mapGetters(["filesInUpload"]),
+    return {
+      open: false,
+    };
+  },
+  computed: {
+    ...mapGetters(["filesInUpload", "filesInUploadCount"]),
+  },
+  methods: {
+    toggle: function () {
+      this.open = !this.open;
+    },
   },
-  methods: {},
 };
 </script>

frontend/src/css/base.css

@@ -136,9 +136,11 @@ main {
 }
 
 .upload-files .card.floating {
-  top: 4em;
   left: auto;
+  top: auto;
+  margin: 0;
   right: 0;
+  bottom: 0;
   transform: none;
 }
 
@@ -163,3 +165,19 @@ main {
   transition: 0.2s ease width;
   border-radius: 10px;
 }
+
+.upload-files.closed .card-content {
+  display: none;
+  padding: 0em 1em;
+}
+
+.upload-files .card-title {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.upload-files.closed .card-title {
+  font-size: 0.7em;
+  padding: 0.5em 1em;
+}

frontend/src/i18n/en.json

@@ -151,7 +151,7 @@
     "show": "Show",
     "size": "Size",
     "upload": "Upload",
-    "uploadFiles": "Files in upload",
+    "uploadFiles": "Uploading {files} files...",
     "uploadMessage": "Select an option to upload.",
     "optionalPassword": "Optional password"
   },

frontend/src/views/Layout.vue

@@ -9,6 +9,7 @@
       <shell v-if="isExecEnabled && isLogged && user.perm.execute" />
     </main>
     <prompts></prompts>
+    <upload-files></upload-files>
   </div>
 </template>
 
@@ -17,6 +18,7 @@ import { mapState, mapGetters } from "vuex";
 import Sidebar from "@/components/Sidebar";
 import Prompts from "@/components/prompts/Prompts";
 import Shell from "@/components/Shell";
+import UploadFiles from "../components/prompts/UploadFiles";
 import { enableExec } from "@/utils/constants";
 
 export default {
@@ -25,6 +27,7 @@ export default {
     Sidebar,
     Prompts,
     Shell,
+    UploadFiles,
   },
   computed: {
     ...mapGetters(["isLogged", "progress"]),