diff --git a/frontend/src/components/prompts/UploadFiles.vue b/frontend/src/components/prompts/UploadFiles.vue index d0bf7cc3..8ba6ff62 100644 --- a/frontend/src/components/prompts/UploadFiles.vue +++ b/frontend/src/components/prompts/UploadFiles.vue @@ -1,8 +1,23 @@ - + - {{ $t("prompts.uploadFiles") }} + {{ $t("prompts.uploadFiles", { files: filesInUploadCount }) }} + + + {{ + open ? "keyboard_arrow_down" : "keyboard_arrow_up" + }} + @@ -13,18 +28,6 @@ - - - - {{ $t("buttons.close") }} - - @@ -34,9 +37,18 @@ import { mapGetters } from "vuex"; export default { name: "uploadFiles", - computed: { - ...mapGetters(["filesInUpload"]), + data: function () { + return { + open: false, + }; + }, + computed: { + ...mapGetters(["filesInUpload", "filesInUploadCount"]), + }, + methods: { + toggle: function () { + this.open = !this.open; + }, }, - methods: {}, }; diff --git a/frontend/src/css/base.css b/frontend/src/css/base.css index a91a076a..124d9054 100644 --- a/frontend/src/css/base.css +++ b/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; +} diff --git a/frontend/src/i18n/en.json b/frontend/src/i18n/en.json index 001764e3..182c6c08 100644 --- a/frontend/src/i18n/en.json +++ b/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" }, diff --git a/frontend/src/views/Layout.vue b/frontend/src/views/Layout.vue index 3496a154..4ccc441f 100644 --- a/frontend/src/views/Layout.vue +++ b/frontend/src/views/Layout.vue @@ -9,6 +9,7 @@ + @@ -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"]),