Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Genesys PGR
Genesys Website
Commits
900cfb9a
Commit
900cfb9a
authored
Nov 09, 2018
by
Oleksii Savran
Committed by
Matija Obreza
Nov 10, 2018
Browse files
Updaded Dashboard navigation
parent
5a49140c
Changes
8
Hide whitespace changes
Inline
Side-by-side
locales/en/translations.json
View file @
900cfb9a
...
...
@@ -97,6 +97,7 @@
"dashboard"
:
{
"p"
:
{
"dashboard"
:
{
"dashboard"
:
"Dashboard"
,
"title"
:
"My Dashboard"
,
"subtitle"
:
"Manage data published on Genesys"
}
...
...
src/translations.json
View file @
900cfb9a
...
...
@@ -96,6 +96,7 @@
"dashboard"
:
{
"p"
:
{
"dashboard"
:
{
"dashboard"
:
"Dashboard"
,
"title"
:
"My Dashboard"
,
"subtitle"
:
"Manage data published on Genesys"
}
...
...
src/ui/layout/AdminLayout.tsx
View file @
900cfb9a
...
...
@@ -59,7 +59,7 @@ const ADMIN_MENUS = [
const
Layout
=
({
route
,
match
,
t
,
location
}:
{
route
:
any
,
match
:
any
,
t
:
any
,
location
:
any
})
=>
(
<
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
)
}
</
div
>
);
...
...
src/ui/layout/DashboardLayout.tsx
View file @
900cfb9a
import
*
as
React
from
'
react
'
;
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
TopNavigation
from
'
./headers/v1/NavigationBar
'
;
const
DashboardMenu
=
({
t
})
=>
(
<
div
>
<
MenuItem
label
=
{
t
(
'
user.dashboard.menu.profile
'
)
}
to
=
"/dashboard/profile"
icon
=
{
<
AccountBoxIcon
/>
}
>
<
MenuItem
label
=
{
t
(
'
user.dashboard.menu.userProfile
'
)
}
to
=
"/dashboard/profile"
/>
<
MenuItem
label
=
{
t
(
'
user.dashboard.menu.changePassword
'
)
}
to
=
"/dashboard/profile/password"
/>
</
MenuItem
>
<
MenuItem
label
=
{
t
(
'
subsets.dashboard.menu.subsets
'
)
}
to
=
"/dashboard/subsets"
icon
=
{
<
DescriptorListIcon
/>
}
>
<
MenuItem
label
=
{
t
(
'
subsets.dashboard.menu.listSubsets
'
)
}
to
=
"/dashboard/subsets"
/>
<
MenuItem
label
=
{
t
(
'
subsets.dashboard.menu.createSubsets
'
)
}
to
=
"/dashboard/subsets/edit"
/>
</
MenuItem
>
</
div
>
);
const
DASHBOARD_MENUS
=
[
{
to
:
'
/dashboard/profile
'
,
label
:
'
user.dashboard.menu.profile
'
,
subMenus
:
[
{
to
:
'
/dashboard/profile
'
,
label
:
'
user.dashboard.menu.userProfile
'
,
},
{
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
})
=>
(
<
PageLayout
sidebar
=
{
<
DashboardMenu
t
=
{
t
}
/>
}
>
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
'
}
/>
{
renderRoutes
(
route
.
routes
,
match
.
path
)
}
</
PageLayout
>
</
div
>
);
export
default
translate
()(
Layout
);
src/ui/layout/headers/v1/MenuBar.tsx
View file @
900cfb9a
...
...
@@ -21,12 +21,13 @@ interface IMenuBarProps extends React.ClassAttributes<any> {
t
:
any
;
location
:
any
;
menuItems
:
object
[];
color
?:
string
;
}
class
MenuBar
extends
React
.
Component
<
IMenuBarProps
,
any
>
{
private
renderMenu
=
(
path
:
any
)
=>
{
const
{
t
,
location
}
=
this
.
props
;
const
{
t
,
location
,
color
}
=
this
.
props
;
return
(
path
.
subMenus
?
(
<
MenuItem
...
...
@@ -35,6 +36,7 @@ class MenuBar extends React.Component<IMenuBarProps, any> {
active
=
{
location
.
pathname
===
path
.
to
||
path
.
subMenus
.
some
((
subMenu
)
=>
subMenu
.
to
===
location
.
pathname
)
}
key
=
{
path
.
to
}
children
=
{
path
.
subMenus
.
map
(
this
.
renderSubMenu
)
}
color
=
{
color
||
'
white
'
}
/>
)
:
(
<
MenuItem
...
...
src/ui/layout/headers/v1/MenuItem.tsx
View file @
900cfb9a
...
...
@@ -7,7 +7,6 @@ import Collapse from '@material-ui/core/Collapse/Collapse';
/*tslint:disable*/
const
style
=
(
theme
)
=>
({
menuItem
:
{
backgroundColor
:
'
#fff
'
,
height
:
'
100%
'
,
position
:
'
relative
'
as
'
relative
'
,
overflowX
:
'
visible
'
as
'
visible
'
,
...
...
@@ -17,7 +16,7 @@ const style = (theme) => ({
transition
:
'
all 0.1s
'
,
},
hover
:
{
backgroundColor
:
'
#eeede7
'
,
backgroundColor
:
'
rgba(0, 0, 0, 0.07)
'
,
//
'#eeede7',
borderBottom
:
'
solid 4px #929292
'
,
},
menuLink
:
{
...
...
@@ -47,11 +46,14 @@ const style = (theme) => ({
height
:
'
3rem
'
,
borderTop
:
'
solid 1px transparent
'
,
borderBottom
:
'
solid 1px #929292
'
,
backgroundColor
:
'
#eeede7
'
,
backgroundColor
:
'
rgba(0, 0, 0, 0.07)
'
,
//
'#eeede7',
transition
:
'
all 0.1s
'
,
'
&:hover
'
:
{
backgroundColor
:
'
#c3c0b0
'
,
backgroundColor
:
'
rgba(0, 0, 0, 0.245)
'
,
//
'#c3c0b0',
},
'
& > a
'
:
{
whiteSpace
:
'
nowrap
'
as
'
nowrap
'
,
}
},
borderBottom
:
'
solid 2px #b7b5b2
'
,
},
...
...
@@ -64,9 +66,9 @@ const style = (theme) => ({
borderBottom
:
'
solid 4px #5a9d32
'
,
},
activeSub
:
{
backgroundColor
:
'
#c3c0b0!important
'
,
backgroundColor
:
'
rgba(0, 0, 0, 0.245)!important
'
,
// '#c3c0b0
',
'
&:hover
'
:
{
backgroundColor
:
'
#938f81!important
'
backgroundColor
:
'
rgba(0, 0, 0, 0.43)!important
'
// '#938f81
'
}
},
});
...
...
@@ -81,6 +83,7 @@ interface IMenuItemProps extends React.ClassAttributes<any> {
t
?:
any
;
active
?:
boolean
;
activeSub
?:
boolean
;
color
?:
string
;
}
class
MenuItem
extends
React
.
Component
<
IMenuItemProps
,
any
>
{
...
...
@@ -101,7 +104,7 @@ class MenuItem extends React.Component<IMenuItemProps, any> {
private
closeMenu
=
()
=>
this
.
toggleDrawer
(
false
);
public
render
()
{
const
{
to
,
label
,
children
,
classes
,
t
,
activeSub
,
active
}
=
this
.
props
;
const
{
to
,
label
,
children
,
classes
,
t
,
activeSub
,
active
,
color
}
=
this
.
props
;
return
(
<
div
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> {
</
Link
>
{
children
&&
<
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
}
</
div
>
</
Collapse
>
...
...
src/ui/layout/headers/v1/MobileNavigation.tsx
View file @
900cfb9a
...
...
@@ -77,6 +77,7 @@ const styleSheet = (theme) => ({
lineHeight
:
'
36px
'
,
color
:
'
#000!important
'
,
paddingLeft
:
'
36px
'
,
paddingRight
:
'
24px
'
,
width
:
'
100%
'
,
borderTop
:
'
solid 1px #929292
'
,
boxSizing
:
'
border-box
'
as
'
border-box
'
,
...
...
src/ui/layout/headers/v1/NavigationBar.tsx
View file @
900cfb9a
...
...
@@ -29,7 +29,7 @@ const styleSheet = (theme) => ({
flex
:
1
,
},
headerRoot
:
{
backgroundColor
:
'
#fff
'
,
//
backgroundColor: '#fff',
height
:
'
auto
'
,
[
theme
.
breakpoints
.
down
(
'
md
'
)]:
{
height
:
'
3.5rem
'
,
...
...
@@ -64,7 +64,7 @@ const styleSheet = (theme) => ({
fontSize
:
'
8.5px
'
,
fontWeight
:
'
bold
'
as
'
bold
'
,
textAlign
:
'
center
'
as
'
center
'
,
color
:
'
#fff
'
,
//
color: '#fff',
},
iconBackground
:
{
backgroundColor
:
'
#88B941
'
,
...
...
@@ -150,10 +150,12 @@ interface IHeaderProps extends React.ClassAttributes<any> {
t
:
any
;
menuItems
:
object
[];
location
:
any
;
root
:
any
;
title
:
string
;
color
?:
string
;
}
class
AdminHeader
extends
React
.
Component
<
IHeaderProps
|
any
,
any
>
{
public
constructor
(
props
:
any
)
{
super
(
props
);
...
...
@@ -193,16 +195,19 @@ class AdminHeader extends React.Component<IHeaderProps | any, any> {
public
render
()
{
const
{
classes
,
t
,
menuItems
,
location
}
=
this
.
props
;
const
{
classes
,
t
,
menuItems
,
location
,
root
,
title
,
color
}
=
this
.
props
;
const
menuColor
=
color
||
'
white
'
;
return
(
<
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
}
>
<
div
className
=
"mobile-navigation-block"
>
<
div
className
=
{
classes
.
menuWrapper
}
>
<
IconButton
className
=
{
classes
.
menuBtn
}
aria-label
=
"Menu"
color
=
"secondary"
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
>
</
div
>
...
...
@@ -213,14 +218,18 @@ class AdminHeader extends React.Component<IHeaderProps | any, any> {
<
div
className
=
{
classes
.
underlinedLogo
}
>
<
Link
to
=
"/"
className
=
{
`
${
this
.
props
.
classes
.
navLogo
}
${
classes
.
mobileHidden
}
`
}
>
<
div
className
=
{
classes
.
iconBackground
}
>
<
img
src
=
"images/GENESYS-ICON_white.svg"
className
=
{
classes
.
mainIcon
}
/>
<
div
className
=
{
classes
.
iconBack
}
>
{
t
(
'
common:action.backTo
'
,
{
where
:
t
(
'
admin.genesys
'
)
}).
toUpperCase
()
}
</
div
>
<
svg
className
=
{
classes
.
mainIcon
}
style
=
{
{
fill
:
`
${
menuColor
}
`
}
}
>
<
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
>
</
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
className
=
{
`
${
classes
.
flex
}
${
this
.
props
.
classes
.
navWrapper
}
`
}
>
<
MenuBar
t
=
{
t
}
location
=
{
location
}
menuItems
=
{
menuItems
}
/>
<
MenuBar
t
=
{
t
}
location
=
{
location
}
menuItems
=
{
menuItems
}
color
=
{
menuColor
}
/>
<
div
className
=
{
`float-right`
}
>
{
this
.
renderLogin
([
ROLE_USER
,
ROLE_ADMINISTRATOR
])
}
</
div
>
<
div
>
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment