Icons for layer types

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

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>
+    )
+  }
+}
+
+

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>
+    )
+  }
+}
+
+

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

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>
+    )
+  }
+}
+
+

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>
+    )
+  }
+}
+
+
+

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>

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>
   }
 }

src/scrollcontainer.jsx

@@ -10,7 +10,6 @@ const ScrollContainer = (props) => {
     right:0,
     top:1,
     position: "absolute",
-    padding: theme.scale[2],
   }}>
     {props.children}
   </div>