Display layer values

package.json

@@ -19,12 +19,16 @@
     "mapbox-gl": "^0.23.0",
     "mapbox-gl-style-spec": "^8.8.0",
     "node-sass": "^3.9.2",
-    "react": "15.3.0",
+    "react": "^15.3.0",
+    "react-collapse": "^2.3.3",
     "react-dom": "15.3.0",
     "react-file-reader-input": "^1.1.0",
     "react-geomicons": "^2.0.5",
+    "react-height": "^2.1.1",
     "react-icons": "^2.2.1",
     "react-mapbox-gl": "^0.11.0",
+    "react-motion": "^0.4.4",
+    "react-scrollbar": "^0.4.1",
     "react-tap-event-plugin": "^1.0.0",
     "rebass": "^0.3.1",
     "sass-loader": "^4.0.1"

src/app.jsx

@@ -16,7 +16,7 @@ export class WorkspaceDrawer extends React.Component {
 			editor = <LayerEditor layers={this.props.mapStyle.layers}/>
 		}
 
-		return <Container style={{
+		return <div style={{
 			zIndex: 100,
 			position: "fixed",
 			height: "100%",
@@ -27,7 +27,7 @@ export class WorkspaceDrawer extends React.Component {
 			backgroundColor: theme.colors.gray}
 		} >
 			{editor}
-		</Container>
+		</div>
 	}
 }
 

src/layers.jsx

@@ -1,23 +1,73 @@
 import React from 'react'
+import ScrollArea from 'react-scrollbar'
 
-import { Toolbar, NavItem, Tooltip, Container, Space} from 'rebass'
+import { Checkbox, Slider, Switch, Input, Panel, PanelHeader, Toolbar, NavItem, Tooltip, Container, Space} from 'rebass'
 import { Button, Text } from 'rebass'
+import Collapse from 'react-collapse'
 
 import theme from './theme.js'
 
-export class LayerEditor extends React.Component {
+export class FillLayer extends React.Component {
 	render() {
-		const layerBlocks = this.props.layers.map(layer => {
-			console.log(layer)
-			return <Text>{layer.id}</Text>
-		});
-		return <Container>
-			<Toolbar>
-				<NavItem is="a">
-					Toolbar
-				</NavItem>
-			</Toolbar>
-			{layerBlocks}
-		</Container>
+		return <div>
+			<Checkbox name="fill-antialias" label="Antialias" checked={this.props.paint["fill-antialias"]} />
+			<Input name="fill-opacity" label="Opacity" defaultValue={this.props.paint["fill-opacity"]} />
+		</div>
+	}
+}
+
+export class LineLayer extends React.Component {
+	render() {
+		return <div></div>
+	}
+}
+
+export class SymbolLayer extends React.Component {
+	render() {
+		return <div></div>
+	}
+}
+
+export class LayerPanel extends React.Component {
+	constructor(props) {
+		super(props);
+		this.toggleLayer = this.toggleLayer.bind(this);
+		this.state = {
+			isOpened: false
+		}
+	}
+
+	toggleLayer() {
+		this.setState({isOpened: !this.state.isOpened})
+	}
+
+	render() {
+		let layer = <FillLayer paint={this.props.layer.paint}/>
+		if (this.props.layer.type === "line") {
+			layer = <LineLayer />
+		} else if (this.props.layer.type === "symbol") {
+			layer = <SymbolLayer />
+		}
+
+		return <Panel>
+			<PanelHeader onClick={this.toggleLayer} inverted theme="default">{this.props.layer.id}</PanelHeader>
+			<Collapse isOpened={this.state.isOpened}>
+				{layer}
+			</Collapse>
+		</Panel>
+	}
+}
+
+export class LayerEditor extends React.Component {
+	render() {
+		const layerPanels = this.props.layers.map(layer => {
+			return <LayerPanel key={layer.id} layer={layer} />
+		});
+		return <div>
+			<Toolbar>
+				<NavItem is="a"> Toolbar </NavItem>
+			</Toolbar>
+			<ScrollArea speed={0.8} horizontal={false}>{layerPanels}</ScrollArea>
+		</div>
 	}
 }

src/theme.js

@@ -38,10 +38,6 @@ const dark = {
     backgroundColor: '#222',
     border: 0,
   },
-  Panel: {
-    borderWidth: 2,
-    backgroundColor: '#000'
-  },
   Heading: caps,
   Button: {
     color: '#00d9f7',