Merge pull request #1544 from felixhayashi/fix/colorpicker

fixes positioning of colorpicker BUT ALSO HAS A BUG

lib/network/css/network-colorpicker.css

@@ -1,14 +1,17 @@
 
 div.vis-color-picker {
   position:absolute;
+  top: 0px;
+  left: 30px;
   margin-top:-140px;
   margin-left:30px;
-  width:293px;
-  height:425px;
+  width:310px;
+  height:444px;
+  z-index: 1;
   padding: 10px;
   border-radius:15px;
   background-color:#ffffff;
-  display:none;
+  display: none;
   box-shadow: rgba(0,0,0,0.5) 0px 0px 10px 0px;
 }
 
@@ -18,8 +21,8 @@ div.vis-color-picker div.vis-arrow {
   left:5px;
 }
 
-div.vis-color-picker div.vis-arrow:after,
-div.vis-color-picker div.vis-arrow:before {
+div.vis-color-picker div.vis-arrow::after,
+div.vis-color-picker div.vis-arrow::before {
   right: 100%;
   top: 50%;
   border: solid transparent;

lib/shared/ColorPicker.js

@@ -119,19 +119,15 @@ class ColorPicker {
 
 
   /**
-   * this shows the color picker at a location. The hue circle is constructed once and stored.
-   * @param x
-   * @param y
+   * this shows the color picker.
+   * The hue circle is constructed once and stored.
    */
-  show(x,y) {
+  show() {
     this.applied = false;
     this.frame.style.display = 'block';
-    this.frame.style.top = y + 'px';
-    this.frame.style.left = x + 'px';
     this._generateHueCircle();
   }
 
-
   // ------------------------------------------ PRIVATE ----------------------------- //
 
   /**

lib/shared/Configurator.js

@@ -163,7 +163,7 @@ class Configurator {
     }
 
     this._push();
-    this.colorPicker.insertTo(this.container);
+    //~ this.colorPicker.insertTo(this.container);
   }
 
 
@@ -530,11 +530,8 @@ class Configurator {
    * @private
    */
   _showColorPicker(value, div, path) {
-    let rect = div.getBoundingClientRect();
-    let bodyRect = document.body.getBoundingClientRect();
-    let pickerX = rect.left + rect.width + 5;
-    let pickerY = rect.top - bodyRect.top + rect.height +2;
-    this.colorPicker.show(pickerX,pickerY);
+    this.colorPicker.insertTo(div);
+    this.colorPicker.show();
     this.colorPicker.setColor(value);
     this.colorPicker.setCallback((color) => {
       let colorString = 'rgba(' + color.r + ',' + color.g + ',' + color.b + ',' + color.a + ')';