Only show ETA & transfer speeds if file is transferring

client/source/sass/components/_action-bar.scss

@@ -2,7 +2,7 @@ $action-bar--background: transparent;
 $action-bar--foreground: #1b1a1c;
 $action-bar--group--border: rgba(#7a8080, 0.15);
 
-$action--foreground: #909799;
+$action--foreground: #8899a8;
 $action--foreground--hover: $blue;
 $action--background--hover: rgba(#333e4a, 0.05);
 $action--border--hover: rgba(#333e4a, 0.15);

client/source/sass/components/_client-stats.scss

@@ -105,40 +105,6 @@ $client-stats--limits--icon--hover: $blue;
   }
 }
 
-.client-stat {
-
-  &--limits {
-    background: none;
-    border: none;
-    color: $client-stats--limits--foreground;
-    display: block;
-    outline: none;
-    padding: 10px 15px;
-    font-size: 0.85em;
-    text-align: left;
-    transition: color 0.25s;
-    vertical-align: middle;
-    width: 100%;
-
-    .icon {
-      display: inline-block;
-      fill: $client-stats--limits--foreground;
-      margin: -2px 5px 0 0;
-      transition: fill 0.25s;
-      vertical-align: middle;
-      width: 14.5px;
-    }
-
-    &:hover {
-      color: $client-stats--limits--icon--hover;
-
-      .icon {
-        fill: $client-stats--limits--icon--hover;
-      }
-    }
-  }
-}
-
 .client-stat {
   position: relative;
 

client/source/sass/components/_sidebar.scss

@@ -6,12 +6,11 @@ $sidebar-filter--foreground--header: rgba($sidebar-filter--foreground, 0.5);
 $sidebar-filter--foreground--active: $blue;
 $sidebar-filter--foreground--hover: lighten($sidebar-filter--foreground, 15%);
 
-$sidebar--icon-button--fill: $sidebar--foreground;
+$sidebar--icon-button--fill: rgba($sidebar--foreground, 0.7);
 $sidebar--icon-button--fill--hover: $blue;
-$sidebar--icon-button--foreground: $sidebar--foreground;
+$sidebar--icon-button--foreground: rgba($sidebar--foreground, 0.7);
 $sidebar--icon-button--foreground--hover: $blue;
 
-
 .application {
 
   &__sidebar {
@@ -51,7 +50,9 @@ $sidebar--icon-button--foreground--hover: $blue;
     color: $sidebar--icon-button--foreground;
     cursor: pointer;
     display: block;
-    line-height: 0;
+    font-size: 0.8em;
+    line-height: 1;
+    padding: 10px;
     transition: color 0.25s;
 
     &:hover {
@@ -64,13 +65,15 @@ $sidebar--icon-button--foreground--hover: $blue;
 
     .icon {
       fill: $sidebar--icon-button--fill;
-      height: 16px;
+      height: 13px;
       transition: fill 0.25s;
-      width: 16px;
+      position: relative;
+      top: -1px;
+      vertical-align: middle;
+      width: 13px;
     }
 
     &--settings {
-      padding: 10px 15px;
       position: absolute;
       right: $spacing-unit * 1/5;
       top: $spacing-unit * 1/5;

client/source/sass/components/_torrents.scss

@@ -142,7 +142,7 @@ $torrent--background--error: #e95779;
 
     &--primary {
       color: $torrent--primary--foreground;
-      flex: 4;
+      flex: 1 1 auto;
       line-height: 1.3;
       white-space: nowrap;
 
@@ -165,27 +165,19 @@ $torrent--background--error: #e95779;
 
     &--secondary {
       color: $torrent--secondary--foreground;
-      flex: 0 0 210px;
+      flex: 0 0 auto;
       font-size: 0.75em;
-      min-width: 265px;
+      margin-right: $spacing-unit * 2/5;
       text-align: right;
       white-space: nowrap;
       vertical-align: baseline;
 
-      li {
-        display: inline-block;
-        font-weight: 500;
-        margin-right: 5px;
-        text-align: left;
-        white-space: nowrap;
+      &:last-child {
+        margin-right: 0;
+      }
 
-        .unit {
-          font-weight: 400;
-        }
-
-        &:last-child {
-          margin-right: 0;
-        }
+      .unit {
+        font-weight: 400;
       }
 
       .is-stopped & {
@@ -274,16 +266,15 @@ $torrent--background--error: #e95779;
       width: 55px;
     }
 
+    &--ratio {
+      width: 50px;
+    }
+
     &--seeds {
       width: 55px;
     }
 
-    &--eta {
-      width: 70px;
-    }
-
     &--speed {
-      width: 65px;
 
       &--download,
       &--upload {
@@ -310,10 +301,6 @@ $torrent--background--error: #e95779;
         color: $blue;
       }
     }
-
-    &--ratio {
-      width: 50px;
-    }
   }
 }
 

client/source/scripts/components/sidebar/SettingsButton.js

@@ -16,7 +16,7 @@ class SettingsButton extends React.Component {
     return (
       <a className="sidebar__icon-button sidebar__icon-button--settings"
         onClick={this.handleSettingsButtonClick}>
-        <SettingsIcon />
+        Settings <SettingsIcon />
       </a>
     );
   }

client/source/scripts/components/sidebar/SpeedLimitDropdown.js

@@ -57,7 +57,7 @@ class SpeedLimitDropdown extends React.Component {
 
   getDropdownHeader() {
     return (
-      <a className="client-stat--limits">
+      <a className="sidebar__icon-button sidebar__icon-button--limits">
         <LimitsIcon /> Speed Limits
       </a>
     );
@@ -144,7 +144,6 @@ class SpeedLimitDropdown extends React.Component {
   }
 
   render() {
-    // return <span>hi</span>;
     return (
       <SidebarItem modifier="speed-limit">
         <Dropdown

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

@@ -52,6 +52,7 @@ export default class Torrent extends React.Component {
     let downloadTotal = format.data(torrent.downloadTotal);
     let eta = format.eta(torrent.eta);
     let ratio = format.ratio(torrent.ratio);
+    let secondaryDetails = [];
     let totalSize = format.data(torrent.sizeBytes);
     let uploadRate = format.data(torrent.uploadRate, '/s');
     let uploadTotal = format.data(torrent.uploadTotal);
@@ -59,6 +60,36 @@ export default class Torrent extends React.Component {
     let torrentClasses = torrentStatusClasses(torrent, this.props.selected ? 'is-selected' : null, 'torrent');
     let torrentStatusIcon = torrentStatusIcons(torrent.status);
 
+    let isActivelyDownloading = downloadRate.value > 0 || uploadRate.value > 0;
+    let wasAddedRecently = (Date.now() - added.getTime()) < 1000 * 60 * 10; // Was added in the last 10 minutes.
+
+    if (isActivelyDownloading) {
+      secondaryDetails.push(
+        <li className="torrent__details--secondary torrent__details--eta"
+          key="eta">
+          <span className="torrent__details__icon"><ClockIcon /></span>
+          {eta}
+        </li>
+      );
+    }
+
+    if (isActivelyDownloading || wasAddedRecently) {
+      secondaryDetails.push(
+        <li className="torrent__details--secondary torrent__details--speed
+          torrent__details--speed--download" key="download-rate">
+          <span className="torrent__details__icon"><DownloadThickIcon /></span>
+          {downloadRate.value}
+          <em className="unit">{downloadRate.unit}</em>
+        </li>,
+        <li className="torrent__details--secondary torrent__details--speed
+          torrent__details--speed--upload" key="upload-rate">
+          <span className="torrent__details__icon"><UploadThickIcon /></span>
+          {uploadRate.value}
+          <em className="unit">{uploadRate.unit}</em>
+        </li>
+      );
+    }
+
     return (
       <li className={torrentClasses} onClick={this.handleClick}
         onContextMenu={this.handleRightClick}>
@@ -66,28 +97,7 @@ export default class Torrent extends React.Component {
           <li className="torrent__details--primary text-overflow">
             {torrent.name}
           </li>
-          <li className="torrent__details--secondary">
-            <ul className="torrent__details">
-              <li className="torrent__details--eta">
-                <span className="torrent__details__icon"><ClockIcon /></span>
-                {eta}
-              </li>
-              <li className="torrent__details--speed torrent__details--speed--download">
-                <span className="torrent__details__icon"><DownloadThickIcon /></span>
-                {downloadRate.value}
-                <em className="unit">{downloadRate.unit}</em>
-              </li>
-              <li className="torrent__details--speed torrent__details--speed--upload">
-                <span className="torrent__details__icon"><UploadThickIcon /></span>
-                {uploadRate.value}
-                <em className="unit">{uploadRate.unit}</em>
-              </li>
-              <li className="torrent__details--ratio">
-                <span className="torrent__details__icon"><RatioIcon /></span>
-                {ratio}
-              </li>
-            </ul>
-          </li>
+          {secondaryDetails}
         </ul>
         <ul className="torrent__details torrent__details--tertiary">
           <li className="torrent__details--completed">
@@ -103,6 +113,10 @@ export default class Torrent extends React.Component {
             {uploadTotal.value}
             <em className="unit">{uploadTotal.unit}</em>
           </li>
+          <li className="torrent__details--ratio">
+            <span className="torrent__details__icon"><RatioIcon /></span>
+            {ratio}
+          </li>
           <li className="torrent__details--size">
             <span className="torrent__details__icon"><DiskIcon /></span>
             {totalSize.value}