diff --git a/src/about.jsx b/src/about.jsx new file mode 100644 index 00000000..196254a1 --- /dev/null +++ b/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
+ + + About + + + +

Mapital – Visual Map Editor for Mapbox GL

+

+ 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. +

+

+ The source code is openly licensed and available on github. +

+
+
+ } +} diff --git a/src/app.jsx b/src/app.jsx index 446b9707..a19042a4 100644 --- a/src/app.jsx +++ b/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)} /> diff --git a/src/toolbar.jsx b/src/toolbar.jsx index 098cdfa6..6885f891 100644 --- a/src/toolbar.jsx +++ b/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 { + + + } } diff --git a/src/workspace.jsx b/src/workspace.jsx index 44390f64..7f9ff5be 100644 --- a/src/workspace.jsx +++ b/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 = + } + return