Torrent list redesign

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.primary1Color = '#ffffff'
-darkBaseTheme.palette.primary2Color = colors.cyan500
+darkBaseTheme.palette.primary2Color = '#ffffff'
 darkBaseTheme.palette.primary3Color = colors.grey600
 darkBaseTheme.palette.accent1Color = colors.redA200
 darkBaseTheme.palette.accent2Color = colors.redA400

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
+    let downloadTooltip = uppercase(torrentSummary.status)
-    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.'
-    }
 
     // Only show the play/dowload buttons for torrents that contain playable media
-    let playButton, downloadButton, positionElem
+    let playButton, downloadCheckbox, positionElem
     if (!torrentSummary.error) {
-      downloadButton = (
+      downloadCheckbox = (
-        <i
+        <Checkbox
           key='download-button'
-          className={'button-round icon download ' + torrentSummary.status}
+          className={'download ' + torrentSummary.status}
-          title={downloadTooltip}
+          label={downloadTooltip}
-          onClick={dispatcher('toggleTorrent', infoHash)}>
+          checked={isActive}
-          {downloadIcon}
+          onCheck={dispatcher('toggleTorrent', infoHash)} />
-        </i>
       )
 
       // 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 {
           <i
             key='play-button'
             title={playTooltip}
-            className={'button-round icon play ' + playClass}
+            className={'icon play ' + playClass}
             onClick={dispatcher('playFile', infoHash)}>
             {playIcon}
           </i>
@@ -228,10 +219,8 @@ module.exports = class TorrentList extends React.Component {
     }
 
     return (
-      <div key='buttons' className='buttons'>
+      <div className='torrent-controls'>
-        {positionElem}
         {playButton}
-        {downloadButton}
         <i
           key='delete-button'
           className='icon delete'
@@ -239,6 +228,7 @@ module.exports = class TorrentList extends React.Component {
           onClick={dispatcher('confirmDeleteTorrent', infoHash, false)}>
           close
         </i>
+        {downloadCheckbox}
       </div>
     )
   }
@@ -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') {

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 <i> 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;
+  font-size: 40px;
-  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;
 }
 
 .torrent .buttons .radial-progress {
@@ -450,7 +390,7 @@ textarea,
 }
 
 .torrent .name {
-  font-size: 18px;
+  font-size: 20px;
   font-weight: bold;
   line-height: 1.5em;
 }