diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/web/js/actions/MenuActions.js | 6 | ||||
-rw-r--r-- | src/web/js/components/Menu.react.js | 59 | ||||
-rw-r--r-- | src/web/js/components/MiddlePanel.react.js | 10 | ||||
-rw-r--r-- | src/web/js/constants/JarrConstants.js | 1 | ||||
-rw-r--r-- | src/web/js/stores/MenuStore.js | 6 | ||||
-rw-r--r-- | src/web/static/css/one-page-app.css | 6 |
6 files changed, 68 insertions, 20 deletions
diff --git a/src/web/js/actions/MenuActions.js b/src/web/js/actions/MenuActions.js index d3a0d25d..b9154581 100644 --- a/src/web/js/actions/MenuActions.js +++ b/src/web/js/actions/MenuActions.js @@ -26,6 +26,12 @@ var MenuActions = { filter: filter, }); }, + toggleAllFolding: function(all_folded) { + JarrDispatcher.dispatch({ + type: ActionTypes.TOGGLE_MENU_FOLD, + all_folded: all_folded, + }); + }, }; module.exports = MenuActions; diff --git a/src/web/js/components/Menu.react.js b/src/web/js/components/Menu.react.js index 76304f9a..60578f8a 100644 --- a/src/web/js/components/Menu.react.js +++ b/src/web/js/components/Menu.react.js @@ -84,9 +84,13 @@ var CategoryGroup = React.createClass({ name: React.PropTypes.string.isRequired, feeds: React.PropTypes.array.isRequired, unread: React.PropTypes.number.isRequired, + folded: React.PropTypes.bool.isRequired, }, getInitialState: function() { - return {unfolded: true}; + return {folded: this.props.folded}; + }, + componentWillReceiveProps: function(nextProps) { + this.setState({folded: nextProps.folded}); }, render: function() { // hidden the no category if empty @@ -96,7 +100,7 @@ var CategoryGroup = React.createClass({ var filter = this.props.filter; var a_type = this.props.active_type; var a_id = this.props.active_id; - if(this.state.unfolded) { + if(!this.state.folded) { // filtering according to this.props.filter var feeds = this.props.feeds.filter(function(feed) { if (filter == 'unread' && feed.unread <= 0) { @@ -119,11 +123,11 @@ var CategoryGroup = React.createClass({ var feeds = []; } var unread = null; - if(this.props.unread){ + if(this.props.unread) { unread = <Badge pullRight>{this.props.unread}</Badge>; } - var ctrl = (<Glyphicon onMouseDown={this.toggleFolding} pullLeft - glyph={this.state.unfolded?"menu-down":"menu-right"} /> + var ctrl = (<Glyphicon onClick={this.toggleFolding} pullLeft + glyph={this.state.folded?"menu-right":"menu-down"} /> ); return (<ul className="nav nav-sidebar"> @@ -137,7 +141,7 @@ var CategoryGroup = React.createClass({ ); }, toggleFolding: function(evnt) { - this.setState({unfolded: !this.state.unfolded}); + this.setState({folded: !this.state.folded}); evnt.stopPropagation(); }, }); @@ -145,32 +149,56 @@ var CategoryGroup = React.createClass({ var MenuFilter = React.createClass({ propTypes: {feed_in_error: React.PropTypes.bool, filter: React.PropTypes.string.isRequired}, + getInitialState: function() { + return {allFolded: false}; + }, render: function() { var error_button = null; if (this.props.feed_in_error) { error_button = ( <Button active={this.props.filter == "error"} title="Some of your feeds are in error, click here to list them" - onMouseDown={this.setErrorFilter} + onClick={this.setErrorFilter} bsSize="small" bsStyle="warning"> <Glyphicon glyph="exclamation-sign" /> </Button> ); } - return (<ButtonGroup className="nav nav-sidebar"> + if(this.state.allFolded) { + var foldBtnTitle = "Unfold all categories"; + var foldBtnGlyph = "option-horizontal"; + } else { + var foldBtnTitle = "Fold all categories"; + var foldBtnGlyph = "option-vertical"; + } + return (<div> + <ButtonGroup className="nav nav-sidebar"> <Button active={this.props.filter == "all"} title="Display all feeds" - onMouseDown={this.setAllFilter} bsSize="small"> + onClick={this.setAllFilter} bsSize="small"> <Glyphicon glyph="menu-hamburger" /> </Button> <Button active={this.props.filter == "unread"} title="Display only feed with unread article" - onMouseDown={this.setUnreadFilter} + onClick={this.setUnreadFilter} bsSize="small"> <Glyphicon glyph="unchecked" /> </Button> {error_button} </ButtonGroup> + <ButtonGroup className="nav nav-sidebar"> + <Button onClick={MenuActions.reload} + title="Refresh all feeds" bsSize="small"> + <Glyphicon glyph="refresh" /> + </Button> + </ButtonGroup> + <ButtonGroup className="nav nav-sidebar"> + <Button title={foldBtnTitle} bsSize="small" + onClick={this.toggleFold}> + <Glyphicon glyph={foldBtnGlyph} /> + </Button> + </ButtonGroup> + </div> ); }, setAllFilter: function() { @@ -182,12 +210,17 @@ var MenuFilter = React.createClass({ setErrorFilter: function() { MenuActions.setFilter("error"); }, + toggleFold: function() { + this.setState({allFolded: !this.state.allFolded}, function() { + MenuActions.toggleAllFolding(this.state.allFolded); + }.bind(this)); + }, }); var Menu = React.createClass({ getInitialState: function() { return {filter: 'all', categories: {}, feeds: {}, - active_type: null, active_id: null}; + all_folded: false, active_type: null, active_id: null}; }, render: function() { var feed_in_error = false; @@ -218,6 +251,7 @@ var Menu = React.createClass({ active_id={this.state.active_id} name={this.state.categories[cat_id].name} cat_id={this.state.categories[cat_id].id} + folded={this.state.all_folded} unread={unread} />); } @@ -244,7 +278,8 @@ var Menu = React.createClass({ categories: datas.categories, categories_order: datas.categories_order, active_type: datas.active_type, - active_id: datas.active_id}); + active_id: datas.active_id, + all_folded: datas.all_folded}); }, }); diff --git a/src/web/js/components/MiddlePanel.react.js b/src/web/js/components/MiddlePanel.react.js index eca56541..e251447e 100644 --- a/src/web/js/components/MiddlePanel.react.js +++ b/src/web/js/components/MiddlePanel.react.js @@ -158,31 +158,31 @@ var MiddlePanelFilter = React.createClass({ <ButtonGroup> <Button active={this.state.filter == "all"} title="Display all articles" - onMouseDown={this.setAllFilter} bsSize="small"> + onClick={this.setAllFilter} bsSize="small"> <Glyphicon glyph="menu-hamburger" /> </Button> <Button active={this.state.filter == "unread"} title="Display only unread article" - onMouseDown={this.setUnreadFilter} + onClick={this.setUnreadFilter} bsSize="small"> <Glyphicon glyph="unchecked" /> </Button> <Button active={this.state.filter == "liked"} title="Filter only liked articles" - onMouseDown={this.setLikedFilter} + onClick={this.setLikedFilter} bsSize="small"> <Glyphicon glyph="star" /> </Button> </ButtonGroup> <ButtonGroup> - <Button onMouseDown={this.toogleSearch} + <Button onClick={this.toogleSearch} title="Search through displayed articles" bsSize="small"> <Glyphicon glyph="search" /> </Button> </ButtonGroup> <ButtonGroup> - <Button onMouseDown={MiddlePanelActions.markAllAsRead} + <Button onClick={MiddlePanelActions.markAllAsRead} title="Mark all displayed article as read" bsSize="small"> <Glyphicon glyph="trash" /> diff --git a/src/web/js/constants/JarrConstants.js b/src/web/js/constants/JarrConstants.js index 4a673cf8..0ea42aad 100644 --- a/src/web/js/constants/JarrConstants.js +++ b/src/web/js/constants/JarrConstants.js @@ -12,6 +12,7 @@ var keyMirror = require('keymirror'); module.exports = keyMirror({ + TOGGLE_MENU_FOLD: null, RELOAD_MENU: null, PARENT_FILTER: null, MENU_FILTER: null, diff --git a/src/web/js/stores/MenuStore.js b/src/web/js/stores/MenuStore.js index 36dee363..49c61bc1 100644 --- a/src/web/js/stores/MenuStore.js +++ b/src/web/js/stores/MenuStore.js @@ -9,7 +9,8 @@ var MenuStore = assign({}, EventEmitter.prototype, { _datas: {filter: 'all', feeds: {}, categories: {}, categories_order: [], active_type: null, active_id: null, is_admin: false, crawling_method: 'classic', - all_unread_count: 0, max_error: 0, error_threshold: 0}, + all_unread_count: 0, max_error: 0, error_threshold: 0, + all_folded: false}, getAll: function() { return this._datas; }, @@ -106,6 +107,9 @@ MenuStore.dispatchToken = JarrDispatcher.register(function(action) { MenuStore.emitChange(); } break; + case ActionTypes.TOGGLE_MENU_FOLD: + MenuStore._datas.all_folded = action.all_folded; + MenuStore.emitChange(); default: // do nothing } diff --git a/src/web/static/css/one-page-app.css b/src/web/static/css/one-page-app.css index 40f7cd45..ffad209e 100644 --- a/src/web/static/css/one-page-app.css +++ b/src/web/static/css/one-page-app.css @@ -80,11 +80,13 @@ background-color: #F5F5F5; border-right: 1px solid #EEE; } -#middle-panel .btn-group { +#middle-panel .btn-group, +#menu .btn-group { margin-right: 10px; margin-bottom: 10px; } -#middle-panel .btn-group:last-child { +#middle-panel .btn-group:last-child, +#menu .btn-group:last-child { margin-right: 0px; float: right; } |