Move torrent details to 'underneath' torrent list

client/source/scripts/components/panels/Sidebar.js

@@ -1,6 +1,5 @@
 import React from 'react';
 
-import ApplicationSidebar from '../layout/ApplicationSidebar';
 import ClientStats from '../sidebar/TransferData';
 import SearchBox from '../forms/SearchBox';
 import SpeedLimitDropdown from '../sidebar/SpeedLimitDropdown';
@@ -9,12 +8,12 @@ import StatusFilters from '../sidebar/StatusFilters';
 class Sidebar extends React.Component {
   render() {
     return (
-      <ApplicationSidebar>
+      <div className="application__sidebar">
         <SpeedLimitDropdown />
         <ClientStats />
         <SearchBox />
         <StatusFilters />
-      </ApplicationSidebar>
+      </div>
     );
   }
 }

client/source/scripts/components/panels/TorrentDetailsView.js

@@ -8,6 +8,7 @@ import Download from '../icons/Download';
 import EventTypes from '../../constants/EventTypes';
 import ETA from '../icons/ETA';
 import format from '../../util/formatData';
+import ProgressBar from '../ui/ProgressBar';
 import Ratio from '../../components/icons/Ratio';
 import TorrentActions from '../../actions/TorrentActions';
 import TorrentFiles from '../torrent-details/TorrentFiles';
@@ -57,7 +58,7 @@ export default class TorrentDetails extends React.Component {
   }
 
   onTorrentDetailsHashChange() {
-    if (UIStore.isTorrentDetailsOpen()) {
+    if (this.state.isOpen) {
       TorrentStore.fetchTorrentDetails(UIStore.getTorrentDetailsHash());
     }
   }
@@ -80,12 +81,80 @@ export default class TorrentDetails extends React.Component {
     });
   }
 
