Commit 0db7e536 authored by Matija Obreza's avatar Matija Obreza
Browse files

Merge branch '217-scale-descriptor-layout' into 'master'

"Scale descriptor layout"

See merge request !184
parents 4c86d3d7 f25f38a3
import * as React from 'react'; import * as React from 'react';
import { withStyles } from 'material-ui/styles';
import Grid from 'material-ui/Grid'; import Grid from 'material-ui/Grid';
// import { withStyles } from 'material-ui/styles'; // import { withStyles } from 'material-ui/styles';
import { VocabularyTerm } from 'model/vocabulary.model'; import { VocabularyTerm } from 'model/vocabulary.model';
import { log } from 'utilities/debug'; import { log } from 'utilities/debug';
const DescriptorScale = ({min, max, labels, className = '' }: { min: number, max: number, labels: VocabularyTerm[], className: string }) => { const styles = (theme) => ({
/* tslint:disable */
scaleContainer: {
// nop
},
marker: {
fontSize: '21px',
textAlign: 'center',
'&:first-of-type': {
fontWeight: 'bold' as 'bold',
},
'&:last-of-type': {
fontWeight: 'bold' as 'bold',
},
},
labeled: {
border: 'solid 1px #88ba42',
color: 'White',
// borderRadius: '100%',
width: '25px',
display: 'inline-block',
height: '24px',
fontSize: '21px',
backgroundColor: '#88ba42',
textAlign: 'center',
}
/* tslint:enable */
});
const DescriptorScale = ({classes, min, max, labels, className = '' }: { classes?: any, min: number, max: number, labels: VocabularyTerm[], className: string }) => {
const bits: number[] = labels.map((l) => +l.code); const bits: number[] = labels.map((l) => +l.code);
log(`Numeric labels`, bits, labels); log(`Numeric labels`, bits, labels);
const bats: number[] = [ min, ...bits, max ].sort(); const bats: number[] = [];
for (let n = Math.min(min, max); n <= Math.max(min, max); n++) {
bats.push(n);
}
log(`To render`, bats); log(`To render`, bats);
return ( return (
<div className={ className }> <div className={ className }>
<Grid container justify="space-between" alignItems="baseline" className="mb-20"> <Grid container justify="space-between" alignItems="baseline" className={ `${classes.scaleContainer} mb-20` }>
{ bats.map((bat) => ( { bats.map((bat, index) => (
<Grid key={ bat } item xs={ 1 } style={ { textAlign: 'center' } }> <Grid key={ bat } item xs={ 1 } className={ `${index === 0 || index === bats.length - 1 ? '' : bits.indexOf(bat) < 0 ? 'smHidden' : ''} ${classes.marker}` }>
<span>{ bat }</span> <span className={ bits.indexOf(bat) < 0 ? '' : classes.labeled }>{ bat }</span>
</Grid> </Grid>
)) } )) }
</Grid> </Grid>
<b>Legend:</b> { labels.map((label, index) => (
{ labels.map((label) => ( <Grid key={ label.code } container justify="space-between" alignItems="center">
<Grid container key={ label.code }> <Grid item xs={ 2 } style={ { textAlign: 'center' } }>
<Grid item xs={ 3 } /> <span className={ classes.labeled }>{ label.code }</span>
<Grid item xs={ 9 }> </Grid>
<span>{ label.code } &rarr; <b>{ label.title }</b> { label.description && <span>{ label.description }</span> }</span> <Grid item xs={ 10 }>
<b>{ label.title }</b> { label.description && <span>{ label.description }</span> }
</Grid> </Grid>
</Grid> </Grid>
)) } )) }
...@@ -35,4 +70,4 @@ const DescriptorScale = ({min, max, labels, className = '' }: { min: number, max ...@@ -35,4 +70,4 @@ const DescriptorScale = ({min, max, labels, className = '' }: { min: number, max
); );
}; };
export default DescriptorScale; export default withStyles(styles)(DescriptorScale);
...@@ -160,7 +160,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> { ...@@ -160,7 +160,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
<Properties> <Properties>
<PropertiesItem title="Allowed values:">{ descriptor.integerOnly ? 'Integers' : 'Decimals' }</PropertiesItem> <PropertiesItem title="Allowed values:">{ descriptor.integerOnly ? 'Integers' : 'Decimals' }</PropertiesItem>
</Properties> </Properties>
<DescriptorScale className="p-20" min={ descriptor.minValue } max={ descriptor.maxValue } labels={ descriptor.terms } /> <DescriptorScale className="mt-20" min={ descriptor.minValue } max={ descriptor.maxValue } labels={ descriptor.terms } />
</Section> </Section>
</Grid> </Grid>
} }
......
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