equal
deleted
inserted
replaced
6 // import logo from './logo.svg'; |
6 // import logo from './logo.svg'; |
7 import { Navbar, Nav, NavItem, NavDropdown, MenuItem, Modal, Button } from 'react-bootstrap'; |
7 import { Navbar, Nav, NavItem, NavDropdown, MenuItem, Modal, Button } from 'react-bootstrap'; |
8 import * as authActions from '../actions/authActions'; |
8 import * as authActions from '../actions/authActions'; |
9 import { forceSync } from '../actions/networkActions'; |
9 import { forceSync } from '../actions/networkActions'; |
10 import { ActionEnum } from '../constants'; |
10 import { ActionEnum } from '../constants'; |
|
11 import './Navbar.css'; |
11 |
12 |
12 const LoginNav = ({isAuthenticated, currentUser, history, authActions, onLogout}) => { |
13 const LoginNav = ({isAuthenticated, currentUser, history, authActions, onLogout}) => { |
13 |
14 |
14 const onClickSettings = (e) => { |
15 const onClickSettings = (e) => { |
15 e.preventDefault(); |
16 e.preventDefault(); |
40 <span className="material-icons" style={{ color: online ? '#2ECC71' : '#E74C3C' }}>signal_wifi_4_bar</span> |
41 <span className="material-icons" style={{ color: online ? '#2ECC71' : '#E74C3C' }}>signal_wifi_4_bar</span> |
41 </NavItem> |
42 </NavItem> |
42 ) |
43 ) |
43 } |
44 } |
44 |
45 |
45 const SyncButton = ({ onSyncClick, isSynchronizing }) => { |
46 const SyncButton = ({ onSyncClick, isSynchronizing, isSynchronized, id }) => { |
|
47 const classnames = "material-icons" |
|
48 + ((!isSynchronized)?" sync-button-not-synchronized":"") |
|
49 + ((isSynchronizing)?" sync-button-synchronizing":""); |
|
50 let title = "Synchronize"; |
|
51 let clickCb = onSyncClick; |
|
52 if(isSynchronizing) { |
|
53 title = "Synchronizing..."; |
|
54 clickCb = () => {}; |
|
55 } else if (!isSynchronized) { |
|
56 title += ": not synchronized"; |
|
57 } |
|
58 |
46 return ( |
59 return ( |
47 <NavItem onClick={onSyncClick}> |
60 <NavItem title={title} onClick={clickCb} id={id || null}> |
48 Sync |
61 <span className={classnames}></span> |
49 {isSynchronizing && <span className="material-icons"></span>} |
|
50 </NavItem> |
62 </NavItem> |
51 ) |
63 ) |
52 } |
64 } |
53 |
65 |
54 class AppNavbar extends Component { |
66 class AppNavbar extends Component { |
116 <Navbar.Collapse> |
128 <Navbar.Collapse> |
117 <Nav> |
129 <Nav> |
118 <NavItem onClick={this.onClickSessions} href="/sessions">Sessions</NavItem> |
130 <NavItem onClick={this.onClickSessions} href="/sessions">Sessions</NavItem> |
119 </Nav> |
131 </Nav> |
120 <Nav pullRight> |
132 <Nav pullRight> |
121 <SyncButton onSyncClick={this.onSyncClick} isSynchronizing={this.props.isSynchronizing}/> |
133 <SyncButton id='sync-button' onSyncClick={this.onSyncClick} isSynchronizing={this.props.isSynchronizing} isSynchronized={this.props.isSynchronized} /> |
122 <Online {...this.props} /> |
134 <Online {...this.props} /> |
123 <LoginNav {...this.props} onLogout={this.onClickLogout} /> |
135 <LoginNav {...this.props} onLogout={this.onClickLogout} /> |
124 </Nav> |
136 </Nav> |
125 </Navbar.Collapse> |
137 </Navbar.Collapse> |
126 <Modal show={this.state.showModal} onHide={this.closeModal}> |
138 <Modal show={this.state.showModal} onHide={this.closeModal}> |