Add open modal

src/components/Button.jsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import colors from '../config/colors'
+import { margins, fontSizes } from '../config/scales'
+
+class Button extends React.Component {
+  static propTypes = {
+    onClick: React.PropTypes.func.isRequired,
+    style: React.PropTypes.object,
+  }
+
+  render() {
+    return <a
+      onClick={this.props.onClick}
+      style={{
+        cursor: 'pointer',
+        backgroundColor: colors.midgray,
+        color: colors.lowgray,
+        fontSize: fontSizes[4],
+        padding: margins[1],
+        userSelect: 'none',
+        borderRadius: 2,
+        ...this.props.style,
+      }}>
+      {this.props.children}
+    </a>
+  }
+}
+
+export default Button

src/components/Paragraph.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import colors from '../config/colors'
+import { margins, fontSizes } from '../config/scales'
+
+const Paragraph = (props) => <p style={{
+  color: colors.lowgray,
+  fontSize: fontSizes[5],
+  ...props.style
+}}>
+  {props.children}
+</p>
+
+export default Paragraph

src/components/Toolbar.jsx

@@ -17,6 +17,7 @@ import MdFindInPage from 'react-icons/lib/md/find-in-page'
 
 import SettingsModal from './modals/SettingsModal'
 import SourcesModal from './modals/SourcesModal'
+import OpenModal from './modals/OpenModal'
 
 import style from '../libs/style'
 import colors from '../config/colors'
@@ -37,6 +38,7 @@ const ToolbarAction = props => <a onClick={props.onClick}
   {props.children}
 </a>
 
