diff --git a/lib/network/css/network-colorpicker.css b/lib/network/css/network-colorpicker.css index 874e7268..db1d49c6 100644 --- a/lib/network/css/network-colorpicker.css +++ b/lib/network/css/network-colorpicker.css @@ -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; -} \ No newline at end of file +div.vis-color-picker input.vis-saturation-range { + width: 289px !important; +}*/ \ No newline at end of file diff --git a/lib/network/css/network-configuration.css b/lib/network/css/network-configuration.css index 74e96fc8..5e747c44 100644 --- a/lib/network/css/network-configuration.css +++ b/lib/network/css/network-configuration.css @@ -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; diff --git a/lib/network/css/network-tooltip.css b/lib/network/css/network-tooltip.css index b0a66615..220b0052 100644 --- a/lib/network/css/network-tooltip.css +++ b/lib/network/css/network-tooltip.css @@ -1,4 +1,4 @@ -div.network-tooltip { +div.vis-network-tooltip { position: absolute; visibility: hidden; padding: 5px; diff --git a/lib/network/modules/ConfigurationSystem.js b/lib/network/modules/ConfigurationSystem.js index 0197f8d8..93da5504 100644 --- a/lib/network/modules/ConfigurationSystem.js +++ b/lib/network/modules/ConfigurationSystem.js @@ -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); diff --git a/lib/network/modules/EdgesHandler.js b/lib/network/modules/EdgesHandler.js index e0bfc6ef..1532c88f 100644 --- a/lib/network/modules/EdgesHandler.js +++ b/lib/network/modules/EdgesHandler.js @@ -3,7 +3,7 @@ var DataSet = require('../../DataSet'); var DataView = require('../../DataView'); import Edge from "./components/Edge" -import Label from "./components/unified/Label" +import Label from "./components/shared/Label" class EdgesHandler { constructor(body, images, groups) { diff --git a/lib/network/modules/NodesHandler.js b/lib/network/modules/NodesHandler.js index a846458f..887b5db8 100644 --- a/lib/network/modules/NodesHandler.js +++ b/lib/network/modules/NodesHandler.js @@ -3,7 +3,7 @@ var DataSet = require('../../DataSet'); var DataView = require('../../DataView'); import Node from "./components/Node"; -import Label from "./components/unified/Label"; +import Label from "./components/shared/Label"; class NodesHandler { constructor(body, images, groups, layoutEngine) { diff --git a/lib/network/modules/components/ColorPicker.js b/lib/network/modules/components/ColorPicker.js index 191cf0e1..16e36f5c 100644 --- a/lib/network/modules/components/ColorPicker.js +++ b/lib/network/modules/components/ColorPicker.js @@ -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); diff --git a/lib/network/modules/components/Edge.js b/lib/network/modules/components/Edge.js index 2d27a3ea..96bdd67f 100644 --- a/lib/network/modules/components/Edge.js +++ b/lib/network/modules/components/Edge.js @@ -1,6 +1,6 @@ var util = require('../../../util'); -import Label from './unified/Label' +import Label from './shared/Label' import BezierEdgeDynamic from './edges/BezierEdgeDynamic' import BezierEdgeStatic from './edges/BezierEdgeStatic' import StraightEdge from './edges/StraightEdge' diff --git a/lib/network/modules/components/Node.js b/lib/network/modules/components/Node.js index eaf45db7..4ce85f33 100644 --- a/lib/network/modules/components/Node.js +++ b/lib/network/modules/components/Node.js @@ -1,6 +1,6 @@ var util = require('../../../util'); -import Label from './unified/Label' +import Label from './shared/Label' import Box from './nodes/shapes/Box' import Circle from './nodes/shapes/Circle' diff --git a/lib/network/modules/components/Popup.js b/lib/network/modules/components/Popup.js index 3c3f8cfa..bbbb40d9 100644 --- a/lib/network/modules/components/Popup.js +++ b/lib/network/modules/components/Popup.js @@ -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; diff --git a/lib/network/modules/components/unified/Label.js b/lib/network/modules/components/shared/Label.js similarity index 100% rename from lib/network/modules/components/unified/Label.js rename to lib/network/modules/components/shared/Label.js