From def89fa5b27fd414fe876a487f22addacb31030d Mon Sep 17 00:00:00 2001 From: John F Date: Fri, 10 Apr 2015 00:08:24 -0400 Subject: [PATCH] Add ability to select torrents, Add UI Store for future UI controls, Add faux start/stop/pause buttons --- gulpfile.js | 12 +++- models/client.js | 16 ++--- npm-debug.log | 35 +++++++++++ package.json | 2 + source/sass/base/_layout.scss | 11 ++-- source/sass/objects/_action-bar.scss | 44 ++++++++++++++ source/sass/objects/_torrents.scss | 6 +- source/sass/style.scss | 17 +++--- source/sass/tools/_colors.scss | 9 +++ source/scripts/actions/TorrentActions.js | 18 ++++-- source/scripts/components/FloodApp.js | 11 ++-- .../scripts/components/action-bar/Action.js | 6 +- .../components/action-bar/ActionBar.js | 13 ++-- source/scripts/components/icons/Icon.js | 47 +++++++++++++++ .../scripts/components/icons/icons/pause.svg | 1 + .../scripts/components/icons/icons/start.svg | 1 + .../scripts/components/icons/icons/stop.svg | 1 + .../components/torrent-list/Torrent.js | 14 ++++- .../components/torrent-list/TorrentList.js | 38 +++++++++--- source/scripts/constants/TorrentConstants.js | 4 +- source/scripts/stores/TorrentStore.js | 2 +- source/scripts/stores/UIStore.js | 60 +++++++++++++++++++ 22 files changed, 315 insertions(+), 53 deletions(-) create mode 100644 npm-debug.log create mode 100644 source/sass/objects/_action-bar.scss create mode 100644 source/scripts/components/icons/Icon.js create mode 100644 source/scripts/components/icons/icons/pause.svg create mode 100644 source/scripts/components/icons/icons/start.svg create mode 100644 source/scripts/components/icons/icons/stop.svg create mode 100644 source/scripts/stores/UIStore.js diff --git a/gulpfile.js b/gulpfile.js index b978c6ac..93b18e09 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -7,7 +7,8 @@ var gulp = require('gulp'), browserify = require('browserify'), watchify = require('watchify'), reactify = require('reactify'), - source = require('vinyl-source-stream'); + source = require('vinyl-source-stream'), + svgmin = require('gulp-svgmin'); var supportedBrowsers = ['last 2 versions', '> 1%', 'ie >= 8', 'Firefox ESR', 'Opera >= 12'], jsFiles = []; @@ -76,6 +77,15 @@ gulp.task('scripts', function() { return rebundle(); }); +gulp.task('svg', function() { + + return gulp.src(sourceDir + '/scripts/components/icons/icons/*.svg') + .pipe(svgmin()) + .pipe(gulp.dest(sourceDir + '/scripts/components/icons/icons')); +}); + + + gulp.task('watch', function () { gulp.watch(sourceDir + 'scripts/**/*.js', ['scripts', reload]); gulp.watch(sourceDir + 'sass/**/*.scss', ['styles', reload]); diff --git a/models/client.js b/models/client.js index 657011c8..96ab628c 100644 --- a/models/client.js +++ b/models/client.js @@ -93,7 +93,7 @@ var defaults = { var mapProps = function(props, data) { - var mappedObject = []; + var mappedObject = {}; if (data[0].length === 1) { @@ -107,10 +107,12 @@ var mapProps = function(props, data) { for (i = 0, lenI = data.length; i < lenI; i++) { - mappedObject[i] = {}; + var hash = data[i][0]; + + mappedObject[hash] = {}; for (a = 0, lenA = props.length; a < lenA; a++) { - mappedObject[i][props[a]] = data[i][a]; + mappedObject[hash][props[a]] = data[i][a]; } } @@ -142,12 +144,12 @@ client.prototype.getTorrentList = function(callback) { // create torrent array, each item in the array being // an object with human-readable property values - var torrents = mapProps(defaults.torrentProperties, data); + var torrents = mapProps(defaults.torrentProperties, data, 'torrent-list'); // add percent complete - var torrents = torrents.map(function(torrent) { - torrent['percentComplete'] = (torrent['bytesDone'] / torrent['sizeBytes'] * 100).toFixed(2); - return torrent; + Object.keys(torrents).map(function(hash) { + + torrents[hash]['percentComplete'] = (torrents[hash]['bytesDone'] / torrents[hash]['sizeBytes'] * 100).toFixed(2); }); callback(null, torrents); diff --git a/npm-debug.log b/npm-debug.log new file mode 100644 index 00000000..7fab7b14 --- /dev/null +++ b/npm-debug.log @@ -0,0 +1,35 @@ +0 info it worked if it ends with ok +1 verbose cli [ 'node', '/usr/local/bin/npm', 'start' ] +2 info using npm@2.5.1 +3 info using node@v0.12.0 +4 verbose run-script [ 'prestart', 'start', 'poststart' ] +5 info prestart flood@0.0.0 +6 info start flood@0.0.0 +7 verbose unsafe-perm in lifecycle true +8 info flood@0.0.0 Failed to exec start script +9 verbose stack Error: flood@0.0.0 start: `node ./bin/www` +9 verbose stack Exit status 1 +9 verbose stack at EventEmitter. (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:213:16) +9 verbose stack at EventEmitter.emit (events.js:110:17) +9 verbose stack at ChildProcess. (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:14:12) +9 verbose stack at ChildProcess.emit (events.js:110:17) +9 verbose stack at maybeClose (child_process.js:1008:16) +9 verbose stack at Process.ChildProcess._handle.onexit (child_process.js:1080:5) +10 verbose pkgid flood@0.0.0 +11 verbose cwd /Users/John/Development/Flood/flood +12 error Darwin 14.1.0 +13 error argv "node" "/usr/local/bin/npm" "start" +14 error node v0.12.0 +15 error npm v2.5.1 +16 error code ELIFECYCLE +17 error flood@0.0.0 start: `node ./bin/www` +17 error Exit status 1 +18 error Failed at the flood@0.0.0 start script 'node ./bin/www'. +18 error This is most likely a problem with the flood package, +18 error not with npm itself. +18 error Tell the author that this fails on your system: +18 error node ./bin/www +18 error You can get their info via: +18 error npm owner ls flood +18 error There is likely additional logging output above. +19 verbose exit [ 1, true ] diff --git a/package.json b/package.json index 4a48d606..0754fca4 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ }, "dependencies": { "body-parser": "~1.12.0", + "classnames": "^1.2.0", "cookie-parser": "~1.3.4", "debug": "~2.1.1", "es6-promise": "^2.0.1", @@ -30,6 +31,7 @@ "gulp-autoprefixer": "^2.1.0", "gulp-notify": "^2.2.0", "gulp-sass": "^1.3.3", + "gulp-svgmin": "^1.1.1", "gulp-watch": "^4.2.1", "reactify": "^1.1.0", "vinyl-source-stream": "^1.1.0", diff --git a/source/sass/base/_layout.scss b/source/sass/base/_layout.scss index 1a74e811..6bf26b0c 100644 --- a/source/sass/base/_layout.scss +++ b/source/sass/base/_layout.scss @@ -14,15 +14,12 @@ body { } .filter-bar { - flex: 25%; + flex: 1; min-width: 200px; max-width: 240px; } -.torrent { - - &__list { - flex: 100%; - } - +.main { + flex: 5; + flex-direction: column; } diff --git a/source/sass/objects/_action-bar.scss b/source/sass/objects/_action-bar.scss new file mode 100644 index 00000000..210087fe --- /dev/null +++ b/source/sass/objects/_action-bar.scss @@ -0,0 +1,44 @@ +.action-bar { + background: #38353b; + color: $action-bar--foreground; + flex: 1; + padding: 0 20px; +} + +.actions { + font-size: 0; + list-style: none; +} + +.action { + cursor: pointer; + display: inline-block; + height: 60px; + position: relative; + width: 60px; + text-align: center; + transition: background 0.25s; + + &:hover { + background: $action--background--hover; + } + + &__label { + display: block; + position: absolute; + top: 100%; + visibility: hidden; + } + + .icon { + fill: $action--foreground; + height: 30px; + left: 50%; + position: absolute; + top: 50%; + transition: fill 0.25s; + transform: translateX(-50%) translateY(-50%); + width: 30px; + } + +} diff --git a/source/sass/objects/_torrents.scss b/source/sass/objects/_torrents.scss index 416e2b36..c91909fe 100644 --- a/source/sass/objects/_torrents.scss +++ b/source/sass/objects/_torrents.scss @@ -2,7 +2,11 @@ transition: background 0.25s; &:hover { - background: rgba(#fff, 0.05); + background: $torrent--background--hover; + } + + &.is-selected { + background: $torrent--background--selected; } } diff --git a/source/sass/style.scss b/source/sass/style.scss index 7d657934..14a2df95 100644 --- a/source/sass/style.scss +++ b/source/sass/style.scss @@ -6,13 +6,14 @@ @import "bower_components/inuit-box-sizing/generic.box-sizing"; @import "bower_components/inuit-page/base.page"; -@import 'tools/variables'; +@import "tools/variables"; -@import 'base/main'; -@import 'base/layout'; -@import 'base/typography'; +@import "base/main"; +@import "base/layout"; +@import "base/typography"; -@import 'objects/torrents'; -@import 'objects/filter-bar'; -@import 'objects/client-stats'; -@import 'objects/status-filter'; +@import "objects/torrents"; +@import "objects/filter-bar"; +@import "objects/action-bar"; +@import "objects/client-stats"; +@import "objects/status-filter"; diff --git a/source/sass/tools/_colors.scss b/source/sass/tools/_colors.scss index 044e4501..9740c166 100644 --- a/source/sass/tools/_colors.scss +++ b/source/sass/tools/_colors.scss @@ -5,6 +5,12 @@ $filter-bar--background: #1b191c; $filter-bar--foreground: #7f7e80; $filter-bar--border: #161316; +$action-bar--background: #38353b; +$action-bar--foreground: #1b1a1c; + +$action--foreground: #1b1a1c; +$action--background--hover: #4c4a4f; + $client-stats--primary: #e4dde6; $client-stats--secondary: #8b858d; $client-stats--tertiary: #363337; @@ -16,5 +22,8 @@ $torrent--header--foreground: #5b595c; $torrent--header--background: #29262b; $torrent--header--border: #221f24; +$torrent--background--hover: rgba(#fff, 0.05); +$torrent--background--selected: rgba(#fff, 0.1); + $progress-bar--background: #28242a; $progress-bar--fill: #0e8761; diff --git a/source/scripts/actions/TorrentActions.js b/source/scripts/actions/TorrentActions.js index 62c60b2e..f41f39a9 100644 --- a/source/scripts/actions/TorrentActions.js +++ b/source/scripts/actions/TorrentActions.js @@ -19,11 +19,11 @@ var performAction = function(action, hash, success, error) { var TorrentActions = { - stop: function(hash) { - performAction('stop', hash, function(data) { - AppDispatcher.dispatch({ - actionType: TorrentConstants.TORRENT_STOP - }); + click: function(hash) { + + AppDispatcher.dispatch({ + actionType: TorrentConstants.TORRENT_CLICK, + hash: hash }); }, @@ -33,6 +33,14 @@ var TorrentActions = { actionType: TorrentConstants.TORRENT_START }); }); + }, + + stop: function(hash) { + performAction('stop', hash, function(data) { + AppDispatcher.dispatch({ + actionType: TorrentConstants.TORRENT_STOP + }); + }); } } diff --git a/source/scripts/components/FloodApp.js b/source/scripts/components/FloodApp.js index 1456c89c..d8ab0f09 100644 --- a/source/scripts/components/FloodApp.js +++ b/source/scripts/components/FloodApp.js @@ -1,5 +1,6 @@ var React = require('react'); var FilterBar = require('./filter-bar/FilterBar'); +var ActionBar = require('./action-bar/ActionBar'); var TorrentList = require('./torrent-list/TorrentList'); var FloodApp = React.createClass({ @@ -8,19 +9,19 @@ var FloodApp = React.createClass({ return null; }, - componentDidMount: function() { - - }, - render: function() { return (
- +
+ + +
); } + }); module.exports = FloodApp; diff --git a/source/scripts/components/action-bar/Action.js b/source/scripts/components/action-bar/Action.js index a88cb076..57be671a 100644 --- a/source/scripts/components/action-bar/Action.js +++ b/source/scripts/components/action-bar/Action.js @@ -1,4 +1,5 @@ var React = require('react'); +var Icon = require('../icons/Icon'); var Action = React.createClass({ @@ -11,7 +12,10 @@ var Action = React.createClass({ var classString = 'action action--' + this.props.slug; return ( - {this.props.label} +
  • + + {this.props.label} +
    • ); } }); diff --git a/source/scripts/components/action-bar/ActionBar.js b/source/scripts/components/action-bar/ActionBar.js index 44f52746..38a7248a 100644 --- a/source/scripts/components/action-bar/ActionBar.js +++ b/source/scripts/components/action-bar/ActionBar.js @@ -1,5 +1,5 @@ var React = require('react'); -var Action = require('./Action.js'); +var Action = require('./Action'); var FilterBar = React.createClass({ @@ -15,11 +15,12 @@ var FilterBar = React.createClass({ render: function() { return ( -