--- a/client/src/components/Navbar.js Wed Jul 18 17:32:09 2018 +0200
+++ b/client/src/components/Navbar.js Tue Aug 14 20:34:50 2018 +0200
@@ -1,16 +1,16 @@
+import './Navbar.css';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { withRouter } from 'react-router';
import { bindActionCreators } from 'redux';
// import logo from './logo.svg';
-import { Navbar, Nav, NavItem, NavDropdown, MenuItem, Modal, Button } from 'react-bootstrap';
+import { NavDropdown, MenuItem, Modal} from 'react-bootstrap';
import * as authActions from '../actions/authActions';
import { forceSync } from '../actions/networkActions';
import { groupSetCurrent } from '../actions/groupActions';
import { isAuthenticated, getCurrentUser, getOnline, getCurrentGroup, getGroups } from '../selectors/authSelectors';
import { isSynchronizing, isSynchronized } from '../selectors/syncSelectors';
-import './Navbar.css';
const LoginNav = ({isAuthenticated, currentUser, history, authActions, onLogout}) => {
@@ -26,26 +26,34 @@
if (isAuthenticated) {
return (
- <NavDropdown title={ currentUser.get('username') } id="user-dropdown">
- <MenuItem onClick={onClickSettings}>Settings</MenuItem>
- <MenuItem onClick={onLogout}>Logout</MenuItem>
- </NavDropdown>
+ <NavDropdown title={ currentUser.get('username') }>
+ <li>
+ <a href="#settings" onClick={onClickSettings}>Paramètres</a>
+ </li>
+ <li>
+ <a href="#logout" onClick={onLogout}>Se déconnecter</a>
+ </li>
+ </NavDropdown>
);
}
return (
- <NavItem onClick={onClickLogin} href="/login">Login</NavItem>
+ <li>
+ <a onClick={onClickLogin} href="/login">Se connecter</a>
+ </li>
);
}
const Online = ({ online }) => {
return (
- <NavItem>
- <span className="material-icons" style={{ color: online ? '#2ECC71' : '#E74C3C' }}>signal_wifi_4_bar</span>
- </NavItem>
+ <li>
+ <a>
+ <span className="material-icons" style={{ color: online ? '#2ECC71' : '#F95B5B' }}>signal_wifi_4_bar</span>
+ </a>
+ </li>
)
}
-const SyncButton = ({ onSyncClick, isSynchronizing, isSynchronized, id }) => {
+const SyncButton = ({ isAuthenticated, onSyncClick, isSynchronizing, isSynchronized, id }) => {
const classnames = "material-icons"
+ ((!isSynchronized)?" sync-button-not-synchronized":"")
+ ((isSynchronizing)?" sync-button-synchronizing":"");
@@ -58,23 +66,34 @@
title += ": not synchronized";
}
+ if (isAuthenticated) {
+ return (
+ <li>
+ <a title={title} onClick={clickCb} id={id || null}>
+ <span className={classnames}></span> </a>
+ </li>
+ );
+ }
return (
- <NavItem title={title} onClick={clickCb} id={id || null}>
- <span className={classnames}></span>
- </NavItem>
- )
+ <li>
+ <a>
+ <span></span>
+ </a>
+ </li>
+ );
}
+
const GroupStatus = ({currentGroup, groups, onSelect}) => {
if(currentGroup) {
const currentGroupName = currentGroup.get('name');
return (
- <NavDropdown title={currentGroupName} id="group-dropdown" onSelect={onSelect}>
+ <NavDropdown title={currentGroupName} onSelect={onSelect}>
{ groups && groups.map((group, key) => {
const groupName = group.get('name');
const className = (groupName === currentGroupName)?'active':null;
- return <MenuItem className={className} key={key} eventKey={groupName}>{ groupName }</MenuItem>
+ return <MenuItem id="groups" className={className} key={key} eventKey={groupName}>{ groupName }</MenuItem>
}
)}
<MenuItem key="-1" eventKey="__create_group__">Créer un groupe...</MenuItem>
@@ -149,38 +168,46 @@
render() {
return (
- <Navbar fluid inverse fixedTop>
- <Navbar.Header>
- <Navbar.Brand>
- <a onClick={this.onClickHome} href="/">IRI Notes</a>
- </Navbar.Brand>
- <Navbar.Toggle />
- </Navbar.Header>
- <Navbar.Collapse>
- <Nav>
- <NavItem onClick={this.onClickSessions} href="/sessions">Sessions</NavItem>
- </Nav>
- <Nav pullRight>
- <GroupStatus currentGroup={this.props.currentGroup} groups={this.props.groups} onSelect={this.onGroupSelect}/>
- <SyncButton id='sync-button' onSyncClick={this.onSyncClick} isSynchronizing={this.props.isSynchronizing} isSynchronized={this.props.isSynchronized} />
- <Online {...this.props} />
- <LoginNav {...this.props} onLogout={this.onClickLogout} />
- </Nav>
- </Navbar.Collapse>
- <Modal show={this.state.showModal} onHide={this.closeModal}>
- <Modal.Body>
- <p className="text-center">
- Some data is not synchronized with server.
- <br />
- If you continue, it will be lost.
- </p>
- </Modal.Body>
- <Modal.Footer>
- <Button bsStyle="primary" onClick={this.confirmLogout}>Confirm</Button>
- <Button onClick={this.closeModal}>Close</Button>
- </Modal.Footer>
- </Modal>
- </Navbar>
+ <nav className="navbar navbar-inverse navbar-fixed-top">
+ <div className="container-fluid">
+ <div className="navbar-header">
+ <a className="navbar-brand" onClick={this.onClickHome} href="/">IRI Notes</a>
+ <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
+ <span className="sr-only">Toggle navigation</span>
+ <span className="icon-bar"></span>
+ <span className="icon-bar"></span>
+ <span className="icon-bar"></span>
+ </button>
+ </div>
+ <div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+ <ul className="nav navbar-nav">
+ <li>
+ <a onClick={this.onClickSessions} href="/sessions">Accueil</a>
+ </li>
+ </ul>
+ <ul className="nav navbar-nav navbar-right">
+ <GroupStatus currentGroup={this.props.currentGroup} groups={this.props.groups} onSelect={this.onGroupSelect}/>
+ <SyncButton id='sync-button' isAuthenticated={this.props.isAuthenticated} onSyncClick={this.onSyncClick} isSynchronizing={this.props.isSynchronizing} isSynchronized={this.props.isSynchronized} />
+ <Online {...this.props} />
+ <LoginNav {...this.props} onLogout={this.onClickLogout} />
+ </ul>
+ </div>
+ <Modal show={this.state.showModal} onHide={this.closeModal}>
+ <Modal.Body>
+ <p className="text-center">
+ Certaines données n'ont pas encore été sauvegardées.
+ <br />
+ Si vous continuez, elles seront perdues.
+ </p>
+ </Modal.Body>
+ <Modal.Footer>
+ <button type="submit" className="btn btn-primary btn-lg" onClick={this.confirmLogout}>Confirmer</button>
+ <button type="submit" className="btn btn-default btn-lg" onClick={this.closeModal}>Fermer</button>
+ </Modal.Footer>
+ </Modal>
+ </div>
+ </nav>
+
);
}
}