From 622286f294e653fcc8a5cff0add64a1b7e12103e Mon Sep 17 00:00:00 2001
From: lukasmartinelli <me@lukasmartinelli.ch>
Date: Fri, 9 Sep 2016 17:09:13 +0200
Subject: [PATCH] Separate work space drawer

---
 src/app.jsx       | 52 ++++++++++++++++++++---------------------------
 src/toolbar.jsx   | 13 ++++++++++--
 src/workspace.jsx | 33 ++++++++++++++++++++++++++++++
 3 files changed, 66 insertions(+), 32 deletions(-)
 create mode 100644 src/workspace.jsx

diff --git a/src/app.jsx b/src/app.jsx
index 89adb40..3d0050a 100644
--- a/src/app.jsx
+++ b/src/app.jsx
@@ -4,39 +4,13 @@ import {saveAs} from 'file-saver'
 import { Drawer, Container, Block, Fixed } from 'rebass'
 import {Map} from './map.jsx'
 import {Toolbar} from './toolbar.jsx'
-import { LayerEditor } from './layers.jsx'
 import { StyleManager } from './style.js'
+import { WorkspaceDrawer } from './workspace.jsx'
 
 import theme from './theme.js'
 import layout from './layout.scss'
 import 'react-virtualized/styles.css'
 
-export class WorkspaceDrawer extends React.Component {
-	static propTypes = {
-    styleManager: React.PropTypes.object.isRequired
-  }
-
-	render() {
-		let editor = null
-		if(this.props.styleManager.mapStyle) {
-			editor = <LayerEditor styleManager={this.props.styleManager}/>
-		}
-
-		return <div style={{
-			zIndex: 100,
-			position: "fixed",
-			left: 60,
-			width: 300,
-			top: 0,
-			bottom: 0,
-			overflow: "hidden",
-			backgroundColor: theme.colors.gray}
-		}>
-			{editor}
-		</div>
-	}
-}
-
 export default class App extends React.Component {
   static childContextTypes = {
     rebass: React.PropTypes.object,
@@ -47,6 +21,7 @@ export default class App extends React.Component {
 		super(props)
 		this.state = {
 			styleManager: new StyleManager(),
+			workContext: "layers",
 		}
 	}
 
@@ -60,7 +35,19 @@ export default class App extends React.Component {
 		this.setState({ styleManager: new StyleManager(newStyle) })
 	}
 
-  getChildContext () {
+	onOpenSettings() {
+		this.setState({
+			workContext: "settings",
+		})
+	}
+
+	onOpenLayers() {
+		this.setState({
+			workContext: "layers",
+		})
+	}
+
+  getChildContext() {
     return {
 			rebass: theme,
 			reactIconBase: {
@@ -71,8 +58,13 @@ export default class App extends React.Component {
 
   render() {
     return <div style={{ fontFamily: theme.fontFamily, color: theme.color }}>
-			<Toolbar onStyleUpload={this.onStyleUpload.bind(this)} onStyleDownload={this.onStyleDownload.bind(this)} />
-			<WorkspaceDrawer styleManager={this.state.styleManager}/>
+			<Toolbar
+					onStyleUpload={this.onStyleUpload.bind(this)}
+					onStyleDownload={this.onStyleDownload.bind(this)}
+					onOpenSettings={this.onOpenSettings.bind(this)}
+					onOpenLayers={this.onOpenLayers.bind(this)}
+			/>
+			<WorkspaceDrawer workContext={this.state.workContext} styleManager={this.state.styleManager}/>
 			<div className={layout.map}>
 				<Map styleManager={this.state.styleManager} />
 			</div>
diff --git a/src/toolbar.jsx b/src/toolbar.jsx
index 486fb47..d8ea18a 100644
--- a/src/toolbar.jsx
+++ b/src/toolbar.jsx
@@ -10,7 +10,9 @@ import theme from './theme.js';
 export class Toolbar extends React.Component {
 	static propTypes = {
     onStyleUpload: React.PropTypes.func.isRequired,
-    onStyleDownload: React.PropTypes.func.isRequired
+    onStyleDownload: React.PropTypes.func.isRequired,
+    onOpenSettings: React.PropTypes.func,
+    onOpenLayers: React.PropTypes.func,
   }
 
 	constructor(props) {
@@ -68,9 +70,16 @@ export class Toolbar extends React.Component {
 			</Block>
 			{downloadButton}
 			<Block>
-				<Button big={true}>
+				<Button big={true} onClick={this.props.onOpenLayers}>
 					<Tooltip inverted rounded title="Layers">
 						<MdLayers />
+          </Tooltip>
+				</Button>
+			</Block>
+			<Block>
+				<Button big={true} onClick={this.props.onOpenSettings}>
+					<Tooltip inverted rounded title="Settings">
+						<MdSettings />
           </Tooltip>
 				</Button>
 			</Block>
diff --git a/src/workspace.jsx b/src/workspace.jsx
new file mode 100644
index 0000000..147e13c
--- /dev/null
+++ b/src/workspace.jsx
@@ -0,0 +1,33 @@
+import React from 'react'
+import { LayerEditor } from './layers.jsx'
+import theme from './theme.js'
+
+/** The workspace drawer contains the editor components depending on the context
+ * chosen in the toolbar. */
+export class WorkspaceDrawer extends React.Component {
+	static propTypes = {
+    workContext: React.PropTypes.oneOf(['layers', 'settings']).isRequired,
+    styleManager: React.PropTypes.object.isRequired
+  }
+
+	render() {
+		let workspaceContent = null
+
+		if(this.props.workContext === "layers" && this.props.styleManager.mapStyle) {
+			workspaceContent = <LayerEditor styleManager={this.props.styleManager}/>
+		}
+
+		return <div style={{
+			zIndex: 100,
+			position: "fixed",
+			left: 60,
+			width: 300,
+			top: 0,
+			bottom: 0,
+			overflow: "hidden",
+			backgroundColor: theme.colors.gray}
+		}>
+			{workspaceContent}
+		</div>
+	}
+}