add labels to navigation items [fixes SCI-1493]

This commit is contained in:
zmagod 2017-08-22 14:00:28 +02:00
parent 3a2a1205e3
commit 94403a545c
5 changed files with 50 additions and 8 deletions

View file

@ -4,7 +4,14 @@ export default {
close: "Close"
},
navbar: {
page_title: "sciNote"
page_title: "sciNote",
home_label: "Home",
protocols_label: "Protocols",
repositories_label: "Repositories",
activities_label: "Activities",
search_label: "Search",
notifications_label: "Notifications",
info_label: "Info"
},
activities: {
modal_title: "Activities",

View file

@ -12,7 +12,14 @@ import {
const InfoDropdown = () =>
<NavDropdown
noCaret
title={<span className="glyphicon glyphicon-info-sign" />}
title={
<span>
<span className="glyphicon glyphicon-info-sign" />&nbsp;
<span className="visible-xs-inline visible-sm-inline">
<FormattedMessage id="navbar.info_label" />
</span>
</span>
}
id="nav-info-dropdown"
>
<MenuItem href={CUSTOMER_SUPPORT_LINK} target="_blank">

View file

@ -83,7 +83,14 @@ class NotificationsDropdown extends Component {
<StyledNavDropdown
noCaret
id="notifications-dropdown"
title={<i className="fa fa-bell" />}
title={
<span>
<i className="fa fa-bell" />&nbsp;
<span className="visible-xs-inline visible-sm-inline">
<FormattedMessage id="navbar.notifications_label" />
</span>
</span>
}
onClick={this.getRecentNotifications}
>
<StyledListHeader>

View file

@ -7,6 +7,7 @@ import {
Glyphicon
} from "react-bootstrap";
import styled from "styled-components";
import { FormattedMessage } from "react-intl";
import { SEARCH_PATH } from "../../../app/routes";
import { ENTER_KEY_CODE } from "../../../app/constants/numeric";
@ -60,7 +61,14 @@ class SearchDropdown extends Component {
return (
<StyledNavDropdown
noCaret
title={<span className="glyphicon glyphicon-search" />}
title={
<span>
<span className="glyphicon glyphicon-search" />&nbsp;
<span className="visible-xs-inline visible-sm-inline">
<FormattedMessage id="navbar.search_label" />
</span>
</span>
}
onClick={this.setFocusToInput}
id="search-dropdown"
>

View file

@ -2,6 +2,7 @@ import React, { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { Navbar, Nav, NavItem } from "react-bootstrap";
import { FormattedMessage } from "react-intl";
import styled from "styled-components";
import {
MAIN_COLOR_BLUE,
@ -88,26 +89,38 @@ class Navigation extends Component {
</Navbar.Header>
<Nav>
<NavItem eventKey={1}>
<span className="glyphicon glyphicon-home" title="Home" />
<span className="glyphicon glyphicon-home" title="Home" />&nbsp;
<span className="visible-xs-inline visible-sm-inline">
<FormattedMessage id="navbar.home_label" />
</span>
</NavItem>
<NavItem eventKey={2}>
<span
className="glyphicon glyphicon-list-alt"
title="Protocol repositories"
/>
/>&nbsp;
<span className="visible-xs-inline visible-sm-inline">
<FormattedMessage id="navbar.protocols_label" />
</span>
</NavItem>
<NavItem eventKey={3}>
<i
className="fa fa-cubes"
aria-hidden="true"
title="Repositories"
/>
/>&nbsp;
<span className="visible-xs-inline visible-sm-inline">
<FormattedMessage id="navbar.repositories_label" />
</span>
</NavItem>
<NavItem eventKey={4}>
<span
className="glyphicon glyphicon-equalizer"
title="Activities"
/>
/>&nbsp;
<span className="visible-xs-inline visible-sm-inline">
<FormattedMessage id="navbar.activities_label" />
</span>
</NavItem>
</Nav>
<Nav pullRight>