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
Genesys PGR
Genesys Website
Commits
3094acc2
Commit
3094acc2
authored
Nov 07, 2018
by
Matija Obreza
Browse files
Updated rendering of PageSection and accession gallery
parent
babc2a9b
Changes
3
Hide whitespace changes
Inline
Side-by-side
src/accessions/ui/DisplayPage.tsx
View file @
3094acc2
...
...
@@ -2,6 +2,7 @@ import * as React from 'react';
import
{
connect
}
from
'
react-redux
'
;
import
{
bindActionCreators
}
from
'
redux
'
;
import
{
translate
}
from
'
react-i18next
'
;
import
{
withStyles
}
from
'
@material-ui/core/styles
'
;
// Actions
import
{
loadAccession
}
from
'
accessions/actions/public
'
;
...
...
@@ -33,9 +34,17 @@ import PdciTable from './c/PdciTable';
import
ImageGalleryView
from
'
repository/ui/c/ImageGalleryView
'
;
import
Button
from
'
@material-ui/core/Button/Button
'
;
const
styles
=
(
theme
)
=>
({
pageSection
:
{
marginBottom
:
'
1em
'
,
},
});
interface
IBrowsePageProps
extends
React
.
ClassAttributes
<
any
>
{
t
:
any
;
classes
:
any
;
uuid
:
string
;
doi
:
string
;
// DOI comes from the route without the '10.'
accession
:
AccessionDetails
;
...
...
@@ -81,8 +90,8 @@ class BrowsePage extends React.Component<IBrowsePageProps, any> {
}
public
render
()
{
const
{
t
,
error
,
uuid
,
doi
,
accessions
}
=
this
.
props
;
const
{
details
:
accession
,
pdci
,
datasets
,
subsets
,
files
,
imageGallery
}
=
this
.
props
.
accession
?
const
{
t
,
error
,
uuid
,
doi
,
accessions
,
classes
}
=
this
.
props
;
const
{
details
:
accession
,
pdci
,
datasets
,
subsets
,
files
,
imageGallery
}
=
this
.
props
.
accession
?
this
.
props
.
accession
:
{
details
:
null
,
pdci
:
null
,
datasets
:
null
,
subsets
:
null
,
files
:
null
,
imageGallery
:
null
};
...
...
@@ -159,6 +168,10 @@ class BrowsePage extends React.Component<IBrowsePageProps, any> {
</
Properties
>
</
MainSection
>
{
imageGallery
&&
<
ImageGalleryView
className
=
{
classes
.
pageSection
}
imageGallery
=
{
imageGallery
}
/>
}
<
PageSection
title
=
{
t
(
'
accessions.common.taxonomy
'
)
}
>
<
Properties
>
<
PropertiesItem
title
=
{
t
(
'
accessions.common.genus
'
)
}
>
{
accession
.
taxonomy
.
genus
}
</
PropertiesItem
>
...
...
@@ -183,29 +196,6 @@ class BrowsePage extends React.Component<IBrowsePageProps, any> {
</
Properties
>
</
PageSection
>
}
{
files
&&
<
PageSection
title
=
{
t
(
'
accessions.public.p.display.relatedResources
'
)
}
>
<
Properties
>
{
files
.
map
((
e
:
RepositoryFile
)
=>
(
<
PropertiesItem
key
=
{
e
.
uuid
}
title
=
{
<
a
href
=
{
`/proxy/api/v1/repository/download/
${
e
.
uuid
}
`
}
>
<
Button
variant
=
"raised"
component
=
"span"
>
{
t
(
'
common:action.download
'
)
}
</
Button
>
</
a
>
}
>
<
b
>
{
e
.
originalFilename
}
</
b
>
</
PropertiesItem
>
))
}
</
Properties
>
</
PageSection
>
}
{
imageGallery
&&
<
PageSection
title
=
{
t
(
'
accessions.public.p.display.imageGallery
'
)
}
>
<
ImageGalleryView
imageGallery
=
{
imageGallery
}
/>
</
PageSection
>
}
{
accession
.
coll
&&
<
PageSection
title
=
{
t
(
'
accessions.public.p.display.collectingInformation
'
)
}
>
...
...
@@ -246,6 +236,24 @@ class BrowsePage extends React.Component<IBrowsePageProps, any> {
</
Properties
>
</
PageSection
>
}
{
files
&&
<
PageSection
title
=
{
t
(
'
accessions.public.p.display.relatedResources
'
)
}
>
<
Properties
>
{
files
.
map
((
e
:
RepositoryFile
)
=>
(
<
PropertiesItem
key
=
{
e
.
uuid
}
title
=
{
<
a
href
=
{
`/proxy/api/v1/repository/download/
${
e
.
uuid
}
`
}
>
<
Button
variant
=
"raised"
component
=
"span"
>
{
t
(
'
common:action.download
'
)
}
</
Button
>
</
a
>
}
>
<
b
>
{
e
.
originalFilename
}
</
b
>
</
PropertiesItem
>
))
}
</
Properties
>
</
PageSection
>
}
{
pdci
&&
<
PdciTable
pdci
=
{
pdci
}
title
=
{
t
(
'
accessions.public.p.display.pdci
'
)
}
/>
}
<
PageSection
title
=
{
t
(
'
accessions.public.p.display.metadata
'
)
}
>
...
...
@@ -299,4 +307,4 @@ const mapDispatchToProps = (dispatch) => bindActionCreators({
},
dispatch
);
export
default
connect
(
mapStateToProps
,
mapDispatchToProps
)(
translate
()(
BrowsePage
));
export
default
connect
(
mapStateToProps
,
mapDispatchToProps
)(
translate
()(
withStyles
(
styles
)(
BrowsePage
))
)
;
src/repository/ui/c/ImageGalleryView.tsx
View file @
3094acc2
...
...
@@ -5,8 +5,8 @@ import ImageGallery from 'model/repository/ImageGallery';
// UI
import
Card
,
{
CardHeader
,
CardContent
,
CardMedia
}
from
'
ui/common/Card
'
;
import
{
Properties
,
PropertiesItem
}
from
'
ui/common/Properties
'
;
import
PrettyDate
from
'
ui/common/time/PrettyDate
'
;
//
import {Properties, PropertiesItem} from 'ui/common/Properties';
//
import PrettyDate from 'ui/common/time/PrettyDate';
import
Grid
from
'
@material-ui/core/Grid
'
;
import
withStyles
from
'
@material-ui/core/styles/withStyles
'
;
...
...
@@ -22,13 +22,13 @@ const style = (theme) => ({
},
});
const
ImageGalleryView
=
({
imageGallery
,
classes
,
compact
=
false
,
edit
=
false
,
...
other
}:
{
imageGallery
:
ImageGallery
,
classes
?:
any
,
compact
?:
boolean
,
edit
?:
boolean
})
=>
{
const
ImageGalleryView
=
({
imageGallery
,
classes
,
className
,
compact
=
false
,
edit
=
false
,
...
other
}:
{
imageGallery
:
ImageGallery
,
className
?:
string
,
classes
?:
any
,
compact
?:
boolean
,
edit
?:
boolean
})
=>
{
if
(
!
imageGallery
)
{
return
null
;
}
return
compact
?
(
<
Grid
item
xs
=
{
12
}
>
<
Grid
item
xs
=
{
12
}
className
=
{
className
}
>
<
Card
className
=
{
classes
.
root
}
>
<
CardHeader
title
=
{
imageGallery
.
title
||
imageGallery
.
folder
}
/>
<
CardContent
>
...
...
@@ -39,7 +39,7 @@ const ImageGalleryView = ({imageGallery, classes, compact = false, edit = false,
)
:
(
<
Grid
item
xs
=
{
12
}
>
<
Grid
item
xs
=
{
12
}
className
=
{
className
}
>
<
Grid
container
spacing
=
{
16
}
>
{
imageGallery
.
images
.
map
((
image
)
=>
(
<
Grid
key
=
{
image
.
uuid
}
item
xs
=
{
12
}
sm
=
{
6
}
md
=
{
4
}
lg
=
{
3
}
xl
=
{
2
}
>
...
...
@@ -51,21 +51,20 @@ const ImageGalleryView = ({imageGallery, classes, compact = false, edit = false,
</
Card
>
</
Grid
>
))
}
<
Grid
item
xs
=
{
12
}
>
<
Card
className
=
{
classes
.
root
}
>
<
CardContent
>
<
Properties
>
<
PropertiesItem
title
=
"repository.admin.c.common.path"
>
{
imageGallery
.
folder
}
</
PropertiesItem
>
<
PropertiesItem
title
=
"repository.admin.c.common.registered"
><
PrettyDate
value
=
{
new
Date
(
imageGallery
.
createdDate
)
}
/></
PropertiesItem
>
<
PropertiesItem
title
=
"common:label.lastModified"
><
PrettyDate
value
=
{
new
Date
(
imageGallery
.
lastModifiedDate
)
}
/></
PropertiesItem
>
</
Properties
>
</
CardContent
>
</
Card
>
</
Grid
>
</
Grid
>
</
Grid
>
);
// <Grid item xs={ 12 }>
// <Card className={ classes.root }>
// <CardContent>
// <Properties>
// <PropertiesItem title="repository.admin.c.common.path">{ imageGallery.folder }</PropertiesItem>
// <PropertiesItem title="repository.admin.c.common.registered"><PrettyDate value={ new Date(imageGallery.createdDate) }/></PropertiesItem>
// <PropertiesItem title="common:label.lastModified"><PrettyDate value={ new Date(imageGallery.lastModifiedDate) }/></PropertiesItem>
// </Properties>
// </CardContent>
// </Card>
// </Grid>
};
export
default
withStyles
(
style
)(
ImageGalleryView
);
src/ui/layout/PageLayout.tsx
View file @
3094acc2
...
...
@@ -41,13 +41,14 @@ const styles = (theme) => ({
paddingRight
:
'
1em
'
,
},
mainSection
:
{
marginBottom
:
'
1em
'
,
},
mainSectionTitle
:
{
// color: 'Blue',
},
section
:
{
height
:
'
100%
'
,
marginBottom
:
'
1em
'
,
},
sectionTitle
:
{
fontSize
:
'
1.3rem
'
,
...
...
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