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

"Scale descriptor layout"

See merge request !184

src/ui/catalog/descriptor/DescriptorScale.tsx

 import * as React from 'react';
+import { withStyles } from 'material-ui/styles';
+
 import Grid from 'material-ui/Grid';
 // import { withStyles } from 'material-ui/styles';
 import { VocabularyTerm } from 'model/vocabulary.model';
 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);
   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);
 
   return (
     <div className={ className }>
-      <Grid container justify="space-between" alignItems="baseline" className="mb-20">
-        { bats.map((bat) => (
-          <Grid key={ bat } item xs={ 1 } style={ { textAlign: 'center' } }>
-            <span>{ bat }</span>
+      <Grid container justify="space-between" alignItems="baseline" className={ `${classes.scaleContainer} mb-20` }>
+        { bats.map((bat, index) => (
+          <Grid key={ bat } item xs={ 1 } className={ `${index === 0 || index === bats.length - 1 ? '' : bits.indexOf(bat) < 0 ? 'smHidden' : ''} ${classes.marker}` }>
+            <span className={ bits.indexOf(bat) < 0 ? '' : classes.labeled }>{ bat }</span>
           </Grid>
         )) }
       </Grid>
 
-      <b>Legend:</b>
-      { labels.map((label) => (
-        <Grid container key={ label.code }>
-          <Grid item xs={ 3 } />
-          <Grid item xs={ 9 }>
-            <span>{ label.code } &rarr; <b>{ label.title }</b> { label.description && <span>{ label.description }</span> }</span>
+      { labels.map((label, index) => (
+        <Grid key={ label.code } container justify="space-between" alignItems="center">
+          <Grid item xs={ 2 } style={ { textAlign: 'center' } }>
+            <span className={ classes.labeled }>{ label.code }</span>
+          </Grid>
+          <Grid item xs={ 10 }>
+            <b>{ label.title }</b> { label.description && <span>{ label.description }</span> }
           </Grid>
         </Grid>
       )) }
@@ -35,4 +70,4 @@ const DescriptorScale = ({min, max, labels, className = '' }: { min: number, max
   );
 };
 
-export default DescriptorScale;
+export default withStyles(styles)(DescriptorScale);

src/ui/pages/descriptor/DisplayPage.tsx

@@ -160,7 +160,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
 											<Properties>
 												<PropertiesItem title="Allowed values:">{ descriptor.integerOnly ? 'Integers' : 'Decimals' }</PropertiesItem>
 											</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>
 									</Grid>
 								}