From 4ebc143ed87852ba20c0392898e0363c1e3eb345 Mon Sep 17 00:00:00 2001
From: Lukas Martinelli <me@lukasmartinelli.ch>
Date: Sun, 18 Dec 2016 17:28:59 +0100
Subject: [PATCH] Icons for layer types

---
 src/fields/color.jsx     |  2 +-
 src/icons/background.jsx | 15 +++++++++++++++
 src/icons/fill.jsx       | 15 +++++++++++++++
 src/icons/layer.jsx      | 35 +++++++++++++++++++++++++++++++++++
 src/icons/line.jsx       | 15 +++++++++++++++
 src/icons/symbol.jsx     | 18 ++++++++++++++++++
 src/layers/list.jsx      |  3 ++-
 src/layers/listitem.jsx  | 20 ++++++++++++++++----
 src/scrollcontainer.jsx  |  1 -
 9 files changed, 117 insertions(+), 7 deletions(-)
 create mode 100644 src/icons/background.jsx
 create mode 100644 src/icons/fill.jsx
 create mode 100644 src/icons/layer.jsx
 create mode 100644 src/icons/line.jsx
 create mode 100644 src/icons/symbol.jsx

diff --git a/src/fields/color.jsx b/src/fields/color.jsx
index 8cd477f5..77deaa80 100644
--- a/src/fields/color.jsx
+++ b/src/fields/color.jsx
@@ -35,7 +35,7 @@ class ColorField extends React.Component {
         left: 287
       }}>
       <ChromePicker
-        color={getColor(this.props.value)}
+        color={this.props.value ? getColor(this.props.value) : null}
         onChange={c => this.props.onChange(formatColor(c))}
       />
       <div
diff --git a/src/icons/background.jsx b/src/icons/background.jsx
new file mode 100644
index 00000000..cb1b85f8
--- /dev/null
+++ b/src/icons/background.jsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import IconBase from 'react-icon-base'
+
+
+export default class BackgroundIcon extends React.Component {
+  render() {
+    return (
+      <IconBase viewBox="0 0 20 20" {...this.props}>
+        <path d="m 1.821019,10.255581 7.414535,5.020197 c 0.372277,0.25206 0.958697,0.239771 1.30985,-0.02745 L 17.539255,9.926162 C 17.89041,9.658941 17.873288,9.238006 17.501015,8.985946 L 10.08648,3.9657402 C 9.714204,3.7136802 9.127782,3.7259703 8.776627,3.9931918 L 1.782775,9.315365 c -0.3511551,0.267221 -0.3340331,0.688156 0.03824,0.940216 z" />
+      </IconBase>
+    )
+  }
+}
+
+
diff --git a/src/icons/fill.jsx b/src/icons/fill.jsx
new file mode 100644
index 00000000..718a43ae
--- /dev/null
+++ b/src/icons/fill.jsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import IconBase from 'react-icon-base'
+
+
+export default class FillIcon extends React.Component {
+  render() {
+    return (
+      <IconBase viewBox="0 0 20 20" {...this.props}>
+        <path d="M 2.84978,9.763512 9.462149,4.7316391 16.47225,9.478015 9.859886,14.509879 2.84978,9.763512 m -1.028761,0.492069 7.414535,5.020197 c 0.372277,0.25206 0.958697,0.239771 1.30985,-0.02745 L 17.539255,9.926162 C 17.89041,9.658941 17.873288,9.238006 17.501015,8.985946 L 10.08648,3.9657402 C 9.714204,3.7136802 9.127782,3.7259703 8.776627,3.9931918 L 1.782775,9.315365 c -0.3511551,0.267221 -0.3340331,0.688156 0.03824,0.940216 l 0,0 z" />
+      </IconBase>
+    )
+  }
+}
+
+
diff --git a/src/icons/layer.jsx b/src/icons/layer.jsx
new file mode 100644
index 00000000..72d51e6c
--- /dev/null
+++ b/src/icons/layer.jsx
@@ -0,0 +1,35 @@
+import React from 'react'
+
+import LineIcon from './line.jsx'
+import FillIcon from './fill.jsx'
+import SymbolIcon from './symbol.jsx'
+import BackgroundIcon from './background.jsx'
+
+class LayerIcon extends React.Component {
+  static propTypes = {
+    type: React.PropTypes.string.isRequired,
+    style: React.PropTypes.object,
+  }
+
+  render() {
+    if (this.props.type === "fill") {
+      return <FillIcon style={this.props.style} />
+    }
+
+    if (this.props.type === "background") {
+      return <BackgroundIcon style={this.props.style} />
+    }
+
+    if (this.props.type === "line") {
+      return <LineIcon style={this.props.style} />
+    }
+
+    if (this.props.type === "symbol") {
+      return <SymbolIcon style={this.props.style} />
+    }
+
+    return null
+  }
+}
+
+export default LayerIcon
diff --git a/src/icons/line.jsx b/src/icons/line.jsx
new file mode 100644
index 00000000..ab5acbdc
--- /dev/null
+++ b/src/icons/line.jsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import IconBase from 'react-icon-base'
+
+
+export default class FillIcon extends React.Component {
+  render() {
+    return (
+      <IconBase viewBox="0 0 20 20" {...this.props}>
+        <path id="path8" d="M 12.34,1.29 C 12.5114,1.1076 12.7497,1.0029 13,1 13.5523,1 14,1.4477 14,2 14.0047,2.2478 13.907,2.4866 13.73,2.66 9.785626,6.5516986 6.6148407,9.7551593 2.65,13.72 2.4793,13.8963 2.2453,13.9971 2,14 1.4477,14 1,13.5523 1,13 0.9953,12.7522 1.093,12.5134 1.27,12.34 4.9761967,8.7018093 9.0356422,4.5930579 12.34,1.29 Z" transform="translate(2,2)" />
+      </IconBase>
+    )
+  }
+}
+
+
diff --git a/src/icons/symbol.jsx b/src/icons/symbol.jsx
new file mode 100644
index 00000000..941d9b97
--- /dev/null
+++ b/src/icons/symbol.jsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import IconBase from 'react-icon-base'
+
+
+export default class SymbolIcon extends React.Component {
+  render() {
+    return (
+      <IconBase viewBox="0 0 20 20" {...this.props}>
+        <g id="svg_1" transform="matrix(1.2718518,0,0,1.2601269,16.559526,-7.4065264)">
+          <path id="svg_2" d="m -9.7959773,11.060163 c -0.3734787,-0.724437 -0.3580577,-1.2147051 -0.00547,-1.8767873 l 8.6034029,-0.019416 c 0.39670292,0.6865644 0.38365934,1.4750693 -0.011097,1.8864953 l -3.1359613,-0.0033 -0.013695,7.1305 c -0.4055357,0.397083 -1.3146432,0.397083 -1.7769191,-0.02274 l 0.030226,-7.104422 z" />
+        </g>
+      </IconBase>
+    )
+  }
+}
+
+
+
diff --git a/src/layers/list.jsx b/src/layers/list.jsx
index 605e905b..d3c0fc6a 100644
--- a/src/layers/list.jsx
+++ b/src/layers/list.jsx
@@ -50,11 +50,12 @@ class LayerListContainer extends React.Component {
         index={index}
         key={layerId}
         layerId={layerId}
+        layerType={layer.get('type')}
         onLayerSelected={this.props.onLayerSelected}
       />
     })
     return <ScrollContainer>
