From a91a1e99e016177ffbedccadb8bba09d2061d13b Mon Sep 17 00:00:00 2001
From: Lukas Martinelli <me@lukasmartinelli.ch>
Date: Sat, 17 Dec 2016 16:43:25 +0100
Subject: [PATCH] Imrove layer list design

---
 package.json            |  1 +
 src/app.jsx             |  4 +--
 src/layers/editor.jsx   |  7 ------
 src/layers/list.jsx     | 25 ++++++------------
 src/layers/listitem.jsx | 56 +++++++++++++++++++++++++++++++++++++++++
 src/scrollbars.scss     |  2 +-
 src/theme.js            |  2 +-
 src/toolbar.jsx         |  2 +-
 8 files changed, 69 insertions(+), 30 deletions(-)
 create mode 100644 src/layers/listitem.jsx

diff --git a/package.json b/package.json
index 7383f7c..951c8fe 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "mapbox-gl-style-spec": "mapbox/mapbox-gl-style-spec#83b1a3e5837d785af582efd5ed1a212f2df6a4ae",
     "ol-mapbox-style": "0.0.11",
     "openlayers": "^3.19.1",
+    "radium": "^0.18.1",
     "randomcolor": "^0.4.4",
     "react": "^15.4.0",
     "react-addons-pure-render-mixin": "^15.4.0",
diff --git a/src/app.jsx b/src/app.jsx
index d0ddab4..b56d3d7 100644
--- a/src/app.jsx
+++ b/src/app.jsx
@@ -123,7 +123,7 @@ export default class App extends React.Component {
         top: 50,
         left: 0,
         zIndex: 100,
-        width: 200,
+        width: 180,
         overflow: "hidden",
         backgroundColor: colors.gray
       }}>
