Workspace drawer no longer needed

src/app.jsx

@@ -8,13 +8,14 @@ import Fixed from 'rebass/dist/Fixed'
 
 import { MapboxGlMap } from './gl.jsx'
 import { OpenLayers3Map } from './ol3.jsx'
+import { LayerList } from './layers/list.jsx'
 import {Toolbar} from './toolbar.jsx'
 import style from './style.js'
 import { loadDefaultStyle, SettingsStore, StyleStore } from './stylestore.js'
 import { ApiStyleStore } from './apistore.js'
-import { WorkspaceDrawer } from './workspace.jsx'
 
 import theme from './theme.js'
+import { colors, fullHeight } from './theme.js'
 import './index.scss'
 
 export default class App extends React.Component {
@@ -99,30 +100,48 @@ export default class App extends React.Component {
     this.setState({ accessToken: newToken })
   }
 
-  render() {
+  onLayersChanged(changedLayers) {
-    const renderer = this.state.currentStyle.getIn(['metadata', 'maputnik:renderer'], 'mbgljs')
+    const changedStyle = this.props.mapStyle.set('layers', changedLayers)
+    this.props.onStyleChanged(changedStyle)
+  }
+
+  mapRenderer() {
     const mapProps = {
       mapStyle: this.state.currentStyle,
       accessToken: this.state.accessToken,
     }
+    const renderer = this.state.currentStyle.getIn(['metadata', 'maputnik:renderer'], 'mbgljs')
+    if(renderer === 'ol3') {
+      return  <OpenLayers3Map {...mapProps} />
+    } else {
+      return  <MapboxGlMap {...mapProps} />
+    }
+  }
+
+  render() {
     return <div style={{ fontFamily: theme.fontFamily, color: theme.color, fontWeight: 300 }}>
       <Toolbar
-          mapStyle={this.state.currentStyle}
-          onStyleChanged={this.onStyleChanged.bind(this)}
-          onStyleSave={this.onStyleSave.bind(this)}
-          onStyleUpload={this.onStyleUpload.bind(this)}
-          onStyleDownload={this.onStyleDownload.bind(this)}
-      />
-      <WorkspaceDrawer
-        onStyleChanged={this.onStyleChanged.bind(this)}
-        onReset={this.onReset.bind(this)}
-        workContext={this.state.workContext}
         mapStyle={this.state.currentStyle}
-        accessToken={this.state.accessToken}
+        onStyleChanged={this.onStyleChanged.bind(this)}
-        onAccessTokenChanged={this.onAccessTokenChanged.bind(this)}
+        onStyleSave={this.onStyleSave.bind(this)}
+        onStyleUpload={this.onStyleUpload.bind(this)}
+        onStyleDownload={this.onStyleDownload.bind(this)}
       />
-      {renderer == 'ol3' && <OpenLayers3Map {...mapProps} />}
+      <div style={{
-      {renderer == 'mbgljs' && <MapboxGlMap {...mapProps} />}
+        ...fullHeight,
+        top: 50,
+        left: 0,
+        zIndex: 100,
+        width: 300,
+        overflow: "hidden",
+        backgroundColor: colors.gray
+      }}>
+        <LayerList
+          onLayersChanged={this.onLayersChanged.bind(this)}
+          layers={this.state.currentStyle.get('layers')}
+        />
+      </div>
+      {this.mapRenderer()}
     </div>
   }
 }

src/workspace.jsx

@@ -1,73 +0,0 @@
-import React from 'react'
-import { LayerList } from './layers/list.jsx'
-import { SourceList } from './sources/list.jsx'
-import { SettingsEditor } from './settings.jsx'
-import { About } from './about.jsx'
-import { colors, fullHeight } from './theme.js'
-
-/** The workspace drawer contains the editor components depending on the edit
- * context chosen in the toolbar. It holds the state of the layers.*/
-export class WorkspaceDrawer extends React.Component {
-  static propTypes = {
-    mapStyle: React.PropTypes.object.isRequired,
-    onStyleChanged: React.PropTypes.func.isRequired,
-    workContext: React.PropTypes.oneOf(['layers', 'settings', 'sources']).isRequired,
-    accessToken: React.PropTypes.string,
-    onAccessTokenChanged: React.PropTypes.func,
-    onReset: React.PropTypes.func,
-  }
-
-  onLayersChanged(changedLayers) {
-    const changedStyle = this.props.mapStyle.set('layers', changedLayers)
-    this.props.onStyleChanged(changedStyle)
-  }
-
-  onSourcesChanged(changedSources) {
-    const changedStyle = this.props.mapStyle.set('sources', changedSources)
-    this.props.onStyleChanged(changedStyle)
-  }
-
-  render() {
-    let workspaceContent = null
-
-    if(this.props.workContext === "sources") {
-      workspaceContent = <SourceList
-        onSourcesChanged={this.onSourcesChanged.bind(this)}
-        sources={this.props.mapStyle.get('sources')}
-      />
-    }
-
-    if(this.props.workContext === "layers") {
-      workspaceContent = <LayerList
-        onLayersChanged={this.onLayersChanged.bind(this)}
-        layers={this.props.mapStyle.get('layers')}
-      />
-    }
-
-    if(this.props.workContext === "settings") {
-      workspaceContent = <SettingsEditor
-        onReset={this.props.onReset}
-        onStyleChanged={this.props.onStyleChanged}
-        mapStyle={this.props.mapStyle}
-        accessToken={this.props.accessToken}
-        onAccessTokenChanged={this.props.onAccessTokenChanged}
-      />
-    }
-
-    if(this.props.workContext === "about") {
-      workspaceContent = <About />
-    }
-
-    return <div style={{
-      ...fullHeight,
-      top: 50,
-      left: 0,
-      zIndex: 100,
-      width: 300,
-      overflow: "hidden",
-      backgroundColor: colors.gray}
-    }>
-      {workspaceContent}
-    </div>
-  }
-}