add progress text and network speeds (#268)

* add WIP progress text * refactor * replace ... with ellipsis character * style download speed stats
dat-ecosystem-archive · Feb 23, 2017 · a4068f0 · a4068f0
1 parent 52d20c4
commit a4068f0
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 19 deletions.
diff --git a/elements/status.js b/elements/status.js
@@ -9,8 +9,7 @@ const progressbar = css`
 
     min-width: 8rem;
     overflow: hidden;
-    padding-top: .85rem;
-    padding-bottom: .5rem;
+    padding-top: .4rem;
     .bar {
       height: var(--progress-height);
       width: calc(100% - var(--counter-width));
@@ -72,25 +71,49 @@ const progressbar = css`
     }
   }
 `
+
+const progressSubline = css`
+  :host {
+    .arrow {
+      vertical-align: top;
+    }
+  }
+`
+
 module.exports = function (dat, stats, send) {
   if (dat.owner && dat.importer) {
-    return html`<div>Watching for updates...</div>`
+    return html`<div>Watching for updates…</div>`
   }
   var progressbarLine = (stats.state === 'loading')
     ? 'line-loading'
     : (stats.state === 'paused')
       ? 'line-paused'
       : 'line-complete'
+  var netStats = dat.stats.network
+  var progressText = (stats.progress === 100)
+    ? `Complete. ↑ ${speed(dat.network.uploadSpeed)}`
+    : (dat.network.connected) ? html`<span><span class="arrow">↓</span> ${speed(netStats.downloadSpeed)}<span class="arrow ml2">↑</span> ${speed(netStats.uploadSpeed)}</span>`
+    : 'waiting for peers…'
+  function speed (n) {
+    return `${n || 0}kB/s`
+  }
 
   return html`
-    <div class="${progressbar}">
-      <div class="counter">
-        ${stats.progress}%
-      </div>
-      <div class="bar">
-        <div class="line ${progressbarLine}" style="width: ${stats.progress}%">
+    <div>
+      <div class="${progressbar}">
+        <div class="counter">
+          ${stats.progress}%
+        </div>
+        <div class="bar">
+          <div class="line ${progressbarLine}" style="width: ${stats.progress}%">
+          </div>
         </div>
       </div>
+      <p class="f7 color-neutral-60 truncate">
+        <span class="${progressSubline}">
+          ${progressText}
+        </span>
+      </p>
     </div>
   `
 }
diff --git a/elements/table.js b/elements/table.js
@@ -11,6 +11,9 @@ const icon = require('./icon')
 const table = css`
   :host {
     width: 100%;
+    tr:odd:hover td {
+      background: red;
+    }
     th,
     td {
       padding-right: .75rem;
@@ -34,7 +37,7 @@ const table = css`
     }
     td {
       height: 4rem;
-      vertical-align: middle;
+      vertical-align: top;
       padding-top: 1rem;
     }
     tr:hover td {
@@ -63,7 +66,7 @@ const table = css`
       width: 26vw;
     }
     .row-action {
-      height: 2rem;
+      height: 1.5rem;
       display: inline-block;
       border: 0;
       background: transparent;
@@ -115,8 +118,8 @@ function tableElement (dats, send) {
             <th class="cell-1"></th>
             <th class="tl cell-2">Link</th>
             <th class="tl cell-3">Status</th>
-            <th class="tr cell-4">Size</th>
-            <th class="tr cell-5">Network</th>
+            <th class="tl cell-4">Size</th>
+            <th class="tl cell-5">Peers</th>
             <th class="cell-6"></th>
           </tr>
         </thead>
@@ -214,7 +217,7 @@ function row (dat, send) {
       </td>
       <td class="cell-2">
         <div class="cell-truncate">
-          <h2 class="normal truncate">
+          <h2 class="f6 normal truncate">
             ${title}
           </h2>
           <p class="f7 color-neutral-60 truncate">

diff --git a/lib/auto-updater.js b/lib/auto-updater.js
@@ -12,7 +12,7 @@ module.exports = ({ log }) => {
   autoUpdater.setFeedURL(`http://dat.land:6000/update/${platform}/${version}`)
   autoUpdater.on('error', onerror)
   autoUpdater.on('checking-for-update', () => log('checking for update'))
-  autoUpdater.on('update-available', () => log('update available, downloading...'))
+  autoUpdater.on('update-available', () => log('update available, downloading…'))
   autoUpdater.on('update-not-available', () => log('update not available'))
   autoUpdater.on('download-progress', p => log('download progress ' + p.percent))
   autoUpdater.on('update-downloaded', (ev, notes, version) => {
@@ -27,12 +27,11 @@ module.exports = ({ log }) => {
     }, res => {
       const update = res === 0
       if (!update) return log('dismiss')
-      log('updating...')
+      log('updating…')
       autoUpdater.quitAndInstall()
     })
   })
 
   setTimeout(() => autoUpdater.checkForUpdates(), ms('10s'))
   setInterval(() => autoUpdater.checkForUpdates(), ms('30m'))
 }
-
diff --git a/lib/browserify.js b/lib/browserify.js
@@ -47,7 +47,7 @@ module.exports = opts => {
   b.transform('sheetify/transform', { use: ['sheetify-nested'] })
 
   const bundle = () => {
-    process.stderr.write(`${new Date()} bundling...`)
+    process.stderr.write(`${new Date()} bundling…`)
 
     b.bundle().pipe(concat(js => {
       fs.writeFile(`${__dirname}/../bundle.js`, js, err => {

diff --git a/package.json b/package.json
@@ -16,7 +16,7 @@
     "dat-doctor": "^1.2.2",
     "dat-encoding": "^4.0.1",
     "dat-icons": "^1.3.0",
-    "dat-worker": "^5.9.1",
+    "dat-worker": "^5.10.0",
     "electron-auto-updater": "^0.9.2",
     "electron-default-menu": "^1.0.0",
     "electron-window": "^0.8.1",