From a52a548e518603e09e975a510374d379e3d1bf3e Mon Sep 17 00:00:00 2001
From: Lukas Martinelli <me@lukasmartinelli.ch>
Date: Mon, 19 Dec 2016 15:40:11 +0100
Subject: [PATCH] Remove collapse and add tabs

---
 package.json          |  3 +--
 src/index.css         | 20 ++++++++++++++++++++
 src/layers/editor.jsx | 38 +++++++++++++++++++++++---------------
 3 files changed, 44 insertions(+), 17 deletions(-)

diff --git a/package.json b/package.json
index 0604f8a4..0037a71f 100644
--- a/package.json
+++ b/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"
diff --git a/src/index.css b/src/index.css
index 23d607ab..f74a7fdb 100644
--- a/src/index.css
+++ b/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;
+}
diff --git a/src/layers/editor.jsx b/src/layers/editor.jsx
index a9a4ef65..8418b14c 100644
--- a/src/layers/editor.jsx
+++ b/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>
   }
 }