-      <ul style={{ padding: theme.scale[2] }}>
+      <ul style={{ padding: theme.scale[1], margin: 0 }}>
         {layerPanels}
       </ul>
     </ScrollContainer>
diff --git a/src/layers/listitem.jsx b/src/layers/listitem.jsx
index c4ee3d67..8d4cee2e 100644
--- a/src/layers/listitem.jsx
+++ b/src/layers/listitem.jsx
@@ -8,20 +8,32 @@ import Toolbar from 'rebass/dist/Toolbar'
 import NavItem from 'rebass/dist/NavItem'
 import Space from 'rebass/dist/Space'
 
+import LayerIcon from '../icons/layer.jsx'
 import { LayerEditor } from './editor.jsx'
 import scrollbars from '../scrollbars.scss'
 import PureRenderMixin from 'react-addons-pure-render-mixin';
 import theme from '../theme.js'
 import {SortableElement, SortableHandle} from 'react-sortable-hoc';
-import MdDragHandle from 'react-icons/lib/md/drag-handle'
 
-const DragHandle = SortableHandle(() => <MdDragHandle />);
+
+@SortableHandle
+class LayerTypeDragHandle extends React.Component {
+  static propTypes = LayerIcon.propTypes
+
+  render() {
+    return <LayerIcon
+      {...this.props}
+      style={{width: 15, height: 15, paddingRight: 3}}
+    />
+  }
+}
 
 @SortableElement
 @Radium
 class LayerListItem extends React.Component {
   static propTypes = {
     layerId: React.PropTypes.string.isRequired,
+    layerType: React.PropTypes.string.isRequired,
     onLayerSelected: React.PropTypes.func.isRequired,
   }
 
@@ -54,8 +66,8 @@ class LayerListItem extends React.Component {
           backgroundColor: color(theme.colors.gray).lighten(0.15).hexString(),
         }
     }}>
-      <DragHandle />
-      <span>#{this.props.layerId}</span>
+      <LayerTypeDragHandle type={this.props.layerType} />
+      <span>{this.props.layerId}</span>
     </li>
   }
 }
diff --git a/src/scrollcontainer.jsx b/src/scrollcontainer.jsx
index 8c06cc8d..f8b64665 100644
--- a/src/scrollcontainer.jsx
+++ b/src/scrollcontainer.jsx
@@ -10,7 +10,6 @@ const ScrollContainer = (props) => {
     right:0,
     top:1,
     position: "absolute",
-    padding: theme.scale[2],
   }}>
     {props.children}
   </div>