Remove 404 image files

Switch to fontawesome style to keep consistency

Change-Id: Id6c78a1d1b96abf673d2544b8a269b77c433ab19
Closes-Bug: #1752881

heat_dashboard/static/dashboard/project/heat_dashboard/template_generator/css/hotgen.scss

@@ -50,9 +50,11 @@ div.vis-label, div.vis-network
 div.vis-edit-mode div.vis-label{
     margin: -5px 15px 10px 25px;
 }
+div.vis-network div.vis-manipulation div.vis-button.vis-none {
+    margin-top: -15px;
+}
 div.vis-network div.vis-manipulation div.vis-separator-line {
-    height: 80%;
-    margin: 0px 1px 5px 15px;
+    width: 0px
 }
 .mat-tab-links {
     display: table;
@@ -166,4 +168,4 @@ md-icon.spinner{
 .div-scroll{
     overflow: auto;
     max-height: 500px;
-}
+}

heat_dashboard/static/dashboard/project/heat_dashboard/template_generator/css/vis.scss

@@ -264,7 +264,7 @@
 }
 
 .vis-item .vis-delete {
-  background: url('img/timeline/delete.png') no-repeat center;
+  background: none; 
   position: absolute;
   width: 24px;
   height: 24px;
@@ -615,7 +615,7 @@ div.vis-network div.vis-manipulation {
 
   position: absolute;
   left: 0;
-  top: 0;
+  top: 1%;
   width: 100%;
   height: 30px;
 }
@@ -638,7 +638,7 @@ div.vis-network div.vis-close {
 
   background-position: 20px 3px;
   background-repeat: no-repeat;
-  background-image: url("../project/heat_dashboard/template_generator/css/img/network/cross.png");
+  background-image: none;
   cursor: pointer;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
@@ -685,7 +685,7 @@ div.vis-network div.vis-manipulation div.vis-button:active {
 }
 
 div.vis-network div.vis-manipulation div.vis-button.vis-back {
-  background-image: url("../project/heat_dashboard/template_generator/css/img/network/backIcon.png");
+  background-image: none;
 }
 
 div.vis-network div.vis-manipulation div.vis-button.vis-none:hover {
@@ -704,12 +704,12 @@ div.vis-network div.vis-manipulation div.notification {
 }
 
 div.vis-network div.vis-manipulation div.vis-button.vis-add {
-  background-image: url("../project/heat_dashboard/template_generator/css/img/network/addNodeIcon.png");
+  background-image: none;
 }
 
 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("../project/heat_dashboard/template_generator/css/img/network/editIcon.png");
+  background-image: none;
 }
 
 div.vis-network div.vis-edit-mode div.vis-button.vis-edit.vis-edit-mode {
@@ -718,22 +718,22 @@ div.vis-network div.vis-edit-mode div.vis-button.vis-edit.vis-edit-mode {
 }
 
 div.vis-network div.vis-manipulation div.vis-button.vis-connect {
-  background-image: url("../project/heat_dashboard/template_generator/css/img/network/connectIcon.png");
+  background-image: none;
 }
 
 div.vis-network div.vis-manipulation div.vis-button.vis-delete {
-  background-image: url("../project/heat_dashboard/template_generator/css/img/network/deleteIcon.png");
+  background-image: none;
 }
 /* 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;
+  margin: 0 5px;
   line-height: 25px;
 }
 div.vis-network div.vis-manipulation div.vis-separator-line {
-  display:inline-block;
-  width:1px;
-  height:20px;
+  display: inline-block;
+  width: 0px;
+  height: 20px;
   background-color: #bdbdbd;
   margin: 5px 7px 0 15px;
 }
@@ -774,37 +774,37 @@ div.vis-network div.vis-navigation div.vis-button:active {
 }
 
 div.vis-network div.vis-navigation div.vis-button.vis-up {
-    background-image: url("img/network/upArrow.png");
+    background-image: none;
     bottom:50px;
     left:55px;
 }
 div.vis-network div.vis-navigation div.vis-button.vis-down {
-    background-image: url("img/network/downArrow.png");
+    background-image: none;
     bottom:10px;
     left:55px;
 }
 div.vis-network div.vis-navigation div.vis-button.vis-left {
-    background-image: url("img/network/leftArrow.png");
+    background-image: none;
     bottom:10px;
     left:15px;
 }
 div.vis-network div.vis-navigation div.vis-button.vis-right {
-    background-image: url("img/network/rightArrow.png");
+    background-image: none;
     bottom:10px;
     left:95px;
 }
 div.vis-network div.vis-navigation div.vis-button.vis-zoomIn {
-    background-image: url("img/network/plus.png");
+    background-image: none;
     bottom:10px;
     right:15px;
 }
 div.vis-network div.vis-navigation div.vis-button.vis-zoomOut {
-    background-image: url("img/network/minus.png");
+    background-image: none;
     bottom:10px;
     right:55px;
 }
 div.vis-network div.vis-navigation div.vis-button.vis-zoomExtends {
-    background-image: url("img/network/zoomExtends.png");
+    background-image: none;
     bottom:50px;
     right:15px;
 }

heat_dashboard/static/dashboard/project/heat_dashboard/template_generator/js/libs/vis.js

@@ -38663,6 +38663,7 @@ return /******/ (function(modules) { // webpackBootstrap
           } else {
             this.editModeDiv.style.display = 'block';
           }
+          this.editModeDiv.appendChild(this._createIcon('fa-pencil'))
           this.canvas.frame.appendChild(this.editModeDiv);
         }
 
@@ -38671,6 +38672,7 @@ return /******/ (function(modules) { // webpackBootstrap
           this.closeDiv = document.createElement('div');
           this.closeDiv.className = 'vis-close';
           this.closeDiv.style.display = this.manipulationDiv.style.display;
+          this.closeDiv.appendChild(this._createIcon('fa-times'))
           this.canvas.frame.appendChild(this.closeDiv);
         }
       }
@@ -38713,7 +38715,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
         // create the contents for the editMode button
         var locale = this.options.locales[this.options.locale];
-        var button = this._createButton('editMode', 'vis-button vis-edit vis-edit-mode', locale['edit'] || this.options.locales['en']['edit']);
+        var button = this._createButton('editMode', 'vis-button vis-edit vis-edit-mode', locale['edit'] || this.options.locales['en']['edit'], 'fa-pencil');
         this.editModeDiv.appendChild(button);
 
         // bind a hammer listener to the button, calling the function toggleEditMode.
@@ -38820,62 +38822,82 @@ return /******/ (function(modules) { // webpackBootstrap
       // ----------------------    DOM functions for buttons    --------------------------//
 
       value: function _createAddNodeButton(locale) {
-        var button = this._createButton('addNode', 'vis-button vis-add', locale['addNode'] || this.options.locales['en']['addNode']);
+        var button = this._createButton('addNode', 'vis-button vis-add', locale['addNode'] || this.options.locales['en']['addNode'], 'fa-plus');
         this.manipulationDiv.appendChild(button);
         this._bindHammerToDiv(button, this.addNodeMode.bind(this));
       }
     }, {
       key: '_createAddEdgeButton',
       value: function _createAddEdgeButton(locale) {
-        var button = this._createButton('addEdge', 'vis-button vis-connect', locale['addEdge'] || this.options.locales['en']['addEdge']);
+        var button = this._createButton('addEdge', 'vis-button vis-connect', locale['addEdge'] || this.options.locales['en']['addEdge'], 'fa-plus');
         this.manipulationDiv.appendChild(button);
         this._bindHammerToDiv(button, this.addEdgeMode.bind(this));
       }
     }, {
       key: '_createEditNodeButton',
       value: function _createEditNodeButton(locale) {
-        var button = this._createButton('editNode', 'vis-button vis-edit', locale['editNode'] || this.options.locales['en']['editNode']);
+        var button = this._createButton('editNode', 'vis-button vis-edit', locale['editNode'] || this.options.locales['en']['editNode'], 'fa-pencil');
         this.manipulationDiv.appendChild(button);
         this._bindHammerToDiv(button, this.editNode.bind(this));
       }
     }, {
       key: '_createEditEdgeButton',
       value: function _createEditEdgeButton(locale) {
-        var button = this._createButton('editEdge', 'vis-button vis-edit', locale['editEdge'] || this.options.locales['en']['editEdge']);
+        var button = this._createButton('editEdge', 'vis-button vis-edit', locale['editEdge'] || this.options.locales['en']['editEdge'], 'fa-pencil');
         this.manipulationDiv.appendChild(button);
         this._bindHammerToDiv(button, this.editEdgeMode.bind(this));
       }
     }, {
       key: '_createDeleteButton',
       value: function _createDeleteButton(locale) {
-        var button = this._createButton('delete', 'vis-button vis-delete', locale['del'] || this.options.locales['en']['del']);
+        var button = this._createButton('delete', 'vis-button vis-delete', locale['del'] || this.options.locales['en']['del'], 'fa-minus');
         this.manipulationDiv.appendChild(button);
         this._bindHammerToDiv(button, this.deleteSelected.bind(this));
       }
     }, {
       key: '_createBackButton',
       value: function _createBackButton(locale) {
-        var button = this._createButton('back', 'vis-button vis-back', locale['back'] || this.options.locales['en']['back']);
+        var button = this._createButton('back', 'vis-button vis-back', locale['back'] || this.options.locales['en']['back'], 'fa-arrow-left');
         this.manipulationDiv.appendChild(button);
         this._bindHammerToDiv(button, this.showManipulatorToolbar.bind(this));
       }
     }, {
       key: '_createButton',
-      value: function _createButton(id, className, label) {
-        var labelClassName = arguments[3] === undefined ? 'vis-label' : arguments[3];
+      value: function _createButton(id, className, label, iconClass) {
+        var labelClassName = arguments[4] === undefined ? 'vis-label' : arguments[4];
 
         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 + 'Label'].innerHTML = label;
+
+        var labelElement = document.createElement('span')
+        if (typeof iconClass != 'undefined' && iconClass != ''){
+          var iconElement = this._createIcon(iconClass);
+          this.manipulationDOM[id + 'Label'].appendChild(iconElement);
+          labelElement.style.fontFamily = 'inherit';
+          labelElement.style.fontSize = '0.9em';
+          labelElement.style.marginLeft = '5px';
+        }
+        labelElement.innerHTML = label;
+        this.manipulationDOM[id + 'Label'].appendChild(labelElement);
+
         this.manipulationDOM[id + 'Div'].appendChild(this.manipulationDOM[id + 'Label']);
         return this.manipulationDOM[id + 'Div'];
       }
     }, {
       key: '_createDescription',
       value: function _createDescription(label) {
-        this.manipulationDiv.appendChild(this._createButton('description', 'vis-button vis-none', label));
+        this.manipulationDiv.appendChild(this._createButton('description', 'vis-button vis-none', label, ''));
+      }
+    }, {
+      key: '_createIcon',
+      value: function _createIcon(iconClass){
+        var newIcon = document.createElement('i');
+        newIcon.classList.add('fa');
+        newIcon.classList.add(iconClass);
+        return newIcon
       }
     }, {
       key: '_temporaryBindEvent',
@@ -41172,4 +41194,4 @@ return /******/ (function(modules) { // webpackBootstrap
 /***/ }
 /******/ ])
 });
-;
+;