Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
GGCE
GGCE Web
Commits
9342dc81
Commit
9342dc81
authored
Sep 23, 2020
by
Oleksii Savran
Browse files
Entry page sections
-Added SectionHeader
parent
8035d3fb
Changes
4
Hide whitespace changes
Inline
Side-by-side
packages/client/src/ui/common/heading/SectionHeader.tsx
0 → 100644
View file @
9342dc81
import
*
as
React
from
'
react
'
;
import
{
createStyles
,
WithStyles
,
withStyles
}
from
'
@material-ui/core/styles
'
;
import
Grid
from
'
@material-ui/core/Grid
'
;
interface
IProps
{
title
:
string
|
React
.
ReactNode
;
subTitle
?:
string
|
React
.
ReactNode
;
className
?:
string
;
actions
?:
any
;
}
const
styles
=
(
theme
)
=>
createStyles
({
root
:
{
'
margin
'
:
'
2rem 0 1rem
'
,
'
fontFamily
'
:
'
Roboto-Light
'
,
'
borderBottom
'
:
'
solid 2px #808080
'
,
'
display
'
:
'
flex
'
,
'
flexDirection
'
:
'
row
'
,
'
justifyContent
'
:
'
space-between
'
,
'
&:first-child
'
:
{
marginTop
:
0
,
},
'
& h2
'
:
{
margin
:
0
,
},
},
rightArea
:
{
'
display
'
:
'
flex
'
,
'
alignItems
'
:
'
center
'
,
'
overflow
'
:
'
hidden
'
,
'
height
'
:
'
48px
'
,
'
left
'
:
'
100%
'
,
'
& > * > button
'
:
{
'
marginLeft
'
:
'
15px
'
,
'
html[dir="rtl"] &
'
:
{
marginRight
:
'
15px
'
,
marginLeft
:
'
0
'
,
},
[
theme
.
breakpoints
.
down
(
'
sm
'
)]:
{
marginTop
:
'
5px
'
,
marginBottom
:
'
5px
'
,
},
[
theme
.
breakpoints
.
down
(
'
xs
'
)]:
{
'
marginLeft
'
:
'
5px
'
,
'
width
'
:
'
100%
'
,
'
html[dir="rtl"] &
'
:
{
marginRight
:
'
5px
'
,
marginLeft
:
'
0
'
,
},
},
},
[
theme
.
breakpoints
.
down
(
'
sm
'
)]:
{
'
overflow
'
:
'
initial
'
,
'
padding
'
:
'
0
'
,
'
height
'
:
'
auto
'
,
'
& > *
'
:
{
width
:
'
100%
'
,
},
},
'
actionsArea
'
:
{
alignSelf
:
'
flex-end
'
,
},
},
});
const
SectionHeader
=
({
title
,
subTitle
=
null
,
classes
,
className
=
null
,
actions
=
null
}:
IProps
&
WithStyles
)
=>
(
<
Grid
container
className
=
{
`
${
classes
.
root
}
${
className
}
`
}
>
<
Grid
item
className
=
{
`float-left
${
classes
.
actionsArea
}
`
}
>
<
h2
>
{
title
}
</
h2
>
{
subTitle
&&
<
p
>
{
subTitle
}
</
p
>
}
</
Grid
>
{
actions
&&
<
Grid
item
className
=
{
`float-right
${
classes
.
rightArea
}
`
}
>
{
actions
}
</
Grid
>
}
</
Grid
>
);
export
default
withStyles
(
styles
)(
SectionHeader
);
packages/ui-express/locales/en/express.json
View file @
9342dc81
...
...
@@ -17,6 +17,11 @@
"welcome"
:
{
"p"
:
{
"title"
:
"GRIN-Global Community Edition"
,
"sections"
:
{
"tools"
:
"Tools"
,
"other"
:
"Other"
,
"taxonomy"
:
"Taxonomy"
},
"cards"
:
{
"acquisition"
:
{
"title"
:
"Acquisition"
,
...
...
packages/ui-express/src/translations.json
View file @
9342dc81
...
...
@@ -17,6 +17,11 @@
"welcome"
:
{
"p"
:
{
"title"
:
"GRIN-Global Community Edition"
,
"sections"
:
{
"tools"
:
"Tools"
,
"other"
:
"Other"
,
"taxonomy"
:
"Taxonomy"
},
"cards"
:
{
"acquisition"
:
{
"title"
:
"Acquisition"
,
...
...
packages/ui-express/src/ui/pages/Welcome.tsx
View file @
9342dc81
...
...
@@ -8,6 +8,7 @@ import { Card, CardContent, CardHeader } from '@material-ui/core';
import
Authorize
from
'
@gringlobal/client/ui/common/authorized/Authorize
'
;
import
{
UserRole
}
from
'
@gringlobal/client/model/gringlobal/SysUser
'
;
import
PageTitle
from
'
@gringlobal/client/ui/common/PageTitle
'
;
import
SectionHeader
from
'
@gringlobal/client/ui/common/heading/SectionHeader
'
;
const
styles
=
(
theme
)
=>
({
card
:
{
...
...
@@ -31,131 +32,84 @@ class WelcomePage extends React.Component<WithTranslation & WithStyles> {
<
Grid
container
justify
=
"flex-start"
spacing
=
{
2
}
>
<
Authorize
roles
=
{
[
UserRole
.
USER
]
}
>
<
Grid
item
xs
=
{
12
}
sm
=
{
6
}
md
=
{
4
}
lg
=
{
3
}
>
<
Link
to
=
"/request"
>
<
Card
className
=
{
classes
.
card
}
>
<
CardHeader
title
=
{
t
(
'
welcome.p.cards.distribution.title
'
)
}
/>
<
CardContent
>
<
div
>
{
t
(
'
welcome.p.cards.distribution.description
'
)
}
</
div
>
</
CardContent
>
</
Card
>
</
Link
>
</
Grid
>
</
Authorize
>
<
Authorize
roles
=
{
[
UserRole
.
USER
]
}
>
<
Grid
item
xs
=
{
12
}
sm
=
{
6
}
md
=
{
4
}
lg
=
{
3
}
>
<
Link
to
=
"/request/new"
>
<
Card
className
=
{
classes
.
card
}
>
<
CardHeader
title
=
{
t
(
'
welcome.p.cards.distribution.new.title
'
)
}
/>
<
CardContent
>
<
div
>
{
t
(
'
welcome.p.cards.distribution.new.description
'
)
}
</
div
>
</
CardContent
>
</
Card
>
</
Link
>
</
Grid
>
</
Authorize
>
<
Authorize
roles
=
{
[
UserRole
.
USER
]
}
>
<
Grid
item
xs
=
{
12
}
sm
=
{
6
}
md
=
{
4
}
lg
=
{
3
}
>
<
Link
to
=
"/request/checklist"
>
<
Card
className
=
{
classes
.
card
}
>
<
CardHeader
title
=
{
t
(
'
welcome.p.cards.distribution.checklist.title
'
)
}
/>
<
CardContent
>
<
div
>
{
t
(
'
welcome.p.cards.distribution.checklist.description
'
)
}
</
div
>
</
CardContent
>
</
Card
>
</
Link
>
</
Grid
>
</
Authorize
>
<>
<
SectionHeader
title
=
{
t
(
'
welcome.p.sections.tools
'
)
}
className
=
"m-halfrem pt-5 pb-5"
/>
<
Grid
item
xs
=
{
12
}
sm
=
{
6
}
md
=
{
4
}
lg
=
{
3
}
>
<
Link
to
=
"/a"
>
<
Card
className
=
{
classes
.
card
}
>
<
CardHeader
title
=
{
t
(
'
welcome.p.cards.accessions.title
'
)
}
/>
<
CardContent
>
<
div
>
{
t
(
'
welcome.p.cards.accessions.description
'
)
}
</
div
>
</
CardContent
>
</
Card
>
</
Link
>
</
Grid
>
<
Grid
item
xs
=
{
12
}
sm
=
{
6
}
md
=
{
4
}
lg
=
{
3
}
>
<
Link
to
=
"/a/summary"
>
<
Card
className
=
{
classes
.
card
}
>
<
CardHeader
title
=
{
t
(
'
welcome.p.cards.accessionSummary.title
'
)
}
/>
<
CardContent
>
<
div
>
{
t
(
'
welcome.p.cards.accessionSummary.description
'
)
}
</
div
>
</
CardContent
>
</
Card
>
</
Link
>
</
Grid
>
<
Grid
item
xs
=
{
12
}
sm
=
{
6
}
md
=
{
4
}
lg
=
{
3
}
>
<
Link
to
=
"/t/species"
>
<
Card
className
=
{
classes
.
card
}
>
<
CardHeader
title
=
{
t
(
'
welcome.p.cards.species.title
'
)
}
/>
<
CardContent
>
<
div
>
{
t
(
'
welcome.p.cards.species.description
'
)
}
</
div
>
</
CardContent
>
</
Card
>
</
Link
>
</
Grid
>
<
Grid
item
xs
=
{
12
}
sm
=
{
6
}
md
=
{
4
}
lg
=
{
3
}
>
<
Link
to
=
"/t/genus"
>
<
Card
className
=
{
classes
.
card
}
>
<
CardHeader
title
=
{
t
(
'
welcome.p.cards.genera.title
'
)
}
/>
<
CardContent
>
<
div
>
{
t
(
'
welcome.p.cards.genera.description
'
)
}
</
div
>
</
CardContent
>
</
Card
>
</
Link
>
</
Grid
>
<
Grid
item
xs
=
{
12
}
sm
=
{
6
}
md
=
{
4
}
lg
=
{
3
}
>
<
Link
to
=
"/inventory/acquisition"
>
<
Card
className
=
{
classes
.
card
}
>
<
CardHeader
title
=
{
t
(
'
welcome.p.cards.acquisition.title
'
)
}
/>
<
CardContent
>
<
div
>
{
t
(
'
welcome.p.cards.acquisition.description
'
)
}
</
div
>
</
CardContent
>
</
Card
>
</
Link
>
</
Grid
>
<
Authorize
roles
=
{
[
UserRole
.
USER
]
}
>
<>
<
Grid
item
xs
=
{
12
}
sm
=
{
6
}
md
=
{
4
}
lg
=
{
3
}
>
<
Link
to
=
"/
inventory
"
>
<
Link
to
=
"/
request
"
>
<
Card
className
=
{
classes
.
card
}
>
<
CardHeader
title
=
{
t
(
'
welcome.p.cards.
inventory
.title
'
)
}
/>
<
CardHeader
title
=
{
t
(
'
welcome.p.cards.
distribution
.title
'
)
}
/>
<
CardContent
>
<
div
>
{
t
(
'
welcome.p.cards.
inventory
.description
'
)
}
</
div
>
<
div
>
{
t
(
'
welcome.p.cards.
distribution
.description
'
)
}
</
div
>
</
CardContent
>
</
Card
>
</
Link
>
</
Grid
>
<
Grid
item
xs
=
{
12
}
sm
=
{
6
}
md
=
{
4
}
lg
=
{
3
}
>
<
Link
to
=
"/
inventory/summary
"
>
<
Link
to
=
"/
request/new
"
>
<
Card
className
=
{
classes
.
card
}
>
<
CardHeader
title
=
{
t
(
'
welcome.p.cards.
inventorySummary
.title
'
)
}
/>
<
CardHeader
title
=
{
t
(
'
welcome.p.cards.
distribution.new
.title
'
)
}
/>
<
CardContent
>
<
div
>
{
t
(
'
welcome.p.cards.
inventorySummary
.description
'
)
}
</
div
>
<
div
>
{
t
(
'
welcome.p.cards.
distribution.new
.description
'
)
}
</
div
>
</
CardContent
>
</
Card
>
</
Link
>
</
Grid
>
<
Grid
item
xs
=
{
12
}
sm
=
{
6
}
md
=
{
4
}
lg
=
{
3
}
>
<
Link
to
=
"/
inventory/adju
st"
>
<
Link
to
=
"/
request/checkli
st"
>
<
Card
className
=
{
classes
.
card
}
>
<
CardHeader
title
=
{
t
(
'
welcome.p.cards.
inventoryadju
st.title
'
)
}
/>
<
CardHeader
title
=
{
t
(
'
welcome.p.cards.
distribution.checkli
st.title
'
)
}
/>
<
CardContent
>
<
div
>
{
t
(
'
welcome.p.cards.
inventoryadju
st.description
'
)
}
</
div
>
<
div
>
{
t
(
'
welcome.p.cards.
distribution.checkli
st.description
'
)
}
</
div
>
</
CardContent
>
</
Card
>
</
Link
>
</
Grid
>
</>
</
Authorize
>
<
Authorize
roles
=
{
[
UserRole
.
USER
]
}
>
<>
<
SectionHeader
title
=
{
t
(
'
client:model._.inventory
'
)
}
className
=
"m-halfrem pt-5 pb-5"
/>
<
Grid
item
xs
=
{
12
}
sm
=
{
6
}
md
=
{
4
}
lg
=
{
3
}
>
<
Link
to
=
"/inventory/
group
"
>
<
Link
to
=
"/inventory/
summary
"
>
<
Card
className
=
{
classes
.
card
}
>
<
CardHeader
title
=
{
t
(
'
welcome.p.cards.inventory
group
.title
'
)
}
/>
<
CardHeader
title
=
{
t
(
'
welcome.p.cards.inventory
Summary
.title
'
)
}
/>
<
CardContent
>
<
div
>
{
t
(
'
welcome.p.cards.inventory
group
.description
'
)
}
</
div
>
<
div
>
{
t
(
'
welcome.p.cards.inventory
Summary
.description
'
)
}
</
div
>
</
CardContent
>
</
Card
>
</
Link
>
</
Grid
>
<
Grid
item
xs
=
{
12
}
sm
=
{
6
}
md
=
{
4
}
lg
=
{
3
}
>
<
Link
to
=
"/inventory
/acquisition
"
>
<
Link
to
=
"/inventory"
>
<
Card
className
=
{
classes
.
card
}
>
<
CardHeader
title
=
{
t
(
'
welcome.p.cards.
acquisition
.title
'
)
}
/>
<
CardHeader
title
=
{
t
(
'
welcome.p.cards.
inventory
.title
'
)
}
/>
<
CardContent
>
<
div
>
{
t
(
'
welcome.p.cards.acquisition.description
'
)
}
</
div
>
<
div
>
{
t
(
'
welcome.p.cards.inventory.description
'
)
}
</
div
>
</
CardContent
>
</
Card
>
</
Link
>
</
Grid
>
<
Grid
item
xs
=
{
12
}
sm
=
{
6
}
md
=
{
4
}
lg
=
{
3
}
>
<
Link
to
=
"/inventory/group"
>
<
Card
className
=
{
classes
.
card
}
>
<
CardHeader
title
=
{
t
(
'
welcome.p.cards.inventorygroup.title
'
)
}
/>
<
CardContent
>
<
div
>
{
t
(
'
welcome.p.cards.inventorygroup.description
'
)
}
</
div
>
</
CardContent
>
</
Card
>
</
Link
>
...
...
@@ -171,11 +125,11 @@ class WelcomePage extends React.Component<WithTranslation & WithStyles> {
</
Link
>
</
Grid
>
<
Grid
item
xs
=
{
12
}
sm
=
{
6
}
md
=
{
4
}
lg
=
{
3
}
>
<
Link
to
=
"/
a/action
"
>
<
Link
to
=
"/
inventory/adjust
"
>
<
Card
className
=
{
classes
.
card
}
>
<
CardHeader
title
=
{
t
(
'
welcome.p.cards.
accessionAction
.title
'
)
}
/>
<
CardHeader
title
=
{
t
(
'
welcome.p.cards.
inventoryadjust
.title
'
)
}
/>
<
CardContent
>
<
div
>
{
t
(
'
welcome.p.cards.
accessionAction
.description
'
)
}
</
div
>
<
div
>
{
t
(
'
welcome.p.cards.
inventoryadjust
.description
'
)
}
</
div
>
</
CardContent
>
</
Card
>
</
Link
>
...
...
@@ -183,6 +137,70 @@ class WelcomePage extends React.Component<WithTranslation & WithStyles> {
</>
</
Authorize
>
<
SectionHeader
title
=
{
t
(
'
client:model._.accession
'
)
}
className
=
"m-halfrem pt-5 pb-5"
/>
<
Grid
item
xs
=
{
12
}
sm
=
{
6
}
md
=
{
4
}
lg
=
{
3
}
>
<
Link
to
=
"/a/summary"
>
<
Card
className
=
{
classes
.
card
}
>
<
CardHeader
title
=
{
t
(
'
welcome.p.cards.accessionSummary.title
'
)
}
/>
<
CardContent
>
<
div
>
{
t
(
'
welcome.p.cards.accessionSummary.description
'
)
}
</
div
>
</
CardContent
>
</
Card
>
</
Link
>
</
Grid
>
<
Grid
item
xs
=
{
12
}
sm
=
{
6
}
md
=
{
4
}
lg
=
{
3
}
>
<
Link
to
=
"/a"
>
<
Card
className
=
{
classes
.
card
}
>
<
CardHeader
title
=
{
t
(
'
welcome.p.cards.accessions.title
'
)
}
/>
<
CardContent
>
<
div
>
{
t
(
'
welcome.p.cards.accessions.description
'
)
}
</
div
>
</
CardContent
>
</
Card
>
</
Link
>
</
Grid
>
<
Authorize
roles
=
{
[
UserRole
.
USER
]
}
>
<
Grid
item
xs
=
{
12
}
sm
=
{
6
}
md
=
{
4
}
lg
=
{
3
}
>
<
Link
to
=
"/a/action"
>
<
Card
className
=
{
classes
.
card
}
>
<
CardHeader
title
=
{
t
(
'
welcome.p.cards.accessionAction.title
'
)
}
/>
<
CardContent
>
<
div
>
{
t
(
'
welcome.p.cards.accessionAction.description
'
)
}
</
div
>
</
CardContent
>
</
Card
>
</
Link
>
</
Grid
>
</
Authorize
>
<
SectionHeader
title
=
{
t
(
'
welcome.p.sections.taxonomy
'
)
}
className
=
"m-halfrem pt-5 pb-5"
/>
<
Grid
item
xs
=
{
12
}
sm
=
{
6
}
md
=
{
4
}
lg
=
{
3
}
>
<
Link
to
=
"/t/species"
>
<
Card
className
=
{
classes
.
card
}
>
<
CardHeader
title
=
{
t
(
'
welcome.p.cards.species.title
'
)
}
/>
<
CardContent
>
<
div
>
{
t
(
'
welcome.p.cards.species.description
'
)
}
</
div
>
</
CardContent
>
</
Card
>
</
Link
>
</
Grid
>
<
Grid
item
xs
=
{
12
}
sm
=
{
6
}
md
=
{
4
}
lg
=
{
3
}
>
<
Link
to
=
"/t/genus"
>
<
Card
className
=
{
classes
.
card
}
>
<
CardHeader
title
=
{
t
(
'
welcome.p.cards.genera.title
'
)
}
/>
<
CardContent
>
<
div
>
{
t
(
'
welcome.p.cards.genera.description
'
)
}
</
div
>
</
CardContent
>
</
Card
>
</
Link
>
</
Grid
>
<
Authorize
roles
=
{
[
UserRole
.
USER
]
}
>
<
SectionHeader
title
=
{
t
(
'
welcome.p.sections.other
'
)
}
className
=
"m-halfrem pt-5 pb-5"
/>
</
Authorize
>
<
Authorize
roles
=
{
[
UserRole
.
USER
]
}
>
<
Grid
item
xs
=
{
12
}
sm
=
{
6
}
md
=
{
4
}
lg
=
{
3
}
>
<
Link
to
=
"/cooperator"
>
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new 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