Unify progress bar appearance, add to table

This commit is contained in:
Drew DeVault 2017-09-10 21:56:21 +09:00
parent fbc01410f9
commit fc058d5dde
4 changed files with 60 additions and 39 deletions

View File

@ -7,13 +7,8 @@
} }
.torrent { .torrent {
&.paused { &.selected {
color: $gray-dark; background-color: lighten($brand-primary, 45);
background-color: $gray-lighter;
}
&.idle {
color: $gray-dark;
} }
&.error { &.error {
@ -24,29 +19,6 @@
text-decoration: underline; 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 { .connection-overlay {
@ -164,7 +136,6 @@ fieldset .form-check-input:only-child {
.progress { .progress {
flex-grow: 1; flex-grow: 1;
height: 1rem; height: 1rem;
border-radius: 0;
} }
.btn-group { .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;
}
}
}

View File

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

View File

@ -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>
);
}

View File

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