From deec7894dd46558d9b376af1bcf306f927bd87ca Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Thu, 1 Nov 2018 08:12:40 +0000
Subject: [PATCH] Make the whole layer label draggable

---
 src/components/layers/LayerListItem.jsx | 28 ++++++----------
 src/styles/_layer.scss                  | 43 +++++++++----------------
 2 files changed, 25 insertions(+), 46 deletions(-)

diff --git a/src/components/layers/LayerListItem.jsx b/src/components/layers/LayerListItem.jsx
index 88834eb6..fa0fc452 100644
--- a/src/components/layers/LayerListItem.jsx
+++ b/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"}
diff --git a/src/styles/_layer.scss b/src/styles/_layer.scss
index cb9b5c89..a4d0a9a2 100644
--- a/src/styles/_layer.scss
+++ b/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;
 }
-