doing some design

wip toogle read / like

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};