Commit 7aa67c67 authored by Matija Obreza's avatar Matija Obreza
Browse files

Added UI components Properties, PropertiesItem, updated Markdown

`<Markdown` supports textLength property
parent 8cc705f0
......@@ -2,6 +2,7 @@ import * as React from 'react';
import { DescriptorList } from 'model/descriptor.model';
import { DescriptorListLink } from 'ui/common/Links';
import { Properties, PropertiesItem } from 'ui/common/Properties';
import Card, { CardHeader, CardContent } from 'material-ui/Card';
import Divider from 'material-ui/Divider';
......@@ -15,11 +16,14 @@ const DescriptorListCard = ({descriptorList, className}: {descriptorList: Descri
<DescriptorListLink to={ descriptorList }>{ descriptorList.title ? <Markdown basic source={ descriptorList.title } /> : 'Untitled' }</DescriptorListLink>
) } />
<Divider />
{ descriptorList.description && descriptorList.description.substring(0, 200) !== '' && (
<CardContent>
<Markdown source={ descriptorList.description.substring(0, 200) + '...' } />
</CardContent>
) }
<CardContent>
<Markdown className="mb-20" textLength={ 200 } source={ descriptorList.description } />
<Properties>
{ descriptorList.crop && <PropertiesItem title="Crop:">{ descriptorList.crop }</PropertiesItem> }
<PropertiesItem title="Publisher:">{ descriptorList.publisher || <i>Not specified</i> }</PropertiesItem>
<PropertiesItem title="Version:">{ descriptorList.versionTag }</PropertiesItem>
</Properties>
</CardContent>
</Card>
);
} else {
......
import * as React from 'react';
import { withStyles, WithStyles } from 'material-ui/styles';
import Grid from 'material-ui/Grid';
const styles = (theme) => ({
propertiesContainer: {
// marginTop: '1rem',
// marginBottom: '0',
},
propertiesRow: {
/* tslint:disable */
'marginTop': '1px',
'marginBottom': '1px',
'& > *:first-child': {
borderRight: 'solid 1px white',
},
'&:nth-child(even)': {
backgroundColor: '#f8f7f5',
},
'&:nth-child(odd)': {
backgroundColor: '#f3f2ee',
},
/* tslint:enable */
},
});
interface IItemProps extends React.ClassAttributes<any> {
// classes: any;
title: any;
// children: any;
}
class PropertiesItem1 extends React.Component<IItemProps & WithStyles<'propertiesContainer' | 'propertiesRow'>, any> {
public render() {
const { title, classes, children } = this.props;
return (
<Grid container spacing={ 0 } className={ classes.propertiesRow }>
<Grid item xs={ 6 } md={ 3 } className="font-bold p-halfrem">{ title }</Grid>
<Grid item xs={ 6 } md={ 9 } className="p-halfrem">{ children }</Grid>
</Grid>
);
}
}
interface IProps extends React.ClassAttributes<any> {
// classes: any;
// children: any;
}
class Properties1 extends React.Component<IProps & WithStyles<'propertiesContainer' | 'propertiesRow'>, any> {
public render() {
const { children, classes} = this.props;
return (
<Grid container spacing={ 0 }>
<Grid item xs={ 12 } className={ classes.propertiesContainer }>
{ children }
</Grid>
</Grid>
);
}
}
const styledProperties = withStyles(styles)(Properties1);
const styledPropertiesItem = withStyles(styles)(PropertiesItem1);
export { styledProperties as Properties, styledPropertiesItem as PropertiesItem };
......@@ -7,27 +7,29 @@ import FormControl from 'material-ui/Form/FormControl';
interface IMarkdownTextProps extends React.HTMLProps<HTMLElement> {
source: string;
basic?: boolean;
textLength?: number;
}
// TODO Add textLength attribute to trim text here, not in the parent
export default function Markdown({source, style, className, basic}: IMarkdownTextProps) {
export default function Markdown({source, textLength, style, className, basic}: IMarkdownTextProps) {
if (source) {
const trimmedSource: string = textLength === undefined || textLength === null ? source : source.substring(0, textLength) + '...';
if (basic) {
// the 'markdown-basic' className is used to render the div as inline-block
return (
<MarkdownComponent skipHtml unwrapDisallowed allowedTypes={ [ 'strong', 'emphasis'] }
className={ `markdown-basic ${className ? className : ''}` } source={ source } />
className={ `markdown-basic ${className ? className : ''}` } source={ trimmedSource } />
);
} else {
if (style) {
return (
<div style={ style }><MarkdownComponent skipHtml
className={ `markdown ${className ? className : ''}` } source={ source } />
className={ `markdown ${className ? className : ''}` } source={ trimmedSource } />
</div>
);
} else {
return <div><MarkdownComponent skipHtml className={ `markdown ${className ? className : ''}` } source={ source } /></div>;
return <div><MarkdownComponent skipHtml className={ `markdown ${className ? className : ''}` } source={ trimmedSource } /></div>;
}
}
} else {
......
import * as React from 'react';
import {withStyles} from 'material-ui/styles';
import Card, {CardHeader, CardContent} from 'material-ui/Card';
import Divider from 'material-ui/Divider';
import Typography from 'material-ui/Typography';
import Grid from 'material-ui/Grid';
import {Link} from 'react-router';
import * as moment from 'moment';
import { Dataset } from 'model/dataset.model';
import Card, { CardHeader, CardContent } from 'material-ui/Card';
import Divider from 'material-ui/Divider';
import { Link } from 'react-router';
import Markdown from 'ui/common/markdown';
import { PartnerLink } from 'ui/common/Links';
import { Properties, PropertiesItem } from 'ui/common/Properties';
interface IDatasetCardProps extends React.ClassAttributes<any> {
dataset: any;
classes: any;
className?: string;
dataset: Dataset;
}
const styles = (theme) => ({
dataContainer: {
flexWrap: 'nowrap',
marginBottom: '2px',
wordWrap: 'break-word',
[theme.breakpoints.down('md')]: {
flexWrap: 'wrap',
},
},
grayRowsOdd: theme.table.grayRowsOdd,
gray: {
backgroundColor: '#f3f2ee',
},
grayTitleSmall: {
fontSize: '14px',
fontWeight: 'bold',
lineHeight: '22px',
padding: '10px 14px',
margin: '0 1px',
minHeight: '100%',
[theme.breakpoints.down('md')]: {
marginLeft: '0',
marginRight: '0',
padding: '15px 14px 10px',
},
},
pdBottom0: {
[theme.breakpoints.down('md')]: {
paddingBottom: '0',
marginLeft: '0',
marginRight: '0',
},
},
rightTextWrapper: {
display: 'flex',
justifyContent: 'space-between',
margin: '0 1px',
padding: '10px 20px',
[theme.breakpoints.down('md')]: {
marginLeft: '0',
marginRight: '0',
padding: '10px 14px 18px',
},
},
pdTop0: {
[theme.breakpoints.down('md')]: {
paddingTop: '0',
marginLeft: '0',
marginRight: '0',
},
},
});
class DatasetCard extends React.Component<IDatasetCardProps, any> {
public render() {
const { dataset, className } = this.props;
const {dataset, classes} = this.props;
if (! dataset) {
return null;
}
return (
<Card className="m-20" square>
<Card className={ className } square>
<CardHeader
title={
(
......@@ -85,42 +38,15 @@ class DatasetCard extends React.Component<IDatasetCardProps, any> {
/>
<Divider />
<CardContent>
{ dataset.description && <Markdown source={ dataset.description.substring(0, 200) + '...' } /> }
<Grid container spacing={ 0 } className="pt-20">
<Grid item xs={ 12 }>
{ dataset.owner && (
<Grid container spacing={ 0 } className={ `${classes.dataContainer} ${classes.grayRowsOdd}` }>
<Grid item xs={ 12 } md={ 3 }>
<Typography type="title" component="h3" className={ `${classes.gray} ${classes.grayTitleSmall} ${classes.pdBottom0}` }>
Data provider:
</Typography>
</Grid>
<Grid item xs={ 12 } md={ 9 } className={ `${classes.gray} ${classes.rightTextWrapper} ${classes.pdTop0}` }>
<Typography type="display3" component="h3" className="blue pt-10 pb-10 pl-15">
{ dataset.owner.name }
</Typography>
</Grid>
</Grid>
) }
<Grid container spacing={ 0 } className={ `${classes.dataContainer} ${classes.grayRowsOdd}` }>
<Grid item xs={ 12 } md={ 3 }>
<Typography type="title" component="h3" className={ `${classes.gray} ${classes.grayTitleSmall} ${classes.pdBottom0}` }>
Upload date:
</Typography>
</Grid>
<Grid item xs={ 12 } md={ 9 } className={ `${classes.gray} ${classes.rightTextWrapper} ${classes.pdTop0}` }>
<Typography type="display3" component="h3" className="pt-10 pb-10 pl-15">
{ moment(dataset.createdDate).format('D MMMM YYYY') }
</Typography>
</Grid>
</Grid>
</Grid>
</Grid>
<Markdown className="mb-20" textLength={ 200 } source={ dataset.description } />
<Properties>
<PropertiesItem title="Data provider:"><PartnerLink to={ dataset.owner } /></PropertiesItem>
<PropertiesItem title="Upload date:">{ moment(dataset.createdDate).format('D MMMM YYYY') }</PropertiesItem>
</Properties>
</CardContent>
</Card>
);
}
}
export default (withStyles as any)(styles)(DatasetCard);
export default DatasetCard;
......@@ -14,6 +14,7 @@ import Markdown from 'ui/common/markdown';
import DescriptorCard from 'ui/catalog/descriptor/DescriptorCard';
import ContentHeaderWithButton from 'ui/common/heading/ContentHeaderWithButton';
import { PartnerLink, DescriptorListLink } from 'ui/common/Links';
import { Properties, PropertiesItem } from 'ui/common/Properties';
import Grid from 'material-ui/Grid';
import Card, {CardHeader, CardContent, CardActions } from 'material-ui/Card';
......@@ -141,56 +142,22 @@ class DescriptorListPage extends React.Component<IDescriptorListPageProps, any>
<Divider />
<CardContent className={ classes.cardContent }>
{ ! descriptorList.published && <h2>This descriptor list is not yet published!</h2> }
{ descriptorList.description && <Markdown source={ descriptorList.description } /> }
{ descriptorList.crop && (
<Grid container className={ classes.propertiesRow }>
<Grid item xs={ 6 } md={ 3 } className="font-bold">
Crop:
</Grid>
<Grid item xs={ 6 } md={ 9 }>
{ descriptorList.crop }
</Grid>
</Grid>
) }
{ descriptorList.publisher && (
<Grid container className={ classes.propertiesRow }>
<Grid item xs={ 6 } md={ 3 } className="font-bold">
Publisher:
</Grid>
<Grid item xs={ 6 } md={ 9 }>
{ descriptorList.publisher }
</Grid>
</Grid>
) }
{ descriptorList.bibliographicCitation && (
<Grid container className={ classes.propertiesRow }>
<Grid item xs={ 6 } md={ 3 } className="font-bold">
Bibliographic citation:
</Grid>
<Grid item xs={ 6 } md={ 9 }>
{ descriptorList.bibliographicCitation }
</Grid>
</Grid>
) }
{ descriptorList.owner && (
<Grid container className={ classes.propertiesRow }>
<Grid item xs={ 6 } md={ 3 } className="font-bold">
Maintained by:
</Grid>
<Grid item xs={ 6 } md={ 9 }>
<PartnerLink to={ descriptorList.owner } />
</Grid>
</Grid>
) }
<Grid container className={ classes.propertiesRow }>
<Grid item xs={ 6 } md={ 3 } className="font-bold">
Version:
</Grid>
<Grid item xs={ 6 } md={ 9 }>
<code>{ descriptorList.uuid }, v{ descriptorList.version }</code>
</Grid>
</Grid>
{ descriptorList.description && <Markdown className="mb-20" source={ descriptorList.description } /> }
<Properties>
{ descriptorList.crop &&
<PropertiesItem title="Crop:">{ descriptorList.crop }</PropertiesItem> }
<PropertiesItem title="Publisher:">{ descriptorList.publisher || <i>Not specified</i> }</PropertiesItem>
{ descriptorList.bibliographicCitation &&
<PropertiesItem title="Bibliographic citation:">{ descriptorList.bibliographicCitation }</PropertiesItem> }
{ descriptorList.owner &&
<PropertiesItem title="Maintained by:"><PartnerLink to={ descriptorList.owner } /></PropertiesItem> }
<PropertiesItem title="Version:">{ descriptorList.versionTag }</PropertiesItem>
</Properties>
</CardContent>
{ (descriptorList._permissions.write || descriptorList._permissions.delete) && (
......
......@@ -559,6 +559,14 @@ h1, h2, h3, h4, h5, h6 {
padding: 20px;
}
.p-1rem {
padding: 1rem;
}
.p-halfrem {
padding: .5rem;
}
.ml-20 {
margin-left: 20px;
}
......
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