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 9 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 { div.vis-color-picker {
position:absolute; position:absolute;
top: 0px;
left: 30px;
margin-top:-140px; margin-top:-140px;
margin-left:30px; margin-left:30px;
width:293px;
height:425px;
width:310px;
height:444px;
z-index: 1;
padding: 10px; padding: 10px;
border-radius:15px; border-radius:15px;
background-color:#ffffff; background-color:#ffffff;
display:none;
display: none;
box-shadow: rgba(0,0,0,0.5) 0px 0px 10px 0px; 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; 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%; right: 100%;
top: 50%; top: 50%;
border: solid transparent; 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.applied = false;
this.frame.style.display = 'block'; this.frame.style.display = 'block';
this.frame.style.top = y + 'px';
this.frame.style.left = x + 'px';
this._generateHueCircle(); this._generateHueCircle();
} }
// ------------------------------------------ PRIVATE ----------------------------- // // ------------------------------------------ PRIVATE ----------------------------- //
/** /**

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

@ -163,7 +163,7 @@ class Configurator {
} }
this._push(); this._push();
this.colorPicker.insertTo(this.container);
//~ this.colorPicker.insertTo(this.container);
} }
@ -530,11 +530,8 @@ class Configurator {
* @private * @private
*/ */
_showColorPicker(value, div, path) { _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.setColor(value);
this.colorPicker.setCallback((color) => { this.colorPicker.setCallback((color) => {
let colorString = 'rgba(' + color.r + ',' + color.g + ',' + color.b + ',' + color.a + ')'; let colorString = 'rgba(' + color.r + ',' + color.g + ',' + color.b + ',' + color.a + ')';

Loading…
Cancel
Save