finalize downloads page :)

app/src/guest/renderer/components/AboutMainView/Lulumi.vue

@@ -18,9 +18,3 @@
     },
   };
 </script>
-
-<style scoped>
-  html {
-    background-color: #eee;
-  }
-</style>

app/src/guest/renderer/components/AboutMainView/Preferences/Downloads.vue

@@ -1,8 +1,10 @@
 <template lang="pug">
   div
     h1 Downloads
+    el-button#downloads-clear(type="info", @click="setDownloads") Clear
     ul(class="download-list")
       li(v-for="(file, index) in files", :key="index", class="download-list__item")
+        span(class="el-icon-close", @click="setDownloads(index)")
         el-progress(:status="checkStateForProgress(file.state)", :text-inside="true", :percentage="percentage(file)", :stroke-width="18", class="download-list__item-progress")
         a(class="download-list__item-name", :href="`${file.url}`")
           i(class="el-icon-document") {{ file.name }}
@@ -34,6 +36,15 @@
       percentage(file) {
         return parseInt((file.getReceivedBytes / file.totalBytes) * 100, 10) || 0;
       },
+      setDownloads(index) {
+        if (index) {
+          this.files.splice(index, 1);
+        } else {
+          this.files = [];
+        }
+        // eslint-disable-next-line no-undef
+        ipcRenderer.send('set-downloads', this.files);
+      },
       showItemInFolder(savePath) {
         // eslint-disable-next-line no-undef
         ipcRenderer.send('show-item-in-folder', savePath);
@@ -99,11 +110,18 @@
     align-items: center;
     justify-content: space-around;
   }
+  a.download-list__item-name:link {
+    text-decoration: none;
+  }
+  a.download-list__item-name:hover {
+    color: green;
+    text-decoration: none;
+  }
   .download-list__item-name {
     color: #48576a;
     padding-left: 4px;
     transition: color .3s;
-    flex: 5
+    flex: 5;
   }
   .download-list__item-name > i {
     overflow: hidden;
@@ -115,4 +133,9 @@
     right: 0;
     flex: 1;
   }
+  #downloads-clear {
+    top: 10px;
+    right: 50px;
+    position: absolute;
+  }
 </style>

app/src/main/index.js

@@ -190,6 +190,12 @@ ipcMain.on('show-item-in-folder', (event, path) => {
   }
 });
 
+ipcMain.on('open-item', (event, path) => {
+  if (path) {
+    shell.openItem(path);
+  }
+});
+
 ipcMain.on('lulumi-scheme-loaded', (event, val) => {
   const type = val.substr((config.lulumiPagesCustomProtocol).length).split('/')[0];
   const data = {};
@@ -295,3 +301,7 @@ ipcMain.on('set-homepage', (event, val) => {
 ipcMain.on('set-tab-config', (event, val) => {
   mainWindow.webContents.send('set-tab-config', val);
 });
+
+ipcMain.on('set-downloads', (event, val) => {
+  mainWindow.webContents.send('set-downloads', val);
+});

app/src/renderer/components/BrowserMainView.vue

@@ -288,6 +288,10 @@
           this.getWebView(pageIndex).send('guest-here-your-data', this.$store.getters.downloads);
         }
       },
+      onSetDownloads(event, pageIndex, val) {
+        this.$store.dispatch('setDownloads', val);
+        this.getWebView(pageIndex).send('guest-here-your-data', this.$store.getters.downloads);
+      },
       // tabHandlers
       onNewTab(location) {
         this.$store.dispatch('incrementPid');

app/src/renderer/components/BrowserMainView/Download.vue

@@ -11,8 +11,10 @@
             el-button(:disabled="file.state !== 'progressing'", :plain="true", type="danger", size="mini", icon="circle-close", @click="cancelDownload(file.startTime)")
             el-button(:disabled="file.state === 'cancelled'", :plain="true", type="info", size="mini", icon="document", @click="showItemInFolder(file.savePath)")
           li(class="download-list__item", slot="reference")
-            a(class="download-list__item-name", :href="`${file.url}`")
-              i(class="el-icon-document") {{ file.name }}
+            div(class="download-list__item-panel")
+              a(class="download-list__item-name", href='#', @click.prevent="openItem(file.savePath)")
+                i(class="el-icon-document") {{ file.name }}
+              span(class="download-list__item-description") {{ file.state === 'progressing' ? `${prettyReceivedSize(file.getReceivedBytes)}/${file.totalSize}`: file.state }}
             el-progress(:status="checkStateForProgress(file.state)", type="circle", :percentage="percentage(file)", :width="30", :stroke-width="3", class="download-list__item-progress")
       span#download-bar-close(class="el-icon-close", @click="closeDownloadBar")
 </template>
@@ -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;
   }

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

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;

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);
 };

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;
       }
     });
   },

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';