// The primary application header. // // This is only shown when the user has logged into the application. // We display a basic breadcrumb on the left, and a logout link on the right. var AppActions = require('../actions/AppActions'); var Location = require('../stores/Location'); var React = require('react'); var ReactBootstrap = require('react-bootstrap'); var Button = ReactBootstrap.Button; var Glyphicon = ReactBootstrap.Glyphicon; var Nav = ReactBootstrap.Nav; var NavItem = ReactBootstrap.NavItem; var Navbar = ReactBootstrap.Navbar; var Header = React.createClass({ getInitialState: function() { return { location: Location.getLocation() }; }, componentDidMount: function() { Location.addNewLocationListener(this.updateLocation); }, componentWillUnmount: function() { Location.removeNewLocationListener(this.updateLocation); }, render: function() { var subPath = null; if (this.state.location.createProject) { subPath = <NavItem ref='createProject'> <Glyphicon glyph='menu-right' /> Create Project </NavItem> } else if (this.state.location.project) { subPath = <NavItem ref='project'> <Glyphicon glyph='menu-right' /> Project Details </NavItem> } return ( <Navbar> <Nav> <NavItem ref='brand' onClick={this.clickBrand}> <strong>Helix Project Management</strong> </NavItem> {subPath} </Nav> <Nav right style={{"marginRight": '10px'}}> <Button bsStyle="link" onClick={this.handleLogOut}>Log Out</Button> </Nav> </Navbar> ); }, handleLogOut: function() { AppActions.logOut(); }, clickBrand: function() { AppActions.changeLocation({ projectList: 'my' }); }, updateLocation: function() { this.setState({ location: Location.getLocation() }); } }); module.exports = Header;
# | Change | User | Description | Committed | |
---|---|---|---|---|---|
#1 | 15688 | Doug Scheirer |
Populate -o //guest/perforce_software/helix-web-services/... //guest/doug_scheirer/helix-web-services/.... |
||
//guest/perforce_software/helix-web-services/main/source/helix_web_components/project_management/components/Header.jsx | |||||
#1 | 15622 | tjuricek |
Move source code to 'source/' subdirectory of branch. build/ will remain where it is. |
||
//guest/perforce_software/helix-web-services/main/helix_web_components/project_management/components/Header.jsx | |||||
#1 | 13974 | tjuricek |
Moving 'ui/static' to 'helix_web_components' project, and altering some notes. Also, removed obsolete top-level Rake tasks. The "Helix Web Components" project will likely get moved elsewhere in the future. |
||
//guest/perforce_software/helix-web-services/main/ui/static/project_management/components/Header.jsx | |||||
#3 | 13971 | tjuricek |
Add the ability for the header to display a "subnav" element. This is likely not our final UI, we may need to customize an individual nav-item to function like a breadcrumb. But functionally, it's working, the behavior should be the same. |
||
#2 | 13962 | tjuricek |
Add 'location' store and integrate "Jest" for unit testing. The location will trigger different views of the main ProjectManagement component. The Jest framework allows us to create headless tests of the React component logic. It's a little tricky, and right now has a dependency on node 0.10. |
||
#1 | 13769 | tjuricek | Add a trivial 'Header' component with a log out method. |