ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2025-01-03 18:35:09 +01:00
Code Issues Releases Wiki Activity

Use NavDropdown instead of DropdownButton in nav

Browse Source
This commit is contained in:
Brett Sun 2016-06-17 13:12:30 +02:00
parent 6eac3663d0
commit 388e10471b
2 changed files with 26 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
js/components/header.js
View File

@ -5,8 +5,8 @@ import { Link } from 'react-router';
import Nav from 'react-bootstrap/lib/Nav'; import Nav from 'react-bootstrap/lib/Nav';
import Navbar from 'react-bootstrap/lib/Navbar'; import Navbar from 'react-bootstrap/lib/Navbar';
import DropdownButton from 'react-bootstrap/lib/DropdownButton';
import MenuItem from 'react-bootstrap/lib/MenuItem'; import MenuItem from 'react-bootstrap/lib/MenuItem';
import NavDropdown from 'react-bootstrap/lib/NavDropdown';
import NavItem from 'react-bootstrap/lib/NavItem'; import NavItem from 'react-bootstrap/lib/NavItem';
import LinkContainer from 'react-router-bootstrap/lib/LinkContainer'; import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';
@ -93,8 +93,7 @@ let Header = React.createClass({
if (isLoggedIn) { if (isLoggedIn) {
account = ( account = (
<DropdownButton <NavDropdown
ref='dropdownbutton'
id="nav-route-user-dropdown" id="nav-route-user-dropdown"
title={currentUser.username}> title={currentUser.username}>
<LinkContainer to="/settings"> <LinkContainer to="/settings">
@ -117,7 +116,7 @@ let Header = React.createClass({
{getLangText('Log out')} {getLangText('Log out')}
</MenuItem> </MenuItem>
</LinkContainer> </LinkContainer>
</DropdownButton> </NavDropdown>
); );
// Let's assume that if the piece list hasn't loaded yet (ie. when // Let's assume that if the piece list hasn't loaded yet (ie. when
@ -170,10 +169,10 @@ let Header = React.createClass({
<Navbar.Collapse> <Navbar.Collapse>
<Nav navbar pullRight> <Nav navbar pullRight>
<HeaderNotificationDebug show={false} /> <HeaderNotificationDebug show={false} />
<HeaderNotifications />
{account} {account}
{signup} {signup}
</Nav> </Nav>
<HeaderNotifications />
{navRoutesLinks} {navRoutesLinks}
</Navbar.Collapse> </Navbar.Collapse>
</Navbar> </Navbar>

38
js/components/header_notifications.js
View File

@ -1,11 +1,12 @@
'use strict'; 'use strict';
import React from 'react'; import React from 'react';
import DropdownButton from 'react-bootstrap/lib/DropdownButton';
import Glyphicon from 'react-bootstrap/lib/Glyphicon'; import Glyphicon from 'react-bootstrap/lib/Glyphicon';
import MenuItem from 'react-bootstrap/lib/MenuItem'; import MenuItem from 'react-bootstrap/lib/MenuItem';
import Nav from 'react-bootstrap/lib/Nav'; import Nav from 'react-bootstrap/lib/Nav';
import NavDropdown from 'react-bootstrap/lib/NavDropdown';
import LinkContainer from 'react-router-bootstrap/lib/LinkContainer'; import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';
import NotificationActions from '../actions/notification_actions'; import NotificationActions from '../actions/notification_actions';
@ -97,20 +98,25 @@ let HeaderNotifications = React.createClass({
} }
return ( return (
<Nav navbar pullRight className="notification-menu"> <NavDropdown
<DropdownButton ref="dropdownButton"
ref='dropdownButton' className="notification-menu"
id="header-notification-dropdown" id="header-notification-dropdown"
title={ title={
<span> <span>
<Glyphicon color="green" glyph="envelope" /> <Glyphicon color="green" glyph="envelope" />
<span className="notification-amount">({numNotifications})</span> <span className="notification-amount">({numNotifications})</span>
</span> </span>
}> }>
{this.renderNotifications({ notifications: pieceListNotifications, isPiece: true })} {this.renderNotifications({
{this.renderNotifications({ notifications: editionListNotifications, isPiece: false })} notifications: pieceListNotifications,
</DropdownButton> isPiece: true
</Nav> })}
{this.renderNotifications({
notifications: editionListNotifications,
isPiece: false
})}
</NavDropdown>
); );
} }
return null; return null;