Change icon for the layer tools in the layer manager panel on the map…

… page (geonetwork#8376)

* Change icon for the layer tools in the layer manager panel on the map page.

The tools in the layer manager in the map are opened on hover. But the icon was misleading, it invited you to click on it. When you hovered the layer the icon disappeared leading to the thought that you couldn't click the icon and therefore couldn't open a menu and missing some extra options (that weren't there).

The tools are still opened on hover, making it clickable asks for some rebuilding, but the icon has changed and the color is dimmed.

* Make the layer tools menu clickable

web-ui/src/main/resources/catalog/components/viewer/layermanager/partials/layermanageritem.html

@@ -29,38 +29,7 @@
 
     <div class="flex-col flex-grow">
       <div class="width-100 flex-grow">
-        <span class="gn-layer-ordering btn-group btn-group-xs pull-right">
-          <!-- Layer Up -->
-          <a
-            href=""
-            class="btn btn-default"
-            ng-disabled="$first"
-            ng-click="moveLayer(layer, 1)"
-            title="{{'layerMoveUp'|translate}}"
-          >
-            <span class="fa fa-arrow-up"></span>
-          </a>
-          <!-- Layer Down -->
-          <a
-            href=""
-            class="btn btn-default"
-            ng-disabled="$last"
-            ng-click="moveLayer(layer, -1, $last)"
-            title="{{'layerMoveDown'|translate}}"
-          >
-            <span class="fa fa-arrow-down"></span>
-          </a>
-
-          <!-- Remove Layer -->
-          <a
-            href=""
-            class="btn btn-default"
-            data-ng-click="removeLayer(layer, map)"
-            title="{{'layerDelete'|translate}}"
-          >
-            <span class="fa fa-times"></span>
-          </a>
-        </span>
+
         <label
           class="gn-map-layer"
           for="layer-{{$index}}"
@@ -80,11 +49,55 @@
             </span>
           </span>
         </label>
+
       </div>
     </div>
 
     <div class="flex-col flex-self-center">
-      <span class="pull-right fa fa-ellipsis-v text-medium text-muted"></span>
+      <div class="dropdown dropdown-left">
+        <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+          <span class="fa fa-fw fa-ellipsis-vertical"></span>
+        </button>
+        <ul class="dropdown-menu dropdown-menu-left">
+          <li>
+            <span class=" btn-group btn-group-xs">
+              <!-- Layer Up -->
+              <a
+                href=""
+                class="btn btn-default"
+                ng-disabled="$first"
+                ng-click="moveLayer(layer, 1)"
+                title="{{'layerMoveUp'|translate}}"
+              >
+                <span class="fa fa-arrow-up"></span>
+              </a>
+
+              <!-- Layer Down -->
+              <a
+                href=""
+                class="btn btn-default"
+                ng-disabled="$last"
+                ng-click="moveLayer(layer, -1, $last)"
+                title="{{'layerMoveDown'|translate}}"
+              >
+                <span class="fa fa-arrow-down"></span>
+              </a>
+
+              <!-- Remove Layer -->
+              <a
+                href=""
+                class="btn btn-default"
+                data-ng-click="removeLayer(layer, map)"
+                title="{{'layerDelete'|translate}}"
+              >
+                <span class="fa fa-times"></span>
+              </a>
+            </span>
+          </li>
+
+        </ul>
+      </div>
+
     </div>
   </div>
 

web-ui/src/main/resources/catalog/style/gn_viewer.less

@@ -265,26 +265,26 @@
     }
     li[gn-layermanager-item] {
       .fa-arrows-alt,
-      .gn-layer-ordering {
-        visibility: hidden;
-      }
       input[type="radio"],
       input[type="checkbox"] {
         margin-top: 6px;
       }
       label {
         padding: 4px 20px 4px 4px;
         display: block;
-        margin-bottom: 0px;
+        margin-bottom: 0;
       }
       .gn-layer-radio {
-        padding-left: 0px;
-        padding-right: 0px;
+        padding-left: 0;
+        padding-right: 0;
       }
       .tab-content {
         background-color: white;
         padding: 5px;
-        margin: 0px;
+        margin: 0;
+      }
+      .text-muted {
+        color: @btn-default-border;
       }
     }
     .gn-layer-outofrange > label {
@@ -307,6 +307,44 @@
         }
       }
     }
+    .dropdown-left {
+
+      @toggleWidth: 32px;
+      @toggleHeight: 32px;
+
+      .dropdown-toggle {
+        width: @toggleWidth;
+        padding: 5px;
+      }
+      .dropdown-menu {
+        min-width: calc(~"(3 * @{toggleWidth}) + 6px") !important;
+        width: auto;
+        padding: 0;
+        margin: 0;
+        right: @toggleWidth;
+        top: 0;
+        box-shadow: none;
+        border: 0;
+        li {
+          float: left;
+          .btn {
+            width: @toggleWidth;
+            height: @toggleHeight;
+            padding: 5px;
+            margin-right: 2px;
+            border-radius: 3px !important;
+            &[disabled] {
+              color: @btn-link-disabled-color;
+              border-color: @input-bg-disabled;
+            }
+          }
+        }
+
+      }
+
+
+    }
+
     .gn-searchlayer-list {
       margin: 0;
       padding: 0;
@@ -343,8 +381,7 @@
       padding: 5px 15px;
       &:hover,
       &:focus {
-        .fa-arrows-alt,
-        .gn-layer-ordering {
+        .fa-arrows-alt {
           visibility: visible;
         }
       }
@@ -353,8 +390,7 @@
         margin-bottom: 0;
       }
       &:focus-within {
-        .fa-arrows-alt,
-        .gn-layer-ordering {
+        .fa-arrows-alt {
           visibility: visible;
         }
       }
@@ -441,28 +477,6 @@
         background-color: @gray-lighter;
         border-color: @list-group-border;
       }
-      .gn-layer-ordering {
-        margin-right: -10px;
-        position: absolute;
-        right: 15px;
-        .fa {
-          padding: 0 8px;
-        }
-        &.btn-group-xs {
-          .btn {
-            white-space: nowrap;
-            padding: 4px;
-            opacity: 1;
-            &[disabled] {
-              color: @btn-link-disabled-color;
-              border-color: @input-bg-disabled;
-            }
-            .caret {
-              margin-right: 3px;
-            }
-          }
-        }
-      }
       .dropdown {
         .dropdown-menu {
           min-width: 16em;