Fix geosolutions-it#1227 Styler - Set default position for components (…

…geosolutions-it#1228)

* Fix geosolutions-it#1227 . Set default position for components

This prevent the close event to be called.

* fix also possible errors with multiple color pickers

* Use version of react-color

- fixes geosolutions-it#1227
- reduces react color size (geosolutions-it#1202)
- minor fixes to equal interval tool in styler

* fixed lint error

* render the color picker in a different place to avoid scroll

package.json

@@ -104,7 +104,7 @@
     "react-addons-shallow-compare": "0.14.8",
     "react-bootstrap": "0.28.1",
     "react-codemirror": "0.2.6",
-    "react-color": "2.0.0",
+    "react-color": "2.4.0",
     "react-confirm-button": "0.0.2",
     "react-copy-to-clipboard": "4.1.0",
     "react-dom": "0.14.8",

web/client/components/style/ColorMapGridComponents/ColorPickerRenderer.jsx

@@ -29,7 +29,7 @@ const ColorPickerRenderer = React.createClass({
     onChangeColor() {
         if ( this.state.color) {
             let opacity = (this.state.color.rgb.a !== 1) ? this.state.color.rgb.a : undefined;
-            let color = "#" + this.state.color.hex;
+            let color = this.state.color.hex.indexOf("#") === 0 ? this.state.color.hex : "#" + this.state.color.hex;
             this.props.onChangeColor( this.props.params.node, {color: color, opacity: opacity});
         }
     },
@@ -67,15 +67,15 @@ const ColorPickerRenderer = React.createClass({
                     }}/>
                         <SketchPicker
                             color={ (this.state.color) ? this.state.color.rgb : colorValue}
-                            onChange={ (color) => { this.setState({ color: color }); }} />
+                            onChangeComplete={ (color) => { this.setState({ color: color }); }} />
                     </div>)
                 : null }
             </div>
         );
     },
     calculateTop(y) {
         let h = getWindowSize().maxHeight;
-        return (y + 300 > h) ? h - 305 : y;
+        return ((y + 300 > h) ? h - 305 : y ) - 300;
     },
     hexToRgb(hex) {
         const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);

web/client/components/style/ColorMapGridComponents/colorenderer.css

@@ -22,4 +22,7 @@
   right: 0;
   bottom: 0;
   left: 0;
-}
+}
+.cpe-popover > div > div {
+    position: relative;
+}

web/client/components/style/EqualInterval.jsx

@@ -153,7 +153,7 @@ const EqualInterval = React.createClass({
         return (this.props.error && this.props.error.type) ? true : false;
     },
     generateEqualIntervalRamp() {
-        let ramp = colors[this.props.ramp][this.props.classes];
+        let ramp = colors[this.getRampValue()][this.props.classes];
         let min = this.props.min;
         let max = this.props.max;
         let step = (max - min) / this.props.classes;