Render modals more intelligently

client/source/sass/components/_torrent-details-panel.scss

@@ -6,6 +6,7 @@ $torrent-details--header--name--foreground: #c7dbeb;
 $torrent-details--header--tertiary--foreground: #7b9cb4;
 $torrent-details--header--progress-bar--track: #2a3e4c;
 $torrent-details--header--progress-bar--fill--error: #be2558;
+$torrent-details--header--progress-bar--fill--stopped: #7b9cb4;
 
 $torrent-details--navigation--border: rgba(#040d13, 0.4);
 $torrent-details--navigation--item--background--active: rgba(#349cf4, 0.07);
@@ -148,15 +149,32 @@ $torrent-details--header--icon--default--fill: rgba(#4d6f87, 0.5);
       .progress-bar {
 
         &__fill {
-          background: #7b9cb4;
+          background: $torrent-details--header--progress-bar--fill--stopped;
+
+          &__wrapper {
+
+            &:after {
+              background: $torrent-details--header--progress-bar--track;
+            }
+          }
+        }
+
+        .icon {
+          fill: $torrent-details--header--progress-bar--fill--stopped;
         }
       }
     }
 
     .progress-bar {
 
-      &:after {
-        background: $torrent-details--header--progress-bar--track;
+      &__fill {
+
+        &__wrapper {
+          
+          &:after {
+            background: $torrent-details--header--progress-bar--track;
+          }
+        }
       }
     }
   }

client/source/scripts/components/modals/ConfirmModal.js

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import Modal from './Modal';
+
+export default class AddTorrents extends React.Component {
+  constructor() {
+    super();
+  }
+
+  render() {
+    return (
+      <Modal actions={this.props.options.actions}
+        alignment="center"
+        content={this.props.options.content}
+        dismiss={this.props.dismiss}
+        heading={this.props.options.heading} />
+    );
+  }
+}

client/source/scripts/components/modals/Modals.js

@@ -3,9 +3,10 @@ import CSSTransitionGroup from 'react-addons-css-transition-group';
 import React from 'react';
 
 import AddTorrents from './AddTorrents';
-import MoveTorrents from './MoveTorrents';
+import ConfirmModal from './ConfirmModal';
 import EventTypes from '../../constants/EventTypes';
 import Modal from './Modal';
+import MoveTorrents from './MoveTorrents';
 import UIActions from '../../actions/UIActions';
 import UIStore from '../../stores/UIStore';
 
@@ -19,6 +20,12 @@ export default class Modals extends React.Component {
   constructor() {
     super();
 
+    this.modals = {
+      confirm: ConfirmModal,
+      'move-torrents': MoveTorrents,
+      'add-torrents': AddTorrents
+    };
+
     this.state = {
       activeModal: null
     };
@@ -44,6 +51,15 @@ export default class Modals extends React.Component {
     UIActions.dismissModal();
   }
 
+  getModal() {
+    let ActiveModal = this.modals[this.state.activeModal.id];
+
+    return (
+      <ActiveModal dismiss={this.dismissModal}
+        options={this.state.activeModal.options} />
+    );
+  }
+
   handleKeyPress(event) {
     if (this.state.activeModal != null && event.keyCode === 27) {
       this.dismissModal();
@@ -63,41 +79,13 @@ export default class Modals extends React.Component {
   }
 
   render() {
-    let modal = null;
-    let modalOptions = null;
-    let modalType = this.state.activeModal;
+    let modal;
 
-    if (modalType && modalType.type) {
-      modalOptions = modalType;
-      modalType = modalType.type;
-    }
-
-    switch (modalType) {
-      case 'confirm':
-        modal = (
-          <Modal actions={modalOptions.actions}
-            alignment="center"
-            content={modalOptions.content}
-            dismiss={this.dismissModal}
-            heading={modalOptions.heading} />
-        );
-        break;
-      case 'move-torrents':
-        modal = (
-          <MoveTorrents dismiss={this.dismissModal} />
-        );
-        break;
-      case 'add-torrents':
-        modal = (
-          <AddTorrents dismiss={this.dismissModal} />
-        );
-        break;
-    }
-
-    if (modal !== null) {
+    if (this.state.activeModal != null) {
       modal = (
-        <div key={this.state.activeModal} className="modal" onClick={this.handleOverlayClick}>
-          {modal}
+        <div key={this.state.activeModal.id} className="modal modal-overlay"
+          onClick={this.handleOverlayClick}>
+          {this.getModal()}
         </div>
       );
     }

client/source/scripts/components/torrent-details/TorrentHeading.js

@@ -1,25 +1,21 @@
-import classNames from 'classnames';
+import classnames from 'classnames';
 import React from 'react';
 
-import FolderOpenSolid from '../icons/FolderOpenSolid';
-import DirectoryTree from '../filesystem/DirectoryTree';
-import Download from '../icons/Download';
-import ETA from '../icons/ETA';
-import EventTypes from '../../constants/EventTypes';
-import File from '../icons/File';
+import ClockIcon from '../icons/ClockIcon';
+import DownloadThickIcon from '../icons/DownloadThickIcon';
 import format from '../../util/formatData';
 import PauseIcon from '../../components/icons/PauseIcon';
 import PriorityMeter from '../filesystem/PriorityMeter';
 import ProgressBar from '../ui/ProgressBar';
 import propsMap from '../../../../../shared/constants/propsMap';
-import Ratio from '../../components/icons/Ratio';
+import RatioIcon from '../../components/icons/RatioIcon';
 import StartIcon from '../../components/icons/StartIcon';
 import StopIcon from '../../components/icons/StopIcon';
 import stringUtil from '../../../../../shared/util/stringUtil';
 import TorrentActions from '../../actions/TorrentActions';
-import TorrentStore from '../../stores/TorrentStore';
 import {torrentStatusClasses} from '../../util/torrentStatusClasses';
-import Upload from '../icons/Upload';
+import {torrentStatusIcons} from '../../util/torrentStatusIcons';
+import UploadThickIcon from '../icons/UploadThickIcon';
 
 const METHODS_TO_BIND = [
   'getCurrentStatus',
@@ -66,24 +62,21 @@ export default class TorrentHeading extends React.Component {
       'stop': <StopIcon />
     };
     let torrentActions = ['start', 'pause', 'stop'];
-    let torrentActionElements = [];
-
-    torrentActionElements.push(
+    let torrentActionElements = [
       <li className="torrent-details__sub-heading__tertiary"
         key={torrentActions.length + 1}>
-        <PriorityMeter id={torrent.hash} key={torrent.hash}
-          level={torrent.priority} maxLevel={3} priorityType="torrent"
-          onChange={this.handlePriorityChange} showLabel={true} />
+        <PriorityMeter id={torrent.hash} level={torrent.priority} maxLevel={3}
+          priorityType="torrent" onChange={this.handlePriorityChange}
+          showLabel={true} />
       </li>
-    );
+    ];
 
     torrentActions.forEach((torrentAction, index) => {
       let capitalizedAction = stringUtil.capitalize(torrentAction);
-      let classes = 'torrent-details__sub-heading__tertiary torrent-details__action';
-
-      if (torrentAction === currentStatus) {
-        classes += ' is-active';
-      }
+      let classes = classnames('torrent-details__sub-heading__tertiary',
+        'torrent-details__action', {
+          'is-active': torrentAction === currentStatus
+        });
 
       torrentActionElements.push(
         <li className={classes} key={index}
@@ -127,6 +120,7 @@ export default class TorrentHeading extends React.Component {
     let uploadTotal = format.data(torrent.uploadTotal);
 
     let torrentClasses = torrentStatusClasses(torrent, 'torrent-details__header');
+    let torrentStatusIcon = torrentStatusIcons(torrent.status);
 
     return (
       <div className={torrentClasses}>
@@ -134,7 +128,7 @@ export default class TorrentHeading extends React.Component {
         <div className="torrent-details__sub-heading">
           <ul className="torrent-details__sub-heading__secondary">
             <li className="torrent-details__sub-heading__tertiary torrent-details__sub-heading__tertiary--download">
-              <Download />
+              <DownloadThickIcon />
               {downloadRate.value}
               <em className="unit">{downloadRate.unit}</em>
                 &nbsp;&mdash;&nbsp;
@@ -142,7 +136,7 @@ export default class TorrentHeading extends React.Component {
                 <em className="unit">{completed.unit}</em>
             </li>
             <li className="torrent-details__sub-heading__tertiary torrent-details__sub-heading__tertiary--upload">
-              <Upload />
+              <UploadThickIcon />
               {uploadRate.value}
               <em className="unit">{uploadRate.unit}</em>
               &nbsp;&mdash;&nbsp;
@@ -150,11 +144,11 @@ export default class TorrentHeading extends React.Component {
               <em className="unit">{uploadTotal.unit}</em>
             </li>
             <li className="torrent-details__sub-heading__tertiary">
-              <Ratio />
+              <RatioIcon />
               {ratio}
             </li>
             <li className="torrent-details__sub-heading__tertiary">
-              <ETA />
+              <ClockIcon />
               {eta}
             </li>
           </ul>
@@ -162,7 +156,7 @@ export default class TorrentHeading extends React.Component {
             {this.getTorrentActions(torrent)}
           </ul>
         </div>
-        <ProgressBar percent={torrent.percentComplete} />
+        <ProgressBar percent={torrent.percentComplete} icon={torrentStatusIcon} />
       </div>
     );
   }

client/source/scripts/components/torrent-list/ActionBar.js

@@ -46,7 +46,7 @@ export default class ActionBar extends React.Component {
   }
 
   handleAddTorrents() {
-    UIActions.displayModal('add-torrents');
+    UIActions.displayModal({id: 'add-torrents'});
   }
 
   handleRemoveTorrentConfirm(torrents) {
@@ -87,10 +87,12 @@ export default class ActionBar extends React.Component {
     }
 
     UIActions.displayModal({
-      actions,
-      content,
-      heading: 'Remove Torrents',
-      type: 'confirm'
+      id: 'confirm',
+      options: {
+        actions,
+        content,
+        heading: 'Remove Torrents'
+      }
     });
   }
 

client/source/scripts/components/torrent-list/TorrentList.js

@@ -155,7 +155,7 @@ export default class TorrentListContainer extends React.Component {
   }
 
   handleContextMenuMoveClick(hashes) {
-    UIActions.displayModal('move-torrents');
+    UIActions.displayModal({id: 'move-torrents'});
   }
 
   handleDetailsClick(torrent, event) {
@@ -253,7 +253,7 @@ export default class TorrentListContainer extends React.Component {
 
     // The number of elements in view is the height of the viewport divided
     // by the height of the elements.
-    let elementsInView = Math.floor(this.state.viewportHeight /
+    let elementsInView = Math.ceil(this.state.viewportHeight /
       this.state.torrentHeight);
 
     // The minimum item index to render is the number of items above the