diff --git a/src/renderer/components/header.js b/src/renderer/components/header.js index 4210424abe..9245295dfd 100644 --- a/src/renderer/components/header.js +++ b/src/renderer/components/header.js @@ -30,6 +30,7 @@ class Header extends React.Component {
+ {this.getListButton()} {this.getAddButton()}
@@ -42,6 +43,30 @@ class Header extends React.Component { return (
{state.window.title}
) } + getListButton () { + const state = this.props.state + if (state.location.url() !== 'home') return null + + const compact = state.compactListView + if (compact) { + return ( + + view_list + + ) + } else { + return ( + + list + + ) + } + } + getAddButton () { const state = this.props.state if (state.location.url() !== 'home') return null diff --git a/src/renderer/main.js b/src/renderer/main.js index 945842eafb..95f8a3640a 100644 --- a/src/renderer/main.js +++ b/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), diff --git a/src/renderer/pages/torrent-list-page.js b/src/renderer/pages/torrent-list-page.js index 1a52897d99..1a2f05cff3 100644 --- a/src/renderer/pages/torrent-list-page.js +++ b/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 = [( -
{name}
- )] + 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( -
- {progElems} -
- ) + + const elements = [] + if (compact) { + elements.push( +
+ {renderDownloadCheckbox()} + {name} + {progElems} +
+ ) + } else { + elements.push( +
{name}
+ ) + + elements.push( +
+ {renderDownloadCheckbox()} + {progElems} +
+ ) + } return (
{elements}
) @@ -216,6 +235,7 @@ module.exports = class TorrentList extends React.Component { } else { // torrentSummary.status is 'new' or something unexpected status = '' } + return ({status}) } } @@ -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 ( + - Path missing.
+ Path missing. {newline ?
: null} Fix and restart the app, or delete the torrent.
) diff --git a/static/main.css b/static/main.css index 5597b55f0b..921ea6166f 100644 --- a/static/main.css +++ b/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;