remove awesome 4

TODO.md

@@ -4,8 +4,6 @@
 - switch monaco themes
 - nice css styles
 - support of smartphones
-- replace font awesome 4 for something light
-    https://github.com/danklammer/bytesize-icons
 - load files with full path
 - dot files visualization
 - use JSZip for storing in localStorage

package.json

@@ -52,7 +52,6 @@
   "dependencies": {
     "@viz-js/viz": "^3.2.3",
     "ajv": "^8.12.0",
-    "font-awesome": "^4.7.0",
     "heta-compiler": "^0.6.20",
     "jquery": "^3.7.0",
     "jszip": "^3.10.1",

src/app.js

@@ -2,7 +2,7 @@
 
 // Add styles and fonts
 import 'w3-css/w3.css';
-import 'font-awesome/css/font-awesome.min.css';
+//import 'font-awesome/css/font-awesome.min.css'; // font-awesome pkg, https://github.com/danklammer/bytesize-icons
 import './dropping.css';
 
 import * as path from 'path';

src/dropping.css

@@ -2,6 +2,16 @@
     /*border: 10px dotted red;*/
 }
 
+svg {
+    margin: 0.1em;
+    overflow: visible;
+}
+
+svg#i-lightning {
+    margin: 0em;
+    overflow: visible;
+}
+
 #modalDnD .w3-modal-content {
     width: 90%;
     height: 600px;

src/index.html

@@ -52,10 +52,31 @@ <h1>Add files or directories here</h1>
                 <div class="w3-display-right">
                   <div class="w3-bar">
                     <i class="w3-bar-item">Heta compiler of version <span id="hc-version">0.0.0</span></i>
-                    <a id="hc-download" href="#" class="w3-button" title="Download project files"><i class="fa fa-download"></i></a>
-                    <a id="hc-clean" href="#" class="w3-button"><i class="fa fa-eraser" title="Reset to the initial state"></i></a>
-                    <a id="hc-github" href="#" class="w3-button"><i class="fa fa-github" title="Project homepage"></i></a>
-                    <a id="hc-info" href="#" class="w3-button"><i class="fa fa-question" title="Information"></i></a>
+                    <a id="hc-download" href="#" class="w3-button" title="Download project files">
+                      <!--<i class="fa fa-download"></i>-->
+                      <svg id="i-download" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+                        <path d="M9 22 C0 23 1 12 9 13 6 2 23 2 22 10 32 7 32 23 23 22 M11 26 L16 30 21 26 M16 16 L16 30" />
+                      </svg>
+                    </a>
+                    <a id="hc-clean" href="#" class="w3-button" title="Reset to the initial state">
+                      <!--<i class="fa fa-eraser"></i>-->
+                      <svg id="i-trash" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+                        <path d="M28 6 L6 6 8 30 24 30 26 6 4 6 M16 12 L16 24 M21 12 L20 24 M11 12 L12 24 M12 6 L13 2 19 2 20 6" />
+                      </svg>
+                    </a>
+                    <a id="hc-github" href="#" class="w3-button" title="Project homepage">
+                      <!--<i class="fa fa-github"></i>-->
+                      <svg id="i-github" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="24" height="24">
+                        <path stroke-width="0" fill="currentColor" d="M32 0 C14 0 0 14 0 32 0 53 19 62 22 62 24 62 24 61 24 60 L24 55 C17 57 14 53 13 50 13 50 13 49 11 47 10 46 6 44 10 44 13 44 15 48 15 48 18 52 22 51 24 50 24 48 26 46 26 46 18 45 12 42 12 31 12 27 13 24 15 22 15 22 13 18 15 13 15 13 20 13 24 17 27 15 37 15 40 17 44 13 49 13 49 13 51 20 49 22 49 22 51 24 52 27 52 31 52 42 45 45 38 46 39 47 40 49 40 52 L40 60 C40 61 40 62 42 62 45 62 64 53 64 32 64 14 50 0 32 0 Z" />
+                      </svg>
+                    </a>
+                    <a id="hc-info" href="#" class="w3-button" title="Information">
+                      <!--<i class="fa fa-question"></i>-->
+                      <svg id="i-info" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+                        <path d="M16 14 L16 23 M16 8 L16 10" />
+                        <circle cx="16" cy="16" r="14" />
+                      </svg>
+                    </a>
                   </div>
                 </div>
             </div>
@@ -77,7 +98,12 @@ <h1>Add files or directories here</h1>
                     <option value="sbml">*.xml</option>
                     <option value="loadFiles">Load files</option>
                   </select>
-                  <a id="buildBtn" href="#" class="w3-button w3-small w3-right w3-disabled"><i class="fa fa-rocket"></i></a>
+                  <a id="buildBtn" href="#" class="w3-button w3-small w3-right w3-disabled" title="Build platform">
+                    <!--<i class="fa fa-rocket"></i>-->
+                    <svg id="i-lightning" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="24" height="24" fill="yellow" stroke="red" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+                      <path d="M18 13 L26 2 8 13 14 19 6 30 24 19 Z" />
+                    </svg>
+                  </a>
                 </div>
               </div>
 

src/viz-page.js

@@ -1,3 +1,9 @@
+// https://github.com/mdaines/viz-js/tree/v3/packages/viz
+// https://github.com/magjac/d3-graphviz
+// https://viz-js.com/api/
+// https://github.com/abstratt/eclipsegraphviz
+// https://codemirror.net/
+
 import { instance } from "@viz-js/viz";
 import Page from './abstract-page';