Make the layer tools menu clickable

geonetwork · Sep 30, 2024 · 765d9e4 · 765d9e4
1 parent 59ce45b
commit 765d9e4
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 62 deletions.
diff --git a/.../src/main/resources/catalog/components/viewer/layermanager/partials/layermanageritem.html b/.../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-chevron-left 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>
 

diff --git a/web-ui/src/main/resources/catalog/style/gn_viewer.less b/web-ui/src/main/resources/catalog/style/gn_viewer.less
@@ -265,9 +265,6 @@
     }
     li[gn-layermanager-item] {
       .fa-arrows-alt,
-      .gn-layer-ordering {
-        visibility: hidden;
-      }
       input[type="radio"],
       input[type="checkbox"] {
         margin-top: 6px;
@@ -310,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;
@@ -347,8 +382,7 @@
       min-height: 42px;
       &:hover,
       &:focus {
-        .fa-arrows-alt,
-        .gn-layer-ordering {
+        .fa-arrows-alt {
           visibility: visible;
         }
       }
@@ -357,8 +391,7 @@
         margin-bottom: 0;
       }
       &:focus-within {
-        .fa-arrows-alt,
-        .gn-layer-ordering {
+        .fa-arrows-alt {
           visibility: visible;
         }
       }
@@ -439,28 +472,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;