diff options
Diffstat (limited to 'src/web/js/components/MiddlePanel.react.js')
-rw-r--r-- | src/web/js/components/MiddlePanel.react.js | 111 |
1 files changed, 65 insertions, 46 deletions
diff --git a/src/web/js/components/MiddlePanel.react.js b/src/web/js/components/MiddlePanel.react.js index f95554b8..49365a6a 100644 --- a/src/web/js/components/MiddlePanel.react.js +++ b/src/web/js/components/MiddlePanel.react.js @@ -1,6 +1,10 @@ var React = require('react'); +var Row = require('react-bootstrap/lib/Row'); var Button = require('react-bootstrap/lib/Button'); var ButtonGroup = require('react-bootstrap/lib/ButtonGroup'); +var ListGroup = require('react-bootstrap/lib/ListGroup'); +var ListGroupItem = require('react-bootstrap/lib/ListGroupItem'); +var Glyphicon = require('react-bootstrap/lib/Glyphicon'); var MiddlePanelStore = require('../stores/MiddlePanelStore'); var MiddlePanelActions = require('../actions/MiddlePanelActions'); @@ -18,54 +22,78 @@ var TableLine = React.createClass({ return {read: this.props.read, liked: this.props.liked}; }, render: function() { - var read = this.state.read ? 'r' : ''; var liked = this.state.liked ? 'l' : ''; var icon = 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" />; } + var title = (<a href={'/redirect/' + this.props.article_id}> + {icon} {this.props.feed_title} + </a>); + var read = (<Glyphicon glyph={this.state.read?"check":"unchecked"} + onClick={this.toogleRead} />); + var liked = (<Glyphicon glyph={this.state.liked?"star":"star-empty"} + onClick={this.toogleLike} />); return ( - <tr> - <td>{icon}{liked}</td> - <td> - <a href={'/redirect/' + this.props.article_id}> - {this.props.feed_title} - </a> - </td> - <td> - <a href={'/article/' + this.props.article_id}> - {this.props.title} - </a> - </td> - <td>{this.props.date}</td> - </tr> + <ListGroupItem header={title}> + {read} + {liked} + {this.props.title} + </ListGroupItem> ); }, + toogleRead: function() { + this.setState({read: !this.state.read}); + MiddlePanelActions.changeRead(this.props.article_id, !this.state.read); + }, + toogleLike: function() { + this.setState({liked: !this.state.liked}); + MiddlePanelActions.changeLike(this.props.article_id, !this.state.liked); + }, +}); + +var MiddlePanelFilter = React.createClass({ + getInitialState: function() { + return {filter: MiddlePanelStore._datas.filter}; + }, + render: function() { + return (<Row className="show-grid"> + <ButtonGroup> + <Button active={this.state.filter == "all"} + onMouseDown={MiddlePanelActions.setFilterAll} + bsSize="small">All</Button> + <Button active={this.state.filter == "unread"} + onMouseDown={MiddlePanelActions.setFilterUnread} + bsSize="small">Unread</Button> + <Button active={this.state.filter == "liked"} + onMouseDown={MiddlePanelActions.setFilterLiked} + bsSize="small">Liked</Button> + </ButtonGroup> + </Row> + ); + }, + componentDidMount: function() { + MiddlePanelStore.addChangeListener(this._onChange); + }, + componentWillUnmount: function() { + MiddlePanelStore.removeChangeListener(this._onChange); + }, + _onChange: function() { + this.setState({filter: MiddlePanelStore._datas.filter}); + }, }); -var TableBody = React.createClass({ +var MiddlePanel = React.createClass({ getInitialState: function() { - return {filter: 'unread', articles: []}; + return {filter: MiddlePanelStore._datas.filter, articles: []}; }, render: function() { - return (<div className="table-responsive"> - <ButtonGroup> - <Button active={this.state.filter == "all"} - onMouseDown={MiddlePanelActions.setFilterAll} - bsSize="small">All</Button> - <Button active={this.state.filter == "unread"} - onMouseDown={MiddlePanelActions.setFilterUnread} - bsSize="small">Unread</Button> - <Button active={this.state.filter == "liked"} - onMouseDown={MiddlePanelActions.setFilterLiked} - bsSize="small">Liked</Button> - </ButtonGroup> - <table className="table table-striped strict-table"> - <tbody> + return (<Row className="show-grid"> + <ListGroup> {this.state.articles.map(function(article){ - return (<TableLine key={"article" + article.article_id} + return (<TableLine key={"a" + article.article_id} title={article.title} icon_url={article.icon_url} read={article.read} @@ -73,9 +101,8 @@ var TableBody = React.createClass({ date={article.date} article_id={article.article_id} feed_title={article.feed_title} />);})} - </tbody> - </table> - </div> + </ListGroup> + </Row> ); }, componentDidMount: function() { @@ -91,13 +118,5 @@ var TableBody = React.createClass({ }, }); -var MiddlePanel = React.createClass({ - render: function() { - return (<div className="col-md-offset-2 col-md-10 main"> - <TableBody /> - </div> - ); - }, -}); - -module.exports = MiddlePanel; +module.exports = {MiddlePanel: MiddlePanel, + MiddlePanelFilter: MiddlePanelFilter}; |