Hide the legend if the layer is not visible

camptocamp · Jul 15, 2019 · 2dfd494 · 2dfd494
1 parent 7e29776
commit 2dfd494
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 6 deletions.
diff --git a/contribs/gmf/src/layertree/common.scss b/contribs/gmf/src/layertree/common.scss
@@ -162,8 +162,14 @@
     border: 0.06rem solid $main-bg-color;
     background-color: lighten($main-bg-color, 8%);
 
-    .off {
-      opacity: 0.5;
+    display: none;
+    &.show {
+      // legend is displayed
+      display: block;
+      &.off {
+        // legend is displayed but the layer is not visible
+        display: none;
+      }
     }
 
     a {

diff --git a/contribs/gmf/src/layertree/component.html b/contribs/gmf/src/layertree/component.html
@@ -233,7 +233,7 @@
 
 <div
   ng-if="::!layertreeCtrl.isRoot && gmfLayertreeCtrl.getLegendsObject(layertreeCtrl) && layertreeCtrl.node.metadata.legend" id="gmf-layertree-node-{{::layertreeCtrl.uid}}-legend"
-  class="collapse gmf-layertree-legend"
+  class="gmf-layertree-legend"
   ng-class="[gmfLayertreeCtrl.getNodeState(layertreeCtrl), layertreeCtrl.node.metadata.isLegendExpanded ? 'show' : '']">
 
   <a

diff --git a/contribs/gmf/src/layertree/component.js b/contribs/gmf/src/layertree/component.js
@@ -807,9 +807,10 @@ Controller.prototype.zoomToResolution = function(treeCtrl) {
  * @param {string} legendNodeId The DOM node legend id to toggle
  */
 Controller.prototype.toggleNodeLegend = function(legendNodeId) {
-  $(legendNodeId).toggle({
-    toggle: true
-  });
+  const div = document.querySelector(legendNodeId);
+  if (div) {
+    div.classList.toggle('show');
+  }
 };