diff --git a/frontend/src/css/base.css b/frontend/src/css/base.css index bf34798b..3ead3883 100644 --- a/frontend/src/css/base.css +++ b/frontend/src/css/base.css @@ -1,5 +1,5 @@ body { - font-family: 'Roboto', sans-serif; + font-family: "Roboto", sans-serif; padding-top: 4em; background-color: #fafafa; color: #333333; @@ -13,7 +13,7 @@ body { *:hover, *:active, *:focus { - outline: 0 + outline: 0; } a { @@ -44,7 +44,7 @@ i.spin { } #app { - transition: .2s ease padding; + transition: 0.2s ease padding; } #app.multiple { @@ -63,17 +63,17 @@ nav .action { display: block; border-radius: 0; font-size: 1.1em; - padding: .5em; + padding: 0.5em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } -nav>div { +nav > div { border-top: 1px solid rgba(0, 0, 0, 0.05); } -nav .action>* { +nav .action > * { vertical-align: middle; } @@ -97,34 +97,49 @@ main { .breadcrumbs a { color: inherit; - transition: .1s ease-in; - border-radius: .125em; + transition: 0.1s ease-in; + border-radius: 0.125em; } .breadcrumbs a:hover { - background-color: rgba(0,0,0, 0.05); + background-color: rgba(0, 0, 0, 0.05); } .breadcrumbs span a { - padding: .2em; + padding: 0.2em; } -#progress { - position: fixed; - top: 0; - left: 0; +.files { + position: absolute; + bottom: 30px; width: 100%; - height: 3px; +} + +.progress { + position: absolute; + bottom: 0; + width: 100%; + height: 30px; z-index: 9999999999; } -#progress div { +.progress div, +.files div div { height: 100%; background-color: #40c4ff; width: 0; - transition: .2s ease width; + 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; -} \ No newline at end of file +} diff --git a/frontend/src/store/getters.js b/frontend/src/store/getters.js index 8f1a8a4c..1506afd5 100644 --- a/frontend/src/store/getters.js +++ b/frontend/src/store/getters.js @@ -8,8 +8,25 @@ const getters = { return 0; } + let totalSize = state.upload.sizes.reduce((a, b) => a + b, 0); + let sum = state.upload.progress.reduce((acc, val) => acc + val); - return Math.ceil((sum / state.upload.size) * 100); + return Math.ceil((sum / totalSize) * 100); + }, + files: (state) => { + let files = []; + + for (let index in state.upload.uploads) { + let upload = state.upload.uploads[index]; + let id = upload.id; + 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) }); + } + + return files; }, }; diff --git a/frontend/src/store/modules/upload.js b/frontend/src/store/modules/upload.js index b1a59bc8..b5137e74 100644 --- a/frontend/src/store/modules/upload.js +++ b/frontend/src/store/modules/upload.js @@ -7,7 +7,7 @@ const UPLOADS_LIMIT = 5; const state = { id: 0, - size: 0, + sizes: [], progress: [], queue: [], uploads: {}, @@ -19,12 +19,12 @@ const mutations = { }, reset: (state) => { state.id = 0; - state.size = 0; + state.sizes = []; state.progress = []; }, addJob: (state, item) => { state.queue.push(item); - state.size += item.file.size; + state.sizes[state.id] = item.file.size; state.id++; }, moveJob(state) { diff --git a/frontend/src/views/Layout.vue b/frontend/src/views/Layout.vue index e9f306dc..0e4fd092 100644 --- a/frontend/src/views/Layout.vue +++ b/frontend/src/views/Layout.vue @@ -1,7 +1,16 @@