From bbf75876f3496d8117ade0f00e92eb8ad800476f Mon Sep 17 00:00:00 2001
From: lukasmartinelli <me@lukasmartinelli.ch>
Date: Fri, 9 Sep 2016 18:53:57 +0200
Subject: [PATCH] Colored layers

---
 package.json      |  1 +
 src/app.jsx       |  2 +-
 src/layers.jsx    | 11 +++++-----
 src/settings.jsx  |  5 ++---
 src/style.js      | 55 ++++++++++++++++++++++++++++++++++++++++++-----
 src/template.html |  1 +
 src/theme.js      |  6 +++++-
 src/toolbar.jsx   |  1 -
 src/workspace.jsx |  5 +++++
 9 files changed, 71 insertions(+), 16 deletions(-)

diff --git a/package.json b/package.json
index 24837477..b2731fd7 100644
--- a/package.json
+++ b/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",
diff --git a/src/app.jsx b/src/app.jsx
index 3d0050aa..48067a68 100644
--- a/src/app.jsx
+++ b/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)}
diff --git a/src/layers.jsx b/src/layers.jsx
index 681a2e69..587f8ec1 100644
--- a/src/layers.jsx
+++ b/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>
diff --git a/src/settings.jsx b/src/settings.jsx
index c69f1614..a71b0c02 100644
--- a/src/settings.jsx
+++ b/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
diff --git a/src/style.js b/src/style.js
index 4b7b5770..e033fc0a 100644
--- a/src/style.js
+++ b/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]
 	}
 
diff --git a/src/template.html b/src/template.html
index 5af5b394..4805eb94 100644
--- a/src/template.html
+++ b/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>
diff --git a/src/theme.js b/src/theme.js
index e39d04bc..4fb5c783 100644
--- a/src/theme.js
+++ b/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],
 	},
 }
diff --git a/src/toolbar.jsx b/src/toolbar.jsx
index d8ea18aa..64083ed5 100644
--- a/src/toolbar.jsx
+++ b/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",
diff --git a/src/workspace.jsx b/src/workspace.jsx
index 147e13c9..e194cd63 100644
--- a/src/workspace.jsx
+++ b/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",