aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/web/js/actions/MenuActions.js6
-rw-r--r--src/web/js/components/Menu.react.js59
-rw-r--r--src/web/js/components/MiddlePanel.react.js10
-rw-r--r--src/web/js/constants/JarrConstants.js1
-rw-r--r--src/web/js/stores/MenuStore.js6
-rw-r--r--src/web/static/css/one-page-app.css6
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;
}
bgstack15