aboutsummaryrefslogtreecommitdiff
path: root/src/web/js/components/Menu.react.js
diff options
context:
space:
mode:
Diffstat (limited to 'src/web/js/components/Menu.react.js')
-rw-r--r--src/web/js/components/Menu.react.js143
1 files changed, 102 insertions, 41 deletions
diff --git a/src/web/js/components/Menu.react.js b/src/web/js/components/Menu.react.js
index d44e7bd3..3e5f4156 100644
--- a/src/web/js/components/Menu.react.js
+++ b/src/web/js/components/Menu.react.js
@@ -1,7 +1,11 @@
var React = require('react');
+var Row = require('react-bootstrap/lib/Row');
+var Badge = require('react-bootstrap/lib/Badge');
var Button = require('react-bootstrap/lib/Button');
var ButtonGroup = require('react-bootstrap/lib/ButtonGroup');
-var Badge = require('react-bootstrap/lib/Badge');
+var ListGroup = require('react-bootstrap/lib/ListGroup');
+var ListGroupItem = require('react-bootstrap/lib/ListGroupItem');
+var Glyphicon = require('react-bootstrap/lib/Glyphicon');
var MenuStore = require('../stores/MenuStore');
var MenuActions = require('../actions/MenuActions');
@@ -13,27 +17,29 @@ var FeedItem = React.createClass({
unread: React.PropTypes.number.isRequired,
error_count: React.PropTypes.number.isRequired,
icon_url: React.PropTypes.string,
+ active: React.PropTypes.bool.isRequired,
},
render: function() {
var icon = null;
var badge_unread = null;
- var badge_error = null;
+ var style = null;
if(this.props.icon_url){
icon = (<img width="16px" src={this.props.icon_url} />);
} else {
- icon = (<span className="glyphicon glyphicon-ban-circle" />);
+ icon = <Glyphicon glyph="ban-circle" />;
}
if(this.props.unread){
badge_unread = <Badge pullRight>{this.props.unread}</Badge>;
}
if(this.props.error_count == 6) {
- badge_unread = <Badge pullRight error>error</Badge>;
+ style = "danger";
} else if(this.props.error_count > 3) {
- badge_unread = <Badge pullRight warning>warn</Badge>;
+ style = "warning";
}
- return (<li onMouseDown={this.handleClick}>
- {icon}{this.props.title}{badge_unread}{badge_error}
- </li>
+ return (<ListGroupItem onMouseDown={this.handleClick} bsStyle={style}
+ href="#" active={this.props.active}>
+ {icon}{this.props.title}{badge_unread}
+ </ListGroupItem>
);
},
handleClick: function() {
@@ -42,53 +48,76 @@ var FeedItem = React.createClass({
});
var Category = React.createClass({
- propTypes: {category_id: React.PropTypes.number.isRequired,
+ propTypes: {cat_id: React.PropTypes.number.isRequired,
filter: React.PropTypes.string.isRequired,
+ active_type: React.PropTypes.string,
+ active_id: React.PropTypes.number,
name: React.PropTypes.string.isRequired,
feeds: React.PropTypes.array.isRequired,
unread: React.PropTypes.number.isRequired,
},
+ getInitialState: function() {
+ return {unfolded: true};
+ },
render: function() {
var filter = this.props.filter;
+ var a_type = this.props.active_type;
+ var a_id = this.props.active_id;
// filtering according to this.props.filter
+ if(this.state.unfolded) {
var feeds = this.props.feeds.filter(function(feed) {
- if (filter == 'unread' && feed.unread <= 0) {return false;}
- else if (filter == 'error' && feed.error_count <= 3){return false;}
+ if (filter == 'unread' && feed.unread <= 0) {
+ return false;
+ } else if (filter == 'error' && feed.error_count <= 3) {
+ return false;
+ }
return true;
}).sort(function(feed_a, feed_b){
return feed_b.unread - feed_a.unread;
}).map(function(feed) {
- return (<FeedItem key={"feed" + feed.id} feed_id={feed.id}
+ return (<FeedItem key={"f" + feed.id} feed_id={feed.id}
title={feed.title} unread={feed.unread}
error_count={feed.error_count}
- icon_url={feed.icon_url} />);
+ active={a_type == 'feed_id' && a_id == feed.id}
+ icon_url={feed.icon_url} />
+ );
});
- var unread = undefined;
+ } else {
+ var feeds = [];
+ }
+ var unread = null;
if(this.props.unread){
- unread = (<span className="badge pull-right">
- {this.props.unread}
- </span>);
+ unread = <Badge pullRight>{this.props.unread}</Badge>;
}
- return (<div>
- <h3 onMouseDown={this.handleClick}>
- {this.props.name} {unread}
- </h3>
- <ul className="nav nav-sidebar">{feeds}</ul>
- </div>
+ var active = a_type == 'category_id' && a_id == this.props.cat_id;
+ var ctrl = (<Glyphicon onMouseDown={this.toggleFolding} pullLeft
+ glyph={this.state.unfolded?"menu-down":"menu-right"} />
+ );
+
+ return (<ListGroup>
+ <ListGroupItem href="#" bsStyle="success"
+ active={active}
+ onMouseDown={this.handleClick}>
+ {ctrl} <strong>{this.props.name}</strong> {unread}
+ </ListGroupItem>
+ {feeds}
+ </ListGroup>
);
},
handleClick: function() {
- MiddlePanelActions.setCategoryFilter(this.props.category_id);
+ MiddlePanelActions.setCategoryFilter(this.props.cat_id);
+ },
+ toggleFolding: function(evnt) {
+ this.setState({unfolded: !this.state.unfolded});
+ evnt.stopPropagation();
},
});
-var Menu = React.createClass({
+var MenuFilter = React.createClass({
getInitialState: function() {
- return {filter: 'all', categories: [],
- feed_in_error: false, all_unread_count: 0};
+ return {filter: 'all', feed_in_error: false};
},
render: function() {
- var filter = this.state.filter;
var error_button = null;
if (this.state.feed_in_error) {
error_button = (<Button active={this.state.filter == "error"}
@@ -96,8 +125,7 @@ var Menu = React.createClass({
bsSize="small" bsStyle="warning">Error</Button>
);
}
- return (<div id="sidebar" data-spy="affix" role="navigation"
- className="col-md-2 sidebar sidebar-offcanvas pre-scrollable hidden-sm hidden-xs affix">
+ return (<Row className="show-grid">
<ButtonGroup>
<Button active={this.state.filter == "all"}
onMouseDown={MenuActions.setFilterAll}
@@ -106,17 +134,49 @@ var Menu = React.createClass({
onMouseDown={MenuActions.setFilterUnread}
bsSize="small">Unread</Button>
{error_button}
- </ButtonGroup>
+ </ButtonGroup>
+ </Row>
+ );
+ },
+ componentDidMount: function() {
+ MenuStore.addChangeListener(this._onChange);
+ },
+ componentWillUnmount: function() {
+ MenuStore.removeChangeListener(this._onChange);
+ },
+ _onChange: function() {
+ var datas = MenuStore.getAll();
+ this.setState({filter: datas.filter,
+ feed_in_error: datas.feed_in_error});
+ },
+});
+
+var Menu = React.createClass({
+ getInitialState: function() {
+ return {filter: 'all', categories: [], all_unread_count: 0,
+ active_type: null, active_id: null};
+ },
+ render: function() {
+ var state = this.state;
+ var rmPrntFilt = (<ListGroupItem href="#" bsStyle="success"
+ active={this.state.active_type == null
+ || this.state.active_id == null}
+ onMouseDown={MiddlePanelActions.removeParentFilter}
+ header="All"></ListGroupItem>);
+
+ return (<Row className="show-grid">
+ <ListGroup>{rmPrntFilt}</ListGroup>
{this.state.categories.map(function(category){
- return (<Category key={"cat" + category.id}
- filter={filter}
- category_id={category.id}
- feeds={category.feeds}
- name={category.name}
- unread={category.unread} />);
+ return (<Category key={"c" + category.id}
+ filter={state.filter}
+ active_type={state.active_type}
+ active_id={state.active_id}
+ cat_id={category.id}
+ feeds={category.feeds}
+ name={category.name}
+ unread={category.unread} />);
})}
-
- </div>
+ </Row>
);
},
componentDidMount: function() {
@@ -130,9 +190,10 @@ var Menu = React.createClass({
var datas = MenuStore.getAll();
this.setState({filter: datas.filter,
categories: datas.categories,
- feed_in_error: datas.feed_in_error,
+ active_type: datas.active_type,
+ active_id: datas.active_id,
all_unread_count: datas.all_unread_count});
},
});
-module.exports = Menu;
+module.exports = {Menu: Menu, MenuFilter: MenuFilter};
bgstack15