Merge pull request webtorrent#490 from feross/smaller-ui

UI tweaks: Reduce font size, list item height, single torrent status line
mathiasvr · May 12, 2016 · 2085312 · 2085312
2 parents 8687394 + 744d382
commit 2085312
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 38 deletions.
diff --git a/main/windows.js b/main/windows.js
@@ -80,7 +80,7 @@ function createWebTorrentHiddenWindow () {
 }
 
 var HEADER_HEIGHT = 37
-var TORRENT_HEIGHT = 120
+var TORRENT_HEIGHT = 100
 
 function createMainWindow () {
   if (windows.main) {
@@ -97,7 +97,7 @@ function createMainWindow () {
     titleBarStyle: 'hidden-inset', // Hide OS chrome, except traffic light buttons (OS X)
     useContentSize: true, // Specify web page size without OS chrome
     width: 500,
-    height: HEADER_HEIGHT + (TORRENT_HEIGHT * 5) // header height + 4 torrents
+    height: HEADER_HEIGHT + (TORRENT_HEIGHT * 6) // header height + 5 torrents
   })
   win.loadURL(config.WINDOW_MAIN)
   if (process.platform === 'darwin') {

diff --git a/renderer/index.css b/renderer/index.css
@@ -276,7 +276,6 @@ table {
 }
 
 .modal label {
-  font-size: 16px;
   font-weight: bold;
 }
 
@@ -434,7 +433,7 @@ input {
 
 .torrent,
 .torrent-placeholder {
-  height: 120px;
+  height: 100px;
 }
 
 .torrent:not(:last-child) {
@@ -447,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;
 }
@@ -459,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: 25px;
+  top: 29px;
   right: 10px;
   align-items: center;
   display: none;
@@ -547,17 +549,11 @@ input {
 }
 
 .torrent .name {
-  font-size: 1.5em;
+  font-size: 18px;
   font-weight: bold;
   line-height: 1.5em;
 }
 
-.torrent .status,
-.torrent .status2 {
-  font-size: 1em;
-  line-height: 1.5em;
-}
-
 /*
  * TORRENT LIST: DRAG-DROP TARGET
  */

diff --git a/renderer/views/torrent-list.js b/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='status 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='status2 ellipsis'>
-          <span class='progress'>${progress}%</span>
-          <span>${downloaded}</span>
+        <div class='ellipsis'>
+          ${renderPercentProgress()}
+          ${renderTotalProgress()}
+          ${renderPeers()}
+          ${renderDownloadSpeed()}
+          ${renderUploadSpeed()}
         </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 renderPeers () {
+      if (prog.numPeers === 0) return
+      var count = prog.numPeers === 1 ? 'peer' : 'peers'
+      return hx`<span>${prog.numPeers} ${count}</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>`
+    }
   }
 
   // Download button toggles between torrenting (DL/seed) and paused