Merge pull request #400 from orangemug/feature/make-layer-visibility-always-shown

Make layer visibility icon shown when hidden

src/components/layers/LayerListItem.jsx

@@ -31,7 +31,9 @@ class IconAction extends React.Component {
   static propTypes = {
     action: PropTypes.string.isRequired,
     onClick: PropTypes.func.isRequired,
-    wdKey: PropTypes.string
+    wdKey: PropTypes.string,
+    classBlockName: PropTypes.string,
+    classBlockModifier: PropTypes.string,
   }
 
   renderIcon() {
@@ -44,10 +46,21 @@ class IconAction extends React.Component {
   }
 
   render() {
+    const {classBlockName, classBlockModifier} = this.props;
+
+    let classAdditions = '';
+    if (classBlockName) {
+      classAdditions = `maputnik-layer-list-icon-action__${classBlockName}`;
+
+      if (classBlockModifier) {
+        classAdditions += ` maputnik-layer-list-icon-action__${classBlockName}--${classBlockModifier}`;
+      }
+    }
+
     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}
     >
@@ -90,6 +103,8 @@ class LayerListItem extends React.Component {
   }
 
   render() {
+    const visibilityAction = this.props.visibility === 'visible' ? 'show' : 'hide';
+
     return <li
       key={this.props.layerId}
       onClick={e => this.props.onLayerSelect(this.props.layerId)}
@@ -105,16 +120,20 @@ 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' ? 'show' : 'hide'}
+          action={visibilityAction}
+          classBlockName="visibility"
+          classBlockModifier={visibilityAction}
           onClick={e => this.props.onLayerVisibilityToggle(this.props.layerId)}
         />
     </li>

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--hide {
+    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);
       }
     }
   }