@@ -136,7 +136,7 @@ export default class App extends React.Component {
       <div style={{
         ...fullHeight,
         top: 50,
-        left: 200,
+        left: 180,
         zIndex: 100,
         width: 300,
         overflow: "hidden",
diff --git a/src/layers/editor.jsx b/src/layers/editor.jsx
index 5988a02..b8a0511 100644
--- a/src/layers/editor.jsx
+++ b/src/layers/editor.jsx
@@ -128,13 +128,6 @@ export class LayerEditor extends React.Component {
 
     return <div style={{
         padding: theme.scale[0],
-        borderBottom: 1,
-        borderTop: 1,
-        borderLeft: 2,
-        borderRight: 0,
-        borderStyle: "solid",
-        borderColor: theme.borderColor,
-        borderLeftColor: this.props.layer.getIn(['metadata', 'maputnik:color'])
       }}>
       <Toolbar>
         <NavItem style={{fontWeight: 400}}>
diff --git a/src/layers/list.jsx b/src/layers/list.jsx
index 12de4f0..b548a48 100644
--- a/src/layers/list.jsx
+++ b/src/layers/list.jsx
@@ -7,6 +7,7 @@ import NavItem from 'rebass/dist/NavItem'
 import Space from 'rebass/dist/Space'
 
 import { LayerEditor } from './editor.jsx'
+import LayerListItem from './listitem.jsx'
 import scrollbars from '../scrollbars.scss'
 import PureRenderMixin from 'react-addons-pure-render-mixin';
 import theme from '../theme.js'
@@ -39,25 +40,13 @@ export class LayerList extends React.Component {
   }
 
   render() {
-    var layerPanels = []
-    layerPanels = this.props.layers.map(layer => {
+    const layerPanels = this.props.layers.map(layer => {
       const layerId = layer.get('id')
-      return <div key={layerId} style={{
-          padding: theme.scale[0],
-          borderBottom: 1,
-          borderTop: 1,
-          borderLeft: 2,
-          borderRight: 0,
-          borderStyle: "solid",
-          borderColor: theme.borderColor
-      }}>
-        <Toolbar onClick={() => this.props.onLayerSelected(layerId)}>
-          <NavItem style={{fontWeight: 400}}>
-            #{layerId}
-          </NavItem>
-          <Space auto x={1} />
-        </Toolbar>
-      </div>
+      return <LayerListItem
+        key={layerId}
+        layerId={layerId}
+        onLayerSelected={this.props.onLayerSelected}
+      />
     }).toIndexedSeq()
 
     return <div>
diff --git a/src/layers/listitem.jsx b/src/layers/listitem.jsx
new file mode 100644
index 0000000..61366ea
--- /dev/null
+++ b/src/layers/listitem.jsx
@@ -0,0 +1,56 @@
+import React from 'react'
+import Radium from 'radium'
+import Immutable from 'immutable'
+import color from 'color'
+
+import Heading from 'rebass/dist/Heading'
+import Toolbar from 'rebass/dist/Toolbar'
+import NavItem from 'rebass/dist/NavItem'
+import Space from 'rebass/dist/Space'
+
+import { LayerEditor } from './editor.jsx'
+import scrollbars from '../scrollbars.scss'
+import PureRenderMixin from 'react-addons-pure-render-mixin';
+import theme from '../theme.js'
+
+@Radium
+class LayerListItem extends React.Component {
+  static propTypes = {
+    layerId: React.PropTypes.number.isRequired,
+    onLayerSelected: React.PropTypes.func.isRequired,
+  }
+
+  constructor(props) {
+    super(props)
+    this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
+  }
+
+  render() {
+    return <div key={this.props.layerId} style={{
+        borderBottom: 1,
+        borderLeft: 2,
+        borderRight: 0,
+        borderStyle: "solid",
+        borderColor: color(theme.colors.gray).lighten(0.1).hexString(),
+    }}>
+      <div
+        onClick={() => this.props.onLayerSelected(this.props.layerId)}
+        style={{
+          backgroundColor: theme.colors.gray,
+          ":hover": {
+            backgroundColor: color(theme.colors.gray).lighten(0.15).hexString(),
+          }
+        }}
+      >
+        <NavItem style={{
+          fontWeight: 400,
+          color: theme.colors.lowgray,
+        }}>
+          #{this.props.layerId}
+        </NavItem>
+      </div>
+    </div>
+  }
+}
+
+export default Radium(LayerListItem);
diff --git a/src/scrollbars.scss b/src/scrollbars.scss
index e7d44eb..6c03958 100644
--- a/src/scrollbars.scss
+++ b/src/scrollbars.scss
@@ -1,6 +1,6 @@
 .darkScrollbar::-webkit-scrollbar {
     background-color: #26282e;
-    width: 10px;
+    width: 5px;
 }
 
 .darkScrollbar::-webkit-scrollbar-thumb {
diff --git a/src/theme.js b/src/theme.js
index c7b1dd2..a658bdc 100644
--- a/src/theme.js
+++ b/src/theme.js
@@ -48,7 +48,7 @@ export const inputBase = {
 }
 
 const scale = [3, 5, 10, 30, 40]
-const fontSizes = [28, 24, 20, 16, 14, 12, 10]
+const fontSizes = [26, 20, 16, 14, 12, 10]
 
 const border = {
   borderColor: colors.black,
diff --git a/src/toolbar.jsx b/src/toolbar.jsx
index c8ef2fa..3b43ea6 100644
--- a/src/toolbar.jsx
+++ b/src/toolbar.jsx
@@ -122,7 +122,7 @@ export class Toolbar extends React.Component {
         toggle={() => this.toggleSettings.bind(this)}
       />
       <InlineBlock>
-          <Button style={{width: 300, textAlign: 'left'}}>
+          <Button style={{width: 180, textAlign: 'left'}}>
             <img src="https://github.com/maputnik/editor/raw/master/media/maputnik.png" alt="Maputnik" style={{width: 40, height: 40, paddingRight: 5, verticalAlign: 'middle'}}/>
             <span style={{fontSize: 20 }}>Maputnik</span>
           </Button>