Merge pull request #459 from orangemug/feature/layer-list-ui-handle

Make whole layer label draggable

src/components/layers/LayerListItem.jsx

@@ -7,23 +7,16 @@ import {MdContentCopy, MdVisibility, MdVisibilityOff, MdDelete} from 'react-icon
 import LayerIcon from '../icons/LayerIcon'
 import {SortableElement, SortableHandle} from 'react-sortable-hoc'
 
-class LayerTypeDragHandle extends React.Component {
-  static propTypes = LayerIcon.propTypes
 
-  render() {
-    return <LayerIcon
-      {...this.props}
-      style={{
-        cursor: 'move',
-        width: 14,
-        height: 14,
-        paddingRight: 3,
-      }}
+const DraggableLabel = SortableHandle((props) => {
+  return <div className="maputnik-layer-list-item-handle">
+    <LayerIcon
+      className="layer-handle__icon"
+      type={props.layerType}
     />
-  }
-}
-
-const LayerTypeDragHandleSortable = SortableHandle((props) => <LayerTypeDragHandle {...props} />)
+    <span className="maputnik-layer-list-item-id">{props.layerId}</span>
+  </div>
+});
 
 class IconAction extends React.Component {
   static propTypes = {
@@ -111,8 +104,7 @@ class LayerListItem extends React.Component {
         "maputnik-layer-list-item-selected": this.props.isSelected,
         [this.props.className]: true,
       })}>
-        <LayerTypeDragHandleSortable type={this.props.layerType} />
-        <span className="maputnik-layer-list-item-id">{this.props.layerId}</span>
+        <DraggableLabel {...this.props} />
         <span style={{flexGrow: 1}} />
         <IconAction
           wdKey={"layer-list-item:"+this.props.layerId+":delete"}

src/styles/_layer.scss

@@ -24,6 +24,15 @@
     padding-bottom: $margin-5;
   }
 
+  &-item-handle {
+    flex: 1;
+    display: flex;
+
+    svg {
+      margin-right: 4px;
+    }
+  }
+
   &-item {
     font-weight: 400;
     color: $color-lowgray;
@@ -36,7 +45,7 @@
     z-index: 2000;
     cursor: pointer;
     position: relative;
-    padding: 5px 10px;
+    padding: 5px;
     line-height: 1.3;
     max-height: 50px;
     opacity: 1;
@@ -111,6 +120,8 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    color: inherit;
+    text-decoration: none;
   }
 
   &-group-header {