adding basic bootstrap

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()});
     },
 });