Hack on source modal

src/components/modals/Modal.jsx

@@ -4,7 +4,7 @@ import CloseIcon from 'react-icons/lib/md/close'
 
 import Overlay from './Overlay'
 import colors from '../../config/colors'
-import { margins } from '../../config/scales'
+import { margins, fontSizes } from '../../config/scales'
 
 class Modal extends React.Component {
   static propTypes = {
@@ -17,17 +17,21 @@ class Modal extends React.Component {
     return <Overlay isOpen={this.props.isOpen}>
       <div style={{
         minWidth: 350,
+        maxWidth: 600,
         backgroundColor: colors.gray,
       }}>
         <div style={{
           backgroundColor: colors.midgray,
           display: 'flex',
           flexDirection: 'row',
-          padding: margins[1]
+          padding: margins[1],
+          fontSize: fontSizes[4],
         }}>
           {this.props.title}
           <span style={{flexGrow: 1}} />
-          <a onClick={this.props.toggleOpen(false)}>
+          <a
+            onClick={this.props.toggleOpen(false)}
+            style={{ cursor: 'pointer' }} >
             <CloseIcon />
           </a>
         </div>

src/components/modals/SettingsModal.jsx

@@ -10,7 +10,7 @@ class SettingsModal extends React.Component {
   static propTypes = {
     mapStyle: React.PropTypes.object.isRequired,
     onStyleChanged: React.PropTypes.func.isRequired,
-    open: React.PropTypes.bool.isRequired,
+    isOpen: React.PropTypes.bool.isRequired,
     toggle: React.PropTypes.func.isRequired,
   }
 
@@ -31,11 +31,11 @@ class SettingsModal extends React.Component {
   render() {
     const inputProps = {
       style: {
-        backgroundColor: colors.gray
+        backgroundColor: colors.midgray
       }
     }
     return <Modal
-      isOpen={this.props.open}
+      isOpen={this.props.isOpen}
       toggleOpen={this.props.toggle}
       title={'StyleSettings'}
     >

src/components/modals/SourcesModal.jsx

@@ -0,0 +1,132 @@
+import React from 'react'
+import Modal from './Modal'
+import Heading from '../Heading'
+import InputBlock from '../inputs/InputBlock'
+import StringInput from '../inputs/StringInput'
+import publicSources from '../../config/tilesets.json'
+import colors from '../../config/colors'
+import { margins } from '../../config/scales'
+
+class PublicSource extends React.Component {
+  static propTypes = {
+    id: React.PropTypes.string.isRequired,
+    type: React.PropTypes.string.isRequired,
+    title: React.PropTypes.string.isRequired,
+    description: React.PropTypes.string.isRequired,
+    onSelect: React.PropTypes.func.isRequired,
+  }
+
+  render() {
+    return <div style={{
+        verticalAlign: 'top',
+        marginTop: margins[2],
+        marginRight: margins[2],
+        borderColor: colors.midgray,
+        borderStyle: 'solid',
+        borderWidth: 2,
+        display: 'inline-block',
+        width: 240,
+        height: 120,
+    }}>
+      <div style={{
+        backgroundColor: colors.midgray,
+        padding: margins[1],
+        display: 'flex',
+        flexDirection: 'row',
+      }}>
+        <span>{this.props.title}</span>
+        <span style={{flexGrow: 1}} />
+        <span>#{this.props.id}</span>
+      </div>
+      <div style={{
+        padding: margins[1],
+      }}>
+        <p>{this.props.description}</p>
+      </div>
+    </div>
+  }
+}
+
+class SourceEditor extends React.Component {
+  static propTypes = {
+    sourceId: React.PropTypes.string.isRequired,
+    source: React.PropTypes.object.isRequired,
+  }
+
+  render() {
+    const inputProps = {
+      style: {
+        backgroundColor: colors.midgray
+      }
+    }
+    return <div style={{
+    }}>
+      <InputBlock label={"Source ID"}>
+        <StringInput {...inputProps}
+          value={this.props.sourceId}
+        />
+      </InputBlock>
+      <InputBlock label={"Source URL"}>
+        <StringInput {...inputProps}
+          value={this.props.source.url}
+        />
+      </InputBlock>
+      <InputBlock label={"Source Type"}>
+        <StringInput {...inputProps}
+          value={this.props.source.type}
+        />
+      </InputBlock>
+    </div>
+  }
+}
+
+
+class SourcesModal extends React.Component {
+  static propTypes = {
+    mapStyle: React.PropTypes.object.isRequired,
+    isOpen: React.PropTypes.bool.isRequired,
+    toggle: React.PropTypes.func.isRequired,
+  }
+
+  render() {
+    const activeSources = Object.keys(this.props.mapStyle.sources).map(sourceId => {
+      const source = this.props.mapStyle.sources[sourceId]
+      return <SourceEditor sourceId={sourceId} source={source} />
+    })
+
+    const tilesetOptions = publicSources.map(tileset => {
+      return <PublicSource
+        id={tileset.id}
+        type={tileset.type}
+        title={tileset.title}
+        description={tileset.description}
+      />
+    })
+
+    const inputProps = {
+      style: {
+        backgroundColor: colors.midgray
+      }
+    }
+
+    return <Modal
+      isOpen={this.props.isOpen}
+      toggleOpen={this.props.toggle}
+      title={'Sources'}
+    >
+      <Heading level={4}>Active Sources</Heading>
+      {activeSources}
+
+      <Heading level={4}>Add New Source</Heading>
+      <InputBlock label={"TileJSON URL"}>
+        <StringInput {...inputProps} />
+      </InputBlock>
+      <Heading level={4}>Choose Public Source</Heading>
+      <div style={{maxwidth: 500}}>
+      {tilesetOptions}
+      </div>
+    </Modal>
+  }
+}
+
+export default SourcesModal

src/components/modals/TilesetsModal.jsx

@@ -1,44 +0,0 @@
-import React from 'react'
-
-import Modal from './Modal'
-
-import publicTilesets from '../../config/tilesets.json'
-import colors from '../../config/colors'
-import { margins } from '../../config/scales'
-
-class TilesetsModal extends React.Component {
-  static propTypes = {
-    mapStyle: React.PropTypes.object.isRequired,
-    open: React.PropTypes.bool.isRequired,
-    toggle: React.PropTypes.func.isRequired,
-  }
-
-  constructor(props) {
-    super(props)
-  }
-
-  render() {
-    const tilesetOptions = publicTilesets.map(tileset => {
-      return <div key={tileset.id} style={{
-        padding: margins[0],
-        borderBottom: 1,
-      }}>
-        #{tileset.id}
-        <br />
-        {tileset.url}
-      </div>
-    })
-
-    return <Modal
-      isOpen={this.props.open}
-      toggleOpen={this.props.toggle}
-      title={'Tilesets'}
-    >
-      <h2>Add New Tileset</h2>
-      <h2>Choose Public Tileset</h2>
-      {tilesetOptions}
-    </Modal>
-  }
-}
-
-export default TilesetsModal