Redesign torrent control buttons

scss/main.scss

@@ -150,3 +150,69 @@ fieldset .form-check-input:only-child {
 .form-check-inline {
   margin-bottom: 0;
 }
+
+.torrent-controls {
+  display: flex;
+  justify-content: stretch;
+  align-items: center;
+  margin-bottom: 0.5rem;
+
+  .status {
+    margin-right: 1rem;
+  }
+
+  .progress {
+    flex-grow: 1;
+    height: 1rem;
+    border-radius: 0;
+  }
+
+  .btn-group {
+    margin-left: 1rem;
+    margin-bottom: 0;
+
+    & > button {
+      padding-top: 0;
+      padding-bottom: 0;
+      font-size: 0.8rem;
+    }
+  }
+
+  a {
+    color: #666;
+  }
+}
+
+.bulk-controls {
+  float: right;
+
+  a {
+    color: #666;
+    font-size: 1rem;
+    margin-right: 1rem;
+  }
+
+  .btn-group {
+    margin-bottom: 0;
+    float: right;
+
+    & > button {
+      font-size: 0.8rem;
+      margin-top: 2px;
+    }
+  }
+}
+
+.bulk-controls, .torrent-controls {
+  .dropdown-menu {
+    padding: 0;
+    border-radius: 0;
+    margin-top: 1px;
+    left: auto;
+    right: 0;
+
+    .dropdown-item {
+      padding: 0 0.25rem;
+    }
+  }
+}

src/ui/torrent_details.js

@@ -50,7 +50,8 @@ class Torrent extends Component {
       infoShown: false,
       filesShown: false,
       trackersShown: false,
-      peersShown: false
+      peersShown: false,
+      removeDropdown: false
     };
   }
 
@@ -74,27 +75,36 @@ class Torrent extends Component {
 
     return (
       <div>
-        <h3>{torrent.name}</h3>
+        <h4>{torrent.name}</h4>
-        <Progress value={torrent.progress * 100} style={{marginBottom: "0.5rem"}}>
+        <div className="torrent-controls">
-          {(torrent.progress * 100).toFixed(0)}%
+          <a
-        </Progress>
+            href="#"
-        <p>
+            style={{margin: "auto 0.5rem"}}
-          <strong>State:</strong>
+            title={torrent.status === "paused" ? "Resume" : "Pause"}
-          <span style={{marginLeft: "1rem"}}>
+            onClick={e => {
-            {status(torrent.status)}
+              e.preventDefault();
-          </span>
+              this.toggleTorrentState(torrent);
-          <button
+            }}
-            className="btn btn-sm btn-very-sm btn-info"
-            style={{marginLeft: "1rem"}}
-            onClick={() => this.toggleTorrentState(torrent)}
           >
-            {torrent.status === "paused" ? "Resume" : "Pause"}
+            <FontAwesome name={torrent.status === "paused" ? "play" : "pause"} />
-          </button>
+          </a>
-          <button
+          <div class="status">{status(torrent.status)}</div>
-            className="btn btn-sm btn-very-sm btn-danger"
+          <Progress
-            style={{marginLeft: "1rem"}}
+            value={torrent.progress * 100}
-          >Remove</button>
+          >{(torrent.progress * 100).toFixed(0)}%</Progress>
-        </p>
+          <ButtonDropdown
+            isOpen={this.state.removeDropdown}
+            toggle={() => this.setState({ removeDropdown: !this.state.removeDropdown })}
+          >
+            <DropdownToggle color="danger" caret>
+              Remove
+            </DropdownToggle>
+            <DropdownMenu>
+              <DropdownItem>Remove</DropdownItem>
+              <DropdownItem>Remove and delete files</DropdownItem>
+            </DropdownMenu>
+          </ButtonDropdown>
+        </div>
         <ButtonGroup>
           <CollapseToggle
             text="Info"
@@ -164,33 +174,39 @@ class TorrentDetails extends Component {
   renderHeader(selection) {
     return (
       <div>
-        <h3>{selection.length} torrents</h3>
+        <h3>
-        <ButtonGroup>
+          {selection.length} torrents
-          <button
+          <div className="bulk-controls">
-            className="btn btn-default btn-sm"
+            <a
-            onClick={() => {
+              href="#"
-              selection.forEach(id => ws_send("PAUSE_TORRENT", { id }));
+              title="Resume all"
-            }}
+              onClick={e => {
-          >Pause all</button>
+                e.preventDefault();
-          <button
-            className="btn btn-default btn-sm"
-            onClick={() => {
                 selection.forEach(id => ws_send("RESUME_TORRENT", { id }));
               }}
-          >Resume all</button>
+            ><FontAwesome name="play" /></a>
+            <a
+              href="#"
+              title="Pause all"
+              onClick={e => {
+                e.preventDefault();
+                selection.forEach(id => ws_send("PAUSE_TORRENT", { id }));
+              }}
+            ><FontAwesome name="pause" /></a>
             <ButtonDropdown
               isOpen={this.state.removeDropdown}
               toggle={() => this.setState({ removeDropdown: !this.state.removeDropdown })}
             >
-            <DropdownToggle color="default" caret>
+              <DropdownToggle color="danger" caret>
-              Remove
+                Remove all
               </DropdownToggle>
               <DropdownMenu>
-              <DropdownItem>Remove all selected torrents</DropdownItem>
+                <DropdownItem>Remove selected torrents</DropdownItem>
-              <DropdownItem>Remove and delete files</DropdownItem>
+                <DropdownItem>Remove selected torrents and delete files</DropdownItem>
               </DropdownMenu>
             </ButtonDropdown>
-        </ButtonGroup>
+          </div>
+        </h3>
       </div>
     );
   }