Unify progress bar appearance, add to table

scss/main.scss

@@ -7,13 +7,8 @@
 }
 
 .torrent {
-  &.paused {
+  &.selected {
-    color: $gray-dark;
+    background-color: lighten($brand-primary, 45);
-    background-color: $gray-lighter;
-  }
-
-  &.idle {
-    color: $gray-dark;
   }
 
   &.error {
@@ -24,29 +19,6 @@
       text-decoration: underline;
     }
   }
-
-  &.paused {
-    background-image: linear-gradient(to right, darken($gray-lighter, 20), darken($gray-lighter, 40));
-  }
-
-  &.pending, &.idle {
-    background-image: linear-gradient(to right, lighten($brand-info, 20), $brand-info);
-  }
-
-  &.seeding {
-    background-image: linear-gradient(to right, lighten($brand-primary, 20), $brand-primary);
-  }
-
-  &.leeching {
-    background-image: linear-gradient(to right, lighten($brand-success, 20), $brand-success);
-  }
-
-  &.selected {
-    background-color: lighten($brand-warning, 20);
-  }
-
-  background-repeat: no-repeat;
-  background-position: left bottom;
 }
 
 .connection-overlay {
@@ -164,7 +136,6 @@ fieldset .form-check-input:only-child {
   .progress {
     flex-grow: 1;
     height: 1rem;
-    border-radius: 0;
   }
 
   .btn-group {
@@ -216,3 +187,18 @@ fieldset .form-check-input:only-child {
     }
   }
 }
+
+.progress {
+  border-radius: 0;
+
+  .progress-bar {
+    &.bg-info, &.bg-success {
+      color: #222;
+    }
+
+    &.bg-default {
+      background: darken($gray-lighter, 10);
+      color: $black;
+    }
+  }
+}

src/ui/torrent_details.js

@@ -10,10 +10,10 @@ import {
   Collapse,
   Card,
   CardBlock,
-  Progress
 } from 'reactstrap';
 import moment from 'moment';
 import TorrentOptions from './torrent_options';
+import TorrentProgress from './torrent_progress';
 import ws_send from '../socket';
 import DateDisplay from './date';
 import selectTorrent, {
@@ -98,9 +98,7 @@ class Torrent extends Component {
             <FontAwesome name={torrent.status === "paused" ? "play" : "pause"} />
           </a>
           <div class="status">{status(torrent.status)}</div>
-          <Progress
+          <TorrentProgress torrent={torrent} />
-            value={torrent.progress * 100}
-          >{(torrent.progress * 100).toFixed(0)}%</Progress>
           <ButtonDropdown
             isOpen={this.state.removeDropdown}
             toggle={() => this.setState({ removeDropdown: !this.state.removeDropdown })}

src/ui/torrent_progress.js

@@ -0,0 +1,37 @@
+import React, { Component } from 'react';
+import { Progress } from 'reactstrap';
+
+function color(torrent) {
+  switch (torrent.status) {
+    case "leeching":
+      return "success";
+    case "seeding":
+      return "primary";
+    case "hashing":
+      return "info";
+    case "idle":
+    case "pending":
+    case "paused":
+      return "default";
+    case "error":
+      return "error";
+  }
+}
+
+function inset(torrent) {
+  switch (torrent.status) {
+    case "leeching":
+      return `${(torrent.progress * 100).toFixed(0)}%`;
+    default:
+      return torrent.status;
+  }
+}
+
+export default function TorrentProgress({ torrent }) {
+  return (
+    <Progress
+      value={torrent.progress * 100}
+      color={color(torrent)}
+    >{inset(torrent)}</Progress>
+  );
+}

src/ui/torrent_table.js

@@ -3,6 +3,7 @@ import { connect } from 'react-redux';
 import selectTorrent, { UNION, SUBTRACT, EXCLUSIVE } from '../actions/selection';
 import { formatBitrate } from '../bitrate';
 import Ratio from './ratio';
+import TorrentProgress from './torrent_progress';
 
 class TorrentTable extends Component {
   render() {
@@ -28,20 +29,18 @@ class TorrentTable extends Component {
             <th>up</th>
             <th>down</th>
             <th>ratio</th>
+            <th>progress</th>
           </tr>
         </thead>
         <tbody>
           {Object.values(torrents).map(t =>
             <tr
               key={t.id}
-              className={`torrent progress-row ${
+              className={`torrent ${
                 t.status
               } ${
                 selection.indexOf(t.id) !== -1 ? "selected" : ""
               }`}
-              style={{
-                backgroundSize: `${t.progress * 100}% 3px`
-              }}
             >
               <td>
                 <input
@@ -64,6 +63,7 @@ class TorrentTable extends Component {
               <td>{formatBitrate(t.rate_up)}</td>
               <td>{formatBitrate(t.rate_down)}</td>
               <td><Ratio up={t.transferred_up} down={t.transferred_down} /></td>
+              <td><TorrentProgress torrent={t} /></td>
             </tr>
           )}
         </tbody>