Switch over to tabs

src/app.jsx

@@ -12,10 +12,10 @@ import theme from './theme.js'
 import layout from './layout.scss'
 
 export default class App extends React.Component {
-  static childContextTypes = {
-    rebass: React.PropTypes.object,
+	static childContextTypes = {
+		rebass: React.PropTypes.object,
 		reactIconBase: React.PropTypes.object
-  }
+	}
 
 	constructor(props) {
 		super(props)
@@ -26,8 +26,8 @@ export default class App extends React.Component {
 		}
 	}
 
-  getChildContext() {
-    return {
+	getChildContext() {
+		return {
 			rebass: theme,
 			reactIconBase: { size: 20 }
 		}
@@ -35,7 +35,7 @@ export default class App extends React.Component {
 
 	onStyleDownload() {
 		this.styleStore.save(newStyle)
-		const mapStyle =  JSON.stringify(this.state.currentStyle.toJS(), null, 4)
+		const mapStyle = JSON.stringify(this.state.currentStyle.toJS(), null, 4)
 		const blob = new Blob([mapStyle], {type: "application/json;charset=utf-8"});
 		saveAs(blob, mapStyle.id + ".json");
 	}
@@ -56,15 +56,15 @@ export default class App extends React.Component {
 	}
 
 	onOpenSettings() {
-		this.setState({ workContext: "settings", })
+		this.setState({ workContext: "settings" })
 	}
 
 	onOpenLayers() {
 		this.setState({ workContext: "layers", })
 	}
 
-  render() {
-    return <div style={{ fontFamily: theme.fontFamily, color: theme.color, fontWeight: 300 }}>
+	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)}
@@ -82,5 +82,5 @@ export default class App extends React.Component {
 				<Map mapStyle={this.state.currentStyle} />
 			</div>
 		</div>
-  }
+	}
 }

src/layers/background.jsx

@@ -3,9 +3,9 @@ import { Input } from 'rebass'
 
 export default class BackgroundLayer extends React.Component {
 	static propTypes = {
-    layer: React.PropTypes.object.isRequired,
-    onPaintChanged: React.PropTypes.func.isRequired
-  }
+		layer: React.PropTypes.object.isRequired,
+		onPaintChanged: React.PropTypes.func.isRequired
+	}
 
 	onPaintChanged(property, e) {
 		let value = e.target.value

src/layers/editor.jsx

@@ -20,14 +20,14 @@ class UnsupportedLayer extends React.Component {
 /** Layer editor supporting multiple types of layers. */
 export class LayerEditor extends React.Component {
 	static propTypes = {
-    layer: React.PropTypes.object.isRequired,
-    onLayerChanged: React.PropTypes.func.isRequired,
-    onLayerDestroyed: React.PropTypes.func.isRequired,
-  }
+		layer: React.PropTypes.object.isRequired,
+		onLayerChanged: React.PropTypes.func.isRequired,
+		onLayerDestroyed: React.PropTypes.func.isRequired,
+	}
 
-  static childContextTypes = {
+	static childContextTypes = {
 		reactIconBase: React.PropTypes.object
-  }
+	}
 
 	constructor(props) {
 		super(props);
@@ -36,12 +36,12 @@ export class LayerEditor extends React.Component {
 		}
 	}
 
-  getChildContext () {
-    return {
+	getChildContext () {
+		return {
 			reactIconBase: {
-        size: theme.fontSizes[4],
+				size: theme.fontSizes[4],
 				color: theme.colors.lowgray,
-      }
+			}
 		}
 	}
 
@@ -115,7 +115,7 @@ export class LayerEditor extends React.Component {
 				</NavItem>
 				<Space auto x={1} />
 				<NavItem onClick={this.toggleVisibility.bind(this)}>
-				  {visibleIcon}
+					{visibleIcon}
 				</NavItem>
 				<NavItem onClick={(e) => this.props.onLayerDestroyed(this.props.layer)}>
 					<MdDelete />

src/layers/list.jsx

@@ -8,8 +8,8 @@ import scrollbars from '../scrollbars.scss'
 export class LayerList extends React.Component {
 	static propTypes = {
 		layers: React.PropTypes.instanceOf(Immutable.List),
-    onLayersChanged: React.PropTypes.func.isRequired
-  }
+		onLayersChanged: React.PropTypes.func.isRequired
+	}
 
 	constructor(props) {
 		super(props)

src/map.jsx

@@ -6,8 +6,8 @@ import Immutable from 'immutable'
 
 export class Map extends React.Component {
 	static propTypes = {
-    mapStyle: React.PropTypes.instanceOf(Immutable.Map).isRequired,
-  }
+		mapStyle: React.PropTypes.instanceOf(Immutable.Map).isRequired,
+	}
 
 	componentWillReceiveProps(nextProps) {
 		// If the id has changed a new style has been uplaoded and
@@ -31,9 +31,9 @@ export class Map extends React.Component {
 		}
 	}
 
-  shouldComponentUpdate(nextProps, nextState) {
-    return nextProps.mapStyle !== this.props.mapStyle
-  }
+	shouldComponentUpdate(nextProps, nextState) {
+		return nextProps.mapStyle !== this.props.mapStyle
+	}
 
 	componentDidMount() {
 		//TODO: Read MapboxGL token from settings
@@ -44,9 +44,9 @@ export class Map extends React.Component {
 			style: this.props.mapStyle.toJS(),
 		});
 
-    map.on("style.load", (...args) => {
-      this.setState({ map });
-    });
+		map.on("style.load", (...args) => {
+			this.setState({ map });
+		});
 	}
 
 	render() {

src/settings.jsx

@@ -6,9 +6,9 @@ import Immutable from 'immutable'
 /** Edit global settings within a style such as the name */
 export class SettingsEditor extends React.Component {
 	static propTypes = {
-    mapStyle: React.PropTypes.instanceOf(Immutable.Map).isRequired,
-    onStyleChanged: React.PropTypes.func.isRequired
-  }
+		mapStyle: React.PropTypes.instanceOf(Immutable.Map).isRequired,
+		onStyleChanged: React.PropTypes.func.isRequired
+	}
 
 	onChange(property, e) {
 		const changedStyle = this.props.mapStyle.set(property, e.target.value)

src/theme.js

@@ -1,6 +1,6 @@
 const caps = {
-  textTransform: 'uppercase',
-  letterSpacing: '.2em'
+	textTransform: 'uppercase',
+	letterSpacing: '.2em'
 }
 
 const baseColors = {
@@ -34,22 +34,22 @@ 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,
+	name: 'Dark',
+	color: colors.white,
 	fontFamily: 'Roboto, sans-serif',
-  scale,
+	scale,
 	fontSizes,
-  colors,
-  inverted: colors.midGray,
+	colors,
+	inverted: colors.midGray,
 	...border,
 
 	Block: {
-    backgroundColor: colors.gray,
+		backgroundColor: colors.gray,
 		...border,
 		borderLeft: 0,
 		borderRight: 0,
@@ -63,17 +63,17 @@ const dark = {
 		fontWeight: 400,
 		color: colors.white,
 	},
-  Button: {
-    color: '#00d9f7',
-  },
-  Menu: {
-    color: '#00d9f7',
-    backgroundColor: '#000'
-  },
-  Message: {
-    color: '#111',
-    opacity: 15/16
-  },
+	Button: {
+		color: '#00d9f7',
+	},
+	Menu: {
+		color: '#00d9f7',
+		backgroundColor: '#000'
+	},
+	Message: {
+		color: '#111',
+		opacity: 15/16
+	},
 	Header: {
 		fontWeight: 400,
 	},

src/toolbar.jsx

@@ -14,25 +14,30 @@ import theme from './theme.js';
 
 export class Toolbar extends React.Component {
 	static propTypes = {
-    onStyleUpload: React.PropTypes.func.isRequired,
-    onStyleDownload: React.PropTypes.func.isRequired,
-    onStyleSave: React.PropTypes.func,
-    onOpenSettings: React.PropTypes.func,
-    onOpenLayers: React.PropTypes.func,
+		// 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 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,
-  }
+		styleAvailable: React.PropTypes.bool,
+	}
 
 	onUpload(_, files) {
 		const [e, file] = files[0];
 		const reader = new FileReader();
-    reader.readAsText(file, "UTF-8");
-    reader.onload = e => {
+		reader.readAsText(file, "UTF-8");
+		reader.onload = e => {
 			const style = JSON.parse(e.target.result);
 			this.props.onStyleUpload(style);
 		}
-    reader.onerror = e => console.log(e.target);
+		reader.onerror = e => console.log(e.target);
 	}
 
 	saveButton() {
@@ -72,13 +77,13 @@ export class Toolbar extends React.Component {
 			backgroundColor: theme.colors.black }
 		}>
 			<Block>
-				  <FileReaderInput onChange={this.onUpload.bind(this)}>
+				<FileReaderInput onChange={this.onUpload.bind(this)}>
 					<Button big={true} theme={this.props.styleAvailable ? "default" : "success"}>
 						<Tooltip inverted rounded title="Upload style">
-						  <MdFileUpload />
+							<MdFileUpload />
 						</Tooltip>
 					</Button>
-					</FileReaderInput>
+				</FileReaderInput>
 			</Block>
 			{this.downloadButton()}
 			{this.saveButton()}
@@ -86,14 +91,14 @@ export class Toolbar extends React.Component {
 				<Button big={true} onClick={this.props.onOpenLayers}>
 					<Tooltip inverted rounded title="Layers">
 						<MdLayers />
-          </Tooltip>
+					</Tooltip>
 				</Button>
 			</Block>
 			<Block>
 				<Button big={true} onClick={this.props.onOpenSettings}>
 					<Tooltip inverted rounded title="Settings">
 						<MdSettings />
-          </Tooltip>
+					</Tooltip>
 				</Button>
 			</Block>
 		</Container>

src/workspace.jsx

@@ -9,8 +9,8 @@ export class WorkspaceDrawer extends React.Component {
 	static propTypes = {
 		mapStyle: React.PropTypes.object.isRequired,
 		onStyleChanged: React.PropTypes.func.isRequired,
-    workContext: React.PropTypes.oneOf(['layers', 'settings']).isRequired,
-  }
+		workContext: React.PropTypes.oneOf(['layers', 'settings']).isRequired,
+	}
 
 	onLayersChanged(changedLayers) {
 		const changedStyle = this.props.mapStyle.set('layers', changedLayers)