Draft of color picker

src/app.jsx

@@ -90,6 +90,17 @@ export default class App extends React.Component {
     this.onStyleChanged(changedStyle)
   }
 
+  onLayerChanged(layer) {
+    console.log(layer)
+    const changedStyle = this.state.mapStyle.setIn('layers', layer.get('id'), layer)
+    this.onStyleChanged(changedStyle)
+  }
+
+  onLayerChanged(layer) {
+    const changedStyle = this.state.mapStyle.setIn(['layers', layer.get('id')], layer)
+    this.onStyleChanged(changedStyle)
+  }
+
   mapRenderer() {
     const mapProps = {
       mapStyle: this.state.mapStyle,
@@ -119,7 +130,9 @@ export default class App extends React.Component {
         onStyleDownload={this.onStyleDownload.bind(this)}
       />
       <div style={{
-        ...fullHeight,
+        position: 'absolute',
+        bottom: 0,
+        height: "100%",
         top: 50,
         left: 0,
         zIndex: 100,
@@ -134,15 +147,16 @@ export default class App extends React.Component {
         />
       </div>
       <div style={{
-        ...fullHeight,
+        position: 'absolute',
+        bottom: 0,
+        height: "100%",
         top: 50,
         left: 180,
         zIndex: 100,
         width: 300,
-        overflow: "hidden",
         backgroundColor: colors.gray}
       }>
-      {this.state.selectedLayer && <LayerEditor layer={this.state.selectedLayer} />}
+      {this.state.selectedLayer && <LayerEditor layer={this.state.selectedLayer} onLayerChanged={this.onLayerChanged.bind(this)} />}
       </div>
       {this.mapRenderer()}
     </div>

src/fields/color.jsx

@@ -1,5 +1,14 @@
 import React from 'react'
 import inputStyle from './input.js'
+import ColorPicker from 'react-colorpickr'
+import 'react-colorpickr/dist/colorpickr.css'
+
+function formatColor(color) {
+  if(color.a !== 1) {
+    return `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`
+  }
+  return `rgb(${color.r}, ${color.g}, ${color.b})`
+}
 
 /*** Number fields with support for min, max and units and documentation*/
 class ColorField extends React.Component {
@@ -11,20 +20,25 @@ static propTypes = {
     doc: React.PropTypes.string,
   }
 
-	onChange(e) {
-		const value = e.target.value
-		return this.props.onChange(value === "" ? null: value)
-	}
-
   render() {
-		return <div style={inputStyle.property}>
+    return <div style={{...inputStyle.property, position: 'relative'}}>
+      <div style={{
+        position: 'absolute',
+        left: 200
+      }}>
+        <ColorPicker
+          value={this.props.value}
+          onChange={c => this.props.onChange(formatColor(c))}
+        />
+      </div>
+
       <label style={inputStyle.label}>{this.props.name}</label>
       <input
         style={inputStyle.input}
         name={this.props.name}
         placeholder={this.props.default}
         value={this.props.value ? this.props.value : ""}
-				onChange={this.onChange.bind(this)}
+        onChange={(e) => this.props.onChange(e.target.value)}
       />
     </div>
   }

src/fields/spec.jsx

@@ -36,10 +36,8 @@ class ZoomSpecField extends React.Component {
   render() {
     if(isZoomField(this.props.value)) {
       const zoomFields = this.props.value.get('stops').map(stop => {
-        console.log(stop)
         const zoomLevel = stop.get(0)
         const value = stop.get(1)
-        console.log(zoomLevel, value)
 
         return <div key={zoomLevel}>
           <b><span style={inputStyle.label}>Zoom Level {zoomLevel}</span></b>

src/layers/editor.jsx

@@ -59,6 +59,7 @@ export class LayerEditor extends React.Component {
   onPaintChanged(property, newValue) {
     let layer = this.props.layer
     //TODO: by using immutable records we can avoid this checking if object exists
+    //
     if(!layer.has('paint')) {
       layer = layer.set('paint', Immutable.Map())
     }
@@ -143,11 +144,9 @@ export class LayerEditor extends React.Component {
           <MdDelete />
         </NavItem>
       </Toolbar>
-      <ScrollContainer>
         <div style={{padding: theme.scale[2], paddingRight: 0, backgroundColor: theme.colors.black}}>
         {this.layerFromType(this.props.layer.get('type'))}
         </div>
-      </ScrollContainer>
     </div>
   }
 }