Commit 900cfb9a authored by Oleksii Savran's avatar Oleksii Savran Committed by Matija Obreza
Browse files

Updaded Dashboard navigation

parent 5a49140c
...@@ -97,6 +97,7 @@ ...@@ -97,6 +97,7 @@
"dashboard": { "dashboard": {
"p": { "p": {
"dashboard": { "dashboard": {
"dashboard": "Dashboard",
"title": "My Dashboard", "title": "My Dashboard",
"subtitle": "Manage data published on Genesys" "subtitle": "Manage data published on Genesys"
} }
......
...@@ -96,6 +96,7 @@ ...@@ -96,6 +96,7 @@
"dashboard": { "dashboard": {
"p": { "p": {
"dashboard": { "dashboard": {
"dashboard": "Dashboard",
"title": "My Dashboard", "title": "My Dashboard",
"subtitle": "Manage data published on Genesys" "subtitle": "Manage data published on Genesys"
} }
......
...@@ -59,7 +59,7 @@ const ADMIN_MENUS = [ ...@@ -59,7 +59,7 @@ const ADMIN_MENUS = [
const Layout = ({route, match, t, location}: { route: any, match: any, t: any, location: any}) => ( const Layout = ({route, match, t, location}: { route: any, match: any, t: any, location: any}) => (
<div className="admin-layout"> <div className="admin-layout">
<TopNavigation menuItems={ ADMIN_MENUS } location={ location }/> <TopNavigation menuItems={ ADMIN_MENUS } location={ location } root={ route.path } title={ 'admin.admin' }/>
{ renderRoutes(route.routes, match.path) } { renderRoutes(route.routes, match.path) }
</div> </div>
); );
......
import * as React from 'react'; import * as React from 'react';
import { translate } from 'react-i18next'; import { translate } from 'react-i18next';
// import DescriptorIcon from '@material-ui/icons/Description';
import DescriptorListIcon from '@material-ui/icons/List';
import AccountBoxIcon from '@material-ui/icons/AccountBox';
import PageLayout from './PageLayout';
import MenuItem from 'ui/common/Menu';
import renderRoutes from 'ui/renderRoutes'; import renderRoutes from 'ui/renderRoutes';
import TopNavigation from './headers/v1/NavigationBar';
const DashboardMenu = ({t}) => ( const DASHBOARD_MENUS = [
<div> {
<MenuItem label={ t('user.dashboard.menu.profile') } to="/dashboard/profile" icon={ <AccountBoxIcon/> }> to: '/dashboard/profile',
<MenuItem label={ t('user.dashboard.menu.userProfile') } to="/dashboard/profile"/> label: 'user.dashboard.menu.profile',
<MenuItem label={ t('user.dashboard.menu.changePassword') } to="/dashboard/profile/password" /> subMenus: [
</MenuItem> {
<MenuItem label={ t('subsets.dashboard.menu.subsets') } to="/dashboard/subsets" icon={ <DescriptorListIcon/> }> to: '/dashboard/profile',
<MenuItem label={ t('subsets.dashboard.menu.listSubsets') } to="/dashboard/subsets"/> label: 'user.dashboard.menu.userProfile',
<MenuItem label={ t('subsets.dashboard.menu.createSubsets') } to="/dashboard/subsets/edit" /> },
</MenuItem> {
</div> to: '/dashboard/profile/password',
); label: 'user.dashboard.menu.changePassword',
},
],
},
{
to: '/dashboard/subsets',
label: 'subsets.dashboard.menu.subsets',
subMenus: [
{
to: '/dashboard/subsets',
label: 'subsets.dashboard.menu.listSubsets',
},
{
to: '/dashboard/subsets/edit',
label: 'subsets.dashboard.menu.createSubsets',
},
],
},
];
const Layout = ({route, match, t}: { route: any, match: any, t: any}) => ( const Layout = ({route, match, t, location}: { route: any, match: any, t: any, location: any}) => (
<PageLayout sidebar={ <DashboardMenu t={ t }/> }> <div>
<TopNavigation menuItems={ DASHBOARD_MENUS } location={ location } root={ route.path } title={ 'dashboard.p.dashboard.dashboard' } color={ 'White' }/>
{ renderRoutes(route.routes, match.path) } { renderRoutes(route.routes, match.path) }
</PageLayout> </div>
); );
export default translate()(Layout); export default translate()(Layout);
...@@ -21,12 +21,13 @@ interface IMenuBarProps extends React.ClassAttributes<any> { ...@@ -21,12 +21,13 @@ interface IMenuBarProps extends React.ClassAttributes<any> {
t: any; t: any;
location: any; location: any;
menuItems: object[]; menuItems: object[];
color?: string;
} }
class MenuBar extends React.Component<IMenuBarProps, any> { class MenuBar extends React.Component<IMenuBarProps, any> {
private renderMenu = (path: any) => { private renderMenu = (path: any) => {
const { t, location } = this.props; const { t, location, color } = this.props;
return ( return (
path.subMenus ? ( path.subMenus ? (
<MenuItem <MenuItem
...@@ -35,6 +36,7 @@ class MenuBar extends React.Component<IMenuBarProps, any> { ...@@ -35,6 +36,7 @@ class MenuBar extends React.Component<IMenuBarProps, any> {
active={ location.pathname === path.to || path.subMenus.some((subMenu) => subMenu.to === location.pathname) } active={ location.pathname === path.to || path.subMenus.some((subMenu) => subMenu.to === location.pathname) }
key={ path.to } key={ path.to }
children={ path.subMenus.map(this.renderSubMenu) } children={ path.subMenus.map(this.renderSubMenu) }
color={ color || 'white' }
/> />
) : ( ) : (
<MenuItem <MenuItem
......
...@@ -7,7 +7,6 @@ import Collapse from '@material-ui/core/Collapse/Collapse'; ...@@ -7,7 +7,6 @@ import Collapse from '@material-ui/core/Collapse/Collapse';
/*tslint:disable*/ /*tslint:disable*/
const style = (theme) => ({ const style = (theme) => ({
menuItem: { menuItem: {
backgroundColor: '#fff',
height: '100%', height: '100%',
position: 'relative' as 'relative', position: 'relative' as 'relative',
overflowX: 'visible' as 'visible', overflowX: 'visible' as 'visible',
...@@ -17,7 +16,7 @@ const style = (theme) => ({ ...@@ -17,7 +16,7 @@ const style = (theme) => ({
transition: 'all 0.1s', transition: 'all 0.1s',
}, },
hover: { hover: {
backgroundColor: '#eeede7', backgroundColor: 'rgba(0, 0, 0, 0.07)', // '#eeede7',
borderBottom: 'solid 4px #929292', borderBottom: 'solid 4px #929292',
}, },
menuLink: { menuLink: {
...@@ -47,11 +46,14 @@ const style = (theme) => ({ ...@@ -47,11 +46,14 @@ const style = (theme) => ({
height: '3rem', height: '3rem',
borderTop: 'solid 1px transparent', borderTop: 'solid 1px transparent',
borderBottom: 'solid 1px #929292', borderBottom: 'solid 1px #929292',
backgroundColor: '#eeede7', backgroundColor: 'rgba(0, 0, 0, 0.07)', // '#eeede7',
transition: 'all 0.1s', transition: 'all 0.1s',
'&:hover': { '&:hover': {
backgroundColor: '#c3c0b0', backgroundColor: 'rgba(0, 0, 0, 0.245)', //'#c3c0b0',
}, },
'& > a': {
whiteSpace: 'nowrap' as 'nowrap',
}
}, },
borderBottom: 'solid 2px #b7b5b2', borderBottom: 'solid 2px #b7b5b2',
}, },
...@@ -64,9 +66,9 @@ const style = (theme) => ({ ...@@ -64,9 +66,9 @@ const style = (theme) => ({
borderBottom: 'solid 4px #5a9d32', borderBottom: 'solid 4px #5a9d32',
}, },
activeSub: { activeSub: {
backgroundColor: '#c3c0b0!important', backgroundColor: 'rgba(0, 0, 0, 0.245)!important', // '#c3c0b0',
'&:hover': { '&:hover': {
backgroundColor: '#938f81!important' backgroundColor: 'rgba(0, 0, 0, 0.43)!important'// '#938f81'
} }
}, },
}); });
...@@ -81,6 +83,7 @@ interface IMenuItemProps extends React.ClassAttributes<any> { ...@@ -81,6 +83,7 @@ interface IMenuItemProps extends React.ClassAttributes<any> {
t?: any; t?: any;
active?: boolean; active?: boolean;
activeSub?: boolean; activeSub?: boolean;
color?: string;
} }
class MenuItem extends React.Component<IMenuItemProps, any> { class MenuItem extends React.Component<IMenuItemProps, any> {
...@@ -101,7 +104,7 @@ class MenuItem extends React.Component<IMenuItemProps, any> { ...@@ -101,7 +104,7 @@ class MenuItem extends React.Component<IMenuItemProps, any> {
private closeMenu = () => this.toggleDrawer(false); private closeMenu = () => this.toggleDrawer(false);
public render() { public render() {
const {to, label, children, classes, t, activeSub, active} = this.props; const {to, label, children, classes, t, activeSub, active, color} = this.props;
return ( return (
<div <div
className={ `${classes.menuItem} ${this.state.open && classes.hover} ${ active && classes.active } ${ activeSub && classes.activeSub}` } className={ `${classes.menuItem} ${this.state.open && classes.hover} ${ active && classes.active } ${ activeSub && classes.activeSub}` }
...@@ -114,7 +117,7 @@ class MenuItem extends React.Component<IMenuItemProps, any> { ...@@ -114,7 +117,7 @@ class MenuItem extends React.Component<IMenuItemProps, any> {
</Link> </Link>
{ children && { children &&
<Collapse className={ classes.collapsed } in={ this.state.open }> <Collapse className={ classes.collapsed } in={ this.state.open }>
<div className={ `${classes.children} ${this.state.open && classes.open}` }> <div className={ `${classes.children} ${this.state.open && classes.open}` } style={ {backgroundColor: `${color || 'white'}`} }>
{ children } { children }
</div> </div>
</Collapse> </Collapse>
......
...@@ -77,6 +77,7 @@ const styleSheet = (theme) => ({ ...@@ -77,6 +77,7 @@ const styleSheet = (theme) => ({
lineHeight: '36px', lineHeight: '36px',
color: '#000!important', color: '#000!important',
paddingLeft: '36px', paddingLeft: '36px',
paddingRight: '24px',
width: '100%', width: '100%',
borderTop: 'solid 1px #929292', borderTop: 'solid 1px #929292',
boxSizing: 'border-box' as 'border-box', boxSizing: 'border-box' as 'border-box',
......
...@@ -29,7 +29,7 @@ const styleSheet = (theme) => ({ ...@@ -29,7 +29,7 @@ const styleSheet = (theme) => ({
flex: 1, flex: 1,
}, },
headerRoot: { headerRoot: {
backgroundColor: '#fff', // backgroundColor: '#fff',
height: 'auto', height: 'auto',
[theme.breakpoints.down('md')]: { [theme.breakpoints.down('md')]: {
height: '3.5rem', height: '3.5rem',
...@@ -64,7 +64,7 @@ const styleSheet = (theme) => ({ ...@@ -64,7 +64,7 @@ const styleSheet = (theme) => ({
fontSize: '8.5px', fontSize: '8.5px',
fontWeight: 'bold' as 'bold', fontWeight: 'bold' as 'bold',
textAlign: 'center' as 'center', textAlign: 'center' as 'center',
color: '#fff', // color: '#fff',
}, },
iconBackground: { iconBackground: {
backgroundColor: '#88B941', backgroundColor: '#88B941',
...@@ -150,10 +150,12 @@ interface IHeaderProps extends React.ClassAttributes<any> { ...@@ -150,10 +150,12 @@ interface IHeaderProps extends React.ClassAttributes<any> {
t: any; t: any;
menuItems: object[]; menuItems: object[];
location: any; location: any;
root: any;
title: string;
color?: string;
} }
class AdminHeader extends React.Component<IHeaderProps | any, any> { class AdminHeader extends React.Component<IHeaderProps | any, any> {
public constructor(props: any) { public constructor(props: any) {
super(props); super(props);
...@@ -193,16 +195,19 @@ class AdminHeader extends React.Component<IHeaderProps | any, any> { ...@@ -193,16 +195,19 @@ class AdminHeader extends React.Component<IHeaderProps | any, any> {
public render() { public render() {
const {classes, t, menuItems, location} = this.props; const {classes, t, menuItems, location, root, title, color} = this.props;
const menuColor = color || 'white';
return ( return (
<div className={ `header-bar ${ classes.headerMargin }` }> <div className={ `header-bar ${ classes.headerMargin }` }>
<AppBar position="fixed" className={ classes.headerRoot }> <AppBar position="fixed" className={ classes.headerRoot } style={ {backgroundColor: `${menuColor}`} }>
<Toolbar className={ classes.blockHeader }> <Toolbar className={ classes.blockHeader }>
<div className="mobile-navigation-block"> <div className="mobile-navigation-block">
<div className={ classes.menuWrapper }> <div className={ classes.menuWrapper }>
<IconButton className={ classes.menuBtn } aria-label="Menu" color="secondary" <IconButton className={ classes.menuBtn } aria-label="Menu" color="secondary"
onClick={ this.handleLeftMenuOpen }> onClick={ this.handleLeftMenuOpen }>
<img src="images/GENESYS-ICON_white.svg" className={ classes.logoIcon }/> <svg className={ classes.logoIcon } style={ {fill: `${menuColor}`} }>
<use xlinkHref="images/GENESYS-ICON.svg#Layer_1"/>
</svg>
</IconButton> </IconButton>
</div> </div>
...@@ -213,14 +218,18 @@ class AdminHeader extends React.Component<IHeaderProps | any, any> { ...@@ -213,14 +218,18 @@ class AdminHeader extends React.Component<IHeaderProps | any, any> {
<div className={ classes.underlinedLogo }> <div className={ classes.underlinedLogo }>
<Link to="/" className={ `${this.props.classes.navLogo} ${classes.mobileHidden}` }> <Link to="/" className={ `${this.props.classes.navLogo} ${classes.mobileHidden}` }>
<div className={ classes.iconBackground }> <div className={ classes.iconBackground }>
<img src="images/GENESYS-ICON_white.svg" className={ classes.mainIcon }/> <svg className={ classes.mainIcon } style={ {fill: `${menuColor}`} }>
<div className={ classes.iconBack }>{ t('common:action.backTo', { where: t('admin.genesys') }).toUpperCase() }</div> <use xlinkHref="images/GENESYS-ICON.svg#Layer_1"/>
</svg>
<div className={ classes.iconBack } style={ {color: `${menuColor}`} }>
{ t('common:action.backTo', { where: t('admin.genesys') }).toUpperCase() }
</div>
</div> </div>
</Link> </Link>
<Link to="/admin/"><div className={ classes.admin }>{ t('admin.admin') }</div></Link> <Link to={ root }><div className={ classes.admin }>{ t(title) }</div></Link>
</div> </div>
<div className={ `${classes.flex} ${this.props.classes.navWrapper}` }> <div className={ `${classes.flex} ${this.props.classes.navWrapper}` }>
<MenuBar t={ t } location={ location } menuItems={ menuItems }/> <MenuBar t={ t } location={ location } menuItems={ menuItems } color={ menuColor }/>
<div <div
className={ `float-right` }>{ this.renderLogin([ROLE_USER, ROLE_ADMINISTRATOR]) }</div> className={ `float-right` }>{ this.renderLogin([ROLE_USER, ROLE_ADMINISTRATOR]) }</div>
<div> <div>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment