Merge pull request #2 from r3code/edit-mode-svg-icons

Edit mode svg icons

docs/network/index.html

@@ -745,7 +745,7 @@ <h2 id="methods">Methods</h2>
             </tr>
             <tr class="hidden" parent="disableEditMode">
                 <td class="midMethods">Returns: none</td>
-                <td>Programatically disable the edit mode. Similar effect to pressing the close icon (small cross in the
+                <td>Programatically disable the edit mode. Similar effect to pressing the close icon (cross in the
                     corner of the toolbar).
                 </td>
             </tr>

examples/network/other/navigation.html

@@ -91,15 +91,15 @@ <h2>Navigation controls and keyboard navigation</h2>
 <div style="width: 800px; font-size:14px; text-align: justify;">
   This example is the same as example 2, except for the navigation controls that have been activated. The navigation controls are described below. <br /><br />
   <table class="legend_table">
-    <tr>
+    <tr style="color: blue">
       <th>Icons: </th>
-      <td><img src="../../../dist/img/network/upArrow.png" />     </td>
-      <td><img src="../../../dist/img/network/downArrow.png" />   </td>
-      <td><img src="../../../dist/img/network/leftArrow.png" />   </td>
-      <td><img src="../../../dist/img/network/rightArrow.png" />  </td>
-      <td><img src="../../../dist/img/network/plus.png" />        </td>
-      <td><img src="../../../dist/img/network/minus.png" />       </td>
-      <td><img src="../../../dist/img/network/zoomExtends.png" /> </td>
+      <td><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><circle cx="12" cy="12" r="10"/><path d="M16 12l-4-4-4 4M12 16V9"/></svg></td>
+      <td><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"> <circle cx="12" cy="12" r="10"/><path d="M16 12l-4 4-4-4M12 8v7"/></svg></td>
+      <td><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><circle cx="12" cy="12" r="10"/><path d="M12 8l-4 4 4 4M16 12H9"/></svg></td>
+      <td><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><circle cx="12" cy="12" r="10"/><path d="M12 8l4 4-4 4M8 12h7"/></svg></td>
+      <td><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg></td>
+      <td><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><circle cx="12" cy="12" r="10"></circle><line x1="8" y1="12" x2="16" y2="12"></line></svg></td>
+      <td><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><path d="M7.027 7.027l9.946 9.946m0-9.946l-9.946 9.946m6.792-10.43h3.64v3.64m-7.278-3.64h-3.64v3.64m7.278 7.278h3.64v-3.64m-7.278 3.64h-3.64v-3.64" stroke-width="1.6"/><circle cx="12.102" cy="12.102" r="10"/></svg></td>
     </tr>
     <tr>
       <th>Keyboard shortcuts:</th>
@@ -125,7 +125,7 @@ <h2>Navigation controls and keyboard navigation</h2>
   <br />
   Apart from clicking the icons, you can also navigate using the keyboard. The buttons are in table above.
   Zoom Extends changes the zoom and position of the camera to encompass all visible nodes. <u>To correctly display the navigation icons, <b>vis.css</b> or <b>vis-network.min.css</b> must be included.</u>
-    The user is free to alter or overload the CSS classes but without them the navigation icons are not visible.
+    The user is free to alter or overload the CSS classes but without them the navigation icons are not visible. To change the icon fill color set the <i>css color attribute</i> for the parent block (the icon color taken from CSS currentColor).
 </div>
 
 <div id="mynetwork"></div>

lib/network/modules/ManipulationSystem.css

@@ -26,21 +26,18 @@ div.vis-network div.vis-edit-mode {
   position:absolute;
   left: 0;
   top: 5px;
-  height: 30px;
 }
 
 /* FIXME: shouldn't the vis-close button be a child of the vis-manipulation div? */
 
-div.vis-network div.vis-close {
+.vis-network .vis-close {
   position:absolute;
-  right: 0;
-  top: 0;
+  right: 1px;
+  top: 1px;
   width: 30px;
   height: 30px;
-
-  background-position: 20px 3px;
-  background-repeat: no-repeat;
-  background-image: url("img/network/cross.png");
+  opacity: 0.3;
+
   cursor: pointer;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
@@ -50,8 +47,24 @@ div.vis-network div.vis-close {
   user-select: none;
 }
 
-div.vis-network div.vis-close:hover {
-  opacity: 0.6;
+.vis-network .vis-close:hover {
+  opacity: 1;
+}
+
+.vis-network .vis-close:before, .vis-network .vis-close:after {
+  position: absolute;
+  left: 14px;
+  content: ' ';
+  height: 29px;
+  width: 2px;
+  background-color: #333;	
+}
+
+.vis-network .vis-close:before {
+  transform: rotate(45deg);
+}
+.vis-network .vis-close:after {
+  transform: rotate(-45deg);
 }
 
 div.vis-network div.vis-manipulation div.vis-button,
@@ -64,11 +77,9 @@ div.vis-network div.vis-edit-mode div.vis-button {
   display:inline-block;
   background-position: 0px 0px;
   background-repeat:no-repeat;
-  height:24px;
   margin-left: 10px;
-  /*vertical-align:middle;*/
   cursor: pointer;
-  padding: 0px 8px 0px 8px;
+  padding: 0px 8px 0px 4px;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
@@ -85,10 +96,6 @@ div.vis-network div.vis-manipulation div.vis-button:active {
   box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.50);
 }
 
-div.vis-network div.vis-manipulation div.vis-button.vis-back {
-  background-image: url("img/network/backIcon.png");
-}
-
 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;
@@ -98,39 +105,31 @@ div.vis-network div.vis-manipulation div.vis-button.vis-none:active {
 }
 div.vis-network div.vis-manipulation div.vis-button.vis-none {
   padding: 0;
+  line-height: 26px;
 }
 div.vis-network div.vis-manipulation div.notification {
   margin: 2px;
   font-weight: bold;
 }
 
-div.vis-network div.vis-manipulation div.vis-button.vis-add {
-  background-image: url("img/network/addNodeIcon.png");
-}
-
-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.vis-network div.vis-edit-mode div.vis-button.vis-edit.vis-edit-mode {
   background-color: #fcfcfc;
   border: 1px solid #cccccc;
 }
 
-div.vis-network div.vis-manipulation div.vis-button.vis-connect {
-  background-image: url("img/network/connectIcon.png");
-}
-
-div.vis-network div.vis-manipulation div.vis-button.vis-delete {
-  background-image: url("img/network/deleteIcon.png");
-}
 /* top right bottom left */
 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;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
+.vis-network .vis-button__icon {
+  padding: 0 2px 0 0;
+  line-height: 1;
+  color: grey;
+}
+
 div.vis-network div.vis-manipulation div.vis-separator-line {
   float:left;
   display:inline-block;

lib/network/modules/ManipulationSystem.js

@@ -595,7 +595,9 @@ class ManipulationSystem {
 
     // create the contents for the editMode button
     let locale = this.options.locales[this.options.locale];
-    let button = this._createButton('editMode', 'vis-button vis-edit vis-edit-mode', locale['edit'] || this.options.locales['en']['edit']);
+    let label = locale['edit'] || this.options.locales['en']['edit'];
+    let icon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><path d="M10.114 17.464H6.637v-3.477l8.692-8.692 3.477 3.477z" stroke-width="1.5"/><circle cx="12" cy="12" r="10"/></svg>';
+    let button = this._createButton('editMode', 'vis-button vis-edit vis-edit-mode', icon, label);
     this.editModeDiv.appendChild(button);
 
     // bind a hammer listener to the button, calling the function toggleEditMode.
@@ -693,7 +695,9 @@ class ManipulationSystem {
    * @private
    */
   _createAddNodeButton(locale) {
-    let button = this._createButton('addNode', 'vis-button vis-add', locale['addNode'] || this.options.locales['en']['addNode']);
+    let label = locale['addNode'] || this.options.locales['en']['addNode'];
+    let icon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg>';    
+    let button = this._createButton('addNode', 'vis-button vis-add', icon, label);
     this.manipulationDiv.appendChild(button);
     this._bindHammerToDiv(button, this.addNodeMode.bind(this));
   }
@@ -704,7 +708,9 @@ class ManipulationSystem {
    * @private
    */
   _createAddEdgeButton(locale) {
-    let button = this._createButton('addEdge', 'vis-button vis-connect',  locale['addEdge'] || this.options.locales['en']['addEdge']);
+    let label = locale['addEdge'] || this.options.locales['en']['addEdge'];
+    let icon = '<svg xmlns="http://www.w3.org/2000/svg" stroke-linejoin="arcs" stroke-linecap="square" stroke-width="2" stroke="currentColor" fill="none" height="24" width="24"><g transform="matrix(.700038 0 0 .702684 3.024926 3.026417)" stroke-width="2.852"><circle cx="16.181" cy="5.496" r="3"/><circle cx="6.744" cy="16.217" r="3"/><path d="M13.723 8.29L9.12 13.67"/></g><circle cx="12.237" cy="11.68" r="10"/><g stroke-width="2"><path d="M15.896 13.344v3.907"/><path d="M13.942 15.298h3.907"/></g></svg>';
+    let button = this._createButton('addEdge', 'vis-button vis-connect', icon, label);
     this.manipulationDiv.appendChild(button);
     this._bindHammerToDiv(button, this.addEdgeMode.bind(this));
   }
@@ -715,7 +721,9 @@ class ManipulationSystem {
    * @private
    */
   _createEditNodeButton(locale) {
-    let button = this._createButton('editNode', 'vis-button vis-edit', locale['editNode'] || this.options.locales['en']['editNode']);
+    let label = locale['editNode'] || this.options.locales['en']['editNode'];
+    let icon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><path d="M10.114 17.464H6.637v-3.477l8.692-8.692 3.477 3.477z" stroke-width="1.5"/><circle cx="12" cy="12" r="10"/></svg>';
+    let button = this._createButton('editNode', 'vis-button vis-edit', icon, label);
     this.manipulationDiv.appendChild(button);
     this._bindHammerToDiv(button, this.editNode.bind(this));
   }
@@ -726,7 +734,9 @@ class ManipulationSystem {
    * @private
    */
   _createEditEdgeButton(locale) {
-    let button = this._createButton('editEdge', 'vis-button vis-edit',  locale['editEdge'] || this.options.locales['en']['editEdge']);
+    let label = locale['editEdge'] || this.options.locales['en']['editEdge'];
+    let icon = '<svg xmlns="http://www.w3.org/2000/svg" stroke-linejoin="arcs" stroke-linecap="square" stroke-width="2" stroke="currentColor" fill="none" height="24" width="24"><g transform="matrix(.700038 0 0 .702684 3.024926 3.026417)" stroke-width="2.852"><circle cx="16.181" cy="5.496" r="3"/><circle cx="6.744" cy="16.217" r="3"/><path d="M13.723 8.29L9.12 13.67"/></g><circle cx="12.237" cy="11.68" r="10"/><g stroke-width="2"><path d="M15.896 13.344v3.907"/><path d="M13.942 15.298h3.907"/></g></svg>';
+    let button = this._createButton('editEdge', 'vis-button vis-edit', icon, label);
     this.manipulationDiv.appendChild(button);
     this._bindHammerToDiv(button, this.editEdgeMode.bind(this));
   }
@@ -743,7 +753,9 @@ class ManipulationSystem {
     } else {
       deleteBtnClass = 'vis-button vis-delete';
     }
-    let button = this._createButton('delete', deleteBtnClass, locale['del'] || this.options.locales['en']['del']);
+    let label = locale['del'] || this.options.locales['en']['del'];
+    let icon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>';
+    let button = this._createButton('delete', deleteBtnClass, icon, label);
     this.manipulationDiv.appendChild(button);
     this._bindHammerToDiv(button, this.deleteSelected.bind(this));
   }
@@ -754,7 +766,9 @@ class ManipulationSystem {
    * @private
    */
   _createBackButton(locale) {
-    let button = this._createButton('back', 'vis-button vis-back', locale['back'] || this.options.locales['en']['back']);
+    let icon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><circle cx="12" cy="12" r="10"/><path d="M12 8l-4 4 4 4M16 12H9"/></svg>';
+    let label = locale['back'] || this.options.locales['en']['back'];
+    let button = this._createButton('back', 'vis-button vis-back', icon, label);
     this.manipulationDiv.appendChild(button);
     this._bindHammerToDiv(button, this.showManipulatorToolbar.bind(this));
   }
@@ -768,14 +782,19 @@ class ManipulationSystem {
    * @returns {HTMLElement}
    * @private
    */
-  _createButton(id, className, label, labelClassName = 'vis-label') {
+  _createButton(id, className, svgIcon, label, labelClassName = 'vis-label') {
 
     this.manipulationDOM[id+'Div'] = document.createElement('div');
     this.manipulationDOM[id+'Div'].className = className;
     this.manipulationDOM[id+'Label'] = document.createElement('div');
     this.manipulationDOM[id+'Label'].className = labelClassName;
     this.manipulationDOM[id+'Label'].innerHTML = label;
+    this.manipulationDOM[id+'Icon'] = document.createElement('i');
+    this.manipulationDOM[id+'Icon'].className = 'vis-button__icon';
+    this.manipulationDOM[id+'Icon'].innerHTML = svgIcon ? svgIcon : '';        
     this.manipulationDOM[id+'Div'].appendChild(this.manipulationDOM[id+'Label']);
+    // do prepend icon before text
+    this.manipulationDOM[id+'Label'].insertBefore(this.manipulationDOM[id+'Icon'],this.manipulationDOM[id+'Label'].firstChild);
     return this.manipulationDOM[id+'Div'];
   }
 
@@ -786,7 +805,7 @@ class ManipulationSystem {
    */
   _createDescription(label) {
     this.manipulationDiv.appendChild(
-      this._createButton('description', 'vis-button vis-none', label)
+      this._createButton('description', 'vis-button vis-none', '', label)
     );
   }
 

lib/network/modules/components/NavigationHandler.css

@@ -1,13 +1,15 @@
 div.vis-network div.vis-navigation div.vis-button {
     width:34px;
     height:34px;
+	color: grey; /* used to set svg icons color */
     -moz-border-radius: 17px;
     border-radius: 17px;
     position:absolute;
     display:inline-block;
-    background-position: 2px 2px;
+    background-position: 0 0;
     background-repeat:no-repeat;
     cursor: pointer;
+	padding: 3px 0 0 3px;
     -webkit-touch-callout: none;
     -webkit-user-select: none;
     -khtml-user-select: none;
@@ -17,45 +19,38 @@ div.vis-network div.vis-navigation div.vis-button {
 }
 
 div.vis-network div.vis-navigation div.vis-button:hover {
-    box-shadow: 0 0 3px 3px rgba(56, 207, 21, 0.30);
+    box-shadow: 0 0 0 0 rgba(56, 207, 21, 0.30);
 }
 
 div.vis-network div.vis-navigation div.vis-button:active {
     box-shadow: 0 0 1px 3px rgba(56, 207, 21, 0.95);
 }
 
 div.vis-network div.vis-navigation div.vis-button.vis-up {
-    background-image: url("img/network/upArrow.png");
     bottom:50px;
     left:55px;
 }
 div.vis-network div.vis-navigation div.vis-button.vis-down {
-    background-image: url("img/network/downArrow.png");
     bottom:10px;
     left:55px;
 }
 div.vis-network div.vis-navigation div.vis-button.vis-left {
-    background-image: url("img/network/leftArrow.png");
     bottom:10px;
     left:15px;
 }
 div.vis-network div.vis-navigation div.vis-button.vis-right {
-    background-image: url("img/network/rightArrow.png");
     bottom:10px;
     left:95px;
 }
 div.vis-network div.vis-navigation div.vis-button.vis-zoomIn {
-    background-image: url("img/network/plus.png");
     bottom:10px;
     right:15px;
 }
 div.vis-network div.vis-navigation div.vis-button.vis-zoomOut {
-    background-image: url("img/network/minus.png");
     bottom:10px;
     right:55px;
 }
 div.vis-network div.vis-navigation div.vis-button.vis-zoomExtends {
-    background-image: url("img/network/zoomExtends.png");
     bottom:50px;
     right:15px;
 }