Remove collapse and add tabs

src/index.css

@@ -18,3 +18,23 @@
   color: rgb(142, 142, 142) !important;
   box-shadow: none !important;
 }
+
+ul.tabs-menu {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+
+li.tabs-menu-item {
+    display: inline-block;
+    color: rgb(142, 142, 142);
+    font-size: 10px;
+    background-color: rgb(28, 31, 36);
+    padding: 5px;
+    margin-right: 3px;
+}
+
+li.tabs-menu-item:hover {
+  background-color: rgb(28, 31, 32);
+  cursor: pointer;
+}

src/layers/editor.jsx

@@ -4,8 +4,8 @@ import Immutable from 'immutable'
 import Toolbar from 'rebass/dist/Toolbar'
 import NavItem from 'rebass/dist/NavItem'
 import Space from 'rebass/dist/Space'
+import Tabs from 'react-simpletabs'
 
-import Collapse from 'react-collapse'
 import theme from '../theme.js'
 import FillLayer from './fill.jsx'
 import LineLayer from './line.jsx'
@@ -14,6 +14,8 @@ import BackgroundLayer from './background.jsx'
 import SourceEditor from './source.jsx'
 import FilterEditor from '../filter/editor.jsx'
 
+
+
 import MdVisibility from 'react-icons/lib/md/visibility'
 import MdVisibilityOff from 'react-icons/lib/md/visibility-off'
 import MdDelete from 'react-icons/lib/md/delete'
@@ -153,20 +155,26 @@ export class LayerEditor extends React.Component {
           <MdDelete />
         </NavItem>
       </Toolbar>
-      <FilterEditor
-        filter={this.props.layer.get('filter', Immutable.List()).toJSON()}
-        onChange={f => this.onFilterChanged(Immutable.fromJS(f))}
-      />
-       {this.props.layer.get('type') !== 'background' && <SourceEditor
-          source={this.props.layer.get('source')}
-          sourceLayer={this.props.layer.get('source-layer')}
-          sources={this.props.sources}
-          onSourceChange={console.log}
-          onSourceLayerChange={console.log}
-        />}
-        <div style={{padding: theme.scale[2], paddingRight: 0, backgroundColor: theme.colors.black}}>
-        {this.layerFromType(this.props.layer.get('type'))}
-        </div>
+      <Tabs>
+        <Tabs.Panel title='Paint'>
+          <div style={{padding: theme.scale[2], paddingRight: 0, backgroundColor: theme.colors.black}}>
+          {this.layerFromType(this.props.layer.get('type'))}
+          </div>
+        </Tabs.Panel>
+        <Tabs.Panel title='Data'>
+          <FilterEditor
+            filter={this.props.layer.get('filter', Immutable.List()).toJSON()}
+            onChange={f => this.onFilterChanged(Immutable.fromJS(f))}
+          />
+           {this.props.layer.get('type') !== 'background' && <SourceEditor
+              source={this.props.layer.get('source')}
+              sourceLayer={this.props.layer.get('source-layer')}
+              sources={this.props.sources}
+              onSourceChange={console.log}
+              onSourceLayerChange={console.log}
+            />}
+        </Tabs.Panel>
+      </Tabs>
     </div>
   }
 }