+
 export default class Toolbar extends React.Component {
   static propTypes = {
     mapStyle: React.PropTypes.object.isRequired,
@@ -54,21 +56,10 @@ export default class Toolbar extends React.Component {
     this.state = {
       openSettingsModal: false,
       openSourcesModal: false,
+      openOpenModal: false,
     }
   }
 
-  onUpload(_, files) {
-    const [e, file] = files[0];
-    const reader = new FileReader();
-    reader.readAsText(file, "UTF-8");
-    reader.onload = e => {
-      let mapStyle = JSON.parse(e.target.result)
-      mapStyle = style.ensureMetadataExists(mapStyle)
-      this.props.onStyleUpload(mapStyle);
-    }
-    reader.onerror = e => console.log(e.target);
-  }
-
   saveButton() {
     if(this.props.mapStyle.layers.length > 0) {
       return <ToolbarAction onClick={this.props.onStyleSave} big={true}>
@@ -94,6 +85,10 @@ export default class Toolbar extends React.Component {
     this.setState({openSourcesModal: !this.state.openSourcesModal})
   }
 
+  toggleOpen() {
+    this.setState({openOpenModal: !this.state.openOpenModal})
+  }
+
   render() {
     return <div style={{
       position: "fixed",
@@ -110,6 +105,10 @@ export default class Toolbar extends React.Component {
         isOpen={this.state.openSettingsModal}
         toggle={() => this.toggleSettings.bind(this)}
       />
+      <OpenModal
+        isOpen={this.state.openOpenModal}
+        toggle={() => this.toggleOpen.bind(this)}
+      />
       <SourcesModal
         mapStyle={this.props.mapStyle}
         onStyleChanged={this.props.onStyleChanged}
@@ -124,11 +123,9 @@ export default class Toolbar extends React.Component {
         <img src="https://github.com/maputnik/editor/raw/master/media/maputnik.png" alt="Maputnik" style={{width: 30, height: 30, paddingRight: 5, verticalAlign: 'middle'}}/>
         <span style={{fontSize: 20, verticalAlign: 'middle' }}>Maputnik</span>
       </ToolbarAction>
-      <ToolbarAction>
-        <FileReaderInput onChange={this.onUpload.bind(this)}>
-          <MdOpenInBrowser />
-          <IconText>Open</IconText>
-        </FileReaderInput>
+      <ToolbarAction onClick={this.toggleOpen.bind(this)}>
+        <MdOpenInBrowser />
+        <IconText>Open</IconText>
       </ToolbarAction>
       {this.downloadButton()}
       {this.saveButton()}

src/components/modals/OpenModal.jsx

@@ -0,0 +1,115 @@
+import React from 'react'
+import Modal from './Modal'
+import Heading from '../Heading'
+import Button from '../Button'
+import Paragraph from '../Paragraph'
+import FileReaderInput from 'react-file-reader-input'
+
+import FileUploadIcon from 'react-icons/lib/md/file-upload'
+import AddIcon from 'react-icons/lib/md/add-circle-outline'
+
+import colors from '../../config/colors'
+import { margins, fontSizes } from '../../config/scales'
+import publicStyles from '../../config/styles.json'
+
+class PublicStyle extends React.Component {
+  static propTypes = {
+    url: React.PropTypes.string.isRequired,
+    thumbnailUrl: React.PropTypes.string.isRequired,
+    title: React.PropTypes.string.isRequired,
+    onSelect: React.PropTypes.func.isRequired,
+  }
+
+  render() {
+    return <div style={{
+        verticalAlign: 'top',
+        marginTop: margins[2],
+        marginRight: margins[2],
+        backgroundColor: colors.gray,
+        display: 'inline-block',
+        width: 180,
+        fontSize: fontSizes[4],
+        color: colors.lowgray,
+    }}>
+      <Button style={{
+        backgroundColor: 'transparent',
+        padding: margins[2],
+        display: 'block',
+      }}>
+        <div style={{
+          display: 'flex',
+          flexDirection: 'row',
+        }}>
+          <span style={{fontWeight: 700}}>{this.props.title}</span>
+          <span style={{flexGrow: 1}} />
+          <AddIcon />
+        </div>
+        <img
+          style={{
+            display: 'block',
+            marginTop: margins[1],
+            maxWidth: '100%',
+          }}
+          src={this.props.thumbnailUrl}
+          alt={this.props.title}
+        />
+      </Button>
+    </div>
+  }
+}
+
+class OpenModal extends React.Component {
+  static propTypes = {
+    isOpen: React.PropTypes.bool.isRequired,
+    toggle: React.PropTypes.func.isRequired,
+    onStyleOpen: React.PropTypes.func.isRequired,
+  }
+
+  onUpload(_, files) {
+    const [e, file] = files[0];
+    const reader = new FileReader();
+    reader.readAsText(file, "UTF-8");
+    reader.onload = e => {
+      let mapStyle = JSON.parse(e.target.result)
+      mapStyle = style.ensureMetadataExists(mapStyle)
+      this.props.onStyleOpen(mapStyle);
+    }
+    reader.onerror = e => console.log(e.target);
+  }
+
+  render() {
+    const styleOptions = publicStyles.map(style => {
+      return <PublicStyle
+        key={style.key}
+        url={style.url}
+        title={style.title}
+        thumbnailUrl={style.thumbnail}
+      />
+    })
+
+    return <Modal
+      isOpen={this.props.isOpen}
+      toggleOpen={this.props.toggle}
+      title={'Open Style'}
+    >
+      <Heading level={4}>Upload Style</Heading>
+      <Paragraph>
+        Upload a JSON style from your computer.
+      </Paragraph>
+      <FileReaderInput onChange={this.onUpload.bind(this)}>
+        <Button>
+        <FileUploadIcon />
+        Upload
+        </Button>
+      </FileReaderInput>
+
+      <Heading level={4}>Gallery Styles</Heading>
+      <Paragraph>
+        Open one of the publicly available styles to start from.
+      </Paragraph>
+      {styleOptions}
+    </Modal>
+  }
+}
+
+export default OpenModal

src/components/modals/SourcesModal.jsx

@@ -2,6 +2,7 @@ import React from 'react'
 import Modal from './Modal'
 import Heading from '../Heading'
 import Button from '../Button'
+import Paragraph from '../Paragraph'
 import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
 import SelectInput from '../inputs/SelectInput'
@@ -187,11 +188,13 @@ class SourcesModal extends React.Component {
       <Heading level={4}>Add New Source</Heading>
       <div style={{maxWidth: 300}}>
         <p style={{color: colors.lowgray, fontSize: fontSizes[5]}}>Add a new source to your style. You can only choose the source type and id at creation time!</p>
-        <AddSource onSourceAdd={} />
+        <AddSource />
       </div>
 
       <Heading level={4}>Choose Public Source</Heading>
-      <p style={{color: colors.lowgray, fontSize: fontSizes[5]}}>Add one of the publicly availble sources to your style.</p>
+      <Paragraph>
+        Add one of the publicly availble sources to your style.
+      </Paragraph>
       <div style={{maxwidth: 500}}>
       {tilesetOptions}
       </div>