UX: Improve torrent status line

The goal of this commit is to merge the two torrent status lines onto a
single, concise line which has high signal and information density.

- Hide download speed, upload speed, and number of peers when 0,
because that's just noise.
- Remove number of files, because that information can be found by
expanding the torrent.

This also allowed the further reduction of the torrent item height from
110px to 100px.

main/windows.js

@@ -80,7 +80,7 @@ function createWebTorrentHiddenWindow () {
 }
 
 var HEADER_HEIGHT = 37
-var TORRENT_HEIGHT = 110
+var TORRENT_HEIGHT = 100
 
 function createMainWindow () {
   if (windows.main) {

renderer/index.css

@@ -433,7 +433,7 @@ input {
 
 .torrent,
 .torrent-placeholder {
-  height: 110px;
+  height: 100px;
 }
 
 .torrent:not(:last-child) {
@@ -446,9 +446,9 @@ input {
 
 .torrent .metadata {
   position: absolute;
-  top: 20px;
-  left: 20px;
-  right: 20px;
+  top: 25px;
+  left: 15px;
+  right: 15px;
   width: calc(100% - 40px);
   text-shadow: rgba(0, 0, 0, 0.5) 0 0 4px;
 }
@@ -458,12 +458,15 @@ input {
 }
 
 .torrent .metadata span:not(:last-child)::after {
-  content: ' — ';
+  content: ' • ';
+  opacity: 0.7;
+  padding-left: 4px;
+  padding-right: 4px;
 }
 
 .torrent .buttons {
   position: absolute;
-  top: 34px;
+  top: 29px;
   right: 10px;
   align-items: center;
   display: none;
@@ -551,12 +554,6 @@ input {
   line-height: 1.5em;
 }
 
-.torrent .status,
-.torrent .status2 {
-/*  font-size: 14px;
-  line-height: 1.5em;*/
-}
-
 /*
  * TORRENT LIST: DRAG-DROP TARGET
  */

renderer/views/torrent-list.js

@@ -67,39 +67,49 @@ function TorrentList (state) {
     // If it's downloading/seeding then show progress info
     var prog = torrentSummary.progress
     if (torrentSummary.status !== 'paused' && prog) {
-      var progress = Math.floor(100 * prog.progress)
-      var downloaded = prettyBytes(prog.downloaded)
-      var total = prettyBytes(prog.length || 0)
-      if (downloaded !== total) downloaded += ` / ${total}`
-
       elements.push(hx`
         <div class='ellipsis'>
-          ${getFilesLength()}
-          <span>${getPeers()}</span>
-          <span>↓ ${prettyBytes(prog.downloadSpeed || 0)}/s</span>
-          <span>↑ ${prettyBytes(prog.uploadSpeed || 0)}/s</span>
-        </div>
-      `)
-      elements.push(hx`
-        <div class='ellipsis'>
-          <span class='progress'>${progress}%</span>
-          <span>${downloaded}</span>
+          ${renderPercentProgress()}
+          ${renderTotalProgress()}
+          ${renderDownloadSpeed()}
+          ${renderUploadSpeed()}
+          ${renderPeers()}
         </div>
       `)
     }
 
     return hx`<div class='metadata'>${elements}</div>`
 
-    function getPeers () {
-      var count = prog.numPeers === 1 ? 'peer' : 'peers'
-      return `${prog.numPeers} ${count}`
+    function renderPercentProgress () {
+      var progress = Math.floor(100 * prog.progress)
+      return hx`<span>${progress}%</span>`
     }
 
-    function getFilesLength () {
-      if (torrentSummary.files && torrentSummary.files.length > 1) {
-        return hx`<span class='files'>${torrentSummary.files.length} files</span>`
+    function renderTotalProgress () {
+      var downloaded = prettyBytes(prog.downloaded)
+      var total = prettyBytes(prog.length || 0)
+      if (downloaded === total) {
+        return hx`<span>${downloaded}</span>`
+      } else {
+        return hx`<span>${downloaded} / ${total}</span>`
       }
     }
+
+    function renderDownloadSpeed () {
+      if (prog.downloadSpeed === 0) return
+      return hx`<span>↓ ${prettyBytes(prog.downloadSpeed)}/s</span>`
+    }
+
+    function renderUploadSpeed () {
+      if (prog.uploadSpeed === 0) return
+      return hx`<span>↑ ${prettyBytes(prog.uploadSpeed)}/s</span>`
+    }
+
+    function renderPeers () {
+      if (prog.numPeers === 0) return
+      var count = prog.numPeers === 1 ? 'peer' : 'peers'
+      return hx`<span>${prog.numPeers} ${count}</span>`
+    }
   }
 
   // Download button toggles between torrenting (DL/seed) and paused