From ce01d764f5a55cfb0817b1abc4c6ac352bd5c3b4 Mon Sep 17 00:00:00 2001 From: Boik Date: Wed, 22 Mar 2017 17:14:06 +0800 Subject: [PATCH] finalize downloads page :) --- .../components/AboutMainView/Lulumi.vue | 6 --- .../AboutMainView/Preferences/Downloads.vue | 25 ++++++++++- app/src/main/index.js | 10 +++++ .../renderer/components/BrowserMainView.vue | 4 ++ .../components/BrowserMainView/Download.vue | 35 ++++++++++++--- .../components/BrowserMainView/Page.vue | 5 +++ app/src/renderer/js/lib/prettysize.js | 44 +++++++++++++++++++ app/src/renderer/vuex/actions.js | 3 ++ app/src/renderer/vuex/modules/browser.js | 23 ++++++++-- app/src/renderer/vuex/mutation-types.js | 1 + 10 files changed, 139 insertions(+), 17 deletions(-) create mode 100644 app/src/renderer/js/lib/prettysize.js diff --git a/app/src/guest/renderer/components/AboutMainView/Lulumi.vue b/app/src/guest/renderer/components/AboutMainView/Lulumi.vue index b15ba735..0db59193 100644 --- a/app/src/guest/renderer/components/AboutMainView/Lulumi.vue +++ b/app/src/guest/renderer/components/AboutMainView/Lulumi.vue @@ -18,9 +18,3 @@ }, }; - - diff --git a/app/src/guest/renderer/components/AboutMainView/Preferences/Downloads.vue b/app/src/guest/renderer/components/AboutMainView/Preferences/Downloads.vue index 614e04b7..145bbf2d 100644 --- a/app/src/guest/renderer/components/AboutMainView/Preferences/Downloads.vue +++ b/app/src/guest/renderer/components/AboutMainView/Preferences/Downloads.vue @@ -1,8 +1,10 @@ @@ -22,6 +24,7 @@ import '../../css/el-progress'; import '../../css/el-popover'; + import prettySize from '../../js/lib/prettysize'; export default { components: { @@ -32,19 +35,32 @@ }, computed: { files() { - // eslint-disable-next-line arrow-body-style - return this.$store.getters.downloads.filter((download) => { - return download.style !== 'hidden'; - }); + let tmpFiles = []; + if (this.$store.getters.downloads.length !== 0) { + // eslint-disable-next-line arrow-body-style + tmpFiles = this.$store.getters.downloads.filter((download) => { + return download.style !== 'hidden'; + }); + tmpFiles.forEach((file) => { + file.totalSize = prettySize.process(file.totalBytes); + }); + } + return tmpFiles; }, }, methods: { + prettyReceivedSize(size) { + return prettySize.process(size); + }, percentage(file) { return parseInt((file.getReceivedBytes / file.totalBytes) * 100, 10) || 0; }, showItemInFolder(savePath) { this.$electron.ipcRenderer.send('show-item-in-folder', savePath); }, + openItem(savePath) { + this.$electron.ipcRenderer.send('open-item', savePath); + }, checkStateForButtonGroup(state) { switch (state) { case 'cancelled': @@ -143,6 +159,10 @@ align-items: center; justify-content: space-around; } + .download-list__item-panel { + display: flex; + flex-direction: column; + } .download-list__item-name { color: #48576a; padding-left: 4px; @@ -154,6 +174,9 @@ text-overflow: ellipsis; width: 160px; } + .download-list__item-description { + font-size: 13px; + } .download-list__item-progress { right: 0; } diff --git a/app/src/renderer/components/BrowserMainView/Page.vue b/app/src/renderer/components/BrowserMainView/Page.vue index 5e5bebcf..736fbe98 100644 --- a/app/src/renderer/components/BrowserMainView/Page.vue +++ b/app/src/renderer/components/BrowserMainView/Page.vue @@ -236,6 +236,11 @@ this.$parent.onGetDownloads(event, this.pageIndex, data); } }); + ipc.on('set-downloads', (event, val) => { + if (this.$parent.onSetDownloads) { + this.$parent.onSetDownloads(event, this.pageIndex, val); + } + }); this.$nextTick(() => { // TODO: https://github.com/qazbnm456/lulumi-browser/issues/3 diff --git a/app/src/renderer/js/lib/prettysize.js b/app/src/renderer/js/lib/prettysize.js new file mode 100644 index 00000000..0800739b --- /dev/null +++ b/app/src/renderer/js/lib/prettysize.js @@ -0,0 +1,44 @@ +const sizes = [ + 'Bytes', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', +]; + +const prettySize = { + /** + * Pretty print a size from bytes + * @method pretty + * @param {Number} size The number to pretty print + * @param {Boolean} [nospace=false] Don't print a space + * @param {Boolean} [one=false] Only print one character + */ + process(size, nospace, one) { + let mysize; + let f; + + sizes.forEach((f, id) => { + if (one) { + f = f.slice(0, 1); + } + + const s = 1024 ** id; + let fixed; + if (size >= s) { + fixed = String((size / s).toFixed(1)); + if (fixed.indexOf('.0') === fixed.length - 2) { + fixed = fixed.slice(0, -2); + } + mysize = fixed + (nospace ? '' : ' ') + f; + } + }); + + // zero handling + // always prints in Bytes + if (!mysize) { + f = (one ? sizes[0].slice(0, 1) : sizes[0]); + mysize = `0${nospace ? '' : ' '}${f}`; + } + + return mysize; + }, +}; + +export default prettySize; diff --git a/app/src/renderer/vuex/actions.js b/app/src/renderer/vuex/actions.js index 79b83a1d..aa91db97 100644 --- a/app/src/renderer/vuex/actions.js +++ b/app/src/renderer/vuex/actions.js @@ -57,6 +57,9 @@ export const setHomepage = ({ commit }, val) => { export const setTabConfig = ({ commit }, val) => { commit(types.SET_TAB_CONFIG, val); }; +export const setDownloads = ({ commit }, val) => { + commit(types.SET_DOWNLOADS, val); +}; export const createDownloadTask = ({ commit }, file) => { commit(types.CREATE_DOWNLOAD_TASK, file); }; diff --git a/app/src/renderer/vuex/modules/browser.js b/app/src/renderer/vuex/modules/browser.js index 4ee0e960..c0d408d4 100644 --- a/app/src/renderer/vuex/modules/browser.js +++ b/app/src/renderer/vuex/modules/browser.js @@ -167,26 +167,41 @@ const mutations = { [types.SET_TAB_CONFIG](state, val) { state.tabConfig = val; }, + [types.SET_DOWNLOADS](state, val) { + state.downloads = val; + }, // downloads handlers [types.CREATE_DOWNLOAD_TASK](state, file) { state.downloads.push(file); }, [types.UPDATE_DOWNLOADS_PROGRESS](state, file) { - state.downloads.forEach((download) => { + state.downloads.every((download) => { if (download.startTime === file.startTime) { download.getReceivedBytes = file.getReceivedBytes; download.savePath = file.savePath; download.isPaused = file.isPaused; download.canResume = file.canResume; download.state = file.state; + return false; + // eslint-disable-next-line no-else-return + } else { + return true; } }); }, [types.COMPLETE_DOWNLOADS_PROGRESS](state, file) { - state.downloads.forEach((download) => { + state.downloads.every((download, index) => { if (download.startTime === file.startTime) { - download.name = file.name; - download.state = file.state; + if (download.savePath === '') { + state.downloads.splice(index, 1); + } else { + download.name = file.name; + download.state = file.state; + } + return false; + // eslint-disable-next-line no-else-return + } else { + return true; } }); }, diff --git a/app/src/renderer/vuex/mutation-types.js b/app/src/renderer/vuex/mutation-types.js index 7ed93021..a539d62c 100644 --- a/app/src/renderer/vuex/mutation-types.js +++ b/app/src/renderer/vuex/mutation-types.js @@ -19,6 +19,7 @@ export const UPDATE_LOCATION = 'UPDATE_LOCATION'; export const SET_CURRENT_SEARCH_ENGINE_PROVIDER = 'SET_CURRENT_SEARCH_ENGINE_PROVIDER'; export const SET_HOMEPAGE = 'SET_HOMEPAGE'; export const SET_TAB_CONFIG = 'SET_TAB_CONFIG'; +export const SET_DOWNLOADS = 'SET_DOWNLOADS'; export const CREATE_DOWNLOAD_TASK = 'CREATE_DOWNLOAD_TASK'; export const UPDATE_DOWNLOADS_PROGRESS = 'UPDATE_DOWNLOADS_PROGRESS'; export const COMPLETE_DOWNLOADS_PROGRESS = 'COMPLETE_DOWNLOADS_PROGRESS';