From 56ce8888f6f1b6e92c8c3795fa2912f68e37bd6a Mon Sep 17 00:00:00 2001 From: John Furrow Date: Sat, 26 Mar 2016 23:20:45 -0700 Subject: [PATCH] Add icons for torrent overview details --- .../source/sass/components/_progress-bar.scss | 16 ++- client/source/sass/components/_torrents.scss | 98 +++++++++++++++++-- .../scripts/components/icons/CalendarIcon.js | 14 +++ .../scripts/components/icons/ClockIcon.js | 15 +++ .../scripts/components/icons/DiskIcon.js | 24 +++++ .../components/icons/DownloadThickIcon.js | 14 +++ .../scripts/components/icons/PeersIcon.js | 14 +++ .../scripts/components/icons/RatioIcon.js | 14 +++ .../scripts/components/icons/SeedsIcon.js | 14 +++ .../components/icons/UploadThickIcon.js | 14 +++ .../components/torrent-list/Torrent.js | 32 ++++-- client/source/scripts/util/formatData.js | 19 +++- server/models/Torrent.js | 10 +- server/util/formatUtil.js | 2 +- 14 files changed, 277 insertions(+), 23 deletions(-) create mode 100644 client/source/scripts/components/icons/CalendarIcon.js create mode 100644 client/source/scripts/components/icons/ClockIcon.js create mode 100644 client/source/scripts/components/icons/DiskIcon.js create mode 100644 client/source/scripts/components/icons/DownloadThickIcon.js create mode 100644 client/source/scripts/components/icons/PeersIcon.js create mode 100644 client/source/scripts/components/icons/RatioIcon.js create mode 100644 client/source/scripts/components/icons/SeedsIcon.js create mode 100644 client/source/scripts/components/icons/UploadThickIcon.js diff --git a/client/source/sass/components/_progress-bar.scss b/client/source/sass/components/_progress-bar.scss index dd46d7dc..54a6bf11 100644 --- a/client/source/sass/components/_progress-bar.scss +++ b/client/source/sass/components/_progress-bar.scss @@ -72,7 +72,7 @@ $progress-bar--fill--error: #e95779; .has-error & { background: $progress-bar--fill--error; } - + .is-selected & { background: $progress-bar--fill--selected; } @@ -82,23 +82,33 @@ $progress-bar--fill--error: #e95779; position: relative; &:after { - background: $progress-bar--background; + background: $progress-bar--fill; content: ''; height: 1px; left: 0; + opacity: 0.5; position: absolute; z-index: 0; top: 50%; transform: translateY(-50%); - transition: background 0.25s; + transition: background 0.25s, opacity 0.25s; width: 100%; + .is-stopped & { + background: $progress-bar--fill--stopped; + } + + .has-error & { + background: $progress-bar--fill--error; + } + .is-selected & { background: $progress-bar--background--selected; } .is-selected.is-stopped & { background: $progress-bar--background--selected--stopped; + opacity: 1; } } } diff --git a/client/source/sass/components/_torrents.scss b/client/source/sass/components/_torrents.scss index c8b22454..d3bd6405 100644 --- a/client/source/sass/components/_torrents.scss +++ b/client/source/sass/components/_torrents.scss @@ -2,6 +2,7 @@ $torrent-list--background: #fff; $torrent-list--border: rgba($background, 0.15); $torrent--primary--foreground: #5b6d7c; +$torrent--primary--foreground--error: #e95779; $torrent--primary--foreground--stopped: rgba(#333332, 0.5); $torrent--primary--foreground--selected: #fff; $torrent--primary--foreground--selected--stopped: rgba($torrent--primary--foreground--selected, 0.6); @@ -149,6 +150,10 @@ $torrent--background--error: #e95779; color: $torrent--primary--foreground--stopped; } + .has-error & { + color: $torrent--primary--foreground--error; + } + .is-selected & { color: $torrent--primary--foreground--selected; } @@ -161,16 +166,26 @@ $torrent--background--error: #e95779; &--secondary { align-items: flex-end; color: $torrent--secondary--foreground; - flex: 1; + flex: 0 0 245px; font-size: 0.75em; - min-width: 200px; + min-width: 255px; + text-align: right; + white-space: nowrap; + vertical-align: baseline; li { - flex: 1 1 auto; - min-width: 15%; + display: inline-block; + font-weight: 500; + margin-right: 5px; + text-align: left; + white-space: nowrap; - &.torrent__details--ratio { - max-width: 30px; + .unit { + font-weight: 400; + } + + &:last-child { + margin-right: 0; } } @@ -195,7 +210,8 @@ $torrent--background--error: #e95779; li { display: inline-block; - margin-right: 1em; + margin-right: 15px; + white-space: nowrap; &:last-child { margin-right: 0; @@ -219,6 +235,74 @@ $torrent--background--error: #e95779; margin-right: 0.5em; opacity: 0.5; } + + &__icon { + display: inline-block; + padding-right: 5px; + transform: translateY(1px); + vertical-align: baseline; + + .icon { + display: block; + fill: currentColor; + height: 12px; + opacity: 0.66; + width: 12px; + } + } + + &--completed { + width: 100px; + } + + &--uploaded { + width: 60px; + } + + &--size { + width: 60px; + } + + &--peers { + width: 60px; + } + + &--seeds { + width: 60px; + } + + &--added { + width: 90px; + } + + &--eta { + width: 70px; + } + + &--speed { + width: 60px; + + &--download, + &--upload { + transition: color 0.25s; + + .is-selected & { + color: #fff; + } + } + + &--download { + color: $green; + } + + &--upload { + color: $blue; + } + } + + &--ratio { + width: 50px; + } } } diff --git a/client/source/scripts/components/icons/CalendarIcon.js b/client/source/scripts/components/icons/CalendarIcon.js new file mode 100644 index 00000000..66e06651 --- /dev/null +++ b/client/source/scripts/components/icons/CalendarIcon.js @@ -0,0 +1,14 @@ +import React from 'react'; + +import BaseIcon from './BaseIcon'; + +export default class CalendarIcon extends BaseIcon { + render() { + return ( + + + + ); + } +} diff --git a/client/source/scripts/components/icons/ClockIcon.js b/client/source/scripts/components/icons/ClockIcon.js new file mode 100644 index 00000000..7fb9b8fb --- /dev/null +++ b/client/source/scripts/components/icons/ClockIcon.js @@ -0,0 +1,15 @@ +import React from 'react'; + +import BaseIcon from './BaseIcon'; + +export default class ClockIcon extends BaseIcon { + render() { + return ( + + + + + ); + } +} diff --git a/client/source/scripts/components/icons/DiskIcon.js b/client/source/scripts/components/icons/DiskIcon.js new file mode 100644 index 00000000..ac253b04 --- /dev/null +++ b/client/source/scripts/components/icons/DiskIcon.js @@ -0,0 +1,24 @@ +import React from 'react'; + +import BaseIcon from './BaseIcon'; + +export default class DiskIcon extends BaseIcon { + render() { + return ( + + + + + + + + + + + + + ); + } +} diff --git a/client/source/scripts/components/icons/DownloadThickIcon.js b/client/source/scripts/components/icons/DownloadThickIcon.js new file mode 100644 index 00000000..085b4f8a --- /dev/null +++ b/client/source/scripts/components/icons/DownloadThickIcon.js @@ -0,0 +1,14 @@ +import React from 'react'; + +import BaseIcon from './BaseIcon'; + +export default class DownloadThickIcon extends BaseIcon { + render() { + return ( + + + + ); + } +} diff --git a/client/source/scripts/components/icons/PeersIcon.js b/client/source/scripts/components/icons/PeersIcon.js new file mode 100644 index 00000000..4d4c35a7 --- /dev/null +++ b/client/source/scripts/components/icons/PeersIcon.js @@ -0,0 +1,14 @@ +import React from 'react'; + +import BaseIcon from './BaseIcon'; + +export default class PeersIcon extends BaseIcon { + render() { + return ( + + + + ); + } +} diff --git a/client/source/scripts/components/icons/RatioIcon.js b/client/source/scripts/components/icons/RatioIcon.js new file mode 100644 index 00000000..febab6d5 --- /dev/null +++ b/client/source/scripts/components/icons/RatioIcon.js @@ -0,0 +1,14 @@ +import React from 'react'; + +import BaseIcon from './BaseIcon'; + +export default class RatioIcon extends BaseIcon { + render() { + return ( + + + + ); + } +} diff --git a/client/source/scripts/components/icons/SeedsIcon.js b/client/source/scripts/components/icons/SeedsIcon.js new file mode 100644 index 00000000..09f4232f --- /dev/null +++ b/client/source/scripts/components/icons/SeedsIcon.js @@ -0,0 +1,14 @@ +import React from 'react'; + +import BaseIcon from './BaseIcon'; + +export default class SeedsIcon extends BaseIcon { + render() { + return ( + + + + ); + } +} diff --git a/client/source/scripts/components/icons/UploadThickIcon.js b/client/source/scripts/components/icons/UploadThickIcon.js new file mode 100644 index 00000000..4b2f25a0 --- /dev/null +++ b/client/source/scripts/components/icons/UploadThickIcon.js @@ -0,0 +1,14 @@ +import React from 'react'; + +import BaseIcon from './BaseIcon'; + +export default class UploadThickIcon extends BaseIcon { + render() { + return ( + + + + ); + } +} diff --git a/client/source/scripts/components/torrent-list/Torrent.js b/client/source/scripts/components/torrent-list/Torrent.js index 42225adf..24bf3c35 100644 --- a/client/source/scripts/components/torrent-list/Torrent.js +++ b/client/source/scripts/components/torrent-list/Torrent.js @@ -1,12 +1,20 @@ import classNames from 'classnames'; import React from 'react'; +import CalendarIcon from '../icons/CalendarIcon'; +import ClockIcon from '../icons/ClockIcon'; +import DiskIcon from '../icons/DiskIcon'; import DotsMini from '../icons/DotsMini'; +import DownloadThickIcon from '../icons/DownloadThickIcon'; import EventTypes from '../../constants/EventTypes'; import format from '../../util/formatData'; +import PeersIcon from '../icons/PeersIcon'; import ProgressBar from '../ui/ProgressBar'; +import RatioIcon from '../icons/RatioIcon'; +import SeedsIcon from '../icons/SeedsIcon'; import {torrentStatusIcons} from '../../util/torrentStatusIcons'; import {torrentStatusClasses} from '../../util/torrentStatusClasses'; +import UploadThickIcon from '../icons/UploadThickIcon'; const METHODS_TO_BIND = [ 'handleClick', @@ -61,17 +69,21 @@ export default class Torrent extends React.Component {
  • @@ -79,7 +91,7 @@ export default class Torrent extends React.Component { diff --git a/client/source/scripts/util/formatData.js b/client/source/scripts/util/formatData.js index 8f9564f5..6b9e8e12 100644 --- a/client/source/scripts/util/formatData.js +++ b/client/source/scripts/util/formatData.js @@ -73,29 +73,38 @@ const format = { megabyte = kilobyte * 1024, gigabyte = megabyte * 1024, terabyte = gigabyte * 1024, - value = '', + value = 0, unit = ''; if ((bytes >= 0) && (bytes < kilobyte)) { value = bytes; unit = 'B'; } else if ((bytes >= kilobyte) && (bytes < megabyte)) { - value = (bytes / kilobyte).toFixed(precision); + value = (bytes / kilobyte); unit = 'KB'; } else if ((bytes >= megabyte) && (bytes < gigabyte)) { - value = (bytes / megabyte).toFixed(precision); + value = (bytes / megabyte); unit = 'MB'; } else if ((bytes >= gigabyte) && (bytes < terabyte)) { - value = (bytes / gigabyte).toFixed(precision); + value = (bytes / gigabyte); unit = 'GB'; } else if (bytes >= terabyte) { - value = (bytes / terabyte).toFixed(precision); + value = (bytes / terabyte); unit = 'TB'; } else { value = bytes; unit = 'B'; } + value = Number(value); + if (!!value && value < 10) { + value = value.toFixed(precision); + } else if (!!value && value > 10 && value < 100) { + value = value.toFixed(precision - 1); + } else if (!!value && value > 100) { + value = Math.floor(value); + } + if (extraUnits) { unit += extraUnits; } diff --git a/server/models/Torrent.js b/server/models/Torrent.js index 1f72ce1b..114535b2 100644 --- a/server/models/Torrent.js +++ b/server/models/Torrent.js @@ -145,7 +145,15 @@ class Torrent { } getCalculatedPercentComplete(clientData) { - return (clientData.bytesDone / clientData.sizeBytes * 100).toFixed(2); + let percentComplete = clientData.bytesDone / clientData.sizeBytes * 100; + + if (percentComplete > 0 && percentComplete < 10) { + return percentComplete.toFixed(2); + } else if (percentComplete > 10 && percentComplete < 100) { + return percentComplete.toFixed(1); + } else { + return percentComplete; + } } getCalculatedStatus(clientData) { diff --git a/server/util/formatUtil.js b/server/util/formatUtil.js index b0200284..a7dd41b4 100644 --- a/server/util/formatUtil.js +++ b/server/util/formatUtil.js @@ -2,7 +2,7 @@ var util = require('util'); var FormatUtil = { percentComplete: (numerator, denominator) => { - + }, eta: (rate, completed, total) => {