Browse Source

fixes positioning of colorpicker BUT ALSO HAS A BUG

not sure but for some reason, once the colorpicker is open, the buttons won't work correctly and the huecircle jumps back.
codeClimate
Felix Hayashi 10 years ago
parent
commit
3828e07959
3 changed files with 14 additions and 18 deletions
  1. +8
    -5
      lib/network/css/network-colorpicker.css
  2. +3
    -7
      lib/shared/ColorPicker.js
  3. +3
    -6
      lib/shared/Configurator.js

+ 8
- 5
lib/network/css/network-colorpicker.css View File

@ -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;

+ 3
- 7
lib/shared/ColorPicker.js View File

@ -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 ----------------------------- //
/**

+ 3
- 6
lib/shared/Configurator.js View File

@ -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 + ')';

Loading…
Cancel
Save