Move add modal to layer list

src/components/App.jsx

@@ -239,6 +239,7 @@ export default class App extends React.Component {
       onLayerSelect={this.onLayerSelect.bind(this)}
       selectedLayerIndex={this.state.selectedLayerIndex}
       layers={layers}
+      sources={this.state.sources}
     />
 
     const layerEditor = selectedLayer ? <LayerEditor

src/components/Toolbar.jsx

@@ -15,10 +15,8 @@ import MdInsertEmoticon from 'react-icons/lib/md/insert-emoticon'
 import MdFontDownload from 'react-icons/lib/md/font-download'
 import HelpIcon from 'react-icons/lib/md/help-outline'
 import InspectionIcon from 'react-icons/lib/md/find-in-page'
-import AddIcon from 'react-icons/lib/md/add-circle-outline'
 
 import logoImage from '../img/maputnik.png'
-import AddModal from './modals/AddModal'
 import SettingsModal from './modals/SettingsModal'
 import SourcesModal from './modals/SourcesModal'
 import OpenModal from './modals/OpenModal'
@@ -108,13 +106,6 @@ export default class Toolbar extends React.Component {
           isOpen={this.state.isOpen.sources}
           onOpenToggle={this.toggleModal.bind(this, 'sources')}
       />
-      <AddModal
-          mapStyle={this.props.mapStyle}
-          sources={this.props.sources}
-          isOpen={this.state.isOpen.add}
-          onOpenToggle={this.toggleModal.bind(this, 'add')}
-          onStyleChange={this.props.onStyleChanged}
-      />
       <ToolbarLink
         href={"https://github.com/maputnik/editor"}
         className="maputnik-toolbar-logo"
@@ -127,10 +118,6 @@ export default class Toolbar extends React.Component {
         <IconText>Open</IconText>
       </ToolbarAction>
       {this.downloadButton()}
-      <ToolbarAction onClick={this.toggleModal.bind(this, 'add')}>
-        <AddIcon />
-        <IconText>Add Layer</IconText>
-      </ToolbarAction>
       <ToolbarAction onClick={this.toggleModal.bind(this, 'sources')}>
         <SourcesIcon />
         <IconText>Sources</IconText>

src/components/inputs/AutocompleteInput.jsx

@@ -16,8 +16,7 @@ class AutocompleteInput extends React.Component {
   }
 
   render() {
-
+    const AutocompleteMenu = (items, value, style) => <div className={"maputnik-autocomplete-menu"} children={items} />
-    const AutocompleteMenu = (items, value, style) => <div className={"maputnik-autocomplete-menu"} children={props.items} />
 
     return <Autocomplete
       wrapperProps={{

src/components/layers/LayerList.jsx

@@ -4,6 +4,7 @@ import cloneDeep from 'lodash.clonedeep'
 import Button from '../Button'
 import LayerListItem from './LayerListItem'
 import AddIcon from 'react-icons/lib/md/add-circle-outline'
+import AddModal from '../modals/AddModal'
 
 import style from '../../libs/style.js'
 import {SortableContainer, SortableHandle, arrayMove} from 'react-sortable-hoc';
@@ -13,6 +14,7 @@ const layerListPropTypes = {
   selectedLayerIndex: React.PropTypes.number.isRequired,
   onLayersChange: React.PropTypes.func.isRequired,
   onLayerSelect: React.PropTypes.func,
+  sources: React.PropTypes.object.isRequired,
 }
 
 // List of collapsible layer editors
@@ -23,6 +25,15 @@ class LayerListContainer extends React.Component {
     onLayerSelect: () => {},
   }
 
+  constructor(props) {
+    super(props)
+    this.state = {
+      isOpen: {
+        add: false,
+      }
+    }
+  }
+
   onLayerDestroy(layerId) {
     const remainingLayers = this.props.layers.slice(0)
     const idx = style.indexOfLayer(remainingLayers, layerId)
@@ -53,6 +64,15 @@ class LayerListContainer extends React.Component {
     this.props.onLayersChange(changedLayers)
   }
 
+  toggleModal(modalName) {
+    this.setState({
+      isOpen: {
+        ...this.state.isOpen,
+        [modalName]: !this.state.isOpen[modalName]
+      }
+    })
+  }
+
   render() {
     const layerPanels = this.props.layers.map((layer, index) => {
       const layerId = layer.id
@@ -70,10 +90,21 @@ class LayerListContainer extends React.Component {
       />
     })
     return <div className="maputnik-layer-list">
+      <AddModal
+          layers={this.props.layers}
+          sources={this.props.sources}
+          isOpen={this.state.isOpen.add}
+          onOpenToggle={this.toggleModal.bind(this, 'add')}
+          onLayersChange={this.props.onLayersChange}
+      />
       <header className="maputnik-layer-list-header">
         <span>Layers</span>
         <span className="maputnik-space" />
-        <Button className="maputnik-add-layer">Add Layer</Button>
+        <Button
+          onClick={this.toggleModal.bind(this, 'add')}
+          className="maputnik-add-layer">
+      Add Layer
+      </Button>
       </header>
       <ul className="maputnik-layer-list-container">
         {layerPanels}

src/components/modals/AddModal.jsx

@@ -13,8 +13,8 @@ import LayerSourceLayerBlock from '../layers/LayerSourceLayerBlock'
 
 class AddModal extends React.Component {
   static propTypes = {
-    mapStyle: React.PropTypes.object.isRequired,
+    layers: React.PropTypes.array.isRequired,
-    onStyleChange: React.PropTypes.func.isRequired,
+    onLayersChange: React.PropTypes.func.isRequired,
     isOpen: React.PropTypes.bool.isRequired,
     onOpenToggle: React.PropTypes.func.isRequired,
 
@@ -23,7 +23,7 @@ class AddModal extends React.Component {
   }
 
   addLayer() {
-    const changedLayers = this.props.mapStyle.layers.slice(0)
+    const changedLayers = this.props.layers.slice(0)
     const layer = {
       id: this.state.id,
       type: this.state.type,
@@ -38,12 +38,7 @@ class AddModal extends React.Component {
 
     changedLayers.push(layer)
 
-    const changedStyle = {
+    this.props.onLayersChange(changedLayers)
-      ...this.props.mapStyle,
-      layers: changedLayers,
-    }
-
-    this.props.onStyleChange(changedStyle)
     this.props.onOpenToggle(false)
   }
 

src/styles/_layout.scss

@@ -13,34 +13,35 @@
 .maputnik-layout {
   font-family: $font-family;
   color: $color-white;
-}
+
-.maputnik-layout-list {
+  &-list {
-  position: fixed;
+    position: fixed;
-  bottom: 0px;
+    bottom: 0px;
-  height: 100%;
+    height: 100%;
-  top: 40px;
+    top: 40px;
-  left: 0px;
+    left: 0px;
-  z-index: 1;
+    z-index: 3;
-  width: 200px;
+    width: 200px;
-  overflow: hidden;
+    overflow: hidden;
-  background-color: $color-black;
+    background-color: $color-black;
-}
+  }
-.maputnik-layout-drawer {
+  &-drawer {
-  position: fixed;
+    position: fixed;
-  bottom: 0px;
+    bottom: 0px;
-  height: 100%;
+    height: 100%;
-  top: 40px;
+    top: 40px;
-  left: 200px;
+    left: 200px;
-  z-index: 1;
+    z-index: 1;
-  width: 350px;
+    width: 350px;
-  background-color: $color-black;
+    background-color: $color-black;
-}
+  }
-.maputnik-layout-bottom {
+  &-bottom {
-  position: fixed;
+    position: fixed;
-  height: 50px;
+    height: 50px;
-  bottom: 0px;
+    bottom: 0px;
-  left: 550px;
+    left: 550px;
-  z-index: 1;
+    z-index: 1;
-  width: 100%;
+    width: 100%;
-  background-color: $color-black;
+    background-color: $color-black;
+  }
 }