Mercurial Mercurial > irinotes / comparison
summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | file | latest | revisions | annotate | diff | comparison | raw | help
Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client/src/components/Navbar.js
changeset 151 57d63a248f0d
parent 150 97536386b397
child 154 a28361bda28c
equal deleted inserted replaced
150:97536386b397 151:57d63a248f0d 
    10 import * as authActions from '../actions/authActions';
 
    10 import * as authActions from '../actions/authActions';
 
    11 import { forceSync } from '../actions/networkActions';
 
    11 import { forceSync } from '../actions/networkActions';
 
    12 import { groupSetCurrent } from '../actions/groupActions';
 
    12 import { groupSetCurrent } from '../actions/groupActions';
 
    13 import { isAuthenticated, getCurrentUser, getOnline, getCurrentGroup, getGroups } from '../selectors/authSelectors';
 
    13 import { isAuthenticated, getCurrentUser, getOnline, getCurrentGroup, getGroups } from '../selectors/authSelectors';
 
    14 import { isSynchronizing, isSynchronized } from '../selectors/syncSelectors';
 
    14 import { isSynchronizing, isSynchronized } from '../selectors/syncSelectors';
 
       
    15 import CreateSession from './CreateSession';
 
    15 import NavbarLogin from './NavbarLogin';
 
    16 import NavbarLogin from './NavbarLogin';
 
    16 import NavbarGroup from './NavbarGroup';
 
    17 import NavbarGroup from './NavbarGroup';
 
    17 
    18 
    18 const Online = ({ online }) => {
 
    19 const Online = ({ online }) => {
 
    19   return (
 
    20   return (
 
    20     <li>
 
    21     <li className="nav-item">
 
    21       <a>
 
    22       <a className="nav-link">
 
    22         <span  className="material-icons navs" style={{ color: online ? '#2ECC71' : '#F95B5B' }}>signal_wifi_4_bar</span>
 
    23         <span  className="material-icons" style={{ color: online ? '#2ECC71' : '#F95B5B' }}>signal_wifi_4_bar</span>
 
    23       </a>
 
    24       </a>
 
    24     </li>
 
    25     </li>
 
    25   )
 
    26   )
 
    26 }
 
    27 }
 
    27 
    28 
    38     title += ": not synchronized";
 
    39     title += ": not synchronized";
 
    39   }
 
    40   }
 
    40 
    41 
    41   if (isAuthenticated) {
 
    42   if (isAuthenticated) {
 
    42     return (
 
    43     return (
 
    43       <li>
 
    44       <li className="nav-item">
 
    44         <a title={title} onClick={clickCb} id={id || null}>
 
    45         <a className="nav-link" title={title} onClick={clickCb} id={id || null}>
 
    45         <span className={classnames}>&#xE627;</span> </a>
 
    46         <span className={classnames}>&#xE627;</span> </a>
 
    46       </li>
 
    47       </li>
 
    47     );
 
    48     );
 
    48   }
 
    49   }
 
    49   return (
 
    50   return (
 
    60   constructor(props) {
 
    61   constructor(props) {
 
    61     super(props);
 
    62     super(props);
 
    62     this.state = { modalIsOpen: false };
 
    63     this.state = { modalIsOpen: false };
 
    63   }
 
    64   }
 
    64 
    65 
       
    66   componentWillMount() {
 
       
    67     Modal.setAppElement('body');
 
       
    68 }
 
       
    69 
    65   openModal = () => {
 
    70   openModal = () => {
 
    66     this.setState({modalIsOpen: true});
 
    71     this.setState({modalIsOpen: true});
 
    67   }
 
    72   }
 
    68 
    73 
    69   closeModal = () => {
 
    74   closeModal = () => {
 
   127     }
 
   132     }
 
   128   }
 
   133   }
 
   129 
   134 
   130   render() {
 
   135   render() {
 
   131     return (
 
   136     return (
 
   132       <nav className="navbar navbar-inverse navbar-fixed-top">
 
   137       <nav className="navbar navbar-expand-lg navbar-light bg-primary sticky-top">
 
   133         <div className="container-fluid">
 
   138         <div className="container-fluid">
 
   134           <div className="navbar-header">
 
   139         <div className="navbar-header">
 
   135             <a id="brand" className="navbar-brand" onClick={this.onClickHome} href="/">IRI Notes</a>
 
   140         <a id="brand" className="navbar-brand" onClick={this.onClickHome} href="/">IRI Notes</a>
 
   136             <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
 
   141         <button className="navbar-toggler mr-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
 
   137               <span className="sr-only">Toggle navigation</span>
 
   142               <span className="navbar-toggler-icon"></span>
 
   138               <span className="icon-bar"></span>
 
   143               <span className="icon-bar"></span>
 
   139               <span className="icon-bar"></span>
 
   144               <span className="icon-bar"></span>
 
   140               <span className="icon-bar"></span>
 
   145               <span className="icon-bar"></span>
 
   141             </button>
 
   146             </button>
 
   142           </div>
 
   147           </div>
 
   143           <div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
 
   148           <div className="collapse navbar-collapse text-center" id="navbarSupportedContent">
 
   144             <ul className="nav navbar-nav">
 
   149             <ul className="navbar-nav mr-auto">
 
   145               <li>
 
   150               <li className="nav-item">
 
   146                 <a className="navs" onClick={this.onClickSessions} href="/sessions">Accueil</a>
 
   151                 <a className="nav-link " onClick={this.onClickSessions} href="/sessions">Accueil</a>
 
   147               </li>
 
   152               </li>
 
   148             </ul>
 
   153             </ul>
 
   149             <ul className="nav navbar-nav navbar-right">
 
   154             <ul className="navbar-nav navbar-center">
 
       
   155                 <li className="nav-item text-secondary">
 
       
   156                   {/* <CreateSession history={this.props.history}/> */}
 
       
   157                 </li>
 
       
   158             </ul>
 
       
   159             <ul className="nav navbar-nav ml-auto">
 
   150               <NavbarGroup currentGroup={this.props.currentGroup} groups={this.props.groups} onSelect={this.onGroupSelect}/>
 
   160               <NavbarGroup currentGroup={this.props.currentGroup} groups={this.props.groups} onSelect={this.onGroupSelect}/>
 
   151               <SyncButton id='sync-button' isAuthenticated={this.props.isAuthenticated} onSyncClick={this.onSyncClick} isSynchronizing={this.props.isSynchronizing} isSynchronized={this.props.isSynchronized} />
 
   161               <SyncButton id='sync-button' isAuthenticated={this.props.isAuthenticated} onSyncClick={this.onSyncClick} isSynchronizing={this.props.isSynchronizing} isSynchronized={this.props.isSynchronized} />
 
   152               <Online {...this.props} />
 
   162               <Online {...this.props} />
 
   153               <NavbarLogin {...this.props} onLogout={this.onClickLogout} />
 
   163               <NavbarLogin {...this.props} onLogout={this.onClickLogout} />
 
   154             </ul>
 
   164             </ul>
 
   159           isOpen={this.state.modalIsOpen}
 
   169           isOpen={this.state.modalIsOpen}
 
   160           onRequestClose={this.handleModalCloseRequest}
 
   170           onRequestClose={this.handleModalCloseRequest}
 
   161           >
 
   171           >
 
   162             <div id="logout-modal" className="modal-content text-center">
 
   172             <div id="logout-modal" className="modal-content text-center">
 
   163               {/* <div className="modal-body"> */}
 
   173               {/* <div className="modal-body"> */}
 
   164               <button type="button" id="logout-close-modal-button" className="btn btn-default pull-right" onClick={ this.handleModalCloseRequest }><span className="material-icons">close</span></button>
 
   174               <button type="button" id="logout-close-modal-button" className="btn btn-default float-right" onClick={ this.handleModalCloseRequest }><span className="material-icons">close</span></button>
 
   165               <span className="material-icons modal-warning">warning</span>
 
   175               <span className="material-icons modal-warning">warning</span>
 
   166                 <p className="modal-text">
 
   176                 <p className="modal-text">
 
   167                   Certaines données n'ont pas encore été sauvegardées.
 
   177                   Certaines données n'ont pas encore été sauvegardées.
 
   168                   <br />
 
   178                   <br />
 
   169                   Si vous continuez, elles seront perdues.
 
   179                   Si vous continuez, elles seront perdues.
 
   170                 </p>
 
   180                 </p>
 
   171               <div className="modal-footer">
 
   181               <div className="modal-footer">
 
   172               <button type="button" className="btn btn-primary" id="logout-modal-button" onClick={ this.confirmLogout }>Confirmer</button>
 
   182               <button type="button" className="btn btn-primary text-secondary" id="logout-modal-button" onClick={ this.confirmLogout }>Confirmer</button>
 
   173               </div>
 
   183               </div>
 
   174             </div>
 
   184             </div>
 
   175           </Modal>
 
   185           </Modal>
 
   176         </div>
 
   186         </div>
 
   177       </nav>
 
   187       </nav>
irinotes