redoing navbar in react

5 files changed, 121 insertions, 27 deletions

diff --git a/src/web/js/components/MainApp.react.js b/src/web/js/components/MainApp.react.js
index b448f808..cbdc5833 100644
--- a/src/web/js/components/MainApp.react.js
+++ b/src/web/js/components/MainApp.react.js
@@ -1,7 +1,8 @@
 var React = require('react');
-var Col = require('react-bootstrap/Col');
-var Grid = require('react-bootstrap/Grid');
+var Col = require('react-bootstrap/lib/Col');
+var Grid = require('react-bootstrap/lib/Grid');
 
+var JarrNavBar = require('./Navbar.react');
 var Menu = require('./Menu.react');
 var MiddlePanel = require('./MiddlePanel.react');
 var RightPanel = require('./RightPanel.react');
@@ -9,15 +10,18 @@ var RightPanel = require('./RightPanel.react');
 
 var MainApp = React.createClass({
     render: function() {
-        return (<Grid fluid id="jarr-container">
-                    <Menu />
-                    <Col id="middle-panel" mdOffset={3} lgOffset={2}
-                                           xs={2} sm={2} md={4} lg={4}>
-                        <MiddlePanel.MiddlePanelFilter />
-                        <MiddlePanel.MiddlePanel />
-                    </Col>
-                    <RightPanel />
-                </Grid>
+        return (<div>
+                    <JarrNavBar />
+                    <Grid fluid id="jarr-container">
+                        <Menu />
+                        <Col id="middle-panel" mdOffset={3} lgOffset={2}
+                                            xs={4} sm={4} md={4} lg={4}>
+                            <MiddlePanel.MiddlePanelFilter />
+                            <MiddlePanel.MiddlePanel />
+                        </Col>
+                        <RightPanel />
+                    </Grid>
+                </div>
        );
     },
 });
diff --git a/src/web/js/components/Menu.react.js b/src/web/js/components/Menu.react.js
index 0d739e4e..ad28015c 100644
--- a/src/web/js/components/Menu.react.js
+++ b/src/web/js/components/Menu.react.js
@@ -1,9 +1,9 @@
 var React = require('react');
-var Col = require('react-bootstrap/Col');
-var Badge = require('react-bootstrap/Badge');
-var Button = require('react-bootstrap/Button');
-var ButtonGroup = require('react-bootstrap/ButtonGroup');
-var Glyphicon = require('react-bootstrap/Glyphicon');
+var Col = require('react-bootstrap/lib/Col');
+var Badge = require('react-bootstrap/lib/Badge');
+var Button = require('react-bootstrap/lib/Button');
+var ButtonGroup = require('react-bootstrap/lib/ButtonGroup');
+var Glyphicon = require('react-bootstrap/lib/Glyphicon');
 
 var MenuStore = require('../stores/MenuStore');
 var MenuActions = require('../actions/MenuActions');
diff --git a/src/web/js/components/MiddlePanel.react.js b/src/web/js/components/MiddlePanel.react.js
index 6bfdaaa9..fd291624 100644
--- a/src/web/js/components/MiddlePanel.react.js
+++ b/src/web/js/components/MiddlePanel.react.js
@@ -1,9 +1,9 @@
 var React = require('react');
 
-var Row = require('react-bootstrap/Row');
-var Button = require('react-bootstrap/Button');
-var ButtonGroup = require('react-bootstrap/ButtonGroup');
-var Glyphicon = require('react-bootstrap/Glyphicon');
+var Row = require('react-bootstrap/lib/Row');
+var Button = require('react-bootstrap/lib/Button');
+var ButtonGroup = require('react-bootstrap/lib/ButtonGroup');
+var Glyphicon = require('react-bootstrap/lib/Glyphicon');
 
 var MiddlePanelStore = require('../stores/MiddlePanelStore');
 var MiddlePanelActions = require('../actions/MiddlePanelActions');
diff --git a/src/web/js/components/Navbar.react.js b/src/web/js/components/Navbar.react.js
new file mode 100644
index 00000000..56de178e
--- /dev/null
+++ b/src/web/js/components/Navbar.react.js
@@ -0,0 +1,91 @@
+var React = require('react');
+var Glyphicon = require('react-bootstrap/lib/Glyphicon');
+var Nav = require('react-bootstrap/lib/Nav');
+var NavItem = require('react-bootstrap/lib/NavItem');
+var Navbar = require('react-bootstrap/lib/Navbar');
+var NavDropdown = require('react-bootstrap/lib/NavDropdown');
+var MenuItem = require('react-bootstrap/lib/MenuItem');
+var Button = require('react-bootstrap/lib/Button');
+var Input = require('react-bootstrap/lib/Input');
+
+var MenuStore = require('../stores/MenuStore');
+
+JarrNavBar = React.createClass({
+    getInitialState: function() {
+        return {is_admin: MenuStore._datas.is_admin,
+                crawling_method: MenuStore._datas.crawling_method};
+    },
+    buttonFetch: function() {
+        if(this.state.is_admin && this.state.crawling_method != 'http') {
+            return <NavItem eventKey={2} href="/fetch"><Glyphicon glyph="import" />Fetch</NavItem>;
+        }
+    },
+    buttonAdmin: function() {
+        if(this.state.is_admin) {
+            return (<NavDropdown title={<Glyphicon glyph='cog' />}
+                            id='admin-dropdown'>
+                        <MenuItem href="/admin/dashboard">
+                            <Glyphicon glyph="dashboard" />Dashboard
+                        </MenuItem>
+                    </NavDropdown>);
+        }
+    },
+    render: function() {
+        var gl_title = (<span>
+                            <Glyphicon glyph="plus-sign" />Add a new feed
+                        </span>);
+        return (<Navbar fixedTop inverse className="navbar-custom">
+                    <Navbar.Header>
+                        <Navbar.Brand>
+                            <a href="/">JARR</a>
+                        </Navbar.Brand>
+                        <Navbar.Toggle />
+                    </Navbar.Header>
+                    <Nav pullRight>
+                        <Navbar.Form pullLeft>
+                            <form action="/feed/bookmarklet" method="GET">
+                            <Input name="url" type="text"
+                                   placeholder="Add a new feed" />
+                            <Button type="submit">Submit</Button>
+                            </form>
+                        </Navbar.Form>
+                        {this.buttonFetch()}
+                        <NavDropdown title="Feed" id="feed-mgmt-dropdown">
+                            <MenuItem href="/feeds/inactives">Inactive</MenuItem>
+                            <MenuItem href="/articles/history">History</MenuItem>
+                            <MenuItem href="/feeds/">All</MenuItem>
+                        </NavDropdown>
+                        {this.buttonAdmin()}
+                        <NavDropdown title={<Glyphicon glyph='user' />}
+                                id="user-dropdown">
+                            <MenuItem href="/user/profile">
+                                <Glyphicon glyph="user" />Profile
+                            </MenuItem>
+                            <MenuItem href="/user/management">
+                                <Glyphicon glyph="cog" />Your data
+                            </MenuItem>
+                            <MenuItem href="/about">
+                                <Glyphicon glyph="question-sign" />About
+                            </MenuItem>
+                            <MenuItem href="/logout">
+                                <Glyphicon glyph="log-out" />Logout
+                            </MenuItem>
+                        </NavDropdown>
+                    </Nav>
+                </Navbar>
+        );
+    },
+    componentDidMount: function() {
+        MenuStore.addChangeListener(this._onChange);
+    },
+    componentWillUnmount: function() {
+        MenuStore.removeChangeListener(this._onChange);
+    },
+    _onChange: function() {
+        var datas = MenuStore.getAll();
+        this.setState({is_admin: datas.is_admin,
+                       crawling_method: datas.crawling_method});
+    },
+});
+
+module.exports = JarrNavBar;
diff --git a/src/web/js/components/RightPanel.react.js b/src/web/js/components/RightPanel.react.js
index fda7c976..e9485511 100644
--- a/src/web/js/components/RightPanel.react.js
+++ b/src/web/js/components/RightPanel.react.js
@@ -1,8 +1,8 @@
 var React = require('react');
-var Col = require('react-bootstrap/Col');
-var Glyphicon = require('react-bootstrap/Glyphicon');
-var Button = require('react-bootstrap/Button');
-var ButtonGroup = require('react-bootstrap/ButtonGroup');
+var Col = require('react-bootstrap/lib/Col');
+var Glyphicon = require('react-bootstrap/lib/Glyphicon');
+var Button = require('react-bootstrap/lib/Button');
+var ButtonGroup = require('react-bootstrap/lib/ButtonGroup');
 
 var RightPanelActions = require('../actions/RightPanelActions');
 var RightPanelStore = require('../stores/RightPanelStore');
@@ -293,7 +293,6 @@ var RightPanel = React.createClass({
         return <li>{this.state.article.title}</li>;
     },
     render: function() {
-        var content = null;
         var brd_category = null;
         var brd_feed = null;
         var brd_article = null;
@@ -329,9 +328,9 @@ var RightPanel = React.createClass({
                     key={this.state.category.id} />);
         }
 
-        return (<Col id="right-panel" xsOffset={2} smOffset={2}
+        return (<Col id="right-panel" xsOffset={4} smOffset={4}
                                       mdOffset={7} lgOffset={6}
-                                      xs={10} sm={10} md={5} lg={6}>
+                                      xs={8} sm={8} md={5} lg={6}>
                     {breadcrum}
                     {cntnt}
                 </Col>