Commit 3157fb5a authored by Viacheslav Pavlov's avatar Viacheslav Pavlov Committed by Matija Obreza
Browse files

Update top-level navigation

- removed unused components
parent 61d81741
......@@ -182,6 +182,26 @@
"uom": "UOM",
"used": "Used"
}
},
"menu": {
"home": "Home",
"explore": "Explore",
"exploreCountry": "PGRFA by country code",
"explorePartners": "Genesys partners",
"exploreOrganizations": "PGRFA networks",
"exploreCrops": "Crops and crop groups",
"exploreSubsets": "Core collections and subsets",
"exploreDatasets": "Characterization & Evaluation data",
"exploreDescriptorLists": "Crop descriptor lists",
"documentation": "Documentation",
"api": "Genesys API",
"brapi": "BrAPI",
"aboutUs": "About Genesys",
"aboutGenesys": "About Genesys",
"joinGenesys": "Join Genesys",
"citationAndAttribution": "Citation and attribution",
"recentActivity": "Recent activity",
"contactUs": "Contact us"
}
},
"dashboard": {
......
......@@ -181,6 +181,26 @@
"uom": "UOM",
"used": "Used"
}
},
"menu": {
"home": "Home",
"explore": "Explore",
"exploreCountry": "PGRFA by country code",
"explorePartners": "Genesys partners",
"exploreOrganizations": "PGRFA networks",
"exploreCrops": "Crops and crop groups",
"exploreSubsets": "Core collections and subsets",
"exploreDatasets": "Characterization & Evaluation data",
"exploreDescriptorLists": "Crop descriptor lists",
"documentation": "Documentation",
"api": "Genesys API",
"brapi": "BrAPI",
"aboutUs": "About Genesys",
"aboutGenesys": "About Genesys",
"joinGenesys": "Join Genesys",
"citationAndAttribution": "Citation and attribution",
"recentActivity": "Recent activity",
"contactUs": "Contact us"
}
},
"dashboard": {
......
......@@ -55,7 +55,7 @@ const DASHBOARD_MENUS = [
const Layout = ({route, match, t, location}: { route: any, match: any, t: any, location: any}) => (
<div>
<TopNavigation menuItems={ DASHBOARD_MENUS } location={ location } root={ route.path } title={ 'dashboard.p.dashboard.dashboard' } color={ 'White' }/>
<TopNavigation menuItems={ DASHBOARD_MENUS } location={ location } root={ route.path } title={ 'dashboard.p.dashboard.dashboard' }/>
{ renderRoutes(route.routes, match.path) }
</div>
);
......
import * as React from 'react';
import { withStyles} from '@material-ui/core/styles';
import withWidth from '@material-ui/core/withWidth';
import { translate } from 'react-i18next';
import Drawer from '@material-ui/core/Drawer';
import ListItem from '@material-ui/core/ListItem';
import { NavLink, Link } from 'react-router-dom';
import Close from '@material-ui/icons/Close';
import MyListCount from './MyListCount';
import {compose} from 'redux';
import {Breakpoint} from '@material-ui/core/styles/createBreakpoints';
const mobile = ['md', 'sm', 'xs'] as Breakpoint[];
const styleSheet = (theme) => ({
flex: {
flex: 1,
},
myListCount: {
[theme.breakpoints.up('lg')]: {
display: 'none' as 'none',
},
},
/* tslint:disable */
leftMenu: {
height: '100%',
backgroundColor: '#252520',
width: '100%',
[theme.breakpoints.down('xs')]: {
width: '100vw',
},
'& > div': {
padding: '0 1.43rem',
borderTop: '1px solid grey',
borderBottom: '2px solid transparent',
'&:hover': {
borderBottom: '3px solid #88ba42',
background: 'inherit',
'&+div': {
borderTop: 'none',
},
},
'& > a': {
width: '100%',
color: '#fff',
fontSize: '1.286rem',
lineHeight: '3.4rem',
'&:focus': {
outline: 'none',
textDecoration: 'none',
},
},
},
'& div:last-child': {
borderBottom: '1px solid grey',
}
},
close: {
padding: '0 1.43rem',
lineHeight: '4.5rem',
},
/* tslint:enable */
});
interface ILeftMenuProps extends React.ClassAttributes<any> {
open: any;
myListItemsCount: number;
closeMenu: (flag) => any;
classes: any;
width: Breakpoint;
t: any;
}
class LeftMenu extends React.Component<ILeftMenuProps, any> {
public componentWillReceiveProps(nextProps) {
const {width, closeMenu, open} = nextProps;
const isMobile = mobile.indexOf(width) !== -1;
if (open && !isMobile) {
closeMenu();
}
}
public render() {
const { t, myListItemsCount, classes } = this.props;
const closeBtn = {
color: '#fff',
cursor: 'pointer',
verticalAlign: 'middle',
};
return (
<div>
<Drawer
variant="temporary"
open={ this.props.open }
onClose={ this.props.closeMenu }
onClick={ this.props.closeMenu }
>
<div className={ this.props.classes.leftMenu }>
<div className={ this.props.classes.close }>
<Close style={ closeBtn }/>
</div>
<ListItem button>
<Link to="/">{ t('common.menu.Home') }</Link>
</ListItem>
<ListItem button>
<NavLink activeClassName="active" to="/a">{ t('accessions.common.modelName_plural') }</NavLink>
</ListItem>
<ListItem button>
<NavLink activeClassName="active" to="/subsets">{ t('subsets.common.modelName_plural') }</NavLink>
</ListItem>
<ListItem button>
<NavLink activeClassName="active" to="/datasets">{ t('datasets.common.menu') }</NavLink>
</ListItem>
<ListItem button>
<NavLink activeClassName="active" to="/descriptorlists">{ t('descriptorlists.common.menu') }</NavLink>
</ListItem>
<ListItem button> { /*TODO deside where to put */ }
<NavLink activeClassName="active" to="/partners">{ t('partners.common.menu') }</NavLink>
</ListItem>
<ListItem button>
<NavLink activeClassName="active" to="/iso3166">{ t('geo.common.menu') }</NavLink>
</ListItem>
<ListItem button>
<NavLink activeClassName="active" to="/wiews">{ t('institutes.common.modelName_plural') }</NavLink>
</ListItem>
<ListItem button>
<NavLink activeClassName="active" to="/c">{ t('crop.common.modelName_plural') }</NavLink>
</ListItem>
<ListItem button>
<NavLink activeClassName="active" to="/sel">
{ t('list.common.menu') }
<MyListCount count={ myListItemsCount } classes={ {root: classes.myListCount} }/>
</NavLink>
</ListItem>
</div>
</Drawer>
</div>
);
}
}
export default translate()(compose(withStyles(styleSheet), withWidth())(LeftMenu));
import * as React from 'react';
import { translate } from 'react-i18next';
import { connect } from 'react-redux';
import withStyles from '@material-ui/core/styles/withStyles';
......@@ -30,8 +32,15 @@ const styles = (theme) => ({
},
});
const MyListCount = ({count, classes, classname = '', style = {}}) => (
const MyListCount = ({count, classes, classname = '', style = {}, t}) => (
<span>
{ t('list.common.menu') }
<span style={ style } className={ `${classes.root} ${classname}` }>{ count }</span>
</span>
);
export default withStyles(styles)(MyListCount);
const mapStateToProps = (state) => ({
count: state.list.public.myList.count,
});
export default translate()(withStyles(styles)(connect(mapStateToProps)(MyListCount)));
import * as React from 'react';
import { connect } from 'react-redux';
import {bindActionCreators} from 'redux';
import { NavLink, Link, withRouter } from 'react-router-dom';
import { translate } from 'react-i18next';
import {loginAppRequest} from 'actions/login';
import {logoutRequest} from 'user/actions/public';
import AppBar from '@material-ui/core/AppBar';
import { withStyles } from '@material-ui/core/styles';
import Toolbar from '@material-ui/core/Toolbar';
import IconButton from '@material-ui/core/IconButton';
import {ROLE_ADMINISTRATOR, ROLE_USER} from 'constants/userRoles';
import UserLoginMenu from './UserLoginMenu';
import UserMenu from './UserMenu';
import LeftMenu from './LeftMenu';
import LanguageList from './LanguageList';
import MyListCount from './MyListCount';
const styleSheet = (theme) => ({
root: {
marginTop: 90,
width: '100%',
},
flex: {
flex: 1,
},
headerRoot: {
backgroundColor: '#2b2924',
height: 'auto',
[theme.breakpoints.down('md')]: {
height: '3.5rem',
},
},
blockHeader: {
padding: '0 20px',
[theme.breakpoints.down('md')]: {
alignItems: 'baseline' as 'baseline',
},
},
/*tslint:disable*/
navLogo: {
color: '#e6e5e0',
padding: '15px 0',
fontSize: '29px',
height: '100%',
width: '100%',
maxWidth: '182px',
marginRight: '68px',
lineHeight: '22px',
display: 'block',
boxSizing: 'border-box' as 'border-box',
'html[dir="rtl"] &': {
marginRight: '0 !important',
marginLeft: '68px !important'
},
},
/*tslint:enable*/
mainIcon: {
height: '42px',
// width: '29%',
paddingRight: '0.7143rem',
paddingLeft: '0.7143rem',
paddingBottom: '0px',
display: 'inline-block',
verticalAlign: 'middle',
},
logoIcon: {
height: '27px',
// width: '60%',
display: 'inline-block',
verticalAlign: 'middle',
},
loginButton: {
color: '#ffffff',
float: 'right' as 'right',
},
/* tslint:disable */
linkLogin: {
fontSize: '18px',
color: '#ffffff',
cursor: 'pointer',
'&:hover': {
color: '#88ba42',
textDecoration: 'none',
},
},
menuBtn: {
width: '1em',
marginRight: '1.429rem',
'&:hover': {
backgroundColor: 'transparent' as 'transparent',
}
},
mobileHidden: {
[theme.breakpoints.down('md')]: {
display: 'none'
},
},
/* tslint:enable */
});
interface IHeaderProps extends React.ClassAttributes<any> {
login: any;
logoutRequest: () => Promise<any>;
loginAppRequest: () => Promise<any>;
history: any;
classes?: any;
myListItemsCount: number;
}
class Header extends React.Component<IHeaderProps | any, any> {
public constructor(props: any) {
super(props);
this.state = {
open: false,
};
}
private logout = () => {
this.props.logoutRequest()
.then(() => this.props.loginAppRequest())
.then((data) => {
this.props.history.push('/login');
});
}
private hasRole = (roles: string[]): boolean => {
return this.props.login.authorities
.map((e) => roles.indexOf(e) > -1)
.reduce((p, c) => p || c);
}
private renderLogin = (roles: string[]) => {
if (this.hasRole(roles)) {
return <UserMenu userName={ this.props.login.user_name } logoutRequest={ this.logout }/>;
} else {
return <UserLoginMenu />;
}
}
private toggleDrawer = (flag) => {
this.setState({ open: flag });
}
private handleLeftMenuClose = () => this.toggleDrawer(false);
private handleLeftMenuOpen = () => this.toggleDrawer(true);
public render() {
const { classes, myListItemsCount, t } = this.props;
return (
<div className="header-bar">
<AppBar position="fixed" className={ classes.headerRoot } >
<Toolbar className={ classes.blockHeader }>
<div className="mobile-navigation-block">
<IconButton className={ classes.menuBtn } aria-label="Menu" color="secondary" onClick={ this.handleLeftMenuOpen } >
<img src="images/GENESYS-ICON.svg" className={ classes.logoIcon } />
</IconButton>
<LeftMenu open={ this.state.open } closeMenu={ this.handleLeftMenuClose } myListItemsCount={ myListItemsCount }/>
</div>
<div className={ classes.flex }>
<Link to="/" className={ `float-left ${this.props.classes.navLogo} ${classes.mobileHidden}` }>
<img src="images/GENESYS-ICON.svg" className={ classes.mainIcon } />
<img src="images/GENESYS-LOGO.svg" className={ classes.logoIcon } />
</Link>
<div className="navigation-block float-right">
<NavLink activeClassName="active" to="/a">{ t('accessions.common.menu') }</NavLink>
<NavLink activeClassName="active" to="/subsets">{ t('subsets.common.menu') }</NavLink>
<NavLink activeClassName="active" to="/wiews">{ t('institutes.common.menu') }</NavLink>
<NavLink activeClassName="active" to="/datasets">{ t('datasets.common.menu') }</NavLink>
<NavLink activeClassName="active" to="/descriptorlists">{ t('descriptorlists.common.menu') }</NavLink>
<NavLink activeClassName="active" to="/c">{ t('crop.common.menu') }</NavLink>
<NavLink activeClassName="active" to="/sel">{ t('list.common.menu') }<MyListCount count={ myListItemsCount }/></NavLink>
</div>
</div>
<div className="float-right">{ this.renderLogin([ROLE_USER, ROLE_ADMINISTRATOR]) }</div>
<div>
<LanguageList />
</div>
</Toolbar>
</AppBar>
</div>
);
}
}
const mapStateToProps = (state) => ({
login: state.login,
myListItemsCount: state.list.public.myList.count,
});
const mapDispatchToProps = (dispatch) => bindActionCreators({
loginAppRequest,
logoutRequest,
}, dispatch);
export default translate()(withRouter(connect(mapStateToProps, mapDispatchToProps)(withStyles(styleSheet)(Header))));
......@@ -4,27 +4,22 @@ import { withStyles } from '@material-ui/core/styles';
import Card, {CardHeader, CardContent} from 'ui/common/Card';
// import * as classnames from 'classnames';
import Header from './Header';
import Footer from './Footer';
import SidebarWrapper from './sidebar/SidebarWrapper';
const styles = (theme) => ({
root: {
paddingTop: '72px',
display: 'flex' as 'flex',
flexDirection: 'row' as 'row',
height: 'auto',
width: '100%',
overflow: 'visible' as 'visible',
position: 'absolute' as 'absolute',
[theme.breakpoints.down('md')]: {
paddingTop: '3rem',
},
},
content: {
flexGrow: 1,
display: 'flex' as 'flex',
minHeight: 'calc(100vh - 72px)',
minHeight: 'calc(100vh - 83px)',
flexDirection: 'column' as 'column',
maxWidth: '100%',
},
......@@ -65,8 +60,7 @@ interface ILayoutProps extends React.Props<any> {
const Layout = ({classes, children = null, sidebar = null, withFooter = false}: ILayoutProps) => (
<div>
<Header />
<div className={ classes.root }>
<div className={ classes.root }>
{ sidebar && <SidebarWrapper sidebarContent={ sidebar }/> }
{ children && (
<div className={ classes.content }>
......
import * as React from 'react';
import { connect } from 'react-redux';
import { translate } from 'react-i18next';
import withStyles from '@material-ui/core/styles/withStyles';
import renderRoutes from 'ui/renderRoutes';
import TopNavigation from 'ui/layout/headers/v1/NavigationBar';
import * as MenuThemes from 'ui/layout//headers/v1/Themes';
import MyListCount from './Header/MyListCount';
const styles = (theme) => ({
logo: {
height: '80px',
display: 'flex' as 'flex',
alignItems: 'center' as 'center',
[theme.breakpoints.down('md')]: {
display: 'none',
},
},
mainIcon: {
height: '42px',
paddingRight: '0.7143rem',
paddingLeft: '0.7143rem',
paddingBottom: '0px',
display: 'inline-block',
verticalAlign: 'middle',
},
logoIcon: {
height: '27px',
display: 'inline-block',
verticalAlign: 'middle',
},
});
const PUBLIC_MENUS = [
{
to: '/',
label: 'public.menu.home',
},
{
to: '/a',
label: 'public.menu.explore',
subMenus: [
{
to: '/a',
label: 'public.menu.explore',
},
{
to: '/c',
label: 'public.menu.exploreCrops',
},
{
to: '/subsets',
label: 'public.menu.exploreSubsets',
},
{
to: '/datasets',
label: 'public.menu.exploreDatasets',
},
{
to: '/descriptorlists',
label: 'public.menu.exploreDescriptorLists',
},
{
to: '/iso3166',
label: 'public.menu.exploreCountry',
},
{
to: '/partners',
label: 'public.menu.explorePartners',
},
{
to: '/org',
label: 'public.menu.exploreOrganizations',
},
],
},
{
to: '/content/about/about', // TODO "/content/about/about" maybe?
label: 'public.menu.aboutUs',
subMenus: [
{
to: '/content/about/about',
label: 'public.menu.aboutGenesys',
},
{
to: '/content/about/join', // TODO
label: 'public.menu.joinGenesys',
},
{
to: '/content/legal/copying',
label: 'public.menu.citationAndAttribution',
},
{
to: '/content/news',
label: 'public.menu.recentActivity',
},
{
to: '/content/about/contact',
label: 'public.menu.contactUs',
},