diff options
author | François Schmidts <francois.schmidts@gmail.com> | 2016-01-22 17:26:56 +0100 |
---|---|---|
committer | François Schmidts <francois.schmidts@gmail.com> | 2016-01-26 23:47:08 +0100 |
commit | c542f58b99e0bd625f52e1ac9c3d2ad7d9ee4bd5 (patch) | |
tree | ca2f7414a53f2596dad44c4859a6310ce5ed0396 /src/web/js/components/MiddlePanel.react.js | |
parent | filters are working ! (diff) | |
download | newspipe-c542f58b99e0bd625f52e1ac9c3d2ad7d9ee4bd5.tar.gz newspipe-c542f58b99e0bd625f52e1ac9c3d2ad7d9ee4bd5.tar.bz2 newspipe-c542f58b99e0bd625f52e1ac9c3d2ad7d9ee4bd5.zip |
adding basic bootstrap
Diffstat (limited to 'src/web/js/components/MiddlePanel.react.js')
-rw-r--r-- | src/web/js/components/MiddlePanel.react.js | 20 |
1 files changed, 17 insertions, 3 deletions
diff --git a/src/web/js/components/MiddlePanel.react.js b/src/web/js/components/MiddlePanel.react.js index c5a9c3f9..b63eabf4 100644 --- a/src/web/js/components/MiddlePanel.react.js +++ b/src/web/js/components/MiddlePanel.react.js @@ -1,4 +1,7 @@ var React = require('react'); +var Button = require('react-bootstrap/lib/Button'); +var ButtonGroup = require('react-bootstrap/lib/ButtonGroup'); + var MiddlePanelStore = require('../stores/MiddlePanelStore'); var MiddlePanelActions = require('../actions/MiddlePanelActions'); @@ -51,11 +54,21 @@ var TableLine = React.createClass({ var TableBody = React.createClass({ getInitialState: function() { - return {articles: [], - }; + return {filter: 'unread', articles: []}; }, render: function() { return (<div className="table-responsive"> + <ButtonGroup> + <Button active={this.state.filter == "all"} + onMouseDown={MiddlePanelActions.setFilterMiddlePanelAll} + bsSize="small">All</Button> + <Button active={this.state.filter == "unread"} + onMouseDown={MiddlePanelActions.setFilterMiddlePanelUnread} + bsSize="small">Unread</Button> + <Button active={this.state.filter == "liked"} + onMouseDown={MiddlePanelActions.setFilterMiddlePanelLiked} + bsSize="small">Liked</Button> + </ButtonGroup> <table className="table table-striped strict-table"> <tbody> {this.state.articles.map(function(article){ @@ -80,7 +93,8 @@ var TableBody = React.createClass({ MiddlePanelStore.removeChangeListener(this._onChange); }, _onChange: function() { - this.setState({articles: MiddlePanelStore.getArticles()}); + this.setState({filter: MiddlePanelStore._datas.filter, + articles: MiddlePanelStore.getArticles()}); }, }); |