Improve file listing

package.json

@@ -16,45 +16,45 @@
   "author": "Drew DeVault <sir@cmpwn.com>",
   "license": "BSD-3-Clause",
   "devDependencies": {
-    "babel-core": "^6.25.0",
+    "babel-core": "^6.26.0",
-    "babel-loader": "^7.1.1",
+    "babel-loader": "^7.1.2",
-    "babel-preset-env": "^1.6.0",
+    "babel-preset-env": "^1.6.1",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-0": "^6.24.1",
-    "css-loader": "^0.28.4",
+    "css-loader": "^0.28.7",
-    "react-redux": "^5.0.5",
+    "react-redux": "^5.0.6",
     "reactstrap": "^4.8.0",
     "redux": "^3.7.2",
     "redux-thunk": "^2.2.0",
     "style-loader": "^0.18.2",
     "uglifyjs-webpack-plugin": "^0.4.6",
-    "webpack": "^3.1.0",
+    "webpack": "^3.10.0",
-    "webpack-dev-middleware": "^1.12.0",
+    "webpack-dev-middleware": "^1.12.2",
-    "webpack-hot-middleware": "^2.18.2"
+    "webpack-hot-middleware": "^2.21.0"
   },
   "dependencies": {
     "babel-plugin-transform-react-jsx": "^6.24.1",
     "babel-polyfill": "^6.26.0",
     "bencode": "^1.0.0",
-    "bootstrap": "^4.0.0-alpha.6",
+    "bootstrap": "^4.0.0-beta.3",
-    "express": "^4.15.3",
+    "express": "^4.16.2",
     "file-loader": "^0.11.2",
     "font-awesome": "^4.7.0",
     "font-awesome-sass-loader": "^2.0.1",
     "history": "^4.7.2",
     "isomorphic-fetch": "^2.2.1",
-    "moment": "^2.18.1",
+    "moment": "^2.20.1",
-    "node-sass": "^4.5.3",
+    "node-sass": "^4.7.2",
-    "preact": "^8.2.4",
+    "preact": "^8.2.7",
     "preact-compat": "^3.17.0",
-    "react": "^15.6.1",
+    "react": "^15.6.2",
-    "react-dom": "^15.6.1",
+    "react-dom": "^15.6.2",
     "react-fontawesome": "^1.6.1",
-    "react-hot-loader": "^3.0.0-beta.7",
+    "react-hot-loader": "^3.1.3",
-    "react-router-dom": "^4.2.0",
+    "react-router-dom": "^4.2.2",
-    "react-router-redux": "^5.0.0-alpha.6",
+    "react-router-redux": "^5.0.0-alpha.9",
-    "react-transition-group": "^2.2.0",
+    "react-transition-group": "^2.2.1",
     "sass-loader": "^6.0.6",
     "url-loader": "^0.5.9"
   }

scss/main.scss

@@ -202,3 +202,52 @@ fieldset .form-check-input:only-child {
     }
   }
 }
+
+.files {
+  .file {
+    display: flex;
+    padding: 0.1rem 0.25rem;
+
+    &:nth-child(even) {
+      background: #dfdfdf;
+    }
+
+    div {
+      margin: 0 0.5rem;
+
+      &:first-child {
+        margin-left: 0;
+      }
+
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+
+    .progress {
+      min-width: 3rem;
+      align-self: center;
+
+      .progress-bar {
+        height: 100%;
+      }
+    }
+
+    .path {
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+      flex-grow: 1;
+      line-height: 1.7;
+    }
+
+    select {
+      min-width: 5rem;
+    }
+  }
+}
+
+.toggles * {
+  flex-grow: 1 !important;
+  margin: 0 0.25rem;
+}

scss/srht

@@ -1 +1 @@
-Subproject commit 1cea2941056108fe5fb17626ad9a45f4276c83eb
+Subproject commit 1c076933d77236b78a33b817d19071017d907a00

src/ui/torrent_details.js

@@ -10,6 +10,8 @@ import {
   Collapse,
   Card,
   CardBlock,
+  Progress,
+  Input,
 } from 'reactstrap';
 import moment from 'moment';
 import TorrentOptions from './torrent_options';
@@ -27,24 +29,47 @@ import { updateResource } from '../actions/resources';
 
 const dlURI = (uri, password, id) => `${uri.replace('ws', 'http')}/dl/${id}?password=${encodeURIComponent(password)}`;
 
-function File({ file }) {
+function basename(path) {
-  // TODO: show progress bar
+  const parts = path.split("/");
+  return parts[parts.length - 1];
+}
+
+function File({ dispatch, file }) {
   // TODO: edit priority
   const { uri, password } = store.getState().socket;
   return (
-    <tr>
+    <div className="file">
-      <td>
+      <Progress
-        {
+        value={file.progress * 100}
-          file.progress == 1.0
+        color={file.progress != 1.0 ? "success" : "primary"}
-            ? <a href={dlURI(uri, password, file.id)} target="_new">
+      >
-                {file.path}
+        {file.progress == 1.0 ?
-              </a>
+          "done" : `${(file.progress * 100).toFixed(0)}%`}
-            : file.path
+      </Progress>
-        }
+      <div className="path" title={file.path}>
-      </td>
+        {file.progress == 1.0 ?
-      <td>{file.priority}</td>
+          <a href={dlURI(uri, password, file.id)} target="_new">
-      <td>{file.availability}</td>
+            {basename(file.path)}
-    </tr>
+          </a> : basename(file.path)}
+      </div>
+      <div>
+        <Input
+          type="select"
+          id="priority"
+          value={file.priority}
+          onChange={e => dispatch(updateResource({
+            id: file.id,
+            priority: parseInt(e.target.value)
+          }))}
+        >
+          <option value="1">Lowest</option>
+          <option value="2">Low</option>
+          <option value="3">Normal</option>
+          <option value="4">High</option>
+          <option value="5">Highest</option>
+        </Input>
+      </div>
+    </div>
   );
 }
 
@@ -129,7 +154,7 @@ class Torrent extends Component {
             </DropdownMenu>
           </ButtonDropdown>
         </div>
-        <ButtonGroup>
+        <ButtonGroup className="toggles">
           <CollapseToggle
             text="Info"
             onToggle={() => this.setState({ infoShown: !this.state.infoShown })}
@@ -152,7 +177,7 @@ class Torrent extends Component {
           />
         </ButtonGroup>
         <Collapse isOpen={this.state.infoShown}>
-          <Card>
+          <Card style={{marginBottom: "1rem"}}>
             <CardBlock>
               <dl>
                 <dt>Downloading to</dt>
@@ -177,12 +202,12 @@ class Torrent extends Component {
         </Collapse>
         <Collapse isOpen={this.state.filesShown}>
           <Card style={{marginBottom: "1rem"}}>
-            <CardBlock>
+            <CardBlock style={{padding: "0"}}>
-              <table className="table table-striped" style={{marginBottom: "0"}}>
+              <div className="files" style={{marginBottom: "0"}}>
-                <tbody>
+                {files.slice().sort((a, b) =>
-                  {files.slice().sort((a, b) => a.path.localeCompare(b.path)).map(file => <File file={file} />)}
+                  a.path.localeCompare(b.path)).map(file =>
-                </tbody>
+                    <File dispatch={dispatch} file={file} />)}
-              </table>
+              </div>
             </CardBlock>
           </Card>
         </Collapse>