client/src/components/Navbar.js
changeset 163 78c54cb473cd
parent 161 a642639dbc07
child 167 1f340f3597a8
equal deleted inserted replaced
162:1fd73fdaf4c6 163:78c54cb473cd
    55         </a>
    55         </a>
    56     </li>
    56     </li>
    57   );
    57   );
    58 }
    58 }
    59 
    59 
       
    60 const OffLineMessage = ({isAuthenticated}) => {
       
    61   if (!isAuthenticated) {
       
    62     return (
       
    63         <span className="sticky-top text-info text-right float-right mr-4 offline-message">Vous êtes en mode Offline. N'oubliez pas de
       
    64         vous connecter ou de créer un compte pour sauvegarder vos sessions</span>
       
    65     );
       
    66   }
       
    67     return (
       
    68       <span></span>
       
    69   );
       
    70 }
       
    71 
    60 
    72 
    61 class AppNavbar extends Component {
    73 class AppNavbar extends Component {
    62   constructor(props) {
    74   constructor(props) {
    63     super(props);
    75     super(props);
    64     this.state = { modalIsOpen: false };
    76     this.state = { modalIsOpen: false };
   133     }
   145     }
   134   }
   146   }
   135 
   147 
   136   render() {
   148   render() {
   137     return (
   149     return (
   138       <nav className="navbar navbar-expand-lg navbar-light bg-primary sticky-top">
   150       <div>
   139         <div className="container-fluid">
   151         <nav className="navbar navbar-expand-lg navbar-light bg-primary sticky-top">
   140         <div className="navbar-header">
   152           <div className="container-fluid">
   141         <a className="navbar-brand" onClick={this.onClickHome} href="/">IRI Notes</a>
   153           <div className="navbar-header">
   142         <button className="navbar-toggler mr-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
   154           <a className="navbar-brand" onClick={this.onClickHome} href="/">IRI Notes</a>
   143               <span className="navbar-toggler-icon"></span>
   155           <button className="navbar-toggler mr-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
   144               <span className="icon-bar"></span>
   156                 <span className="navbar-toggler-icon"></span>
   145               <span className="icon-bar"></span>
   157                 <span className="icon-bar"></span>
   146               <span className="icon-bar"></span>
   158                 <span className="icon-bar"></span>
   147             </button>
   159                 <span className="icon-bar"></span>
       
   160               </button>
       
   161             </div>
       
   162             <div className="collapse navbar-collapse text-center" id="navbarSupportedContent">
       
   163               <ul className="navbar-nav mr-auto">
       
   164                 <li className="nav-item">
       
   165                   <a className="nav-link " onClick={this.onClickSessions} href="/sessions">Sessions</a>
       
   166                 </li>
       
   167               </ul>
       
   168               <ul className="navbar-nav navbar-center">
       
   169                   <li className="nav-item text-secondary">
       
   170                     <CreateSession
       
   171                       history={this.props.history}
       
   172                       group={this.props.currentGroup}
       
   173                       createSession={this.props.sessionsActions.createSession}
       
   174                     />
       
   175                   </li>
       
   176               </ul>
       
   177               <ul className="nav navbar-nav ml-auto">
       
   178                 <NavbarGroup currentGroup={this.props.currentGroup} groups={this.props.groups} onSelect={this.onGroupSelect}/>
       
   179                 <SyncButton id='sync-button' isAuthenticated={this.props.isAuthenticated} onSyncClick={this.onSyncClick} isSynchronizing={this.props.isSynchronizing} isSynchronized={this.props.isSynchronized} />
       
   180                 <Online {...this.props} />
       
   181                 <NavbarLogin {...this.props} onLogout={this.onClickLogout} />
       
   182               </ul>
       
   183             </div>
       
   184             <Modal
       
   185             className="Modal__Bootstrap modal-dialog modal-dialog-centered"
       
   186             // closeTimeoutMS={150}
       
   187             isOpen={this.state.modalIsOpen}
       
   188             onRequestClose={this.handleModalCloseRequest}
       
   189             >
       
   190               <div id="logout-modal" className="modal-content">
       
   191                 <span id="logout-close-modal-button" className="material-icons p-0 text-right" onClick={ this.handleModalCloseRequest }>close</span>
       
   192                 <div className="modal-body text-center">
       
   193                 <span className="material-icons modal-warning text-info pb-5">warning</span>
       
   194                   <p className="modal-text">
       
   195                     Certaines sessions n'ont pas encore été sauvegardées.
       
   196                     <br />
       
   197                     Si vous continuez, elles seront perdues.
       
   198                   </p>
       
   199                 <button type="button" className="btn btn-info text-secondary font-weight-bold py-1 px-2 mb-3" id="logout-modal-button" onClick={ this.confirmLogout }>Confirmer</button>
       
   200                 </div>
       
   201               </div>
       
   202             </Modal>
   148           </div>
   203           </div>
   149           <div className="collapse navbar-collapse text-center" id="navbarSupportedContent">
   204         </nav>
   150             <ul className="navbar-nav mr-auto">
   205         <OffLineMessage isAuthenticated={this.props.isAuthenticated} />
   151               <li className="nav-item">
   206       </div>
   152                 <a className="nav-link " onClick={this.onClickSessions} href="/sessions">Sessions</a>
       
   153               </li>
       
   154             </ul>
       
   155             <ul className="navbar-nav navbar-center">
       
   156                 <li className="nav-item text-secondary">
       
   157                   <CreateSession
       
   158                     history={this.props.history}
       
   159                     group={this.props.currentGroup}
       
   160                     createSession={this.props.sessionsActions.createSession}
       
   161                   />
       
   162                 </li>
       
   163             </ul>
       
   164             <ul className="nav navbar-nav ml-auto">
       
   165               <NavbarGroup currentGroup={this.props.currentGroup} groups={this.props.groups} onSelect={this.onGroupSelect}/>
       
   166               <SyncButton id='sync-button' isAuthenticated={this.props.isAuthenticated} onSyncClick={this.onSyncClick} isSynchronizing={this.props.isSynchronizing} isSynchronized={this.props.isSynchronized} />
       
   167               <Online {...this.props} />
       
   168               <NavbarLogin {...this.props} onLogout={this.onClickLogout} />
       
   169             </ul>
       
   170           </div>
       
   171           <Modal
       
   172           className="Modal__Bootstrap modal-dialog modal-dialog-centered"
       
   173           // closeTimeoutMS={150}
       
   174           isOpen={this.state.modalIsOpen}
       
   175           onRequestClose={this.handleModalCloseRequest}
       
   176           >
       
   177             <div id="logout-modal" className="modal-content">
       
   178               <span id="logout-close-modal-button" className="material-icons p-0 text-right" onClick={ this.handleModalCloseRequest }>close</span>
       
   179               <div className="modal-body text-center">
       
   180               <span className="material-icons modal-warning text-info pb-5">warning</span>
       
   181                 <p className="modal-text">
       
   182                   Certaines sessions n'ont pas encore été sauvegardées.
       
   183                   <br />
       
   184                   Si vous continuez, elles seront perdues.
       
   185                 </p>
       
   186               <button type="button" className="btn btn-info text-secondary font-weight-bold py-1 px-2 mb-3" id="logout-modal-button" onClick={ this.confirmLogout }>Confirmer</button>
       
   187               </div>
       
   188             </div>
       
   189           </Modal>
       
   190         </div>
       
   191       </nav>
       
   192     );
   207     );
   193   }
   208   }
   194 }
   209 }
   195 
   210 
   196 AppNavbar.propTypes = {
   211 AppNavbar.propTypes = {