-  getHeading() {
-    // return (
-    //   <div className="torrent-details__actions torrent-details__section">
-    //     Dropdown
-    //   </div>
-    // );
+  getHeading(torrent) {
+    let added = new Date(torrent.added * 1000);
+    let addedString = `${added.getMonth() + 1}/${added.getDate()}/` +
+      `${added.getFullYear()}`;
+    let completed = format.data(torrent.bytesDone);
+    let downloadRate = format.data(torrent.downloadRate, '/s');
+    let downloadTotal = format.data(torrent.downloadTotal);
+    let eta = format.eta(torrent.eta);
+    let ratio = format.ratio(torrent.ratio);
+    let totalSize = format.data(torrent.sizeBytes);
+    let uploadRate = format.data(torrent.uploadRate, '/s');
+    let uploadTotal = format.data(torrent.uploadTotal);
+
+    let classes = classNames('torrent-details__heading torrent-details__section', {
+      'is-selected': this.props.selected,
+      'is-stopped': torrent.status.indexOf('is-stopped') > -1,
+      'is-paused': torrent.status.indexOf('is-paused') > -1,
+      'is-actively-downloading': downloadRate.value > 0,
+      'is-downloading': torrent.status.indexOf('is-downloading') > -1,
+      'is-seeding': torrent.status.indexOf('is-seeding') > -1,
+      'is-completed': torrent.status.indexOf('is-completed') > -1,
+      'is-checking': torrent.status.indexOf('is-checking') > -1,
+      'is-active': torrent.status.indexOf('is-active') > -1,
+      'is-inactive': torrent.status.indexOf('is-inactive') > -1
+    });
+
+    return (
+      <div className={classes}>
+        <h1 className="torrent__details--name">{torrent.name}</h1>
+        <ul className="torrent__details torrent__details--tertiary">
+          <li className="torrent__details--download transfer-data--download">
+            <Download />
+            {downloadRate.value}
+            <em className="unit">{downloadRate.unit}</em>
+          </li>
+          <li className="torrent__details--upload transfer-data--upload">
+            <Upload />
+            {uploadRate.value}
+            <em className="unit">{uploadRate.unit}</em>
+          </li>
+          <li className="torrent__details--ratio">
+            <Ratio />
+            {ratio}
+          </li>
+          <li className="torrent__details--eta">
+            <ETA />
+            {eta}
+          </li>
+          <li className="torrent__details--completed">
+            <span className="torrent__details__label">Downloaded</span>
+            {torrent.percentComplete}
+            <em className="unit">%</em>
+            &nbsp;&mdash;&nbsp;
+            {completed.value}
+            <em className="unit">{completed.unit}</em>
+          </li>
+          <li className="torrent__details--uploaded">
+            <span className="torrent__details__label">Uploaded</span>
+            {uploadTotal.value}
+            <em className="unit">{uploadTotal.unit}</em>
+          </li>
+          <li className="torrent__details--size">
+            <span className="torrent__details__label">Size</span>
+            {totalSize.value}
+            <em className="unit">{totalSize.unit}</em>
+          </li>
+          <li className="torrent__details--added">
+            <span className="torrent__details__label">Added</span>
+            {addedString}
+          </li>
+        </ul>
+        <ProgressBar percent={torrent.percentComplete} />
+      </div>
+    );
   }
 
   getTorrentDetailsView() {
@@ -94,42 +163,11 @@ export default class TorrentDetails extends React.Component {
     if (this.state.isOpen) {
       let selectedHash = UIStore.getTorrentDetailsHash();
       let torrent = TorrentStore.getTorrent(selectedHash);
-      let added = new Date(torrent.added * 1000);
-      let addedString = (added.getMonth() + 1) + '/' + added.getDate() + '/' +
-        added.getFullYear();
-      let completed = format.data(torrent.bytesDone);
-      let downloadRate = format.data(torrent.downloadRate, '/s');
-      let downloadTotal = format.data(torrent.downloadTotal);
-      let eta = format.eta(torrent.eta);
-      let ratio = format.ratio(torrent.ratio);
-      let totalSize = format.data(torrent.sizeBytes);
       let torrentDetails = this.state.torrentDetails || {};
-      let uploadRate = format.data(torrent.uploadRate, '/s');
-      let uploadTotal = format.data(torrent.uploadTotal);
 
       torrentDetailsContent = (
-        <div className="torrent-details" key={this.state.isOpen}>
-          {this.getHeading()}
-          <ul className="torrent-details__transfer-data torrent-details__section">
-            <li className="transfer-data transfer-data--download">
-              <Download />
-              {downloadRate.value}
-              <em className="unit">{downloadRate.unit}</em>
-            </li>
-            <li className="transfer-data transfer-data--upload">
-              <Upload />
-              {uploadRate.value}
-              <em className="unit">{uploadRate.unit}</em>
-            </li>
-            <li className="transfer-data transfer-data--ratio">
-              <Ratio />
-              {ratio}
-            </li>
-            <li className="transfer-data transfer-data--eta">
-              <ETA />
-              {eta}
-            </li>
-          </ul>
+        <div className="torrent-details">
+          {this.getHeading(torrent)}
           <TorrentTrackers trackers={torrentDetails.trackers} />
           <TorrentFiles files={torrentDetails.files} torrent={torrent} />
           <TorrentPeers peers={torrentDetails.peers} />

client/source/scripts/components/panels/TorrentListView.js

@@ -7,7 +7,6 @@ import EventTypes from '../../constants/EventTypes';
 import TorrentListContainer from '../torrent-list/TorrentListContainer';
 import TorrentStore from '../../stores/TorrentStore';
 import UIStore from '../../stores/UIStore';
-import Wrapper from '../layout/Wrapper';
 
 const METHODS_TO_BIND = ['onOpenChange'];
 
@@ -45,14 +44,12 @@ class TorrentListView extends React.Component {
   }
 
   render() {
-    let classes = classnames({'is-open': this.state.isTorrentDetailsOpen});
+    let classes = classnames({'is-open': this.state.isTorrentDetailsOpen}, 'view--torrent-list');
 
     return (
-      <ApplicationPanel modifier="torrent-list" extension={classes}>
-        <Wrapper className="view--torrent-list">
-          <ActionBar />
-          <TorrentListContainer />
-        </Wrapper>
+      <ApplicationPanel modifier="torrent-list" className={classes}>
+        <ActionBar />
+        <TorrentListContainer />
       </ApplicationPanel>
     );
   }