Merge pull request #880 from feross/dc/design

Torrent list design

src/renderer/lib/migrations.js

@@ -35,6 +35,10 @@ function run (state) {
     migrate_0_12_0(state.saved)
   }
 
+  if (semver.lt(version, '0.14.0')) {
+    migrate_0_14_0(state.saved)
+  }
+
   // Config is now on the new version
   state.saved.version = config.APP_VERSION
 }
@@ -135,3 +139,9 @@ function migrate_0_12_0 (saved) {
     }
   })
 }
+
+function migrate_0_14_0 (saved) {
+  saved.torrents.forEach(function (ts) {
+    delete ts.defaultPlayFileIndex
+  })
+}

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

@@ -46,11 +46,9 @@ module.exports = class TorrentList extends React.Component {
     // Background image: show some nice visuals, like a frame from the movie, if possible
     const style = {}
     if (torrentSummary.posterFileName) {
-      const gradient = isSelected
+      const gradient = 'linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%)'
-        ? 'linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 100%)'
-        : 'linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%)'
       const posterPath = TorrentSummary.getPosterPath(torrentSummary)
-      style.backgroundImage = gradient + `, url('${posterPath}')`
+      style.backgroundImage = `${gradient}, url('${posterPath}')`
     }
 
     // Foreground: name of the torrent, basic info like size, play button,

static/main.css

@@ -350,10 +350,6 @@ textarea,
   border-bottom: 1px solid rgb(20, 20, 20);
 }
 
-.torrent:hover {
-  -webkit-filter: brightness(1.1);
-}
-
 .torrent .metadata {
   position: absolute;
   top: 25px;
@@ -462,6 +458,15 @@ textarea,
 progress {
   width: 60px;
   margin-right: 8px;
+  -webkit-appearance: none;
+}
+
+progress::-webkit-progress-bar {
+  background-color: #888;
+}
+
+progress::-webkit-progress-value {
+  background-color: #eee;
 }
 
 /*
@@ -515,6 +520,7 @@ body.drag .app::after {
 /*
  * TORRENT LIST: EXPANDED TORRENT DETAILS
  */
+
 .torrent.selected {
   height: auto;
 }
@@ -538,10 +544,6 @@ body.drag .app::after {
   height: 28px;
 }
 
-.torrent-details tr:hover {
-  background-color: rgba(200, 200, 200, 0.3);
-}
-
 .torrent-details td {
   overflow: hidden;
   padding: 0;