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;