Remove collapse and add tabs

package.json

@@ -30,14 +30,13 @@
     "randomcolor": "^0.4.4",
     "react": "^15.4.0",
     "react-addons-pure-render-mixin": "^15.4.0",
-    "react-collapse": "^2.3.3",
     "react-color": "^2.10.0",
     "react-dom": "^15.4.0",
     "react-file-reader-input": "^1.1.0",
     "react-height": "^2.1.1",
     "react-icon-base": "^2.0.4",
     "react-icons": "^2.2.1",
-    "react-motion": "^0.4.4",
+    "react-simpletabs": "^0.7.0",
     "react-sortable-hoc": "^0.4.5",
     "rebass": "^0.3.1",
     "request": "^2.79.0"

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,6 +155,13 @@ export class LayerEditor extends React.Component {
           <MdDelete />
         </NavItem>
       </Toolbar>
+      <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))}
@@ -164,9 +173,8 @@ export class LayerEditor extends React.Component {
               onSourceChange={console.log}
               onSourceLayerChange={console.log}
             />}
-        <div style={{padding: theme.scale[2], paddingRight: 0, backgroundColor: theme.colors.black}}>
+        </Tabs.Panel>
-        {this.layerFromType(this.props.layer.get('type'))}
+      </Tabs>
-        </div>
     </div>
   }
 }