Compact view for torrent list

src/renderer/components/header.js

@@ -30,6 +30,7 @@ class Header extends React.Component {
           </i>
         </div>
         <div className='nav right float-right'>
+          {this.getListButton()}
           {this.getAddButton()}
         </div>
       </div>
@@ -42,6 +43,30 @@ class Header extends React.Component {
     return (<div className='title ellipsis'>{state.window.title}</div>)
   }
 
+  getListButton () {
+    const state = this.props.state
+    if (state.location.url() !== 'home') return null
+
+    const compact = state.compactListView
+    if (compact) {
+      return (
+        <i className='icon view_list'
+          title='List'
+          onClick={dispatcher('viewList')}>
+          view_list
+        </i>
+      )
+    } else {
+      return (
+        <i className='icon list'
+          title='Compact list'
+          onClick={dispatcher('compactViewList')}>
+          list
+        </i>
+      )
+    }
+  }
+
   getAddButton () {
     const state = this.props.state
     if (state.location.url() !== 'home') return null

src/renderer/main.js

@@ -237,17 +237,19 @@ function updateElectron () {
 
 const dispatchHandlers = {
   // Torrent list: creating, deleting, selecting torrents
-  openTorrentFile: () => ipcRenderer.send('openTorrentFile'),
-  openFiles: () => ipcRenderer.send('openFiles'), /* shows the open file dialog */
-  openTorrentAddress: () => { state.modal = { id: 'open-torrent-address-modal' } },
-
-  addTorrent: (torrentId) => controllers.torrentList().addTorrent(torrentId),
-  showCreateTorrent: (paths) => controllers.torrentList().showCreateTorrent(paths),
-  createTorrent: (options) => controllers.torrentList().createTorrent(options),
-  toggleTorrent: (infoHash) => controllers.torrentList().toggleTorrent(infoHash),
-  pauseAllTorrents: () => controllers.torrentList().pauseAllTorrents(),
-  resumeAllTorrents: () => controllers.torrentList().resumeAllTorrents(),
-  toggleTorrentFile: (infoHash, index) =>
+  'openTorrentFile': () => ipcRenderer.send('openTorrentFile'),
+  'openFiles': () => ipcRenderer.send('openFiles'), /* shows the open file dialog */
+  'openTorrentAddress': () => { state.modal = { id: 'open-torrent-address-modal' } },
+  'viewList': () => { state.compactListView = false },
+  'compactViewList': () => { state.compactListView = true },
+
+  'addTorrent': (torrentId) => controllers.torrentList().addTorrent(torrentId),
+  'showCreateTorrent': (paths) => controllers.torrentList().showCreateTorrent(paths),
+  'createTorrent': (options) => controllers.torrentList().createTorrent(options),
+  'toggleTorrent': (infoHash) => controllers.torrentList().toggleTorrent(infoHash),
+  'pauseAllTorrents': () => controllers.torrentList().pauseAllTorrents(),
+  'resumeAllTorrents': () => controllers.torrentList().resumeAllTorrents(),
+  'toggleTorrentFile': (infoHash, index) =>
     controllers.torrentList().toggleTorrentFile(infoHash, index),
   confirmDeleteTorrent: (infoHash, deleteData) =>
     controllers.torrentList().confirmDeleteTorrent(infoHash, deleteData),

src/renderer/pages/torrent-list-page.js

@@ -48,6 +48,7 @@ module.exports = class TorrentList extends React.Component {
 
   renderTorrent (torrentSummary) {
     const state = this.props.state
+    const compact = state.compactListView
     const infoHash = torrentSummary.infoHash
     const isSelected = infoHash && state.selectedInfoHash === infoHash
 
@@ -62,6 +63,8 @@ module.exports = class TorrentList extends React.Component {
     // Foreground: name of the torrent, basic info like size, play button,
     // cast buttons if available, and delete
     const classes = ['torrent']
+
+    if (compact && !isSelected) { classes.push('compact') }
     if (isSelected) classes.push('selected')
     if (!infoHash) classes.push('disabled')
     if (!torrentSummary.torrentKey) throw new Error('Missing torrentKey')
@@ -84,19 +87,19 @@ module.exports = class TorrentList extends React.Component {
 
   // Show name, download status, % complete
   renderTorrentMetadata (torrentSummary) {
+    const state = this.props.state
+    const infoHash = torrentSummary.infoHash
+    const isSelected = infoHash && state.selectedInfoHash === infoHash
     const name = torrentSummary.name || 'Loading torrent...'
-    const elements = [(
-      <div key='name' className='name ellipsis'>{name}</div>
-    )]
+    const compact = state.compactListView && !isSelected
 
     // If it's downloading/seeding then show progress info
     const prog = torrentSummary.progress
     let progElems
     if (torrentSummary.error) {
-      progElems = [getErrorMessage(torrentSummary)]
+      progElems = [getErrorMessage(torrentSummary, !compact)]
     } else if (torrentSummary.status !== 'paused' && prog) {
       progElems = [
-        renderDownloadCheckbox(),
         renderTorrentStatus(),
         renderProgressBar(),
         renderPercentProgress(),
@@ -107,15 +110,31 @@ module.exports = class TorrentList extends React.Component {
       ]
     } else {
       progElems = [
-        renderDownloadCheckbox(),
         renderTorrentStatus()
       ]
     }
-    elements.push(
-      <div key='progress-info' className='ellipsis'>
-        {progElems}
-      </div>
-    )
+
+    const elements = []
+    if (compact) {
+      elements.push(
+        <div className='ellipsis'>
+          {renderDownloadCheckbox()}
+          {name}
+          {progElems}
+        </div>
+      )
+    } else {
+      elements.push(
+        <div key='name' className='name ellipsis'>{name}</div>
+      )
+
+      elements.push(
+        <div key='progress-info' className='ellipsis'>
+          {renderDownloadCheckbox()}
+          {progElems}
+        </div>
+      )
+    }
 
     return (<div key='metadata' className='metadata'>{elements}</div>)
 
@@ -216,6 +235,7 @@ module.exports = class TorrentList extends React.Component {
       } else { // torrentSummary.status is 'new' or something unexpected
         status = ''
       }
+
       return (<span key='torrent-status'>{status}</span>)
     }
   }
@@ -400,12 +420,13 @@ function stopPropagation (e) {
   e.stopPropagation()
 }
 
-function getErrorMessage (torrentSummary) {
+function getErrorMessage (torrentSummary, newline) {
   const err = torrentSummary.error
   if (err === 'path-missing') {
     return (
+
       <span key='path-missing'>
-        Path missing.<br />
+        Path missing. {newline ? <br /> : null}
         Fix and restart the app, or delete the torrent.
       </span>
     )

static/main.css

@@ -336,11 +336,17 @@ textarea,
   animation: fadein 0.5s;
 }
 
+
 .torrent,
 .torrent-placeholder {
   height: 100px;
 }
 
+.torrent.compact {
+  height: 50px;
+}
+
+
 .torrent:not(:last-child) {
   border-bottom: 1px solid #282828;
 }
@@ -354,6 +360,10 @@ textarea,
   text-shadow: rgba(0, 0, 0, 0.5) 0 0 4px;
 }
 
+.torrent.compact .metadata {
+  top: 14px;
+}
+
 .torrent .metadata span:not(:last-child)::after {
   content: ' • ';
   opacity: 0.7;
@@ -380,12 +390,22 @@ textarea,
   font-size: 55px;
 }
 
+.torrent.compact .play {
+  top: 13px;
+  font-size: 24px;
+}
+
+
 .torrent .delete {
   position: absolute;
   top: 38px;
   right: 12px;
 }
 
+.torrent.compact .delete {
+  top: 13px;
+}
+
 .torrent .download {
   vertical-align: -0.4em;
   margin-left: -2px;