Colored layers

package.json

@@ -20,6 +20,7 @@
     "mapbox-gl": "^0.23.0",
     "mapbox-gl-style-spec": "^8.8.0",
     "node-sass": "^3.9.2",
+    "randomcolor": "^0.4.4",
     "react": "^15.3.0",
     "react-collapse": "^2.3.3",
     "react-dom": "15.3.0",

src/app.jsx

@@ -57,7 +57,7 @@ export default class App extends React.Component {
 	}
 
   render() {
-    return <div style={{ fontFamily: theme.fontFamily, color: theme.color }}>
+    return <div style={{ fontFamily: theme.fontFamily, color: theme.color, fontWeight: 300 }}>
 			<Toolbar
 					onStyleUpload={this.onStyleUpload.bind(this)}
 					onStyleDownload={this.onStyleDownload.bind(this)}

src/layers.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-
+import randomColor from 'randomcolor'
 import { Block, ButtonCircle, Heading, Checkbox, Slider, Switch, Input, Panel, PanelHeader, Toolbar, NavItem, Tooltip, Container, Space} from 'rebass'
 import { Button, Text } from 'rebass'
 import {MdArrowDropDown, MdArrowDropUp, MdAddToPhotos, MdDelete, MdVisibilityOff} from 'react-icons/lib/md';
@@ -146,13 +146,14 @@ export class LayerPanel extends React.Component {
 				padding: theme.scale[0],
 				borderBottom: 1,
 				borderTop: 1,
-				borderLeft: 0,
+				borderLeft: 2,
 				borderRight: 0,
 				borderStyle: "solid",
 				borderColor: theme.borderColor,
+				borderLeftColor: this.state.layer.metadata["mapolo:color"],
 			}}>
 			<Toolbar onClick={this.toggleLayer.bind(this)}>
-				<NavItem>
+				<NavItem style={{fontWeight: 400}}>
 					#{this.state.layer.id}
 				</NavItem>
 				<Space auto x={1} />
@@ -164,7 +165,7 @@ export class LayerPanel extends React.Component {
 				</NavItem>
 			</Toolbar>
 			<Collapse isOpened={this.state.isOpened}>
-				<div style={{padding: theme.scale[2], paddingRight: 0}}>
+				<div style={{padding: theme.scale[2], paddingRight: 0, backgroundColor: theme.colors.black}}>
 				{this.layerFromType(this.state.layer.type)}
 				</div>
 			</Collapse>
@@ -186,7 +187,7 @@ export class LayerEditor extends React.Component {
 		return <div>
 			<Toolbar style={{marginRight: 20}}>
 				<NavItem>
-					Layers
+					<Heading>Layers</Heading>
 				</NavItem>
 				<Space auto x={1} />
 				<Button>

src/settings.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import theme from './theme.js'
-import { Container, Input, Toolbar, NavItem, Space } from 'rebass'
+import { Heading, Container, Input, Toolbar, NavItem, Space } from 'rebass'
 
 /** Edit global settings within a style such as the name */
 export class SettingsEditor extends React.Component {
@@ -26,9 +26,8 @@ export class SettingsEditor extends React.Component {
 		return <div>
 			<Toolbar style={{marginRight: 20}}>
 				<NavItem>
-					Settings
+					<Heading>Settings</Heading>
 				</NavItem>
-				<Space auto x={1} />
 			</Toolbar>
 			<Container>
 				<Input

src/style.js

@@ -1,4 +1,17 @@
 import React from 'react';
+import randomColor from 'randomcolor'
+
+function assignColorsToLayers(layers) {
+	return layers.map(layer => {
+		if(!layer.metadata) {
+			layer.metadata = {}
+		}
+		if(!"mapolo:color" in layer.metadata) {
+			layer.metadata["mapolo:color"] = randomColor()
+		}
+	  return layer
+	})
+}
 
 // A wrapper around Mapbox GL style to publish
 // and subscribe to map changes
@@ -7,24 +20,56 @@ export class StyleManager {
 		this.commandHistory = [];
 		this.subscribers = [];
 		this.mapStyle = mapStyle;
+
+		if(this.mapStyle) {
+			this.mapStyle.layers = assignColorsToLayers(this.mapStyle.layers)
+		}
 	}
 
 	onStyleChange(cb) {
 		this.subscribers.push(cb);
 	}
 
-	changeStyle(command) {
-		this.commandHistory.push(command)
-		this.subscribers.forEach(f => f(command))
-		console.log(command)
+	changeStyle(change) {
+		this.commandHistory.push(change)
+		this.subscribers.forEach(f => f(change))
+		console.log(change)
 	}
 
 	exportStyle() {
 		return JSON.stringify(this.mapStyle, null, 4)
 	}
 
+	settings() {
+		const { name, sprite, glyphs, owner } = this.mapStyle
+		return { name, sprite, glyphs, owner }
+	}
+
+	set name(val) {
+	    this.mapStyle.name = val
+	}
+
+	set owner(val) {
+	    this.mapStyle.owner = val
+	}
+
+	set glyphs(val) {
+	    this.mapStyle.glyphs = val
+			this.changeStyle({
+				command: 'setStyle',
+				args: [this.mapStyle]
+			})
+	}
+
+	set sprite(val) {
+	    this.mapStyle.sprite = val
+			this.changeStyle({
+				command: 'setStyle',
+				args: [this.mapStyle]
+			})
+	}
+
 	layer(layerId) {
-		console.log(this.mapStyle)
 		return this.mapStyle.layers[layerId]
 	}
 

src/template.html

@@ -4,6 +4,7 @@
   <meta charset="utf-8">
   <title><%= htmlWebpackPlugin.options.title %></title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
+	<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" rel="stylesheet">
 </head>
 <body>
 	<div id="app">Loading...</div>

src/theme.js

@@ -41,7 +41,7 @@ const border = {
 const dark = {
   name: 'Dark',
   color: colors.white,
-	fontFamily: 'Open Sans Bold, sans-serif',
+	fontFamily: 'Roboto, sans-serif',
   scale,
 	fontSizes,
   colors,
@@ -83,7 +83,11 @@ const dark = {
 		fontWeight: 400,
 		minHeight: scale[3]
 	},
+	Label: {
+		fontWeight: 300,
+	},
 	Input: {
+		fontWeight: 300,
 		fontSize: fontSizes[5],
 	},
 }

src/toolbar.jsx

@@ -49,7 +49,6 @@ export class Toolbar extends React.Component {
 			</Block>
 		}
 
-		console.log(this.state)
 		return <Container style={{
 			zIndex: 100,
 			position: "fixed",

src/workspace.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { LayerEditor } from './layers.jsx'
+import { SettingsEditor } from './settings.jsx'
 import theme from './theme.js'
 
 /** The workspace drawer contains the editor components depending on the context
@@ -17,6 +18,10 @@ export class WorkspaceDrawer extends React.Component {
 			workspaceContent = <LayerEditor styleManager={this.props.styleManager}/>
 		}
 
+		if(this.props.workContext === "settings" && this.props.styleManager.mapStyle) {
+			workspaceContent = <SettingsEditor styleManager={this.props.styleManager}/>
+		}
+
 		return <div style={{
 			zIndex: 100,
 			position: "fixed",