aboutsummaryrefslogtreecommitdiff
path: root/src/web/js/components
diff options
context:
space:
mode:
authorFrançois Schmidts <francois.schmidts@gmail.com>2016-01-22 17:26:56 +0100
committerFrançois Schmidts <francois.schmidts@gmail.com>2016-01-26 23:47:08 +0100
commitc542f58b99e0bd625f52e1ac9c3d2ad7d9ee4bd5 (patch)
treeca2f7414a53f2596dad44c4859a6310ce5ed0396 /src/web/js/components
parentfilters are working ! (diff)
downloadnewspipe-c542f58b99e0bd625f52e1ac9c3d2ad7d9ee4bd5.tar.gz
newspipe-c542f58b99e0bd625f52e1ac9c3d2ad7d9ee4bd5.tar.bz2
newspipe-c542f58b99e0bd625f52e1ac9c3d2ad7d9ee4bd5.zip
adding basic bootstrap
Diffstat (limited to 'src/web/js/components')
-rw-r--r--src/web/js/components/Menu.react.js20
-rw-r--r--src/web/js/components/MiddlePanel.react.js20
2 files changed, 34 insertions, 6 deletions
diff --git a/src/web/js/components/Menu.react.js b/src/web/js/components/Menu.react.js
index caf8c3a8..c1cee9de 100644
--- a/src/web/js/components/Menu.react.js
+++ b/src/web/js/components/Menu.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 MenuStore = require('../stores/MenuStore');
var MenuActions = require('../actions/MenuActions');
var MiddlePanelActions = require('../actions/MiddlePanelActions');
@@ -85,11 +88,22 @@ var Category = React.createClass({
var Menu = React.createClass({
getInitialState: function() {
- return {categories: [], all_unread_count: 0};
+ return {filter: 'all', categories: [], all_unread_count: 0};
},
render: function() {
return (<div id="sidebar" data-spy="affix" role="navigation"
className="col-md-2 sidebar sidebar-offcanvas pre-scrollable hidden-sm hidden-xs affix">
+ <ButtonGroup>
+ <Button active={this.state.filter == "all"}
+ onMouseDown={MenuActions.setFilterMenuAll}
+ bsSize="small">All</Button>
+ <Button active={this.state.filter == "unread"}
+ onMouseDown={MenuActions.setFilterMenuUnread}
+ bsSize="small">Unread</Button>
+ <Button active={this.state.filter == "error"}
+ onMouseDown={MenuActions.setFilterMenuError}
+ bsSize="small" bsStyle="warning">Error</Button>
+ </ButtonGroup>
{this.state.categories.map(function(category){
return (<Category key={"cat" + category.id}
category_id={category.id}
@@ -101,7 +115,6 @@ var Menu = React.createClass({
</div>
);
},
-
componentDidMount: function() {
MenuActions.reload();
MenuStore.addChangeListener(this._onChange);
@@ -111,7 +124,8 @@ var Menu = React.createClass({
},
_onChange: function() {
var datas = MenuStore.getAll();
- this.setState({categories: datas.categories,
+ this.setState({filter: datas.filter,
+ categories: datas.categories,
all_unread_count: datas.all_unread_count});
},
});
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()});
},
});
bgstack15