reload and fold all button

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;
 }