Separate work space drawer

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,6 +35,18 @@ export default class App extends React.Component {
 		this.setState({ styleManager: new StyleManager(newStyle) })
 	}
 
+	onOpenSettings() {
+		this.setState({
+			workContext: "settings",
+		})
+	}
+
+	onOpenLayers() {
+		this.setState({
+			workContext: "layers",
+		})
+	}
+
   getChildContext() {
     return {
 			rebass: theme,
@@ -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>

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>

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>
+	}
+}