|
1 import '../index.css'; |
1 import './Navbar.css'; |
2 import './Navbar.css'; |
2 import PropTypes from 'prop-types'; |
3 import PropTypes from 'prop-types'; |
3 import React, { Component } from 'react'; |
4 import React, { Component } from 'react'; |
4 import { connect } from 'react-redux'; |
5 import { connect } from 'react-redux'; |
5 import { withRouter } from 'react-router'; |
6 import { withRouter } from 'react-router'; |
26 |
27 |
27 if (isAuthenticated) { |
28 if (isAuthenticated) { |
28 return ( |
29 return ( |
29 <NavDropdown title={ currentUser.get('username') }> |
30 <NavDropdown title={ currentUser.get('username') }> |
30 <li> |
31 <li> |
31 <a href="#settings" onClick={onClickSettings}>Paramètres</a> |
32 <a className="user-dropdown" href="#settings" onClick={onClickSettings}>Paramètres</a> |
32 </li> |
33 </li> |
33 <li> |
34 <li> |
34 <a href="#logout" onClick={onLogout}>Se déconnecter</a> |
35 <a className="user-dropdown" href="#logout" onClick={onLogout}>Se déconnecter</a> |
35 </li> |
36 </li> |
36 </NavDropdown> |
37 </NavDropdown> |
37 ); |
38 ); |
38 } |
39 } |
39 return ( |
40 return ( |
40 <li> |
41 <li> |
41 <a onClick={onClickLogin} href="/login">Se connecter</a> |
42 <a className="navs" onClick={onClickLogin} href="/login">Se connecter</a> |
42 </li> |
43 </li> |
43 ); |
44 ); |
44 } |
45 } |
45 |
46 |
46 const Online = ({ online }) => { |
47 const Online = ({ online }) => { |
47 return ( |
48 return ( |
48 <li> |
49 <li> |
49 <a> |
50 <a> |
50 <span className="material-icons" style={{ color: online ? '#2ECC71' : '#F95B5B' }}>signal_wifi_4_bar</span> |
51 <span className="material-icons navs" style={{ color: online ? '#2ECC71' : '#F95B5B' }}>signal_wifi_4_bar</span> |
51 </a> |
52 </a> |
52 </li> |
53 </li> |
53 ) |
54 ) |
54 } |
55 } |
55 |
56 |
87 const GroupStatus = ({currentGroup, groups, onSelect}) => { |
88 const GroupStatus = ({currentGroup, groups, onSelect}) => { |
88 |
89 |
89 if(currentGroup) { |
90 if(currentGroup) { |
90 const currentGroupName = currentGroup.get('name'); |
91 const currentGroupName = currentGroup.get('name'); |
91 return ( |
92 return ( |
92 <NavDropdown title={currentGroupName} onSelect={onSelect}> |
93 <NavDropdown className="navs" title={currentGroupName} onSelect={onSelect}> |
93 { groups && groups.map((group, key) => { |
94 { groups && groups.map((group, key) => { |
94 const groupName = group.get('name'); |
95 const groupName = group.get('name'); |
95 const className = (groupName === currentGroupName)?'active':null; |
96 const className = (groupName === currentGroupName)?'active':null; |
96 return <MenuItem id="groups" className={className} key={key} eventKey={groupName}>{ groupName }</MenuItem> |
97 return <MenuItem id="groups" className={className} key={key} eventKey={groupName}>{ groupName }</MenuItem> |
97 } |
98 } |
169 render() { |
170 render() { |
170 return ( |
171 return ( |
171 <nav className="navbar navbar-inverse navbar-fixed-top"> |
172 <nav className="navbar navbar-inverse navbar-fixed-top"> |
172 <div className="container-fluid"> |
173 <div className="container-fluid"> |
173 <div className="navbar-header"> |
174 <div className="navbar-header"> |
174 <a className="navbar-brand" onClick={this.onClickHome} href="/">IRI Notes</a> |
175 <a id="brand" className="navbar-brand" onClick={this.onClickHome} href="/">IRI Notes</a> |
175 <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> |
176 <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> |
176 <span className="sr-only">Toggle navigation</span> |
177 <span className="sr-only">Toggle navigation</span> |
177 <span className="icon-bar"></span> |
178 <span className="icon-bar"></span> |
178 <span className="icon-bar"></span> |
179 <span className="icon-bar"></span> |
179 <span className="icon-bar"></span> |
180 <span className="icon-bar"></span> |
180 </button> |
181 </button> |
181 </div> |
182 </div> |
182 <div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> |
183 <div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> |
183 <ul className="nav navbar-nav"> |
184 <ul className="nav navbar-nav"> |
184 <li> |
185 <li> |
185 <a onClick={this.onClickSessions} href="/sessions">Accueil</a> |
186 <a className="navs" onClick={this.onClickSessions} href="/sessions">Accueil</a> |
186 </li> |
187 </li> |
187 </ul> |
188 </ul> |
188 <ul className="nav navbar-nav navbar-right"> |
189 <ul className="nav navbar-nav navbar-right"> |
189 <GroupStatus currentGroup={this.props.currentGroup} groups={this.props.groups} onSelect={this.onGroupSelect}/> |
190 <GroupStatus currentGroup={this.props.currentGroup} groups={this.props.groups} onSelect={this.onGroupSelect}/> |
190 <SyncButton id='sync-button' isAuthenticated={this.props.isAuthenticated} onSyncClick={this.onSyncClick} isSynchronizing={this.props.isSynchronizing} isSynchronized={this.props.isSynchronized} /> |
191 <SyncButton id='sync-button' isAuthenticated={this.props.isAuthenticated} onSyncClick={this.onSyncClick} isSynchronizing={this.props.isSynchronizing} isSynchronized={this.props.isSynchronized} /> |