Add layer visibility toggle to legend component

geonode_mapstore_client/client/js/plugins/Legend.jsx

@@ -12,10 +12,13 @@ import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import LegendImage from '@mapstore/framework/components/TOC/fragments/legend/Legend';
 import { layersSelector } from '@mapstore/framework/selectors/layers';
+import OpacitySlider from '@mapstore/framework/components/TOC/fragments/OpacitySlider';
+import { updateNode } from '@mapstore/framework/actions/layers';
+import VisibilityCheck from '@mapstore/framework/components/TOC/fragments/VisibilityCheck';
 
 function Legend({
     layers,
-    hideLayerTitle
+    onUpdateNode
 }) {
 
     const [expandLegend, setExpandLegend] = useState(false);
@@ -31,10 +34,16 @@ function Legend({
         </div>
         <ul className="gn-legend-list" style={{display: expandLegend ? 'inline-block' : 'none'}}>
             {layers.map((layer, ind) => <Fragment key={ind}>
-                {!hideLayerTitle &&
-                    <li className="gn-legend-list-item"><p>{layer.title}</p></li>
-                }
-                <li>
+                <li className="gn-legend-list-item"><VisibilityCheck key="visibilitycheck"
+                    tooltip={layer.loadingError === 'Warning' ? 'toc.toggleLayerVisibilityWarning' : 'toc.toggleLayerVisibility'}
+                    node={layer}
+                    propertiesChangeHandler={(id, options) => onUpdateNode(id, 'layers', options)} /><p>{layer.name || layer.title}</p></li>
+                <li className="gn-legend-bottom">
+                    <OpacitySlider
+                        opacity={layer.opacity}
+                        disabled={!layer.visibility}
+                        onChange={(opacity) => onUpdateNode(layer.id, 'layers', { opacity })}
+                    />
                     <LegendImage layer={layer} />
                 </li>
             </Fragment>
@@ -44,8 +53,13 @@ function Legend({
 }
 
 const ConnectedLegend = connect(
-    createSelector([layersSelector], (layers) => ({layers: layers.filter(layer => layer.group !== 'background' && layer.type === 'wms')})),
-    {}
+    createSelector([
+        layersSelector
+    ], (layers) => ({ layers: layers.filter(layer => layer.group !== 'background' && layer.type === 'wms') })),
+    {
+        onUpdateNode: updateNode
+
+    }
 )(Legend);
 
 export default createPlugin('Legend', {

geonode_mapstore_client/client/static/mapstore/configs/localConfig.json

@@ -1349,10 +1349,7 @@
                 "name": "FitBounds"
             },
             {
-                "name": "Legend",
-                "cfg": {
-                    "hideLayerTitle": true
-                }
+                "name": "Legend"
             }
         ],
         "dataset_edit_data_viewer": [
@@ -2814,10 +2811,7 @@
                 "name": "MapFooter"
             },
             {
-                "name": "Legend",
-                "cfg": {
-                    "hideLayerTitle": true
-                }
+                "name": "Legend"
             },
             {
                 "name": "FitBounds"

geonode_mapstore_client/client/themes/geonode/less/_legend.less

@@ -23,6 +23,7 @@
     min-width: 120px;
     border-radius: 2px;
     max-height: 50%;
+    max-width: 400px;
 
     .gn-legend-head {
         padding: 0.5rem;
@@ -40,10 +41,24 @@
 
     .gn-legend-list-item {
             margin: 0;
+
+        &:not(span) {
+            padding-right: 40px;
+            display: flex;
+            align-items: center;
+        }
+
+        span.glyphicon {
+            margin-right: 10px;
+            top: 0;
+        }
 
         p {
             margin: 0;
             font-weight: normal;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
         }
     }
 
@@ -60,5 +75,9 @@
     .identify-icon {
         font-size: small;
     }
+
+    .gn-legend-bottom:not(:last-of-type) {
+        margin-bottom: 20px;
+    }
 }