Browse Source

Refactored css of ColorPicker and Popup

flowchartTest
jos 9 years ago
parent
commit
0d2cd482e1
6 changed files with 172 additions and 173 deletions
  1. +148
    -147
      lib/network/css/network-colorpicker.css
  2. +1
    -1
      lib/network/css/network-configuration.css
  3. +1
    -1
      lib/network/css/network-tooltip.css
  4. +1
    -1
      lib/network/modules/ConfigurationSystem.js
  5. +20
    -22
      lib/network/modules/components/ColorPicker.js
  6. +1
    -1
      lib/network/modules/components/Popup.js

+ 148
- 147
lib/network/css/network-colorpicker.css View File

@ -1,174 +1,175 @@
div.vis-network-colorPicker-frame {
position:absolute;
margin-top:-140px;
margin-left:30px;
width:293px;
height:425px;
padding: 10px;
border-radius:15px;
background-color:#ffffff;
display:none;
box-shadow: rgba(0,0,0,0.5) 0px 0px 10px 0px;
}
div.vis-network-colorPicker-arrowDiv {
position: absolute;
top:147px;
left:5px;
}
div.vis-network-colorPicker-arrowDiv:after, .vis-network-colorPicker-arrowDiv:before {
right: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
div.vis-network-colorPicker-arrowDiv:after {
border-color: rgba(255, 255, 255, 0);
border-right-color: #ffffff;
border-width: 30px;
margin-top: -30px;
div.vis-color-picker {
position:absolute;
margin-top:-140px;
margin-left:30px;
width:293px;
height:425px;
padding: 10px;
border-radius:15px;
background-color:#ffffff;
display:none;
box-shadow: rgba(0,0,0,0.5) 0px 0px 10px 0px;
}
div.vis-color-picker div.vis-arrow {
position: absolute;
top:147px;
left:5px;
}
div.vis-color-picker div.vis-arrow:after,
div.vis-color-picker div.vis-arrow:before {
right: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
div.vis-color-picker div.vis-arrow:after {
border-color: rgba(255, 255, 255, 0);
border-right-color: #ffffff;
border-width: 30px;
margin-top: -30px;
}
div.vis-color-picker div.vis-color {
position:absolute;
width: 289px;
height: 289px;
cursor: pointer;
}
div.vis-color-picker div.vis-brightness {
position: absolute;
top:313px;
}
div.vis-color-picker div.vis-opacity {
position:absolute;
top:350px;
}
div.vis-color-picker div.vis-selector {
position:absolute;
top:137px;
left:137px;
width:15px;
height:15px;
border-radius:15px;
border:1px solid #ffffff;
background: #4c4c4c; /* Old browsers */
background: -moz-linear-gradient(top, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), color-stop(12%,#595959), color-stop(25%,#666666), color-stop(39%,#474747), color-stop(50%,#2c2c2c), color-stop(51%,#000000), color-stop(60%,#111111), color-stop(76%,#2b2b2b), color-stop(91%,#1c1c1c), color-stop(100%,#131313)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* IE10+ */
background: linear-gradient(to bottom, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */
}
div.vis-network-colorPicker-color {
position:absolute;
width: 289px;
height: 289px;
cursor: pointer;
}
div.vis-network-colorPicker-brightness {
position: absolute;
top:313px;
}
div.vis-network-colorPicker-opacity {
position:absolute;
top:350px;
}
div.vis-network-colorPicker-selector{
position:absolute;
top:137px;
left:137px;
width:15px;
height:15px;
border-radius:15px;
border:1px solid #ffffff;
background: #4c4c4c; /* Old browsers */
background: -moz-linear-gradient(top, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), color-stop(12%,#595959), color-stop(25%,#666666), color-stop(39%,#474747), color-stop(50%,#2c2c2c), color-stop(51%,#000000), color-stop(60%,#111111), color-stop(76%,#2b2b2b), color-stop(91%,#1c1c1c), color-stop(100%,#131313)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* IE10+ */
background: linear-gradient(to bottom, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */
}
div.vis-network-colorPicker-newColor {
position:absolute;
width:140px;
height:20px;
border:1px solid rgba(0,0,0,0.1);
border-radius:5px;
top:380px;
left:159px;
text-align:right;
padding-right:2px;
font-size:10px;
color:rgba(0,0,0,0.4);
vertical-align:middle;
line-height:20px;
div.vis-color-picker div.vis-new-color {
position:absolute;
width:140px;
height:20px;
border:1px solid rgba(0,0,0,0.1);
border-radius:5px;
top:380px;
left:159px;
text-align:right;
padding-right:2px;
font-size:10px;
color:rgba(0,0,0,0.4);
vertical-align:middle;
line-height:20px;
}
div.vis-network-colorPicker-initialColor {
position:absolute;
width:140px;
height:20px;
border:1px solid rgba(0,0,0,0.1);
border-radius:5px;
top:380px;
left:10px;
text-align:left;
padding-left:2px;
font-size:10px;
color:rgba(0,0,0,0.4);
vertical-align:middle;
line-height:20px;
div.vis-color-picker div.vis-initial-color {
position:absolute;
width:140px;
height:20px;
border:1px solid rgba(0,0,0,0.1);
border-radius:5px;
top:380px;
left:10px;
text-align:left;
padding-left:2px;
font-size:10px;
color:rgba(0,0,0,0.4);
vertical-align:middle;
line-height:20px;
}
div.vis-network-colorPicker-label {
position:absolute;
width:300px;
left:10px;
div.vis-color-picker div.vis-label {
position:absolute;
width:300px;
left:10px;
}
div.vis-network-colorPicker-label.brightness {
top:300px;
div.vis-color-picker div.vis-label.vis-brightness {
top:300px;
}
div.vis-network-colorPicker-label.opacity {
top:338px;
div.vis-color-picker div.vis-label.vis-opacity {
top:338px;
}
div.vis-network-colorPicker-button {
position:absolute;
width:68px;
height:25px;
border-radius:10px;
vertical-align: middle;
text-align:center;
line-height: 25px;
top:410px;
border:2px solid #d9d9d9;
background-color: #f7f7f7;
cursor:pointer;
div.vis-color-picker div.vis-button {
position:absolute;
width:68px;
height:25px;
border-radius:10px;
vertical-align: middle;
text-align:center;
line-height: 25px;
top:410px;
border:2px solid #d9d9d9;
background-color: #f7f7f7;
cursor:pointer;
}
div.vis-network-colorPicker-button.cancel {
/*border:2px solid #ff4e33;*/
/*background-color: #ff7761;*/
left:5px;
div.vis-color-picker div.vis-button.vis-cancel {
/*border:2px solid #ff4e33;*/
/*background-color: #ff7761;*/
left:5px;
}
div.vis-network-colorPicker-button.load {
/*border:2px solid #a153e6;*/
/*background-color: #cb8dff;*/
left:82px;
div.vis-color-picker div.vis-button.vis-load {
/*border:2px solid #a153e6;*/
/*background-color: #cb8dff;*/
left:82px;
}
div.vis-network-colorPicker-button.apply {
/*border:2px solid #4588e6;*/
/*background-color: #82b6ff;*/
left:159px;
div.vis-color-picker div.vis-button.vis-apply {
/*border:2px solid #4588e6;*/
/*background-color: #82b6ff;*/
left:159px;
}
div.vis-network-colorPicker-button.save {
/*border:2px solid #45e655;*/
/*background-color: #6dff7c;*/
left:236px;
}
div.vis-color-picker div.vis-button.vis-save {
/*border:2px solid #45e655;*/
/*background-color: #6dff7c;*/
left:236px;
}
input.vis-network-configuration.range.colorPicker{
width: 290px;
height:20px;
div.vis-color-picker input.vis-range {
width: 290px;
height:20px;
}
input.vis-network-brightnessRange {
width: 289px !important;
/* TODO: is this redundant?
div.vis-color-picker input.vis-range-brightness {
width: 289px !important;
}
input.vis-network-saturationRange {
width: 289px !important;
}
div.vis-color-picker input.vis-saturation-range {
width: 289px !important;
}*/

+ 1
- 1
lib/network/css/network-configuration.css View File

@ -5,7 +5,7 @@ div.vis-network-configuration {
font-size:12px;
}
div.vis-network-configuration.optionContainer{
div.vis-network-configuration.vis-option-container{
display:block;
width:495px;
background-color: #ffffff;

+ 1
- 1
lib/network/css/network-tooltip.css View File

@ -1,4 +1,4 @@
div.network-tooltip {
div.vis-network-tooltip {
position: absolute;
visibility: hidden;
padding: 5px;

+ 1
- 1
lib/network/modules/ConfigurationSystem.js View File

@ -302,7 +302,7 @@ class ConfigurationSystem {
generateButton.onmouseout = () => {generateButton.className = 'vis-network-configuration button';};
this.optionsContainer = document.createElement('div');
this.optionsContainer.className = 'vis-network-configuration optionContainer';
this.optionsContainer.className = 'vis-network-configuration vis-option-container';
this.domElements.push(this.optionsContainer);
this.domElements.push(generateButton);

+ 20
- 22
lib/network/modules/components/ColorPicker.js View File

@ -297,14 +297,12 @@ class ColorPicker {
* @private
*/
_create() {
let visPrefix = 'vis-network-'
this.frame = document.createElement('div');
this.frame.className = visPrefix + 'colorPicker-frame';
this.frame.className = 'vis-color-picker';
this.colorPickerDiv = document.createElement('div');
this.colorPickerSelector = document.createElement('div');
this.colorPickerSelector.className = visPrefix + 'colorPicker-selector';
this.colorPickerSelector.className = 'vis-selector';
this.colorPickerDiv.appendChild(this.colorPickerSelector);
this.colorPickerCanvas = document.createElement('canvas');
@ -329,73 +327,73 @@ class ColorPicker {
this.colorPickerCanvas.getContext("2d").setTransform(this.pixelRatio, 0, 0, this.pixelRatio, 0, 0);
}
this.colorPickerDiv.className = visPrefix + 'colorPicker-color';
this.colorPickerDiv.className = 'vis-color';
this.opacityDiv = document.createElement('div');
this.opacityDiv.className = visPrefix + 'colorPicker-opacity';
this.opacityDiv.className = 'vis-opacity';
this.brightnessDiv = document.createElement('div');
this.brightnessDiv.className = visPrefix + 'colorPicker-brightness';
this.brightnessDiv.className = 'vis-brightness';
this.arrowDiv = document.createElement('div');
this.arrowDiv.className = visPrefix + 'colorPicker-arrowDiv';
this.arrowDiv.className = 'vis-arrow';
this.opacityRange = document.createElement('input');
this.opacityRange.type = 'range';
this.opacityRange.min = '0';
this.opacityRange.max = '100';
this.opacityRange.value = '100';
this.opacityRange.className = visPrefix + 'configuration range colorPicker';
this.opacityRange.className = 'vis-range';
this.brightnessRange = document.createElement('input');
this.brightnessRange.type = 'range';
this.brightnessRange.min = '0';
this.brightnessRange.max = '100';
this.brightnessRange.value = '100';
this.brightnessRange.className = visPrefix + 'configuration range colorPicker';
this.brightnessRange.className = 'vis-range';
this.opacityDiv.appendChild(this.opacityRange);
this.brightnessDiv.appendChild(this.brightnessRange);
var me = this;
this.opacityRange.onchange = function () {me._setOpacity(this.value);}
this.opacityRange.oninput = function () {me._setOpacity(this.value);}
this.brightnessRange.onchange = function () {me._setBrightness(this.value);}
this.brightnessRange.oninput = function () {me._setBrightness(this.value);}
this.opacityRange.onchange = function () {me._setOpacity(this.value);};
this.opacityRange.oninput = function () {me._setOpacity(this.value);};
this.brightnessRange.onchange = function () {me._setBrightness(this.value);};
this.brightnessRange.oninput = function () {me._setBrightness(this.value);};
this.brightnessLabel = document.createElement("div");
this.brightnessLabel.className = visPrefix + "colorPicker-label brightness";
this.brightnessLabel.className = "vis-label vis-brightness";
this.brightnessLabel.innerHTML = 'brightness:';
this.opacityLabel = document.createElement("div");
this.opacityLabel.className = visPrefix + "colorPicker-label opacity";
this.opacityLabel.className = "vis-label vis-opacity";
this.opacityLabel.innerHTML = 'opacity:';
this.newColorDiv = document.createElement("div");
this.newColorDiv.className = visPrefix + "colorPicker-newColor";
this.newColorDiv.className = "vis-new-color";
this.newColorDiv.innerHTML = 'new';
this.initialColorDiv = document.createElement("div");
this.initialColorDiv.className = visPrefix + "colorPicker-initialColor";
this.initialColorDiv.className = "vis-initial-color";
this.initialColorDiv.innerHTML = 'initial';
this.cancelButton = document.createElement("div");
this.cancelButton.className = visPrefix + "colorPicker-button cancel";
this.cancelButton.className = "vis-button vis-cancel";
this.cancelButton.innerHTML = 'cancel';
this.cancelButton.onclick = this._hide.bind(this, false);
this.applyButton = document.createElement("div");
this.applyButton.className = visPrefix + "colorPicker-button apply";
this.applyButton.className = "vis-button vis-apply";
this.applyButton.innerHTML = 'apply';
this.applyButton.onclick = this._apply.bind(this);
this.saveButton = document.createElement("div");
this.saveButton.className = visPrefix + "colorPicker-button save";
this.saveButton.className = "vis-button vis-save";
this.saveButton.innerHTML = 'save';
this.saveButton.onclick = this._save.bind(this);
this.loadButton = document.createElement("div");
this.loadButton.className = visPrefix + "colorPicker-button load";
this.loadButton.className = "vis-button vis-load";
this.loadButton.innerHTML = 'load last';
this.loadButton.onclick = this._loadLast.bind(this);

+ 1
- 1
lib/network/modules/components/Popup.js View File

@ -52,7 +52,7 @@ class Popup {
// create the frame
this.frame = document.createElement('div');
this.frame.className = 'network-tooltip';
this.frame.className = 'vis-network-tooltip';
this.frame.style.color = style.fontColor;
this.frame.style.backgroundColor = style.color.background;
this.frame.style.borderColor = style.color.border;

Loading…
Cancel
Save