About page with basic infos and links to github repo

src/about.jsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import theme from './theme.js'
+
+import Heading from 'rebass/dist/Heading'
+import Container from 'rebass/dist/Container'
+import Input from 'rebass/dist/Input'
+import Toolbar from 'rebass/dist/Toolbar'
+import NavItem from 'rebass/dist/NavItem'
+import Space from 'rebass/dist/Space'
+
+import Immutable from 'immutable'
+import PureRenderMixin from 'react-addons-pure-render-mixin';
+
+/** About page with basic infos and links to github repo */
+export class About extends React.Component {
+	static propTypes = {}
+
+	constructor(props) {
+		super(props);
+		this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
+	}
+
+	render() {
+		return <div>
+			<Toolbar style={{marginRight: 20}}>
+				<NavItem>
+					<Heading>About</Heading>
+				</NavItem>
+			</Toolbar>
+			<Container>
+				<h3>Mapital – Visual Map Editor for Mapbox GL</h3>
+			  <p>
+					A free and open visual editor for the Mapbox GL styles targeted at developers and map designers. Creating your own custom map is easy with Mapital.
+				</p>
+				<p>
+				  The source code is openly licensed and available on <a href="https://github.com/mapital/editor">github</a>.
+				</p>
+			</Container>
+    </div>
+	}
+}

src/app.jsx

@@ -67,6 +67,10 @@ export default class App extends React.Component {
 		this.setState({ workContext: "settings" })
 	}
 
+	onOpenAbout() {
+		this.setState({ workContext: "about" })
+	}
+
 	onOpenLayers() {
 		this.setState({ workContext: "layers", })
 	}
@@ -88,6 +92,7 @@ export default class App extends React.Component {
 					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)}
 			/>

src/toolbar.jsx

@@ -13,6 +13,7 @@ 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 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 MdMap from 'react-icons/lib/md/map'
@@ -31,6 +32,8 @@ export class Toolbar extends React.Component {
 		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
@@ -116,6 +119,13 @@ export class Toolbar extends React.Component {
 					</Tooltip>
 				</Button>
 			</Block>
+			<Block>
+				<Button big={true} onClick={this.props.onOpenAbout}>
+					<Tooltip inverted rounded title="About">
+						<MdInfo />
+					</Tooltip>
+				</Button>
+			</Block>
 		</Container>
 	}
 }

src/workspace.jsx

@@ -2,6 +2,7 @@ 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
@@ -45,6 +46,10 @@ export class WorkspaceDrawer extends React.Component {
 			/>
 		}
 
+		if(this.props.workContext === "about") {
+			workspaceContent = <About />
+		}
+
 		return <div style={{
 			...fullHeight,
 			zIndex: 100,