doing some design

wip toogle read / like

3 files changed, 181 insertions, 94 deletions

diff --git a/src/web/js/components/MainApp.react.js b/src/web/js/components/MainApp.react.js
index 743c9510..059d2646 100644
--- a/src/web/js/components/MainApp.react.js
+++ b/src/web/js/components/MainApp.react.js
@@ -1,16 +1,23 @@
+var React = require('react');
+var Col = require('react-bootstrap/lib/Col');
+var Grid = require('react-bootstrap/lib/Grid');
+
 var Menu = require('./Menu.react');
 var MiddlePanel = require('./MiddlePanel.react');
-var React = require('react');
 
 
 var MainApp = React.createClass({
     render: function() {
-        return (<div className="container-fluid">
-                    <div className="row row-offcanvas row-offcanvas-left">
-                        <Menu />
-                        <MiddlePanel />
-                    </div>
-                </div>
+        return (<Grid fluid>
+                    <Col xsHidden smHidden md={3} lg={2}>
+                        <Menu.MenuFilter />
+                        <Menu.Menu />
+                    </Col>
+                    <Col xs={2} sm={2} md={4} lg={4}>
+                        <MiddlePanel.MiddlePanelFilter />
+                        <MiddlePanel.MiddlePanel />
+                    </Col>
+                </Grid>
        );
     },
 });
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};
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};