made the legend style configurable. Documented TOC Plugin (#1865)

geosolutions-it · May 23, 2017 · 1153033 · 1153033
1 parent 35c19ba
commit 1153033
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 5 deletions.
diff --git a/web/client/components/TOC/DefaultLayer.jsx b/web/client/components/TOC/DefaultLayer.jsx
@@ -54,7 +54,8 @@ var DefaultLayer = React.createClass({
         groups: React.PropTypes.array,
         currentZoomLvl: React.PropTypes.number,
         scales: React.PropTypes.array,
-        additionalTools: React.PropTypes.array
+        additionalTools: React.PropTypes.array,
+        legendOptions: React.PropTypes.object
     },
     getDefaultProps() {
         return {
@@ -145,7 +146,7 @@ var DefaultLayer = React.createClass({
         }
         return (<div position="collapsible" className="collapsible-toc">
              <div style={{minHeight: "35px"}}>{tools}</div>
-             <div><WMSLegend node={this.props.node} currentZoomLvl={this.props.currentZoomLvl} scales={this.props.scales}/></div>
+             <div><WMSLegend node={this.props.node} currentZoomLvl={this.props.currentZoomLvl} scales={this.props.scales} {...this.props.legendOptions}/></div>
         </div>);
     },
     renderTools() {

diff --git a/web/client/components/TOC/fragments/WMSLegend.jsx b/web/client/components/TOC/fragments/WMSLegend.jsx
@@ -12,19 +12,24 @@ var Legend = require('./legend/Legend');
 var WMSLegend = React.createClass({
     propTypes: {
         node: React.PropTypes.object,
+        legendContainerStyle: React.PropTypes.object,
+        legendStyle: React.PropTypes.object,
         showOnlyIfVisible: React.PropTypes.bool,
         currentZoomLvl: React.PropTypes.number,
         scales: React.PropTypes.array
     },
     getDefaultProps() {
         return {
+            legendContainerStyle: {
+                marginLeft: "15px"
+            },
             showOnlyIfVisible: false
         };
     },
     render() {
         let node = this.props.node || {};
         if (this.canShow(node) && node.type === "wms" && node.group !== "background") {
-            return <div style={{marginLeft: "15px"}}><Legend layer={node} currentZoomLvl={this.props.currentZoomLvl} scales={this.props.scales}/></div>;
+            return <div style={this.props.legendContainerStyle}><Legend style={this.props.legendStyle} layer={node} currentZoomLvl={this.props.currentZoomLvl} scales={this.props.scales}/></div>;
         }
         return null;
     },

diff --git a/web/client/components/TOC/fragments/legend/Legend.jsx b/web/client/components/TOC/fragments/legend/Legend.jsx
@@ -12,14 +12,16 @@ const Legend = React.createClass({
         legendHeigth: React.PropTypes.number,
         legendWidth: React.PropTypes.number,
         legendOptions: React.PropTypes.string,
+        style: React.PropTypes.object,
         currentZoomLvl: React.PropTypes.number,
         scales: React.PropTypes.array
     },
     getDefaultProps() {
         return {
             legendHeigth: 12,
             legendWidth: 12,
-            legendOptions: "forceLabels:on;fontSize:10"
+            legendOptions: "forceLabels:on;fontSize:10",
+            style: {maxWidth: "100%"}
         };
     },
    render() {
@@ -53,7 +55,7 @@ const Legend = React.createClass({
                pathname: urlObj.pathname,
                query: query
            });
-           return <img src={legendUrl} style={{maxWidth: "100%"}}/>;
+           return <img src={legendUrl} style={this.props.style}/>;
        }
        return null;
    }