From f58c014fdd955abad2f002adedc08c754549e0ae Mon Sep 17 00:00:00 2001 From: Feross Aboukhadijeh Date: Wed, 11 May 2016 20:49:41 +0200 Subject: [PATCH 1/4] UI: Reduce font size, list item height - Reduce torrent list item from 120px to 110px height - Vertically center torrent list buttons - Reduce font sizes (torrent list, modal labels) --- main/windows.js | 2 +- renderer/index.css | 11 +++++------ renderer/views/torrent-list.js | 4 ++-- 3 files changed, 8 insertions(+), 9 deletions(-) diff --git a/main/windows.js b/main/windows.js index 33189df5a1..6ea2cbd4f7 100644 --- 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 = 110 function createMainWindow () { if (windows.main) { diff --git a/renderer/index.css b/renderer/index.css index d3e30f5186..3ef86c7398 100644 --- 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: 110px; } .torrent:not(:last-child) { @@ -464,7 +463,7 @@ input { .torrent .buttons { position: absolute; - top: 25px; + top: 34px; right: 10px; align-items: center; display: none; @@ -547,15 +546,15 @@ 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; +/* font-size: 14px; + line-height: 1.5em;*/ } /* diff --git a/renderer/views/torrent-list.js b/renderer/views/torrent-list.js index 401b349445..ed4880af28 100644 --- a/renderer/views/torrent-list.js +++ b/renderer/views/torrent-list.js @@ -73,7 +73,7 @@ function TorrentList (state) { if (downloaded !== total) downloaded += ` / ${total}` elements.push(hx` -
+
${getFilesLength()} ${getPeers()} ↓ ${prettyBytes(prog.downloadSpeed || 0)}/s @@ -81,7 +81,7 @@ function TorrentList (state) {
`) elements.push(hx` -
+
${progress}% ${downloaded}
From 16c6a9b8947e249a90d527b35f6f66862657e7b7 Mon Sep 17 00:00:00 2001 From: Feross Aboukhadijeh Date: Wed, 11 May 2016 21:26:18 +0200 Subject: [PATCH 2/4] Default window height shows all torrents --- main/windows.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/main/windows.js b/main/windows.js index 6ea2cbd4f7..ad9b121f3f 100644 --- a/main/windows.js +++ b/main/windows.js @@ -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) win.setSheetOffset(HEADER_HEIGHT) From 96d912ecd89afad4d6a73a9a35a1e11b077f3266 Mon Sep 17 00:00:00 2001 From: Feross Aboukhadijeh Date: Wed, 11 May 2016 21:29:46 +0200 Subject: [PATCH 3/4] 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 | 2 +- renderer/index.css | 21 ++++++-------- renderer/views/torrent-list.js | 52 ++++++++++++++++++++-------------- 3 files changed, 41 insertions(+), 34 deletions(-) diff --git a/main/windows.js b/main/windows.js index ad9b121f3f..4aeb55f44b 100644 --- a/main/windows.js +++ b/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) { diff --git a/renderer/index.css b/renderer/index.css index 3ef86c7398..096c696739 100644 --- a/renderer/index.css +++ b/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 */ diff --git a/renderer/views/torrent-list.js b/renderer/views/torrent-list.js index ed4880af28..8d43054b96 100644 --- 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` -
- ${getFilesLength()} - ${getPeers()} - ↓ ${prettyBytes(prog.downloadSpeed || 0)}/s - ↑ ${prettyBytes(prog.uploadSpeed || 0)}/s -
- `) elements.push(hx`
- ${progress}% - ${downloaded} + ${renderPercentProgress()} + ${renderTotalProgress()} + ${renderDownloadSpeed()} + ${renderUploadSpeed()} + ${renderPeers()}
`) } return hx`
${elements}
` - function getPeers () { - var count = prog.numPeers === 1 ? 'peer' : 'peers' - return `${prog.numPeers} ${count}` + function renderPercentProgress () { + var progress = Math.floor(100 * prog.progress) + return hx`${progress}%` } - function getFilesLength () { - if (torrentSummary.files && torrentSummary.files.length > 1) { - return hx`${torrentSummary.files.length} files` + function renderTotalProgress () { + var downloaded = prettyBytes(prog.downloaded) + var total = prettyBytes(prog.length || 0) + if (downloaded === total) { + return hx`${downloaded}` + } else { + return hx`${downloaded} / ${total}` } } + + function renderDownloadSpeed () { + if (prog.downloadSpeed === 0) return + return hx`↓ ${prettyBytes(prog.downloadSpeed)}/s` + } + + function renderUploadSpeed () { + if (prog.uploadSpeed === 0) return + return hx`↑ ${prettyBytes(prog.uploadSpeed)}/s` + } + + function renderPeers () { + if (prog.numPeers === 0) return + var count = prog.numPeers === 1 ? 'peer' : 'peers' + return hx`${prog.numPeers} ${count}` + } } // Download button toggles between torrenting (DL/seed) and paused From 76762db6d94339cca50834cd66786bb38bc1a8d2 Mon Sep 17 00:00:00 2001 From: Feross Aboukhadijeh Date: Thu, 12 May 2016 16:50:58 -0700 Subject: [PATCH 4/4] Put peers before speeds, to reduce bouncing When speed goes to zero, it disappears, which looks weird when it's not the last item on the status line. --- renderer/views/torrent-list.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/renderer/views/torrent-list.js b/renderer/views/torrent-list.js index 8d43054b96..615fc92f83 100644 --- a/renderer/views/torrent-list.js +++ b/renderer/views/torrent-list.js @@ -71,9 +71,9 @@ function TorrentList (state) {
${renderPercentProgress()} ${renderTotalProgress()} + ${renderPeers()} ${renderDownloadSpeed()} ${renderUploadSpeed()} - ${renderPeers()}
`) } @@ -95,6 +95,12 @@ function TorrentList (state) { } } + function renderPeers () { + if (prog.numPeers === 0) return + var count = prog.numPeers === 1 ? 'peer' : 'peers' + return hx`${prog.numPeers} ${count}` + } + function renderDownloadSpeed () { if (prog.downloadSpeed === 0) return return hx`↓ ${prettyBytes(prog.downloadSpeed)}/s` @@ -104,12 +110,6 @@ function TorrentList (state) { if (prog.uploadSpeed === 0) return return hx`↑ ${prettyBytes(prog.uploadSpeed)}/s` } - - function renderPeers () { - if (prog.numPeers === 0) return - var count = prog.numPeers === 1 ? 'peer' : 'peers' - return hx`${prog.numPeers} ${count}` - } } // Download button toggles between torrenting (DL/seed) and paused