Make the whole layer label draggable

src/components/layers/LayerListItem.jsx

@@ -7,23 +7,16 @@ import {MdMenu, MdContentCopy, MdVisibility, MdVisibilityOff, MdDelete} from 're
 import LayerIcon from '../icons/LayerIcon'
 import {SortableElement, SortableHandle} from 'react-sortable-hoc'
 
-class LayerTypeDragHandle extends React.Component {
-  static propTypes = LayerIcon.propTypes
 
-  render() {
-    return <div className="layer-handle">
-      <div className="layer-handle__handle">
-        <MdMenu style={{marginRight: "5px"}} />
-      </div>
-      <LayerIcon
-        className="layer-handle__icon"
-        {...this.props}
-      />
-    </div>
-  }
-}
-
-const LayerTypeDragHandleSortable = SortableHandle((props) => <LayerTypeDragHandle {...props} />)
+const DraggableLabel = SortableHandle((props) => {
+  return <div className="maputnik-layer-list-item-handle">
+    <LayerIcon
+      className="layer-handle__icon"
+      type={props.layerType}
+    />
+    <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,14 +45,12 @@
     z-index: 2000;
     cursor: pointer;
     position: relative;
-    padding: 5px 10px;
+    padding: 5px;
     line-height: 1.3;
     max-height: 50px;
     opacity: 1;
     -webkit-transition: opacity 600ms, visibility 600ms;
     transition: opacity 600ms, visibility 600ms;
-    padding-left: 0;
-    margin-left: -4px;
 
     @media screen and (prefers-reduced-motion: reduce) {
       transition-duration: 0;
@@ -234,29 +241,9 @@
   }
 }
 
-.layer-handle {
-  width: 35px;
-  flex-shrink: 0;
-  cursor: move;
-
-  &__handle {
-    margin-right: 4px;
-    display: inline-block;
-    width: 14px;
-    height: 14px;
-
-    :not(:hover) {
-      path {
-        fill: #555;
-      }
-    }
-  }
-
-  &__icon {
-    padding-right: 3px;
-    display: inline-block;
-    width: 14px;
-    height: 14px;
-  }
+.collapser {
+  padding: 0;
+  background: none;
+  border: none;
+  color: inherit;
 }
-