From 3be018521a8e07562640b9c734ffc74d9f1cc698 Mon Sep 17 00:00:00 2001 From: DC Date: Sun, 18 Sep 2016 01:48:40 -0700 Subject: [PATCH] Torrent list redesign --- src/renderer/pages/app.js | 4 +- src/renderer/pages/torrent-list-page.js | 41 ++++++------- static/main.css | 78 +++---------------------- 3 files changed, 29 insertions(+), 94 deletions(-) diff --git a/src/renderer/pages/app.js b/src/renderer/pages/app.js index d892d898..eb972643 100644 --- a/src/renderer/pages/app.js +++ b/src/renderer/pages/app.js @@ -27,8 +27,8 @@ const fontFamily = process.platform === 'win32' : 'BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif' lightBaseTheme.fontFamily = fontFamily darkBaseTheme.fontFamily = fontFamily -darkBaseTheme.palette.primary1Color = colors.cyan500 -darkBaseTheme.palette.primary2Color = colors.cyan500 +darkBaseTheme.palette.primary1Color = '#ffffff' +darkBaseTheme.palette.primary2Color = '#ffffff' darkBaseTheme.palette.primary3Color = colors.grey600 darkBaseTheme.palette.accent1Color = colors.redA200 darkBaseTheme.palette.accent2Color = colors.redA400 diff --git a/src/renderer/pages/torrent-list-page.js b/src/renderer/pages/torrent-list-page.js index c7e38013..2cb86ea4 100644 --- a/src/renderer/pages/torrent-list-page.js +++ b/src/renderer/pages/torrent-list-page.js @@ -1,5 +1,6 @@ const React = require('react') const prettyBytes = require('prettier-bytes') +const Checkbox = require('material-ui/Checkbox').default const TorrentSummary = require('../lib/torrent-summary') const TorrentPlayer = require('../lib/torrent-player') @@ -168,6 +169,7 @@ module.exports = class TorrentList extends React.Component { // Play button starts streaming the torrent immediately, unpausing if needed renderTorrentButtons (torrentSummary) { const infoHash = torrentSummary.infoHash + const isActive = ['downloading', 'seeding'].includes(torrentSummary.status) let playIcon, playTooltip, playClass if (torrentSummary.playStatus === 'timeout') { @@ -178,29 +180,18 @@ module.exports = class TorrentList extends React.Component { playTooltip = 'Start streaming' } - let downloadIcon, downloadTooltip - if (torrentSummary.status === 'seeding') { - downloadIcon = 'file_upload' - downloadTooltip = 'Seeding. Click to stop.' - } else if (torrentSummary.status === 'downloading') { - downloadIcon = 'file_download' - downloadTooltip = 'Torrenting. Click to stop.' - } else { - downloadIcon = 'file_download' - downloadTooltip = 'Click to start torrenting.' - } + let downloadTooltip = uppercase(torrentSummary.status) // Only show the play/dowload buttons for torrents that contain playable media - let playButton, downloadButton, positionElem + let playButton, downloadCheckbox, positionElem if (!torrentSummary.error) { - downloadButton = ( - - {downloadIcon} - + className={'download ' + torrentSummary.status} + label={downloadTooltip} + checked={isActive} + onCheck={dispatcher('toggleTorrent', infoHash)} /> ) // Do we have a saved position? Show it using a radial progress bar on top @@ -219,7 +210,7 @@ module.exports = class TorrentList extends React.Component { {playIcon} @@ -228,10 +219,8 @@ module.exports = class TorrentList extends React.Component { } return ( -
- {positionElem} +
{playButton} - {downloadButton} close + {downloadCheckbox}
) } @@ -375,6 +365,11 @@ module.exports = class TorrentList extends React.Component { } } +// Takes "foo bar", returns "Foo bar" +function uppercase (str) { + return str.slice(0, 1).toUpperCase() + str.slice(1) +} + function getErrorMessage (torrentSummary) { const err = torrentSummary.error if (err === 'path-missing') { diff --git a/static/main.css b/static/main.css index 64bc242b..4eda3c5d 100644 --- a/static/main.css +++ b/static/main.css @@ -309,15 +309,6 @@ i:not(.disabled):hover { /* Show they're clickable without pointer: cursor */ -webkit-filter: brightness(1.3); } -.button-round { /* Circular icon buttons, used on tags */ - width: 40px; - height: 40px; - border-radius: 20px; - font-size: 22px; - transition: all 0.1s ease-out; - text-align: center; -} - /* * INPUTS */ @@ -370,15 +361,19 @@ textarea, padding-right: 4px; } -.torrent .buttons { +.torrent .torrent-controls { position: absolute; top: 29px; right: 10px; align-items: center; - display: none; + display: block /* TODO: none */; } -.torrent:hover .buttons { +.torrent:hover .torrent-controls { + display: block; +} + +.torrent .buttons { display: flex; } @@ -386,63 +381,8 @@ textarea, margin-left: 6px; /* space buttons apart */ } -.torrent .buttons .download { - background-color: #2233BB; - width: 28px; - height: 28px; - border-radius: 14px; - font-size: 18px; - padding-top: 6px; -} - -.torrent .buttons .download.downloading { - color: #44dd44; -} - -.torrent .buttons .download.seeding { - color: #44dd44; -} - .torrent .buttons .play { - padding-top: 10px; - background-color: #F44336; -} - -.torrent.timeout .play { - padding-top: 8px; -} - -.torrent.requested .play, -.loading-spinner { - border-top: 6px solid rgba(255, 255, 255, 0.2); - border-right: 6px solid rgba(255, 255, 255, 0.2); - border-bottom: 6px solid rgba(255, 255, 255, 0.2); - border-left: 6px solid #ffffff; - border-radius: 50%; - color: transparent; - animation: load8 1.1s infinite linear; -} - -@keyframes load8 { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } -} - -.torrent .buttons .play.resume-position { - position: relative; - -webkit-clip-path: circle(18px at center); -} - -.torrent .buttons .delete { - opacity: 0.5; -} - -.torrent .buttons .delete:hover { - opacity: 0.7; + font-size: 40px; } .torrent .buttons .radial-progress { @@ -450,7 +390,7 @@ textarea, } .torrent .name { - font-size: 18px; + font-size: 20px; font-weight: bold; line-height: 1.5em; }