From 9e5f0c17366dac89e4b98802ce10504ceaa35d3d Mon Sep 17 00:00:00 2001
From: Lukas Martinelli <me@lukasmartinelli.ch>
Date: Thu, 22 Dec 2016 13:40:23 +0100
Subject: [PATCH] Add layer settings component

---
 src/components/layers/LayerEditor.jsx   | 16 +++++++-
 src/components/layers/LayerListItem.jsx |  7 +++-
 src/components/layers/LayerSettings.jsx | 51 +++++++++++++++++++++++++
 3 files changed, 72 insertions(+), 2 deletions(-)
 create mode 100644 src/components/layers/LayerSettings.jsx

diff --git a/src/components/layers/LayerEditor.jsx b/src/components/layers/LayerEditor.jsx
index f294940b..e747393a 100644
--- a/src/components/layers/LayerEditor.jsx
+++ b/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>
   }
 }
diff --git a/src/components/layers/LayerListItem.jsx b/src/components/layers/LayerListItem.jsx
index 5483b599..b9e62860 100644
--- a/src/components/layers/LayerListItem.jsx
+++ b/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],
+      }}
     />
   }
 }
diff --git a/src/components/layers/LayerSettings.jsx b/src/components/layers/LayerSettings.jsx
new file mode 100644
index 00000000..32f74aff
--- /dev/null
+++ b/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