Commit 6912a3a3 authored by Oleksii Savran's avatar Oleksii Savran

Merge branch '255-display-scientific-and-genera-names-using-italics' into 'master'

Display scientific and genera names using italics

Closes #255

See merge request genesys-pgr/genesys-ui!261
parents 7568e4ad 67156323
......@@ -34,6 +34,9 @@ import Permissions from 'ui/common/permission/Permissions';
/*tslint:disable*/
const styles = (theme) => ({
italicProperties: {
fontStyle: 'italic' as 'italic',
}
});
/*tslint:enable*/
......@@ -75,7 +78,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
}
public render() {
const { cropDetails, shortName, t } = this.props;
const { cropDetails, shortName, classes, t } = this.props;
const crop = cropDetails;
return (
......@@ -137,6 +140,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
terms={ crop.overview['taxonomy.genus'].terms }
missing={ crop.overview['taxonomy.genus'].missing }
total={ crop.overview['taxonomy.genus'].total }
propertyItemProps={ {classes: {propertiesRowLabel: classes.italicProperties} } }
/>
}
......@@ -146,6 +150,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
terms={ crop.overview['taxonomy.genusSpecies'].terms }
missing={ crop.overview['taxonomy.genusSpecies'].missing }
total={ crop.overview['taxonomy.genusSpecies'].total }
propertyItemProps={ {classes: {propertiesRowLabel: classes.italicProperties} } }
/>
}
</GridContainer >
......
import * as React from 'react';
import { withStyles } from '@material-ui/core/styles';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { translate } from 'react-i18next';
......@@ -34,9 +35,18 @@ import DownloadDialog from 'ui/common/download-dialog';
import PageTitle from 'ui/common/PageTitle';
import BlurbText from 'cms/ui/c/BlurbText';
/*tslint:disable*/
const styles = (theme) => ({
italicProperties: {
fontStyle: 'italic' as 'italic',
}
});
/*tslint:enable*/
interface IDisplayPageProps extends React.ClassAttributes<any> {
t: any;
classes?: any;
classes: any;
code: string;
institute: FaoInstituteDetails;
error: any;
......@@ -104,7 +114,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
}
public render() {
const { error, loading, institute, code, userRoles, mapLayers, t } = this.props;
const { error, loading, institute, code, userRoles, mapLayers, classes, t } = this.props;
const slug: string = this.state.authenticated ? 'download-authenticated' : 'download-anonymous';
let cropShortNameOverview;
......@@ -228,6 +238,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
terms={ taxonomyGenusOverview.terms }
missing={ taxonomyGenusOverview.missing }
total={ taxonomyGenusOverview.total }
propertyItemProps={ {classes: {propertiesRowLabel: classes.italicProperties} } }
/>
}
......@@ -237,6 +248,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
terms={ taxonomyGenusSpeciesOverview.terms }
missing={ taxonomyGenusSpeciesOverview.missing }
total={ taxonomyGenusSpeciesOverview.total }
propertyItemProps={ {classes: {propertiesRowLabel: classes.italicProperties} } }
/>
}
......@@ -287,4 +299,4 @@ const mapDispatchToProps = (dispatch) => bindActionCreators({
}, dispatch);
export default connect(mapStateToProps, mapDispatchToProps)(translate()(DisplayPage));
export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(translate()(DisplayPage)));
......@@ -27,6 +27,10 @@ const styles = (theme) => ({
},
/* tslint:enable */
},
propertiesRowLabel: {
fontSize: '1rem',
fontFamily: 'Roboto, sans-serif',
},
propertiesValue: {
// display: 'flex' as 'flex',
// flexWrap: 'wrap' as 'wrap',
......@@ -62,7 +66,7 @@ interface IItemProps extends React.ClassAttributes<any> {
className?: string;
}
class PropertiesItem1 extends React.Component<IItemProps & WithStyles<'propertiesContainer' | 'propertiesRow' | 'propertiesValue' | 'propertiesValueSmall' | 'propertiesValueNumeric'>, any> {
class PropertiesItem1 extends React.Component<IItemProps & WithStyles<'propertiesContainer' | 'propertiesRow' | 'propertiesRowLabel' | 'propertiesValue' | 'propertiesValueSmall' | 'propertiesValueNumeric'>, any> {
public render() {
const { keepEmpty, small, md, numeric, title, classes, className, children, t, style } = this.props;
......@@ -74,7 +78,7 @@ class PropertiesItem1 extends React.Component<IItemProps & WithStyles<'propertie
<Grid item xs={ 12 } md={ small ? 3 : md ? 6 : 12 } lg={ md ? 4 : 12 } className={ `${classes.propertiesRow} ${className ? className : ''}` }>
<Grid container style={ small ? {height: '100%' } : {} } spacing={ 0 }>
{ hasTitle && (
<Grid item xs={ (small || md) && numeric ? 8 : 6 } md={ small ? 12 : (numeric ? 10 : 4) } className="font-bold p-halfrem" style={ { fontSize: '1rem', fontFamily: 'Roboto, sans-serif' } }>
<Grid item xs={ (small || md) && numeric ? 8 : 6 } md={ small ? 12 : (numeric ? 10 : 4) } className={ `font-bold p-halfrem ${classes.propertiesRowLabel}` } >
{ title && typeof title === 'string' ? t(title) : title }
</Grid>
) }
......
......@@ -6,7 +6,7 @@ import { translate } from 'react-i18next';
interface IBundledProps extends React.ClassAttributes<any> {
children?: any;
propertiesList: Array<{title: string, value: any}>;
propertiesList: Array<{title: string, value: any, customProps?: any}>;
title: string;
small?: boolean;
t: any;
......@@ -36,7 +36,7 @@ class PropertiesCard extends React.Component<IBundledProps, any> {
<Properties>
{
propertiesList.map((property, i) => (
<PropertiesItem key={ `${i}-${property.title}` } title={ property.title } { ...propertyItemProps }>
<PropertiesItem key={ `${i}-${property.title}` } title={ property.title } { ...propertyItemProps } { ...property.customProps }>
{ property.value && typeof property.value === 'number' ? t(`common:label.prettyNumber`, {value: property.value}) : property.value }
</PropertiesItem>
))
......
......@@ -9,6 +9,7 @@ interface IPieChartCardProps extends React.ClassAttributes<any> {
terms: Array<{term: string, count: any}>;
total: number;
missing?: number;
propertyItemProps?: any;
t: any;
}
......@@ -17,7 +18,7 @@ class PieChartCard extends React.Component<IPieChartCardProps> {
public render() {
const {title, maxTerms = 5, terms, total, missing = 0, t} = this.props;
const {title, maxTerms = 5, terms, total, missing = 0, propertyItemProps, t} = this.props;
const topXTerms = terms.slice(0, maxTerms).map((term) => ({title: term.term, value: term.count}));
const other = total - missing - topXTerms.map((term) => term.value).reduce((cur, val) => cur + val);
......@@ -27,10 +28,10 @@ class PieChartCard extends React.Component<IPieChartCardProps> {
title={ title }
propertiesList={ [
...topXTerms,
{title: t('common:label.other'), value: other},
{title: t('common:label.missing'), value: missing},
{title: t('common:label.other'), value: other, customProps: { classes: null }},
{title: t('common:label.missing'), value: missing, customProps: { classes: null }},
] }
propertyItemProps={ {numeric: true} }
propertyItemProps={ {numeric: true, ...propertyItemProps} }
small
>
<PieChart
......
Markdown is supported
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