Commit 46c225ef authored by Maxim Babichev's avatar Maxim Babichev
Browse files

188 Don't use Typography

188 Don't use Typography

188 Don't use Typography

188 Don't use Typography
parent 0ab370c0
......@@ -4,62 +4,62 @@ 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 */
},
propertiesContainer: {
// marginTop: '1rem',
// marginBottom: '0',
},
propertiesRow: {
/* tslint:disable */
'marginTop': '2px',
'marginBottom': '2px',
'& > *:first-child': {
borderRight: 'solid 2px 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;
// 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>
);
}
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;
// 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>
);
}
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);
......
......@@ -2,11 +2,12 @@ import * as React from 'react';
import {withStyles} from 'material-ui/styles';
import Card, {CardHeader, CardContent, CardActions} from 'material-ui/Card';
import Divider from 'material-ui/Divider';
import Typography from 'material-ui/Typography';
import Grid from 'material-ui/Grid';
import Markdown from 'ui/common/markdown';
import Button from 'material-ui/Button';
import { Properties, PropertiesItem } from 'ui/catalog/Properties';
import { Descriptor } from 'model/descriptor.model';
import { VocabularyTerm } from 'model/vocabulary.model';
import { DescriptorLink, PartnerLink } from 'ui/catalog/Links';
......@@ -135,7 +136,6 @@ const styles = (theme) => ({
padding: '20px',
height: 'auto',
},
grayRowsOdd: theme.table.grayRowsOdd,
btnBlue: theme.buttons.blue,
btnDefault: theme.buttons.default,
});
......@@ -180,90 +180,26 @@ const DescriptorCard = ({complete = true, compact, descriptor, classes, classNam
{ descriptor.key && <div className="font-bold">This is a key descriptor for access and utilization of PGR.</div> }
<Grid container spacing={ 0 }>
<Grid item xs={ 12 }>
<Properties>
{ (displayPref.publisher) && (
<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}` }>
Publisher:
</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">
{ descriptor.publisher || <i>Not specified</i> }
</Typography>
</Grid>
</Grid>
<PropertiesItem title="Publisher:"> { descriptor.publisher || <i>Not specified</i> }</PropertiesItem>
) }
{ (displayPref.owner && descriptor.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}` }>
Maintained by:
</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">
<PartnerLink to={ descriptor.owner }>{ descriptor.owner.name || '' }</PartnerLink>
</Typography>
</Grid>
</Grid>
<PropertiesItem title="Maintained by:"><PartnerLink to={ descriptor.owner }>{ descriptor.owner.name || '' }</PartnerLink></PropertiesItem>
) }
{ displayPref.version && (
<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}` }>
Version:
</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">
{ descriptor.versionTag }
</Typography>
</Grid>
</Grid>
<PropertiesItem title="Version:"> { descriptor.versionTag }</PropertiesItem>
) }
{ (displayPref.crop) && (
<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}` }>
Crop:
</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">
{ T(`crop.${descriptor.crop}`) || descriptor.crop || <i>Not specified</i> }
</Typography>
</Grid>
</Grid>
<PropertiesItem title="Crop:">{ T(`crop.${descriptor.crop}`) || descriptor.crop || <i>Not specified</i> }</PropertiesItem>
) }
{ (displayPref.category && descriptor.category) && (
<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}` }>
Classification:
</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">
{ T(`descriptor.category.${descriptor.category}`) }
</Typography>
</Grid>
</Grid>
<PropertiesItem title="Classification:">{ T(`descriptor.category.${descriptor.category}`) }</PropertiesItem>
) }
{ displayPref.dataType && (
<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 type:
</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">
{ T(`descriptor.dataType.${descriptor.dataType}`) }
</Typography>
</Grid>
</Grid>
<PropertiesItem title=" Data type:">{ T(`descriptor.dataType.${descriptor.dataType}`) }</PropertiesItem>
) }
</Properties>
</Grid>
{ (displayPref.vocabulary && descriptor.terms) && (
......
......@@ -3,7 +3,6 @@ import Grid from 'material-ui/Grid';
import { withStyles } from 'material-ui/styles';
import * as classnames from 'classnames';
import Card, { CardHeader } from 'material-ui/Card';
import Typography from 'material-ui/Typography';
import { Page } from 'model/common.model';
import { Descriptor, IDescriptorFilter } from 'model/descriptor.model';
......@@ -95,9 +94,7 @@ class DescriptorPicker extends React.Component<IDescriptorPickerProps, any> {
</Grid>
<Grid item xs={ 12 } md={ 4 } lg={ 5 } className={ classes.grayBackground }>
{ matchingDescriptors &&
<Typography type="title" className="pt-20 pl-20">
{ matchingDescriptors.totalElements || 0 } descriptors available
</Typography>
<h4 className="pt-20 pl-20 font-bold">{ matchingDescriptors.totalElements || 0 } descriptors available</h4>
}
{ matchingDescriptors && matchingDescriptors.content && matchingDescriptors.content.map((descriptor: Descriptor) => (
......@@ -127,9 +124,9 @@ class DescriptorPicker extends React.Component<IDescriptorPickerProps, any> {
}
</Grid>
<Grid item xs={ 12 } md={ 4 } lg={ 5 } className={ classnames({ [classes.greenBackground]: currentDescriptors.length > 0 }) }>
<Typography type="title" className="pt-20 pl-20">
<h4 className="font-bold pt-20 pl-20">
{ `${currentDescriptors.length} descriptor${currentDescriptors.length !== 1 ? 's' : '' } selected` }
</Typography>
</h4>
{
currentDescriptors.length === 0 && (
<Card square className="m-20">
......
......@@ -5,7 +5,6 @@ import withWidth from 'material-ui/utils/withWidth';
import Hidden from 'material-ui/Hidden';
import Collapse from 'material-ui/transitions/Collapse';
import PlayArrow from 'material-ui-icons/PlayArrow';
import Typography from 'material-ui/Typography';
import Divider from 'material-ui/Divider';
interface IExpandFiltersComponentProps extends React.ClassAttributes<any> {
......@@ -15,10 +14,7 @@ interface IExpandFiltersComponentProps extends React.ClassAttributes<any> {
}
const styles = (theme) => ({
title: {
display: 'inline-block',
textTransform: 'uppercase',
},
title: theme.leftPanel.title,
expandArrow: theme.arrows.expand,
arrowOpened: theme.arrows.opened,
arrowClosed: theme.arrows.closed,
......@@ -53,9 +49,9 @@ class ExpandFiltersComponent extends React.Component<IExpandFiltersComponentProp
return (
<div>
<div>
<Typography type="title" color="primary" className={ `pl-20 pt-10 pb-7 ${ classes.title }` }>
<h3 className={ `pl-20 pt-10 pb-7 green font-bold ${ classes.title }` }>
{ title }
</Typography>
</h3>
<Hidden implementation="css" mdUp>
<PlayArrow onClick={ this.handleFilterExpandClick }
className={ `${classes.expandArrow} ${ this.state.filterExpanded ? classes.arrowOpened : classes.arrowClosed }` }
......
import * as React from 'react';
import Grid from 'material-ui/Grid';
import Typography from 'material-ui/Typography';
import Hidden from 'material-ui/Hidden';
interface IContentHeader extends React.ClassAttributes<any> {
......@@ -21,13 +20,13 @@ class ContentHeader extends React.Component<IContentHeader , any> {
return (
<Grid container spacing={ 0 } className={ `back-green pt-10 pb-10 pl-20 pr-20` }>
<Grid item xs={ 12 }>
<Typography type="headline" color="accent">
<h3 className="font-bold white mb-5">
{ title }
</Typography>
</h3>
<Hidden implementation="css" mdDown>
<Typography type="body2" color="accent">
<h5 className="font-medium white m-0">
{ subTitle }
</Typography>
</h5>
</Hidden>
</Grid>
</Grid>
......
......@@ -3,7 +3,6 @@ import {withStyles} from 'material-ui/styles';
import Grid from 'material-ui/Grid';
import {Link} from 'react-router';
import Button from 'material-ui/Button';
import Typography from 'material-ui/Typography';
const styles = {
subHeader: {
......@@ -38,9 +37,9 @@ class ContentHeaderWithButton extends React.Component<IContentHeaderWithButtonPr
return (
<Grid container spacing={ 0 }>
<Grid item xs={ 12 } className={ classes.subHeader }>
<Typography type="title">
<h3 className="lh-35 m-0">
{ title }
</Typography>
</h3>
<div className={ classes.flexGrow }/>
{ buttonName && buttonUrl ?
(
......
import * as React from 'react';
import Typography from 'material-ui/Typography';
import Paper from 'material-ui/Paper';
import Divider from 'material-ui/Divider';
const Section = ({ className, children, title }: { title: string } & any) => (
<Paper square>
<div className="uppercase pt-10 pb-10 pl-20">
<Typography type="title" color="primary">{ title }</Typography>
<div className="uppercase pt-20 pb-20 pl-20 pr-20">
<h4 className="green m-0 font-bold">{ title }</h4>
</div>
<Divider/>
<div className={ className || '' }>
......
......@@ -12,7 +12,6 @@ import DatasetDisplay from './c/DatasetDisplay';
import Grid from 'material-ui/Grid';
import { Link } from 'react-router';
import Button from 'material-ui/Button';
import Typography from 'material-ui/Typography';
interface IDatasetDetailProps extends React.ClassAttributes<any> {
classes: any;
......@@ -56,7 +55,7 @@ class DatasetDetail extends React.Component<IDatasetDetailProps, any> {
<Grid item xs={ 12 } md={ 10 }>
<Grid container spacing={ 0 }>
<Grid item xs={ 12 } className={ `back-gray-yellow pl-20 pr-20 pt-10 pb-10 ${classes.backSection}` }>
<Typography type="title">Dataset Detail</Typography>
<h4 className="font-bold lh-35 m-0">Dataset Detail</h4>
<div className={ classes.flexGrow }/>
<Link to="/datasets"><Button raised className={ classes.headerButton } >
BACK TO LIST
......
......@@ -7,7 +7,6 @@ import List, { ListItem, ListItemText } from 'material-ui/List';
import PlayArrow from 'material-ui-icons/PlayArrow';
import Collapse from 'material-ui/transitions/Collapse';
import Hidden from 'material-ui/Hidden';
import Typography from 'material-ui/Typography';
import withWidth from 'material-ui/utils/withWidth';
interface IBrowseMenuProps extends React.ClassAttributes<any> {
......@@ -20,11 +19,9 @@ const styles = (theme) => ({
expandArrow: theme.arrows.expand,
arrowOpened: theme.arrows.opened,
arrowClosed: theme.arrows.closed,
ulTitle: theme.leftPanel.title,
ulWrapper: {
padding: '0',
},
ulTitle: {
display: 'inline-block',
padding: 0,
},
});
......@@ -63,7 +60,7 @@ class BrowseMenu extends React.Component<IBrowseMenuProps, any> {
<List className={ classes.ulWrapper }>
<div>
<Typography type="title" color="primary" className={ `pl-20 pt-10 pb-10 ${ classes.ulTitle }` }>BROWSE</Typography>
<h3 className={ `pl-20 pt-10 pb-10 green font-bold ${ classes.ulTitle }` }>BROWSE</h3>
<Hidden implementation="css" mdUp>
<PlayArrow onClick={ this.handleExpandClick }
className={ `${classes.expandArrow} ${ this.state.expanded ? classes.arrowOpened : classes.arrowClosed }` }
......
......@@ -19,8 +19,8 @@ import Summary from './Summary';
import LocationMap from './LocationMap';
import Button from 'material-ui/Button';
import Hidden from 'material-ui/Hidden';
import { Properties, PropertiesItem } from 'ui/catalog/Properties';
import Grid from 'material-ui/Grid';
import Typography from 'material-ui/Typography';
import Divider from 'material-ui/Divider';
import AccessionIdentifiersList from 'ui/common/dataset/AccessionIdentifiersList';
......@@ -34,9 +34,6 @@ const styles = (theme) => ({
gray: {
backgroundColor: '#f3f2ee',
},
blue: {
color: '#006CB4',
},
title: {
fontSize: '30px',
fontWeight: 'bold',
......@@ -44,16 +41,6 @@ const styles = (theme) => ({
fontSize: '24px',
},
},
/* tslint:disable */
titleWrapper: {
padding: '15px 20px',
'& > h2': {
fontSize: '18px',
fontWeight: 'bold',
lineHeight: '20px',
},
},
/* tslint:enable */
grayRowsEven: theme.table.grayRowsEven,
grayRowsOdd: theme.table.grayRowsOdd,
green: {
......@@ -72,7 +59,6 @@ const styles = (theme) => ({
},
grayTitleSmall: {
fontSize: '14px',
fontWeight: 'bold',
lineHeight: '22px',
padding: '10px 14px',
margin: '0 1px',
......@@ -82,9 +68,6 @@ const styles = (theme) => ({
marginRight: '0',
},
},
fontNormal: {
fontWeight: 'normal',
},
rightTextWrapper: {
display: 'flex',
justifyContent: 'space-between',
......@@ -96,12 +79,6 @@ const styles = (theme) => ({
padding: '10px 14px',
},
},
rightText: {
display: 'inline-flex',
fontSize: '14px',
lineHeight: '22px',
alignItems: 'center',
},
buttonGreen: theme.buttons.green,
dataContainer: {
flexWrap: 'nowrap',
......@@ -138,13 +115,6 @@ const styles = (theme) => ({
marginRight: '0',
},
},
pdBottom0: {
[theme.breakpoints.down('md')]: {
paddingBottom: '0',
marginLeft: '0',
marginRight: '0',
},
},
});
interface IDetailInfoProps extends React.ClassAttributes<any> {
......@@ -251,29 +221,22 @@ class DetailInfo extends React.Component<IDetailInfoProps, any> {
<Grid container spacing={ 0 }>
<Grid item xs={ 12 } md={ 8 } lg={ 9 } className="p-20">
<Section title="Dataset metadata">
<div className={ classes.titleWrapper }>
<Typography type="title" component="h2">
License
</Typography>
<div className="pt-15 pb-15 pl-20 pr-20">
<h4 className="font-bold m-0">License</h4>
</div>
<Divider/>
<Grid container spacing={ 0 } className="p-20">
<Grid item xs={ 12 } md={ 3 }>
<Typography type="title" component="h3" className={ `${classes.gray} ${classes.grayTitleBig} ${classes.pdBottom0}` }>
Type:
</Typography>
</Grid>
<Grid item xs={ 12 } md={ 9 }>
<Typography type="title" component="h3" className={ `${classes.gray} ${classes.grayTitleBig} ${classes.blue} ${classes.fontNormal} ${classes.pdTop0}` }>
{ dataset.rights }
</Typography>
</Grid>
<Properties>
<PropertiesItem title="Type:">
<div className="blue">{ dataset.rights }</div>
</PropertiesItem>
</Properties>
</Grid>
<Divider/>
<div className={ classes.titleWrapper }>
<Typography type="title" component="h2">
<div className="pt-15 pb-15 pl-20 pr-20">
<h4 className="font-bold m-0">
Data and Resources
</Typography>
</h4>
</div>
<Divider/>
<Grid container spacing={ 0 } className="p-20">
......@@ -282,9 +245,9 @@ class DetailInfo extends React.Component<IDetailInfoProps, any> {
dataset.repositoryFiles && dataset.repositoryFiles.map((e: RepositoryFile, i) => (
<Grid container spacing={ 0 } key={ i } className={ `${classes.dataContainer} ${classes.grayRowsEven}` }>
<Grid item xs={ 3 } className={ `${classes.dataName}` }>
<Typography type="title" component="h3" className={ `${classes.gray} ${classes.grayTitleBig}` }>
<h3 className={ `${classes.gray} ${classes.grayTitleBig}` }>
{ e.title || e.originalFilename }
</Typography>
</h3>
</Grid>
<Grid item xs={ 12 } md={ 12 } lg={ 9 } className={ `${classes.gray} ${classes.rightTextWrapper} ${classes.centerAlign}` }>
<Hidden implementation="css" mdDown>
......@@ -307,45 +270,29 @@ class DetailInfo extends React.Component<IDetailInfoProps, any> {
</Grid>
</Grid>
<Divider/>
<div className={ classes.titleWrapper }>
<Typography type="title" component="h2">
<div className="pt-15 pb-15 pl-20 pr-20">
<h4 className="font-bold m-0">
Dates
</Typography>
</h4>
</div>
<Divider/>
<Grid container spacing={ 0 } className="p-20">
<Grid item xs={ 12 }>
<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}` }>
Metadata create date:
</Typography>
</Grid>
<Grid item xs={ 12 } md={ 9 } className={ `${classes.gray} ${classes.rightTextWrapper} ${classes.pdTop0}` }>
<Typography type="title" component="h3" className={ `${classes.rightText} ${classes.fontNormal}` }>
{ dataset.createdDate && <PrettyDate value={ dataset.createdDate } /> }
</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}` }>
Metadata updated date:
</Typography>
</Grid>
<Grid item xs={ 12 } md={ 9 } className={ `${classes.gray} ${classes.rightTextWrapper} ${classes.pdTop0}` }>
<Typography type="title" component="h3" className={ `${classes.rightText} ${classes.fontNormal}` }>
{ dataset.lastModifiedDate && <PrettyDate value={ dataset.lastModifiedDate } /> }
</Typography>
</Grid>