From a0ed6a379bf268e11c69e6cb0d753ccbc82a6922 Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Sun, 23 Sep 2018 09:05:08 +0100
Subject: [PATCH] Always show layer visibility toggle in layer list

---
 src/components/layers/LayerListItem.jsx | 13 +++++++++--
 src/styles/_layer.scss                  | 29 +++++++++++++++++--------
 2 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/src/components/layers/LayerListItem.jsx b/src/components/layers/LayerListItem.jsx
index 805e50f..d1bf0d4 100644
--- a/src/components/layers/LayerListItem.jsx
+++ b/src/components/layers/LayerListItem.jsx
@@ -31,7 +31,8 @@ class IconAction extends React.Component {
   static propTypes = {
     action: PropTypes.string.isRequired,
     onClick: PropTypes.func.isRequired,
-    wdKey: PropTypes.string
+    wdKey: PropTypes.string,
+    classBlockName: PropTypes.string,
   }
 
   renderIcon() {
@@ -44,10 +45,15 @@ class IconAction extends React.Component {
   }
 
   render() {
+    let classAdditions = '';
+    if (this.props.classBlockName) {
+      classAdditions = `maputnik-layer-list-icon-action__${this.props.classBlockName}`;
+    }
+
     return <button
       tabIndex="-1"
       title={this.props.action}
-      className="maputnik-layer-list-icon-action"
+      className={`maputnik-layer-list-icon-action ${classAdditions}`}
       data-wd-key={this.props.wdKey}
       onClick={this.props.onClick}
     >
@@ -105,16 +111,19 @@ class LayerListItem extends React.Component {
         <IconAction
           wdKey={"layer-list-item:"+this.props.layerId+":delete"}
           action={'delete'}
+          classBlockName="delete"
           onClick={e => this.props.onLayerDestroy(this.props.layerId)}
         />
         <IconAction
           wdKey={"layer-list-item:"+this.props.layerId+":copy"}
           action={'duplicate'}
+          classBlockName="duplicate"
           onClick={e => this.props.onLayerCopy(this.props.layerId)}
         />
         <IconAction
           wdKey={"layer-list-item:"+this.props.layerId+":toggle-visibility"}
           action={this.props.visibility === 'visible' ? 'hide' : 'show'}
+          classBlockName="visibility"
           onClick={e => this.props.onLayerVisibilityToggle(this.props.layerId)}
         />
     </li>
diff --git a/src/styles/_layer.scss b/src/styles/_layer.scss
index 391c66a..7a269a8 100644
--- a/src/styles/_layer.scss
+++ b/src/styles/_layer.scss
@@ -58,22 +58,33 @@
     }
   }
 
+  .maputnik-layer-list-icon-action {
+    background: initial;
+    border: none;
+    padding: 0 2px;
+
+    svg {
+      fill: darken($color-lowgray, 20);
+
+      &:hover {
+        fill: $color-white;
+      }
+    }
+  }
+
+  .maputnik-layer-list-icon-action__visibility {
+    display: block;
+  }
+
   .maputnik-layer-list-item:hover,
   .maputnik-layer-list-item-selected {
     background-color: lighten($color-black, 2);
 
     .maputnik-layer-list-icon-action {
       display: block;
-      background: initial;
-      border: none;
-      padding: 0 2px;
-    }
 
-    .maputnik-layer-list-icon-action svg {
-      fill: darken($color-lowgray, 0.5);
-
-      &:hover {
-        fill: $color-white;
+      svg {
+        fill: darken($color-lowgray, 0.5);
       }
     }
   }