Add layer settings component

src/components/layers/LayerEditor.jsx

@@ -4,6 +4,7 @@ import SourceEditor from './SourceEditor'
 import FilterEditor from '../filter/FilterEditor'
 import PropertyGroup from '../fields/PropertyGroup'
 import LayerEditorGroup from './LayerEditorGroup'
+import LayerSettings from './LayerSettings'
 
 import layout from '../../config/layout.json'
 import { margins, fontSizes } from '../../config/scales'
@@ -42,6 +43,7 @@ export default class LayerEditor extends React.Component {
       editorGroups[group.title] = true
     })
     editorGroups['Source'] = true
+    editorGroups['Settings'] = true
 
     this.state = { editorGroups }
   }
@@ -142,9 +144,21 @@ export default class LayerEditor extends React.Component {
       </LayerEditorGroup>
     }
 
+    const settingsGroup = <LayerEditorGroup
+      title="Settings"
+      isActive={this.state.editorGroups['Settings']}
+      onActiveToggle={this.onGroupToggle.bind(this, 'Settings')}
+    >
+      <LayerSettings
+        id={this.props.layer.id}
+        type={this.props.layer.type}
+      />
+    </LayerEditorGroup>
+
     return <div>
-      {propertyGroups}
+      {settingsGroup}
       {dataGroup}
+      {propertyGroups}
     </div>
   }
 }

src/components/layers/LayerListItem.jsx

@@ -21,7 +21,12 @@ class LayerTypeDragHandle extends React.Component {
   render() {
     return <LayerIcon
       {...this.props}
-      style={{width: 15, height: 15, paddingRight: 3}}
+      style={{
+        cursor: 'move',
+        width: 15,
+        height: 15,
+        paddingRight: margins[0],
+      }}
     />
   }
 }

src/components/layers/LayerSettings.jsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import GlSpec from 'mapbox-gl-style-spec/reference/latest.min.js'
+import InputBlock from '../inputs/InputBlock'
+import StringInput from '../inputs/StringInput'
+import SelectInput from '../inputs/SelectInput'
+
+import colors from '../../config/colors'
+import { margins } from '../../config/scales'
+
+
+class LayerSettings extends React.Component {
+  static propTypes = {
+    id: React.PropTypes.string.isRequired,
+    type: React.PropTypes.oneOf(Object.keys(GlSpec.layer.type.values)).isRequired,
+    onIdChange: React.PropTypes.func.isRequired,
+    onTypeChange: React.PropTypes.func.isRequired,
+  }
+
+  render() {
+    return <div style={{
+      padding: margins[2],
+      paddingRight: 0,
+      backgroundColor: colors.black,
+      marginBottom: margins[2],
+    }}>
+      <InputBlock label={"Layer ID"}>
+        <StringInput
+          value={this.props.id}
+          onChange={this.props.onIdChange}
+        />
+      </InputBlock>
+      <InputBlock label={"Layer Type"}>
+        <SelectInput
+          options={[
+            ['background', 'Background'],
+            ['fill', 'Fill'],
+            ['line', 'Line'],
+            ['symbol', 'Symbol'],
+            ['raster', 'Raster'],
+            ['circle', 'Circle'],
+            ['fill-extrusion', 'Fill Extrusion'],
+          ]}
+          onChange={this.props.onTypeChange}
+          value={this.props.type}
+        />
+      </InputBlock>
+    </div>
+  }
+}
+
+export default LayerSettings