flesh out step2

chgibb · Sep 25, 2019 · 3646dee · 3646dee
1 parent 39a1ffc
commit 3646dee
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 0 deletions.
diff --git a/src/req/renderer/containers/forms/newCoverageTrackForm/newCoverageTrackForm.tsx b/src/req/renderer/containers/forms/newCoverageTrackForm/newCoverageTrackForm.tsx
@@ -18,6 +18,7 @@ export interface NewCoverageTrackFormState
 {
     log10Scale : boolean;
     scaleFactor : number;
+    color : string;
     errors : Array<string>;
     currentStep : number;
 }
@@ -32,6 +33,7 @@ export class NewCoverageTrackForm extends React.Component<NewCoverageTrackFormPr
             log10Scale : false,
             scaleFactor : 1,
             errors : [],
+            color : "#000000",
             currentStep : 0
         };
 

diff --git a/src/req/renderer/containers/forms/newCoverageTrackForm/step2.tsx b/src/req/renderer/containers/forms/newCoverageTrackForm/step2.tsx
@@ -2,13 +2,29 @@ import * as React from "react";
 
 import { NewCoverageTrackForm } from './newCoverageTrackForm';
 import { FullWidthFormStep } from '../../fullWidthStepperForm';
+import { GridWrapper } from '../../gridWrapper';
+import { Grid } from '../../../components/grid';
+import { ColourPicker } from '../../../components/colourPicker';
 
 export function step2(this : NewCoverageTrackForm) : FullWidthFormStep
 {
     return {
         label : "",
         body : (
             <div>
+                 <GridWrapper>
+                    <Grid container spacing={4} justify="center">
+                        <Grid item>
+                            <div style={{marginTop:"3vh"}}>
+                            <ColourPicker label="Track colour:" onChange={(color) => {
+                                this.setState({
+                                    color : `rgb(${color.rgb.r},${color.rgb.g},${color.rgb.b})`
+                                });
+                            }} colour={this.state.color}/>
+                            </div>
+                        </Grid>
+                        </Grid>
+                        </GridWrapper>
             </div>
         )
     };