From d8c471b03a26d88ed41ddfb292d22c33199e065a Mon Sep 17 00:00:00 2001 From: John F Date: Mon, 27 Apr 2015 23:19:10 -0400 Subject: [PATCH] Add ability to filter by status and regex --- .gitignore | 1 + dist/public/scripts/app.js | 52 ++++++++++++++++--- dist/public/stylesheets/style.css | 8 ++- source/sass/objects/_status-filter.scss | 7 +++ source/sass/tools/_colors.scss | 2 + .../components/filter-bar/SearchBox.js | 5 -- .../components/filter-bar/StatusFilter.js | 27 +++++++++- source/scripts/stores/TorrentStore.js | 18 +++++++ 8 files changed, 104 insertions(+), 16 deletions(-) diff --git a/.gitignore b/.gitignore index c4adc266..9057ee45 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,6 @@ .DS_Store node_modules +npm-debug.log bower_components public/stylesheets public/scripts diff --git a/dist/public/scripts/app.js b/dist/public/scripts/app.js index 19003b28..bac88d7a 100644 --- a/dist/public/scripts/app.js +++ b/dist/public/scripts/app.js @@ -31602,11 +31602,6 @@ var React = require('react'); var SearchBox = React.createClass({displayName: "SearchBox", - getInitialState: function() { - - return null; - }, - render: function() { return ( @@ -31625,17 +31620,34 @@ module.exports = SearchBox; },{"react":"/Users/John/Development/Flood/flood/node_modules/react/react.js"}],"/Users/John/Development/Flood/flood/source/scripts/components/filter-bar/StatusFilter.js":[function(require,module,exports){ var React = require('react'); var UIActions = require('../../actions/UIActions'); +var TorrentStore = require('../../stores/TorrentStore'); var classnames = require('classnames'); var StatusFilter = React.createClass({displayName: "StatusFilter", + getInitialState: function() { + + return { + activeFilter: TorrentStore.getFilterCriteria() + } + }, + + componentDidMount: function() { + TorrentStore.addFilterChangeListener(this._onFilterChange); + }, + + componentWillUnmount: function() { + TorrentStore.removeFilterChangeListener(this._onFilterChange); + }, + render: function() { - var uniqueClass = 'status-filter__item--' + this.props.slug; + var itemClass = 'status-filter__item--' + this.props.slug; var classNames = classnames({ 'status-filter__item': true, - uniqueClass: true + itemClass: true, + 'is-active': this.state.activeFilter === this.props.slug }); return ( @@ -31645,6 +31657,12 @@ var StatusFilter = React.createClass({displayName: "StatusFilter", _onClick: function(action) { UIActions.filterTorrentList(this.props.slug); + }, + + _onFilterChange: function() { + this.setState({ + activeFilter: TorrentStore.getFilterCriteria() + }) } }); @@ -31679,7 +31697,7 @@ var StatusFilterList = React.createClass({displayName: "StatusFilterList", module.exports = StatusFilterList; -},{"../../actions/UIActions":"/Users/John/Development/Flood/flood/source/scripts/actions/UIActions.js","classnames":"/Users/John/Development/Flood/flood/node_modules/classnames/index.js","react":"/Users/John/Development/Flood/flood/node_modules/react/react.js"}],"/Users/John/Development/Flood/flood/source/scripts/components/icons/Icon.js":[function(require,module,exports){ +},{"../../actions/UIActions":"/Users/John/Development/Flood/flood/source/scripts/actions/UIActions.js","../../stores/TorrentStore":"/Users/John/Development/Flood/flood/source/scripts/stores/TorrentStore.js","classnames":"/Users/John/Development/Flood/flood/node_modules/classnames/index.js","react":"/Users/John/Development/Flood/flood/node_modules/react/react.js"}],"/Users/John/Development/Flood/flood/source/scripts/components/icons/Icon.js":[function(require,module,exports){ var React = require('react'); var Icon = React.createClass({displayName: "Icon", @@ -32339,6 +32357,11 @@ var TorrentStore = assign({}, EventEmitter.prototype, { } }, + getFilterCriteria: function() { + + return _filterStatus; + }, + emitChange: function() { this.emit(TorrentConstants.TORRENT_LIST_CHANGE); }, @@ -32347,6 +32370,10 @@ var TorrentStore = assign({}, EventEmitter.prototype, { this.emit(UIConstants.FILTER_SORT_CHANGE); }, + emitFilterChange: function() { + this.emit(UIConstants.FILTER_STATUS_CHANGE); + }, + addChangeListener: function(callback) { this.on(TorrentConstants.TORRENT_LIST_CHANGE, callback); }, @@ -32355,12 +32382,20 @@ var TorrentStore = assign({}, EventEmitter.prototype, { this.on(UIConstants.FILTER_SORT_CHANGE, callback); }, + addFilterChangeListener: function(callback) { + this.on(UIConstants.FILTER_STATUS_CHANGE, callback); + }, + removeChangeListener: function(callback) { this.removeListener(TorrentConstants.TORRENT_LIST_CHANGE, callback); }, removeSortChangeListener: function(callback) { this.removeListener(UIConstants.FILTER_SORT_CHANGE, callback); + }, + + removeFilterChangeListener: function(callback) { + this.removeListener(UIConstants.FILTER_STATUS_CHANGE, callback); } }); @@ -32395,6 +32430,7 @@ var dispatcherIndex = AppDispatcher.register(function(action) { _filterStatus = action.status; console.log(_filterStatus); TorrentStore.emitChange(); + TorrentStore.emitFilterChange(); break; } diff --git a/dist/public/stylesheets/style.css b/dist/public/stylesheets/style.css index b1fabc4b..d52dc175 100644 --- a/dist/public/stylesheets/style.css +++ b/dist/public/stylesheets/style.css @@ -721,7 +721,13 @@ body { padding: 30px 0; } .status-filter__item { cursor: pointer; - padding: 3px 20px; } + padding: 3px 20px; + -webkit-transition: color 0.25s; + -o-transition: color 0.25s; + transition: color 0.25s; } + .status-filter__item.is-active { + color: #fff; + font-weight: 700; } .progress-bar { background: #28242a; diff --git a/source/sass/objects/_status-filter.scss b/source/sass/objects/_status-filter.scss index 9b4797ad..bc8bb319 100644 --- a/source/sass/objects/_status-filter.scss +++ b/source/sass/objects/_status-filter.scss @@ -5,6 +5,13 @@ &__item { cursor: pointer; padding: 3px 20px; + transition: color 0.25s; + + &.is-active { + color: $status-filter--active--foreground; + font-weight: 700; + } + } } diff --git a/source/sass/tools/_colors.scss b/source/sass/tools/_colors.scss index 1c3d1206..bba6c717 100644 --- a/source/sass/tools/_colors.scss +++ b/source/sass/tools/_colors.scss @@ -23,6 +23,8 @@ $search-torrents--background: #161316; $search-torrents--foreground: #625e66; $search-torrents--placeholder: #252327; +$status-filter--active--foreground: #fff; + // torrents list $torrent--primary--foreground: #aaa8ab; diff --git a/source/scripts/components/filter-bar/SearchBox.js b/source/scripts/components/filter-bar/SearchBox.js index aee38fef..84184d9a 100644 --- a/source/scripts/components/filter-bar/SearchBox.js +++ b/source/scripts/components/filter-bar/SearchBox.js @@ -2,11 +2,6 @@ var React = require('react'); var SearchBox = React.createClass({ - getInitialState: function() { - - return null; - }, - render: function() { return ( diff --git a/source/scripts/components/filter-bar/StatusFilter.js b/source/scripts/components/filter-bar/StatusFilter.js index 1304bff0..f3878752 100644 --- a/source/scripts/components/filter-bar/StatusFilter.js +++ b/source/scripts/components/filter-bar/StatusFilter.js @@ -1,16 +1,33 @@ var React = require('react'); var UIActions = require('../../actions/UIActions'); +var TorrentStore = require('../../stores/TorrentStore'); var classnames = require('classnames'); var StatusFilter = React.createClass({ + getInitialState: function() { + + return { + activeFilter: TorrentStore.getFilterCriteria() + } + }, + + componentDidMount: function() { + TorrentStore.addFilterChangeListener(this._onFilterChange); + }, + + componentWillUnmount: function() { + TorrentStore.removeFilterChangeListener(this._onFilterChange); + }, + render: function() { - var uniqueClass = 'status-filter__item--' + this.props.slug; + var itemClass = 'status-filter__item--' + this.props.slug; var classNames = classnames({ 'status-filter__item': true, - uniqueClass: true + itemClass: true, + 'is-active': this.state.activeFilter === this.props.slug }); return ( @@ -20,6 +37,12 @@ var StatusFilter = React.createClass({ _onClick: function(action) { UIActions.filterTorrentList(this.props.slug); + }, + + _onFilterChange: function() { + this.setState({ + activeFilter: TorrentStore.getFilterCriteria() + }) } }); diff --git a/source/scripts/stores/TorrentStore.js b/source/scripts/stores/TorrentStore.js index 85f28e40..acf4784a 100644 --- a/source/scripts/stores/TorrentStore.js +++ b/source/scripts/stores/TorrentStore.js @@ -46,6 +46,11 @@ var TorrentStore = assign({}, EventEmitter.prototype, { } }, + getFilterCriteria: function() { + + return _filterStatus; + }, + emitChange: function() { this.emit(TorrentConstants.TORRENT_LIST_CHANGE); }, @@ -54,6 +59,10 @@ var TorrentStore = assign({}, EventEmitter.prototype, { this.emit(UIConstants.FILTER_SORT_CHANGE); }, + emitFilterChange: function() { + this.emit(UIConstants.FILTER_STATUS_CHANGE); + }, + addChangeListener: function(callback) { this.on(TorrentConstants.TORRENT_LIST_CHANGE, callback); }, @@ -62,12 +71,20 @@ var TorrentStore = assign({}, EventEmitter.prototype, { this.on(UIConstants.FILTER_SORT_CHANGE, callback); }, + addFilterChangeListener: function(callback) { + this.on(UIConstants.FILTER_STATUS_CHANGE, callback); + }, + removeChangeListener: function(callback) { this.removeListener(TorrentConstants.TORRENT_LIST_CHANGE, callback); }, removeSortChangeListener: function(callback) { this.removeListener(UIConstants.FILTER_SORT_CHANGE, callback); + }, + + removeFilterChangeListener: function(callback) { + this.removeListener(UIConstants.FILTER_STATUS_CHANGE, callback); } }); @@ -102,6 +119,7 @@ var dispatcherIndex = AppDispatcher.register(function(action) { _filterStatus = action.status; console.log(_filterStatus); TorrentStore.emitChange(); + TorrentStore.emitFilterChange(); break; }