Merge branch 'feature/layout'

.editorconfig

@@ -5,11 +5,10 @@ root = true
 end_of_line = lf
 insert_final_newline = true
 
-
 # Matches multiple files with brace expansion notation
 # Set default charset
 [*.{js,jsx,html,sass}]
 charset = utf-8
-indent_style = tab
+indent_style = space
 indent_size = 2
 trim_trailing_whitespace = true

.travis.yml

@@ -15,6 +15,7 @@ before_install:
 install:
   - npm install
 script:
+  - mkdir public
   - npm run build
   - npm run lint
   - npm run test

package.json

@@ -8,7 +8,7 @@
     "build": "webpack --config webpack.production.config.js --progress --profile --colors",
     "test": "karma start --single-run",
     "test-watch": "karma start",
-    "start": "webpack-dev-server --progress --profile --colors",
+    "start": "webpack-dev-server --progress --profile --colors --watch-poll",
     "lint": "eslint --ext js --ext jsx {src,test}"
   },
   "repository": {
@@ -32,7 +32,8 @@
     "react-height": "^2.1.1",
     "react-icons": "^2.2.1",
     "react-motion": "^0.4.4",
-    "rebass": "^0.3.1"
+    "rebass": "^0.3.1",
+    "request": "^2.79.0"
   },
   "babel": {
     "presets": [

src/apistore.js

@@ -0,0 +1,41 @@
+import request from 'request'
+import style from './style.js'
+
+export class ApiStyleStore {
+  supported(cb) {
+    request('http://localhost:8000/styles', (error, response, body) => {
+      cb(error === undefined)
+    })
+  }
+
+  latestStyle(cb) {
+    if(this.latestStyleId) {
+      request('http://localhost:8000/styles/' + this.latestStyleId, (error, response, body) => {
+        cb(JSON.parse(body))
+      })
+    } else {
+      request('http://localhost:8000/styles', (error, response, body) => {
+        if (!error && response.statusCode == 200) {
+          const styleIds = JSON.parse(body);
+          this.latestStyleId = styleIds[0];
+          request('http://localhost:8000/styles/' + this.latestStyleId, (error, response, body) => {
+            cb(style.fromJSON(JSON.parse(body)))
+          })
+        }
+      })
+    }
+  }
+
+  // Save current style replacing previous version
+  save(mapStyle) {
+    const id = mapStyle.get('id')
+    request.put({
+      url: 'http://localhost:8000/styles/' + id,
+      json: true,
+      body: style.toJSON(mapStyle)
+    }, (error, response, body) => {
+     console.log('Saved style');
+    })
+    return mapStyle
+  }
+}

src/app.jsx

@@ -10,111 +10,117 @@ import { Map } from './map.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 './index.scss'
 
 export default class App extends React.Component {
-	static childContextTypes = {
-		rebass: React.PropTypes.object,
-		reactIconBase: React.PropTypes.object
-	}
+  static childContextTypes = {
+    rebass: React.PropTypes.object,
+    reactIconBase: React.PropTypes.object
+  }
 
-	constructor(props) {
-		super(props)
-		this.styleStore = new StyleStore()
-		this.settingsStore = new SettingsStore()
-		this.state = {
-			accessToken: this.settingsStore.accessToken,
-			workContext: "layers",
-			currentStyle: this.styleStore.latestStyle(),
-		}
-		if(this.state.currentStyle.get('layers').size === 0) {
-			loadDefaultStyle(mapStyle => this.onStyleUpload(mapStyle))
-		}
-	}
+  constructor(props) {
+    super(props)
 
-	onReset() {
-		this.styleStore.purge()
-		loadDefaultStyle(mapStyle => this.onStyleUpload(mapStyle))
-	}
+    this.styleStore = new ApiStyleStore()
+    this.styleStore.supported(isSupported => {
+      if(!isSupported) {
+        console.log('Falling back to local storage for storing styles')
+        this.styleStore = new StyleStore()
+      }
+      this.styleStore.latestStyle(mapStyle => this.onStyleUpload(mapStyle))
+    })
 
-	getChildContext() {
-		return {
-			rebass: theme,
-			reactIconBase: { size: 20 }
-		}
-	}
+    this.settingsStore = new SettingsStore()
+    this.state = {
+      accessToken: this.settingsStore.accessToken,
+      workContext: "layers",
+      currentStyle: style.emptyStyle
+    }
+  }
 
-	onStyleDownload() {
-		const mapStyle = style.toJSON(this.state.currentStyle)
-		const blob = new Blob([JSON.stringify(mapStyle, null, 4)], {type: "application/json;charset=utf-8"});
-		saveAs(blob, mapStyle.id + ".json");
-		this.onStyleSave()
-	}
+  onReset() {
+    this.styleStore.purge()
+    loadDefaultStyle(mapStyle => this.onStyleUpload(mapStyle))
+  }
 
-	onStyleUpload(newStyle) {
-		const savedStyle = this.styleStore.save(newStyle)
-		this.setState({ currentStyle: savedStyle })
-	}
+  getChildContext() {
+    return {
+      rebass: theme,
+      reactIconBase: { size: 20 }
+    }
+  }
 
-	onStyleSave() {
-		const snapshotStyle = this.state.currentStyle.set('modified', new Date().toJSON())
-		this.setState({ currentStyle: snapshotStyle })
-		this.styleStore.save(snapshotStyle)
-	}
+  onStyleDownload() {
+    const mapStyle = style.toJSON(this.state.currentStyle)
+    const blob = new Blob([JSON.stringify(mapStyle, null, 4)], {type: "application/json;charset=utf-8"});
+    saveAs(blob, mapStyle.id + ".json");
+    this.onStyleSave()
+  }
 
-	onStyleChanged(newStyle) {
-		this.setState({ currentStyle: newStyle })
-	}
+  onStyleUpload(newStyle) {
+    const savedStyle = this.styleStore.save(newStyle)
+    this.setState({ currentStyle: savedStyle })
+  }
 
-	onOpenSettings() {
-		this.setState({ workContext: "settings" })
-	}
+  onStyleSave() {
+    const snapshotStyle = this.state.currentStyle.set('modified', new Date().toJSON())
+    this.setState({ currentStyle: snapshotStyle })
+    console.log('Save')
+    this.styleStore.save(snapshotStyle)
+  }
 
-	onOpenAbout() {
-		this.setState({ workContext: "about" })
-	}
+  onStyleChanged(newStyle) {
+    this.setState({ currentStyle: newStyle })
+  }
 
-	onOpenLayers() {
-		this.setState({ workContext: "layers", })
-	}
+  onOpenSettings() {
+    //TODO: open settings modal
+    //this.setState({ workContext: "settings" })
+  }
 
-	onOpenSources() {
-		this.setState({ workContext: "sources", })
-	}
+  onOpenAbout() {
+    //TODO: open about modal
+    //this.setState({ workContext: "about" })
+  }
 
-	onAccessTokenChanged(newToken) {
-		this.settingsStore.accessToken = newToken
-		this.setState({ accessToken: newToken })
-	}
+  onOpenSources() {
+    //TODO: open sources modal
+    //this.setState({ workContext: "sources", })
+  }
 
-	render() {
-		return <div style={{ fontFamily: theme.fontFamily, color: theme.color, fontWeight: 300 }}>
-			<Toolbar
-					styleAvailable={this.state.currentStyle.get('layers').size > 0}
-					onStyleSave={this.onStyleSave.bind(this)}
-					onStyleUpload={this.onStyleUpload.bind(this)}
-					onStyleDownload={this.onStyleDownload.bind(this)}
-					onOpenSettings={this.onOpenSettings.bind(this)}
-					onOpenAbout={this.onOpenAbout.bind(this)}
-					onOpenLayers={this.onOpenLayers.bind(this)}
-					onOpenSources={this.onOpenSources.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}
-				onAccessTokenChanged={this.onAccessTokenChanged.bind(this)}
-			/>
-			<Map
-				mapStyle={this.state.currentStyle}
-				accessToken={this.state.accessToken}
-			/>
-		</div>
-	}
+  onAccessTokenChanged(newToken) {
+    this.settingsStore.accessToken = newToken
+    this.setState({ accessToken: newToken })
+  }
+
+  render() {
+    return <div style={{ fontFamily: theme.fontFamily, color: theme.color, fontWeight: 300 }}>
+      <Toolbar
+          styleAvailable={this.state.currentStyle.get('layers').size > 0}
+          onStyleSave={this.onStyleSave.bind(this)}
+          onStyleUpload={this.onStyleUpload.bind(this)}
+          onStyleDownload={this.onStyleDownload.bind(this)}
+          onOpenSettings={this.onOpenSettings.bind(this)}
+          onOpenAbout={this.onOpenAbout.bind(this)}
+          onOpenSources={this.onOpenSources.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}
+        onAccessTokenChanged={this.onAccessTokenChanged.bind(this)}
+      />
+      <Map
+        mapStyle={this.state.currentStyle}
+        accessToken={this.state.accessToken}
+      />
+    </div>
+  }
 }
 

src/layers/list.jsx

@@ -12,55 +12,48 @@ import PureRenderMixin from 'react-addons-pure-render-mixin';
 
 // List of collapsible layer editors
 export class LayerList extends React.Component {
-	static propTypes = {
-		layers: React.PropTypes.instanceOf(Immutable.OrderedMap),
-		onLayersChanged: React.PropTypes.func.isRequired
-	}
+  static propTypes = {
+    layers: React.PropTypes.instanceOf(Immutable.OrderedMap),
+    onLayersChanged: React.PropTypes.func.isRequired
+  }
 
-	constructor(props) {
-		super(props)
-		this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
-	}
+  constructor(props) {
+    super(props)
+    this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
+  }
 
-	onLayerDestroyed(deletedLayer) {
-		const remainingLayers = this.props.layers.delete(deletedLayer.get('id'))
-		this.props.onLayersChanged(remainingLayers)
-	}
+  onLayerDestroyed(deletedLayer) {
+    const remainingLayers = this.props.layers.delete(deletedLayer.get('id'))
+    this.props.onLayersChanged(remainingLayers)
+  }
 
-	onLayerChanged(layer) {
-		const changedLayers = this.props.layers.set(layer.get('id'), layer)
-		this.props.onLayersChanged(changedLayers)
-	}
+  onLayerChanged(layer) {
+    const changedLayers = this.props.layers.set(layer.get('id'), layer)
+    this.props.onLayersChanged(changedLayers)
+  }
 
-	render() {
-		var layerPanels = []
-		layerPanels = this.props.layers.map(layer => {
-			return <LayerEditor
-				key={layer.get('id')}
-				layer={layer}
-				onLayerDestroyed={this.onLayerDestroyed.bind(this)}
-				onLayerChanged={this.onLayerChanged.bind(this)}
-			/>
-		}).toIndexedSeq()
+  render() {
+    var layerPanels = []
+    layerPanels = this.props.layers.map(layer => {
+      return <LayerEditor
+        key={layer.get('id')}
+        layer={layer}
+        onLayerDestroyed={this.onLayerDestroyed.bind(this)}
+        onLayerChanged={this.onLayerChanged.bind(this)}
+      />
+    }).toIndexedSeq()
 
-		return <div>
-			<Toolbar style={{marginRight: 20}}>
-				<NavItem>
-					<Heading>Layers</Heading>
-				</NavItem>
-				<Space auto x={1} />
-			</Toolbar>
-
-			<div className={scrollbars.darkScrollbar} style={{
-				overflowY: "scroll",
-				bottom:0,
-				left:0,
-				right:0,
-				top:40,
-				position: "absolute",
-			}}>
-			{layerPanels}
-			</div>
-		</div>
-	}
+    return <div>
+      <div className={scrollbars.darkScrollbar} style={{
+        overflowY: "scroll",
+        bottom:0,
+        left:0,
+        right:0,
+        top:1,
+        position: "absolute",
+      }}>
+      {layerPanels}
+      </div>
+    </div>
+  }
 }

src/map.jsx

@@ -12,14 +12,15 @@ export class Map extends React.Component {
 	}
 
 	componentWillReceiveProps(nextProps) {
-		const tokenChanged = nextProps.accessToken !== MapboxGl.accessToken
+		const hasTokenChanged = nextProps.accessToken !== MapboxGl.accessToken
+    MapboxGl.accessToken = nextProps.accessToken
 
 		// If the id has changed a new style has been uplaoded and
 		// it is safer to do a full new render
 		// TODO: might already be handled in diff algorithm?
 		const mapIdChanged = this.props.mapStyle.get('id') !== nextProps.mapStyle.get('id')
 
-		if(mapIdChanged || tokenChanged) {
+		if(mapIdChanged || hasTokenChanged) {
 			this.state.map.setStyle(style.toJSON(nextProps.mapStyle))
 			return
 		}

src/scrollbars.scss

@@ -1,12 +1,12 @@
 .darkScrollbar::-webkit-scrollbar {
-	background-color: #313131;
-	width: 10px;
+    background-color: #26282e;
+    width: 10px;
 }
 
 .darkScrollbar::-webkit-scrollbar-thumb {
-	border-radius: 6px;
-	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
-	background-color: #555;
-	padding-left: 2px;
-	padding-right: 2px;
+    border-radius: 6px;
+    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
+    background-color: #40444e;
+    padding-left: 2px;
+    padding-right: 2px;
 }

src/style.js

@@ -9,34 +9,41 @@ import randomColor from 'randomcolor'
 // It also ensures that every style has an id and
 // a created date for future reference
 function fromJSON(jsonStyle) {
-	if (typeof jsonStyle === 'string' || jsonStyle instanceof String) {
-		jsonStyle = JSON.parse(jsonStyle)
-	}
+  if (typeof jsonStyle === 'string' || jsonStyle instanceof String) {
+    jsonStyle = JSON.parse(jsonStyle)
+  }
 
-	return Immutable.Map(Object.keys(jsonStyle).map(key => {
-		const val = jsonStyle[key]
-		if(key === "layers") {
-			return [key, Immutable.OrderedMap(val.map(l => [l.id, Immutable.fromJS(l)]))]
-		} else if(key === "sources" || key === "metadata" || key === "transition") {
-			return [key, Immutable.fromJS(val)]
-		} else {
-			return [key, val]
-		}
-	}))
+  return Immutable.Map(Object.keys(jsonStyle).map(key => {
+    const val = jsonStyle[key]
+    if(key === "layers") {
+      return [key, Immutable.OrderedMap(val.map(l => [l.id, Immutable.fromJS(l)]))]
+    } else if(key === "sources" || key === "metadata" || key === "transition") {
+      return [key, Immutable.fromJS(val)]
+    } else {
+      return [key, val]
+    }
+  }))
 }
 
+// Empty style is always used if no style could be restored or fetched
+const emptyStyle = ensureMetadataExists(fromJSON({
+  version: 8,
+  sources: {},
+  layers: [],
+}))
+
 function ensureHasId(style) {
-	if(style.has('id')) return style
-	return style.set('id', Math.random().toString(36).substr(2, 9))
+  if(style.has('id')) return style
+  return style.set('id', Math.random().toString(36).substr(2, 9))
 }
 
 function ensureHasTimestamp(style) {
-	if(style.has('id')) return style
-	return style.set('created', new Date().toJSON())
+  if(style.has('id')) return style
+  return style.set('created', new Date().toJSON())
 }
 
 function ensureMetadataExists(style) {
-	return ensureHasId(ensureHasTimestamp(style))
+  return ensureHasId(ensureHasTimestamp(style))
 }
 
 // Compare style with other style and return changes
@@ -44,41 +51,42 @@ function ensureMetadataExists(style) {
 // Should be able to improve performance since we can only compare
 // by reference
 function diffStyles(before, after) {
-	return diffJSONStyles(toJSON(before), toJSON(after))
+  return diffJSONStyles(toJSON(before), toJSON(after))
 }
 
 // Turns immutable style back into JSON with the original order of the
 // layers preserved
 function toJSON(mapStyle) {
-	const jsonStyle = {}
-	for(let [key, value] of mapStyle.entries()) {
-		if(key === "layers") {
-			jsonStyle[key] = value.toIndexedSeq().toJS()
-		} else if(key === 'sources' || key === "metadata" || key === "transition") {
-			jsonStyle[key] = value.toJS()
-		} else {
-			jsonStyle[key] = value
-		}
-	}
-	return jsonStyle
+  const jsonStyle = {}
+  for(let [key, value] of mapStyle.entries()) {
+    if(key === "layers") {
+      jsonStyle[key] = value.toIndexedSeq().toJS()
+    } else if(key === 'sources' || key === "metadata" || key === "transition") {
+      jsonStyle[key] = value.toJS()
+    } else {
+      jsonStyle[key] = value
+    }
+  }
+  return jsonStyle
 }
 
 export function colorizeLayers(layers) {
-	return layers.map(layer => {
-		if(!layer.metadata) {
-			layer.metadata = {}
-		}
-		if(!"maputnik:color" in layer.metadata) {
-			layer.metadata["maputnik:color"] = randomColor()
-		}
-	  return layer
-	})
+  return layers.map(layer => {
+    if(!layer.metadata) {
+      layer.metadata = {}
+    }
+    if(!"maputnik:color" in layer.metadata) {
+      layer.metadata["maputnik:color"] = randomColor()
+    }
+    return layer
+  })
 }
 
 export default {
-	colorizeLayers,
-	toJSON,
-	fromJSON,
-	diffStyles,
-	ensureMetadataExists,
+  colorizeLayers,
+  toJSON,
+  fromJSON,
+  diffStyles,
+  ensureMetadataExists,
+  emptyStyle,
 }

src/stylestore.js

@@ -5,117 +5,114 @@ import style from './style.js'
 const storagePrefix = "maputnik"
 const stylePrefix = 'style'
 const storageKeys = {
-	latest: [storagePrefix, 'latest_style'].join(':'),
-	accessToken: [storagePrefix, 'access_token'].join(':')
+  latest: [storagePrefix, 'latest_style'].join(':'),
+  accessToken: [storagePrefix, 'access_token'].join(':')
 }
 
-// Empty style is always used if no style could be restored or fetched
-const emptyStyle = style.ensureMetadataExists(style.fromJSON({
-		version: 8,
-		sources: {},
-		layers: [],
-}))
-
 const defaultStyleUrl = "https://raw.githubusercontent.com/osm2vectortiles/mapbox-gl-styles/master/styles/basic-v9-cdn.json"
 // Fetch a default style via URL and return it or a fallback style via callback
 export function loadDefaultStyle(cb) {
-	console.log('Load default style')
-	var request = new XMLHttpRequest()
-	request.open('GET', defaultStyleUrl, true)
+  console.log('Load default style')
+  var request = new XMLHttpRequest()
+  request.open('GET', defaultStyleUrl, true)
 
-	request.onload = () => {
-		if (request.status >= 200 && request.status < 400) {
-			cb(style.ensureMetadataExists(style.fromJSON(request.responseText)))
-		} else {
-			cb(emptyStyle)
-		}
-	}
+  request.onload = () => {
+    if (request.status >= 200 && request.status < 400) {
+      cb(style.ensureMetadataExists(style.fromJSON(request.responseText)))
+    } else {
+      cb(style.emptyStyle)
+    }
+  }
 
-	request.onerror = function() {
-			console.log('Could not fetch default style')
-			cb(emptyStyle)
-	}
+  request.onerror = function() {
+      console.log('Could not fetch default style')
+      cb(style.emptyStyle)
+  }
 
-	request.send()
+  request.send()
 }
 
 // Return style ids and dates of all styles stored in local storage
 function loadStoredStyles() {
-	const styles = []
-	for (let i = 0; i < window.localStorage.length; i++) {
-			const key = window.localStorage.key(i)
-			if(isStyleKey(key)) {
-				styles.push(fromKey(key))
-			}
-	}
-	return styles
+  const styles = []
+  for (let i = 0; i < window.localStorage.length; i++) {
+      const key = window.localStorage.key(i)
+      if(isStyleKey(key)) {
+        styles.push(fromKey(key))
+      }
+  }
+  return styles
 }
 
 function isStyleKey(key) {
-	const parts = key.split(":")
-	return parts.length == 3 && parts[0] === storagePrefix && parts[1] === stylePrefix
+  const parts = key.split(":")
+  return parts.length == 3 && parts[0] === storagePrefix && parts[1] === stylePrefix
 }
 
 // Load style id from key
 function fromKey(key) {
-	if(!isStyleKey(key)) {
-		throw "Key is not a valid style key"
-	}
+  if(!isStyleKey(key)) {
+    throw "Key is not a valid style key"
+  }
 
-	const parts = key.split(":")
-	const styleId = parts[2]
-	return styleId
+  const parts = key.split(":")
+  const styleId = parts[2]
+  return styleId
 }
 
 // Calculate key that identifies the style with a version
 function styleKey(styleId) {
-	return [storagePrefix, stylePrefix, styleId].join(":")
+  return [storagePrefix, stylePrefix, styleId].join(":")
 }
 
 // Store style independent settings
 export class SettingsStore {
-	get accessToken() {
-		const token = window.localStorage.getItem(storageKeys.accessToken)
-		return token ? token : ""
-	}
-	set accessToken(val) {
-		window.localStorage.setItem(storageKeys.accessToken, val)
-	}
+  get accessToken() {
+    const token = window.localStorage.getItem(storageKeys.accessToken)
+    return token ? token : ""
+  }
+  set accessToken(val) {
+    window.localStorage.setItem(storageKeys.accessToken, val)
+  }
 }
 
 // Manages many possible styles that are stored in the local storage
 export class StyleStore {
-	// Tile store will load all items from local storage and
-	// assume they do not change will working on it
-	constructor() {
-		this.mapStyles = loadStoredStyles()
-	}
+  // Tile store will load all items from local storage and
+  // assume they do not change will working on it
+  constructor() {
+    this.mapStyles = loadStoredStyles()
+  }
 
-	// Delete entire style history
-	purge() {
-		for (let i = 0; i < window.localStorage.length; i++) {
-				const key = window.localStorage.key(i)
-				if(key.startsWith(storagePrefix)) {
-					window.localStorage.removeItem(key)
-				}
-		}
-	}
+  supported(cb) {
+    cb(window.localStorage !== undefined)
+  }
 
-	// Find the last edited style
-	latestStyle() {
-		if(this.mapStyles.length === 0) return emptyStyle
-		const styleId = window.localStorage.getItem(storageKeys.latest)
-		const styleItem = window.localStorage.getItem(styleKey(styleId))
+  // Delete entire style history
+  purge() {
+    for (let i = 0; i < window.localStorage.length; i++) {
+        const key = window.localStorage.key(i)
+        if(key.startsWith(storagePrefix)) {
+          window.localStorage.removeItem(key)
+        }
+    }
+  }
 
-		if(styleItem) return style.fromJSON(styleItem)
-		return emptyStyle
-	}
+  // Find the last edited style
+  latestStyle(cb) {
+    if(this.mapStyles.length === 0) return cb(style.emptyStyle)
+    const styleId = window.localStorage.getItem(storageKeys.latest)
+    const styleItem = window.localStorage.getItem(styleKey(styleId))
 
-	// Save current style replacing previous version
-	save(mapStyle) {
-		const key = styleKey(mapStyle.get('id'))
-		window.localStorage.setItem(key, JSON.stringify(style.toJSON(mapStyle)))
-		window.localStorage.setItem(storageKeys.latest, mapStyle.get('id'))
-		return mapStyle
-	}
+    if(styleItem) return cb(style.fromJSON(styleItem))
+    cb(style.emptyStyle)
+  }
+
+  // Save current style replacing previous version
+  save(mapStyle) {
+    const key = styleKey(mapStyle.get('id'))
+    window.localStorage.setItem(key, JSON.stringify(style.toJSON(mapStyle)))
+    window.localStorage.setItem(storageKeys.latest, mapStyle.get('id'))
+    return mapStyle
+  }
 }

src/theme.js

@@ -1,112 +1,112 @@
 const caps = {
-	textTransform: 'uppercase',
-	letterSpacing: '.2em'
+  textTransform: 'uppercase',
+  letterSpacing: '.2em'
 }
 
 export const fullHeight = {
-	position: "fixed",
-	top: 0,
-	bottom: 0,
-	height: "100%",
+  position: "fixed",
+  top: 0,
+  bottom: 0,
+  height: "100%",
 }
 
 const baseColors = {
-	black: '#242424',
-	gray: '#313131',
-	midgray: '#778',
-	lowgray: '#dcdcdc',
-	white: '#fff',
-	blue: '#00d9f7',
-	green: '#B4C7AD',
-	orange: '#fb3',
-	red: '#f04',
+  black: '#1c1f24',
+  gray: '#26282e',
+  midgray: '#36383e',
+  lowgray: '#8e8e8e',
+  white: '#fff',
+  blue: '#00d9f7',
+  green: '#B4C7AD',
+  orange: '#fb3',
+  red: '#f04',
 }
 
 const themeColors = {
-	primary: baseColors.gray,
-	secondary: baseColors.midgray,
-	default: baseColors.gray,
-	info: baseColors.blue,
-	success: baseColors.green,
-	warning: baseColors.orange,
-	error: baseColors.red
+  primary: baseColors.gray,
+  secondary: baseColors.midgray,
+  default: baseColors.gray,
+  info: baseColors.blue,
+  success: baseColors.green,
+  warning: baseColors.orange,
+  error: baseColors.red
 }
 
 export const colors = {
-	...baseColors,
-	...themeColors
+  ...baseColors,
+  ...themeColors
 }
 
 export const inputBase = {
-		display: 'block',
-		border: '1px solid rgb(36, 36, 36)',
-		height: 30,
-		width: '100%',
-		paddingLeft: 5,
-		paddingRight: 5,
-		backgroundColor: colors.gray,
+    display: 'block',
+    border: '1px solid rgb(36, 36, 36)',
+    height: 30,
+    width: '100%',
+    paddingLeft: 5,
+    paddingRight: 5,
+    backgroundColor: colors.gray,
 }
 
 const scale = [3, 5, 10, 30, 40]
 const fontSizes = [28, 24, 20, 16, 14, 12, 10]
 
 const border = {
-	borderColor: colors.black,
-	borderRadius: 0,
+  borderColor: colors.black,
+  borderRadius: 0,
 }
 
 const dark = {
-	name: 'Dark',
-	color: colors.white,
-	fontFamily: 'Roboto, sans-serif',
-	scale,
-	fontSizes,
-	colors,
-	inverted: colors.midGray,
-	...border,
+  name: 'Dark',
+  color: colors.white,
+  fontFamily: 'Roboto, sans-serif',
+  scale,
+  fontSizes,
+  colors,
+  inverted: colors.midGray,
+  ...border,
 
-	Block: {
-		backgroundColor: colors.gray,
-		...border,
-		borderLeft: 0,
-		borderRight: 0,
-		marginBottom: 0,
-		paddingBottom: 0,
-	},
-	PanelHeader: {
-		marginRight: -10,
-		marginBottom: 0,
-		fontSize: fontSizes[5],
-		fontWeight: 400,
-		color: colors.white,
-	},
-	Button: {
-		color: '#00d9f7',
-	},
-	Menu: {
-		color: '#00d9f7',
-		backgroundColor: '#000'
-	},
-	Message: {
-		color: '#111',
-		opacity: 15/16
-	},
-	Header: {
-		fontWeight: 400,
-	},
-	ButtonCircle : {
-	},
-	Toolbar: {
-		fontWeight: 400,
-		minHeight: scale[3]
-	},
-	Label: {
-		fontWeight: 300,
-	},
-	Input: {
-		fontWeight: 300,
-		fontSize: fontSizes[5],
-	},
+  Block: {
+    backgroundColor: colors.gray,
+    ...border,
+    borderLeft: 0,
+    borderRight: 0,
+    marginBottom: 0,
+    paddingBottom: 0,
+  },
+  PanelHeader: {
+    marginRight: -10,
+    marginBottom: 0,
+    fontSize: fontSizes[5],
+    fontWeight: 400,
+    color: colors.white,
+  },
+  Button: {
+    color: '#00d9f7',
+  },
+  Menu: {
+    color: '#00d9f7',
+    backgroundColor: '#000'
+  },
+  Message: {
+    color: '#111',
+    opacity: 15/16
+  },
+  Header: {
+    fontWeight: 400,
+  },
+  ButtonCircle : {
+  },
+  Toolbar: {
+    fontWeight: 400,
+    minHeight: scale[3]
+  },
+  Label: {
+    fontWeight: 300,
+  },
+  Input: {
+    fontWeight: 300,
+    fontSize: fontSizes[5],
+  },
 }
 
 export default dark

src/toolbar.jsx

@@ -12,122 +12,138 @@ import Fixed from 'rebass/dist/Fixed'
 
 import MdFileDownload from 'react-icons/lib/md/file-download'
 import MdFileUpload from 'react-icons/lib/md/file-upload'
+import MdOpenInBrowser from 'react-icons/lib/md/open-in-browser'
 import MdSettings from 'react-icons/lib/md/settings'
 import MdInfo from 'react-icons/lib/md/info'
 import MdLayers from 'react-icons/lib/md/layers'
 import MdSave from 'react-icons/lib/md/save'
+import MdStyle from 'react-icons/lib/md/style'
 import MdMap from 'react-icons/lib/md/map'
+import MdInsertEmoticon from 'react-icons/lib/md/insert-emoticon'
+import MdFontDownload from 'react-icons/lib/md/font-download'
+import MdHelpOutline from 'react-icons/lib/md/help-outline'
+import MdFindInPage from 'react-icons/lib/md/find-in-page'
 
 import style from './style.js'
 import { fullHeight } from './theme.js'
 import theme from './theme.js';
 
+const InlineBlock = props => <div style={{display: "inline-block", ...props.style}}>
+  {props.children}
+</div>
+
 export class Toolbar extends React.Component {
-	static propTypes = {
-		// A new style has been uploaded
-		onStyleUpload: React.PropTypes.func.isRequired,
-		// Current style is requested for download
-		onStyleDownload: React.PropTypes.func.isRequired,
-		// Style is explicitely saved to local cache
-		onStyleSave: React.PropTypes.func,
-		// Open settings drawer
-		onOpenSettings: React.PropTypes.func,
-		// Open about page
-		onOpenAbout: React.PropTypes.func,
-		// Open sources drawer
-		onOpenSources: React.PropTypes.func,
-		// Open layers drawer
-		onOpenLayers: React.PropTypes.func,
-		// Whether a style is available for download or saving
-		// A style with no layers should not be available
-		styleAvailable: React.PropTypes.bool,
-	}
+  static propTypes = {
+    // A new style has been uploaded
+    onStyleUpload: React.PropTypes.func.isRequired,
+    // Current style is requested for download
+    onStyleDownload: React.PropTypes.func.isRequired,
+    // Style is explicitely saved to local cache
+    onStyleSave: React.PropTypes.func,
+    // Open settings drawer
+    onOpenSettings: React.PropTypes.func,
+    // Open about page
+    onOpenAbout: React.PropTypes.func,
+    // Open sources drawer
+    onOpenSources: React.PropTypes.func,
+    // Whether a style is available for download or saving
+    // A style with no layers should not be available
+    styleAvailable: React.PropTypes.bool,
+  }
 
-	onUpload(_, files) {
-		const [e, file] = files[0];
-		const reader = new FileReader();
-		reader.readAsText(file, "UTF-8");
-		reader.onload = e => {
-			let mapStyle = style.fromJSON(JSON.parse(e.target.result))
-			mapStyle = style.ensureMetadataExists(mapStyle)
-			this.props.onStyleUpload(mapStyle);
-		}
-		reader.onerror = e => console.log(e.target);
-	}
+  onUpload(_, files) {
+    const [e, file] = files[0];
+    const reader = new FileReader();
+    reader.readAsText(file, "UTF-8");
+    reader.onload = e => {
+      let mapStyle = style.fromJSON(JSON.parse(e.target.result))
+      mapStyle = style.ensureMetadataExists(mapStyle)
+      this.props.onStyleUpload(mapStyle);
+    }
+    reader.onerror = e => console.log(e.target);
+  }
 
-	saveButton() {
-		if(this.props.styleAvailable) {
-			return <Block>
-				<Button onClick={this.props.onStyleSave} big={true}>
-					<Tooltip inverted rounded title="Save style">
-						<MdSave />
-					</Tooltip>
-				</Button>
-			</Block>
-		}
-		return null
-	}
+  saveButton() {
+    if(this.props.styleAvailable) {
+      return <InlineBlock>
+        <Button onClick={this.props.onStyleSave} big={true}>
+          <MdSave />
+          Save
+        </Button>
+      </InlineBlock>
+    }
+    return null
+  }
 
-	downloadButton() {
-		if(this.props.styleAvailable) {
-			return <Block>
-				<Button onClick={this.props.onStyleDownload} big={true}>
-					<Tooltip inverted rounded title="Download style">
-						<MdFileDownload />
-					</Tooltip>
-				</Button>
-			</Block>
-		}
-		return null
-	}
+  downloadButton() {
+    if(this.props.styleAvailable) {
+      return <InlineBlock>
+        <Button onClick={this.props.onStyleDownload} big={true}>
+          <MdFileDownload />
+          Download
+        </Button>
+      </InlineBlock>
+    }
+    return null
+  }
 
-	render() {
-		return <Container style={{
-			...fullHeight,
-			zIndex: 100,
-			left: 0,
-			top: 0,
-			backgroundColor: theme.colors.black }
-		}>
-			<Block>
-				<FileReaderInput onChange={this.onUpload.bind(this)}>
-					<Button big={true} theme={this.props.styleAvailable ? "default" : "success"}>
-						<Tooltip inverted rounded title="Upload style">
-							<MdFileUpload />
-						</Tooltip>
-					</Button>
-				</FileReaderInput>
-			</Block>
-			{this.downloadButton()}
-			{this.saveButton()}
-			<Block>
-				<Button big={true} onClick={this.props.onOpenLayers}>
-					<Tooltip inverted rounded title="Layers">
-						<MdLayers />
-					</Tooltip>
-				</Button>
-			</Block>
-			<Block>
-				<Button big={true} onClick={this.props.onOpenSources}>
-					<Tooltip inverted rounded title="Sources">
-						<MdMap />
-					</Tooltip>
-				</Button>
-			</Block>
-			<Block>
-				<Button big={true} onClick={this.props.onOpenSettings}>
-					<Tooltip inverted rounded title="Settings">
-						<MdSettings />
-					</Tooltip>
-				</Button>
-			</Block>
-			<Block>
-				<Button big={true} onClick={this.props.onOpenAbout}>
-					<Tooltip inverted rounded title="About">
-						<MdInfo />
-					</Tooltip>
-				</Button>
-			</Block>
-		</Container>
-	}
+  render() {
+
+    return <div style={{
+      position: "fixed",
+      height: 50,
+      width: '100%',
+      zIndex: 100,
+      left: 0,
+      top: 0,
+      backgroundColor: theme.colors.black
+    }}>
+      <InlineBlock>
+          <Button style={{width: 300, textAlign: 'left'}}>
+            <img src="https://github.com/maputnik/editor/raw/master/media/maputnik.png" alt="Maputnik" style={{width: 40, height: 40, paddingRight: 5, verticalAlign: 'middle'}}/>
+            <span style={{fontSize: 20 }}>Maputnik</span>
+          </Button>
+      </InlineBlock>
+      <InlineBlock>
+        <FileReaderInput onChange={this.onUpload.bind(this)}>
+          <Button big={true} theme={this.props.styleAvailable ? "default" : "success"}>
+            <MdOpenInBrowser />
+            Open
+          </Button>
+        </FileReaderInput>
+      </InlineBlock>
+      {this.downloadButton()}
+      {this.saveButton()}
+      <InlineBlock>
+        <Button big={true} onClick={this.props.onOpenSettings}>
+          <MdLayers />
+          Tilesets
+        </Button>
+      </InlineBlock>
+      <InlineBlock>
+        <Button big={true} onClick={this.props.onOpenSettings}>
+          <MdFontDownload />
+          Fonts
+        </Button>
+      </InlineBlock>
+      <InlineBlock>
+        <Button big={true} onClick={this.props.onOpenSettings}>
+          <MdInsertEmoticon/>
+          Icons
+        </Button>
+      </InlineBlock>
+      <InlineBlock>
+        <Button big={true} onClick={this.props.onOpenSettings}>
+          <MdFindInPage />
+          Inspect
+        </Button>
+      </InlineBlock>
+      <InlineBlock>
+        <Button big={true} onClick={this.props.onOpenAbout}>
+          <MdHelpOutline />
+          Help
+        </Button>
+      </InlineBlock>
+    </div>
+  }
 }

src/workspace.jsx

@@ -8,65 +8,66 @@ 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,
-	}
+  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)
-	}
+  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)
-	}
+  onSourcesChanged(changedSources) {
+    const changedStyle = this.props.mapStyle.set('sources', changedSources)
+    this.props.onStyleChanged(changedStyle)
+  }
 
-	render() {
-		let workspaceContent = null
+  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 === "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 === "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 === "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 />
-		}
+    if(this.props.workContext === "about") {
+      workspaceContent = <About />
+    }
 
-		return <div style={{
-			...fullHeight,
-			zIndex: 100,
-			left: 60,
-			width: 300,
-			overflow: "hidden",
-			backgroundColor: colors.gray}
-		}>
-			{workspaceContent}
-		</div>
-	}
+    return <div style={{
+      ...fullHeight,
+      top: 50,
+      left: 0,
+      zIndex: 100,
+      width: 300,
+      overflow: "hidden",
+      backgroundColor: colors.gray}
+    }>
+      {workspaceContent}
+    </div>
+  }
 }

webpack.config.js

@@ -62,7 +62,9 @@ module.exports = {
 		}]
 	},
 	node: {
-		fs: "empty"
+		fs: "empty",
+    net: 'empty',
+    tls: 'empty'
 	},
 	devServer: {
 		contentBase: "./public",