Refactored css of manipulation menu

lib/network/css/network-manipulation.css

@@ -1,4 +1,4 @@
-div.network-manipulationDiv {
+div.vis-network div.vis-manipulation {
   border-width: 0;
   border-bottom: 1px;
   border-style:solid;
@@ -19,14 +19,16 @@ div.network-manipulationDiv {
   height: 30px;
 }
 
-div.network-manipulation-editMode {
+div.vis-network div.vis-edit-mode {
   position:absolute;
   left: 0;
   top: 15px;
   height: 30px;
 }
 
-div.network-manipulation-closeDiv {
+/* FIXME: shouldn't the vis-close button be a child of the vis-manipulation div? */
+
+div.vis-network div.vis-close {
   position:absolute;
   right: 0;
   top: 0;
@@ -45,13 +47,14 @@ div.network-manipulation-closeDiv {
   user-select: none;
 }
 
-div.network-manipulation-closeDiv:hover {
+div.vis-network div.vis-close:hover {
   opacity: 0.6;
 }
 
-div.network-manipulationUI {
-    position:relative;
-    top:-7px;
+div.vis-network div.vis-manipulation div.vis-button,
+div.vis-network div.vis-edit-mode div.vis-button {
+  position:relative;
+  top:-7px;
   font-family: verdana;
   font-size: 12px;
   -moz-border-radius: 15px;
@@ -72,72 +75,74 @@ div.network-manipulationUI {
   user-select: none;
 }
 
-div.network-manipulationUI:hover {
+div.vis-network div.vis-manipulation div.vis-button:hover {
   box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.20);
 }
 
-div.network-manipulationUI:active {
+div.vis-network div.vis-manipulation div.vis-button:active {
   box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.50);
 }
 
-div.network-manipulationUI.back {
+div.vis-network div.vis-manipulation div.vis-button.vis-back {
   background-image: url("img/network/backIcon.png");
 }
 
-div.network-manipulationUI.none:hover {
+div.vis-network div.vis-manipulation div.vis-button.vis-none:hover {
   box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
   cursor: default;
 }
-div.network-manipulationUI.none:active {
+div.vis-network div.vis-manipulation div.vis-button.vis-none:active {
   box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
 }
-div.network-manipulationUI.none {
+div.vis-network div.vis-manipulation div.vis-button.vis-none {
   padding: 0;
 }
-div.network-manipulationUI.notification{
+div.vis-network div.vis-manipulation div.notification {
   margin: 2px;
   font-weight: bold;
 }
 
-div.network-manipulationUI.add {
+div.vis-network div.vis-manipulation div.vis-button.vis-add {
   background-image: url("img/network/addNodeIcon.png");
 }
 
-div.network-manipulationUI.edit {
+div.vis-network div.vis-manipulation div.vis-button.vis-edit,
+div.vis-network div.vis-edit-mode div.vis-button.vis-edit {
   background-image: url("img/network/editIcon.png");
 }
 
-div.network-manipulationUI.edit.editmode {
+div.vis-network div.vis-edit-mode div.vis-button.vis-edit.vis-edit-mode {
   background-color: #fcfcfc;
-  border-style:solid;
-  border-width:1px;
-  border-color: #cccccc;
+  border: 1px solid #cccccc;
 }
 
-div.network-manipulationUI.connect {
+div.vis-network div.vis-manipulation div.vis-button.vis-connect {
   background-image: url("img/network/connectIcon.png");
 }
 
-div.network-manipulationUI.delete {
+div.vis-network div.vis-manipulation div.vis-button.vis-delete {
   background-image: url("img/network/deleteIcon.png");
 }
 /* top right bottom left */
-div.network-manipulationLabel {
-  margin: 0px 0px 0px 23px;
+div.vis-network div.vis-manipulation div.vis-label,
+div.vis-network div.vis-edit-mode div.vis-label {
+  margin: 0 0 0 23px;
   line-height: 25px;
 }
-div.network-seperatorLine {
+div.vis-network div.vis-manipulation div.vis-separator-line {
   display:inline-block;
   width:1px;
   height:20px;
   background-color: #bdbdbd;
-  margin: 5px 7px 0px 15px;
+  margin: 5px 7px 0 15px;
 }
 
+/* TODO: is this redundant?
 div.network-navigation_wrapper {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
-}
+}
+*/

lib/network/modules/ManipulationSystem.js

@@ -403,7 +403,7 @@ class ManipulationSystem {
     // load the manipulator HTML elements. All styling done in css.
     if (this.manipulationDiv === undefined) {
       this.manipulationDiv = document.createElement('div');
-      this.manipulationDiv.className = 'network-manipulationDiv';
+      this.manipulationDiv.className = 'vis-manipulation';
       if (this.editMode === true) {
         this.manipulationDiv.style.display = "block";
       }
@@ -416,7 +416,7 @@ class ManipulationSystem {
     // container for the edit button.
     if (this.editModeDiv === undefined) {
       this.editModeDiv = document.createElement('div');
-      this.editModeDiv.className = 'network-manipulation-editMode';
+      this.editModeDiv.className = 'vis-edit-mode';
       if (this.editMode === true) {
         this.editModeDiv.style.display = "none";
       }
@@ -430,7 +430,7 @@ class ManipulationSystem {
     // container for the close div button
     if (this.closeDiv === undefined) {
       this.closeDiv = document.createElement('div');
-      this.closeDiv.className = 'network-manipulation-closeDiv';
+      this.closeDiv.className = 'vis-close';
       this.closeDiv.style.display = this.manipulationDiv.style.display;
       this.canvas.frame.appendChild(this.closeDiv);
     }
@@ -472,7 +472,7 @@ class ManipulationSystem {
 
     // create the contents for the editMode button
     let locale = this.options.locales[this.options.locale];
-    let button = this._createButton('editMode', 'network-manipulationUI edit editmode', locale['edit']);
+    let button = this._createButton('editMode', 'vis-button vis-edit vis-edit-mode', locale['edit']);
     this.editModeDiv.appendChild(button);
 
     // bind a hammer listener to the button, calling the function toggleEditMode.
@@ -558,49 +558,49 @@ class ManipulationSystem {
    */
   _createSeperator(index = 1) {
     this.manipulationDOM['seperatorLineDiv' + index] = document.createElement('div');
-    this.manipulationDOM['seperatorLineDiv' + index].className = 'network-seperatorLine';
+    this.manipulationDOM['seperatorLineDiv' + index].className = 'vis-separator-line';
     this.manipulationDiv.appendChild(this.manipulationDOM['seperatorLineDiv' + index]);
   }
 
   // ----------------------    DOM functions for buttons    --------------------------//
 
   _createAddNodeButton(locale) {
-    let button = this._createButton('addNode', 'network-manipulationUI add', locale['addNode']);
+    let button = this._createButton('addNode', 'vis-button vis-add', locale['addNode']);
     this.manipulationDiv.appendChild(button);
     this._bindHammerToDiv(button, this.addNodeMode.bind(this));
   }
 
   _createAddEdgeButton(locale) {
-    let button = this._createButton('addEdge', 'network-manipulationUI connect',  locale['addEdge']);
+    let button = this._createButton('addEdge', 'vis-button vis-connect',  locale['addEdge']);
     this.manipulationDiv.appendChild(button);
     this._bindHammerToDiv(button, this.addEdgeMode.bind(this));
   }
 
   _createEditNodeButton(locale) {
-    let button = this._createButton('editNode', 'network-manipulationUI edit', locale['editNode']);
+    let button = this._createButton('editNode', 'vis-button vis-edit', locale['editNode']);
     this.manipulationDiv.appendChild(button);
     this._bindHammerToDiv(button, this.editNode.bind(this));
   }
 
   _createEditEdgeButton(locale) {
-    let button = this._createButton('editEdge', 'network-manipulationUI edit',  locale['editEdge']);
+    let button = this._createButton('editEdge', 'vis-button vis-edit',  locale['editEdge']);
     this.manipulationDiv.appendChild(button);
     this._bindHammerToDiv(button, this.editEdgeMode.bind(this));
   }
 
   _createDeleteButton(locale) {
-    let button = this._createButton('delete', 'network-manipulationUI delete', locale['del']);
+    let button = this._createButton('delete', 'vis-button vis-delete', locale['del']);
     this.manipulationDiv.appendChild(button);
     this._bindHammerToDiv(button, this.deleteSelected.bind(this));
   }
 
   _createBackButton(locale) {
-    let button = this._createButton('back', 'network-manipulationUI back', locale['back']);
+    let button = this._createButton('back', 'vis-button vis-back', locale['back']);
     this.manipulationDiv.appendChild(button);
     this._bindHammerToDiv(button, this.showManipulatorToolbar.bind(this));
   }
 
-  _createButton(id, className, label, labelClassName = 'network-manipulationLabel') {
+  _createButton(id, className, label, labelClassName = 'vis-label') {
     this.manipulationDOM[id+"Div"] = document.createElement('div');
     this.manipulationDOM[id+"Div"].className = className;
     this.manipulationDOM[id+"Label"] = document.createElement('div');
@@ -612,7 +612,7 @@ class ManipulationSystem {
 
   _createDescription(label) {
     this.manipulationDiv.appendChild(
-      this._createButton('description', 'network-manipulationUI none', label)
+      this._createButton('description', 'vis-button vis-none', label)
     );
   }