openstack
/
tripleo-ui
Code Issues Proposed changes

Add i18n strings to the navigation bar 

Change-Id: I1f2f93d2dba159986497b3604b692510e7709a39
Closes-Bug: #1650559
Implements: blueprint tripleo-ui-i18n-support-for-js
This commit is contained in:
Jason E. Rist 2017-01-10 14:03:38 -07:00
parent 55496ccec1
commit 467b18ed97
1 changed files with 35 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/js/components/NavBar.js
View File

@ -1,3 +1,4 @@
import { defineMessages, FormattedMessage } from 'react-intl';
import React from 'react';
import { Link } from 'react-router';
import ImmutablePropTypes from 'react-immutable-proptypes';
@ -6,6 +7,26 @@ import NavTab from './ui/NavTab';
import TripleoOwlSvg from '../../img/tripleo-owl.svg';
const messages = defineMessages({
toggleNavigation: {
id: 'NavBar.toggleNavigation',
defaultMessage: 'Toggle navigation'
},
logoutLink: {
id: 'NavBar.logoutLink',
defaultMessage: 'Logout'
},
deploymentPlanTab: {
id: 'NavBar.deploymentPlanTab',
defaultMessage: 'Deployment Plan'
},
nodesTab: {
id: 'Navbar.nodesTab',
defaultMessage: 'Nodes'
}
});
export default class NavBar extends React.Component {
logout(e) {
e.preventDefault();
@ -19,7 +40,9 @@ export default class NavBar extends React.Component {
<button type="button" className="navbar-toggle collapsed"
data-toggle="collapse" data-target="#tripleo-navbar-collapse"
aria-expanded="false">
<span className="sr-only">Toggle navigation</span>
<span className="sr-only">
<FormattedMessage {...messages.toggleNavigation}/>
</span>
<span className="icon-bar"></span>
<span className="icon-bar"></span>
<span className="icon-bar"></span>
@ -36,11 +59,19 @@ export default class NavBar extends React.Component {
{this.props.user.get('username')}
</a>
</li>
<li><a href="#" onClick={this.logout.bind(this)} id="NavBar__logoutLink">Logout</a></li>
<li>
<a href="#" onClick={this.logout.bind(this)} id="NavBar__logoutLink">
<FormattedMessage {...messages.logoutLink}/>
</a>
</li>
</ul>
<ul className="nav navbar-nav navbar-primary">
<NavTab to="/deployment-plan" id="NavBar__deploymentPlanTab">Deployment Plan</NavTab>
<NavTab to="/nodes" id="NavBar__nodesTab">Nodes</NavTab>
<NavTab to="/deployment-plan" id="NavBar__deploymentPlanTab">
<FormattedMessage {...messages.deploymentPlanTab}/>
</NavTab>
<NavTab to="/nodes" id="NavBar__nodesTab">
<FormattedMessage {...messages.nodesTab}/>
</NavTab>
</ul>
</div>
</nav>