From fc058d5dde08be4080ff8800d9fd3f148ee66abe Mon Sep 17 00:00:00 2001 From: Drew DeVault Date: Sun, 10 Sep 2017 21:56:21 +0900 Subject: [PATCH] Unify progress bar appearance, add to table --- scss/main.scss | 48 ++++++++++++++------------------------ src/ui/torrent_details.js | 6 ++--- src/ui/torrent_progress.js | 37 +++++++++++++++++++++++++++++ src/ui/torrent_table.js | 8 +++---- 4 files changed, 60 insertions(+), 39 deletions(-) create mode 100644 src/ui/torrent_progress.js diff --git a/scss/main.scss b/scss/main.scss index 96a5088..463e3b2 100644 --- a/scss/main.scss +++ b/scss/main.scss @@ -7,13 +7,8 @@ } .torrent { - &.paused { - color: $gray-dark; - background-color: $gray-lighter; - } - - &.idle { - color: $gray-dark; + &.selected { + background-color: lighten($brand-primary, 45); } &.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; + } + } +} diff --git a/src/ui/torrent_details.js b/src/ui/torrent_details.js index 08caa6d..5c8ee8d 100644 --- a/src/ui/torrent_details.js +++ b/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 {
{status(torrent.status)}
- {(torrent.progress * 100).toFixed(0)}% + this.setState({ removeDropdown: !this.state.removeDropdown })} diff --git a/src/ui/torrent_progress.js b/src/ui/torrent_progress.js new file mode 100644 index 0000000..22d3a23 --- /dev/null +++ b/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 ( + {inset(torrent)} + ); +} diff --git a/src/ui/torrent_table.js b/src/ui/torrent_table.js index 3e1aa4f..d22dfce 100644 --- a/src/ui/torrent_table.js +++ b/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 { up down ratio + progress {Object.values(torrents).map(t => {formatBitrate(t.rate_up)} {formatBitrate(t.rate_down)} + )}