From 9ca6a6989b0c87401f1a3903077723cd9a648a79 Mon Sep 17 00:00:00 2001 From: François Schmidts Date: Sun, 31 Jan 2016 02:24:10 +0100 Subject: redoing navbar in react --- src/web/js/actions/MenuActions.js | 2 + src/web/js/components/MainApp.react.js | 26 +++++---- src/web/js/components/Menu.react.js | 10 ++-- src/web/js/components/MiddlePanel.react.js | 8 +-- src/web/js/components/Navbar.react.js | 91 ++++++++++++++++++++++++++++++ src/web/js/components/RightPanel.react.js | 13 ++--- src/web/js/stores/MenuStore.js | 3 + 7 files changed, 126 insertions(+), 27 deletions(-) create mode 100644 src/web/js/components/Navbar.react.js (limited to 'src/web/js') diff --git a/src/web/js/actions/MenuActions.js b/src/web/js/actions/MenuActions.js index 4b17d084..fa30474e 100644 --- a/src/web/js/actions/MenuActions.js +++ b/src/web/js/actions/MenuActions.js @@ -11,6 +11,8 @@ var MenuActions = { type: ActionTypes.RELOAD_MENU, feeds: payload.feeds, categories: payload.categories, + is_admin: payload.is_admin, + crawling_method: payload.crawling_method, all_unread_count: payload.all_unread_count, }); }); 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 ( - - - - - - - + return (
+ + + + + + + + + +
); }, }); 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 Fetch; + } + }, + buttonAdmin: function() { + if(this.state.is_admin) { + return (} + id='admin-dropdown'> + + Dashboard + + ); + } + }, + render: function() { + var gl_title = ( + Add a new feed + ); + return ( + + + JARR + + + + + + ); + }, + 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
  • {this.state.article.title}
    • ; }, 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 ( + xs={8} sm={8} md={5} lg={6}> {breadcrum} {cntnt} diff --git a/src/web/js/stores/MenuStore.js b/src/web/js/stores/MenuStore.js index edc90a38..b8f50fd9 100644 --- a/src/web/js/stores/MenuStore.js +++ b/src/web/js/stores/MenuStore.js @@ -8,6 +8,7 @@ var assign = require('object-assign'); var MenuStore = assign({}, EventEmitter.prototype, { _datas: {filter: 'all', feeds: {}, categories: {}, active_type: null, active_id: null, + is_admin: false, crawling_method: 'classic', all_unread_count: 0}, getAll: function() { return this._datas; @@ -45,6 +46,8 @@ MenuStore.dispatchToken = JarrDispatcher.register(function(action) { case ActionTypes.RELOAD_MENU: MenuStore._datas['feeds'] = action.feeds; MenuStore._datas['categories'] = action.categories; + MenuStore._datas['is_admin'] = action.is_admin; + MenuStore._datas['crawling_method'] = action.crawling_method; MenuStore._datas['all_unread_count'] = action.all_unread_count; MenuStore.emitChange(); break; -- cgit