tmp

.gitignore

@@ -2,3 +2,4 @@ dist
 node_modules
 .parcel-cache
 public/css/main.css*
+public/js/main.js*

CHANGELOG.md

@@ -4,6 +4,8 @@
 
 * download files #26
 * add goto last line toolbar #21
+* use parcel to load main.js
+* use icons
 
 ## Fix
 

package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "build": "sass --style compressed src/main.scss public/css/main.css",
     "start": "sass src/main.scss public/css/main.css",
+    "js-dev": "parcel build src/main.js --dist-dir public/js --no-content-hash",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
@@ -18,5 +19,8 @@
     "bulma": "^0.9.3",
     "prismjs": "^1.25.0",
     "sass": "^1.43.2"
+  },
+  "devDependencies": {
+    "parcel": "^2.0.0"
   }
 }

public/embed.go

@@ -2,5 +2,5 @@ package public
 
 import "embed"
 
-//go:embed js css ace
+//go:embed js css ace assets
 var FS embed.FS

src/main.js

@@ -1,4 +1,5 @@
 
+
 window.ToolIsFollow = false;
 
 async function FileGet(follower=false){

src/main.scss

@@ -7,6 +7,7 @@ $modal-content-width: 90vw;
 @import "../node_modules/@creativebulma/bulma-tooltip/src/sass/index.sass";
 
 @import "./ace.scss";
+@import "./material-icon.scss";
 
 #error_view {
   position: fixed; /* Sit on top of the page content */
@@ -19,3 +20,17 @@ $modal-content-width: 90vw;
 #title {
   padding: 0.5rem;
 }
+
+.icn-spinner {
+  animation: spin-animation 0.5s infinite;
+  display: inline-block;
+}
+
+@keyframes spin-animation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(359deg);
+  }
+}

src/material-icon.scss

@@ -0,0 +1,21 @@
+@font-face {
+    font-family: 'Material Icons';
+    font-style: normal;
+    font-weight: 400;
+    src: url(/public/assets/mat.ttf) format('truetype');
+  }
+  
+  .material-icons {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+  }
+  

templates/components/toolbar.tmpl

@@ -3,7 +3,13 @@
   <div class="level-left">
     <div class="field has-addons">
       <p class="control">
-        <button class="button is-small" onclick="editor.gotoLine(editor.session.getLength())">Bottom</button>
+        <button class="button is-small has-tooltip-arrow"
+          data-tooltip="Go to last line"
+          onclick="editor.gotoLine(editor.session.getLength())">
+          <span class="icon is-small"><span class="material-icons">
+            vertical_align_bottom
+          </span></span>
+        </button>
       </p>
       <p class="control">
         <div class="select is-small">
@@ -16,13 +22,30 @@
         </div>
       </p>
       <p class="control">
-        <button class="button is-small" id="toolFollow" onclick="toolFollow()">Follow</button>
+        <button class="button is-small has-tooltip-arrow" id="toolFollow" 
+          data-tooltip="Follow file change (1s)" onclick="toolFollow()">
+          <span class="icon is-small"><span class="material-icons" id="toolFollowIcon">
+            pause
+          </span></span>
+        </button>
       </p>
       <p class="control">
-        <button class="button is-small" onclick="toolFormat()">Format</button>
+        <button class="button is-small has-tooltip-arrow"
+          data-tooltip="Format Code"
+          onclick="toolFormat()">
+          <span class="icon is-small"><span class="material-icons">
+            code
+          </span></span>
+        </button>
       </p>
       <p class="control">
-        <button class="button is-small is-light is-danger" id="toolWrap" onclick="toggleWrap()">NoWrap</button>
+        <button class="button is-small is-light is-danger has-tooltip-arrow"
+          data-tooltip="Line Wrap"
+          id="toolWrap" onclick="toggleWrap()">
+          <span class="icon is-small"><span class="material-icons" id="toolWrapIcon">
+            view_headline
+          </span></span>
+        </button>
       </p>
     </div>
   </div>
@@ -30,14 +53,29 @@
   <div class="level-right">
     <div class="field has-addons">
       <p class="control">
-        <button class="button is-small" id="toolRefresh" onclick="toolRefresh()">Refresh</button>
+        <button class="button is-small has-tooltip-arrow" id="toolRefresh"
+          data-tooltip="Refresh" onclick="toolRefresh()">
+          <span class="icon is-small"><span class="material-icons">
+            refresh
+          </span></span>
+        </button>
       </p>
       {{if not .File.RO}}
         <p class="control">
           {{if eq .File.Alias "ConfigUI"}}
-            <button class="button is-small" id="toolSave" onclick="toolSave()">Apply</button>
+            <button class="button is-small has-tooltip-arrow" id="toolSave" 
+              data-tooltip="Apply" onclick="toolSave()">
+              <span class="icon is-small"><span class="material-icons">
+                play_arrow
+              </span></span>  
+            </button>
           {{else}}
-            <button class="button is-small" id="toolSave" onclick="toolSave()">Save</button>
+            <button class="button is-small has-tooltip-arrow" id="toolSave" 
+              data-tooltip="Save" onclick="toolSave()">
+              <span class="icon is-small"><span class="material-icons">
+                save
+              </span></span>
+            </button>
           {{end}}
         </p>
       {{end}}
@@ -45,14 +83,22 @@
       <p class="control">
         <button class="button is-small has-tooltip-arrow"
           data-tooltip="{{.File.Action}}"
-          id="toolApply" onclick="toolApply()"
-        >Apply</button>
+          id="toolApply" onclick="toolApply()">
+          <span class="icon is-small"><span class="material-icons">
+            play_arrow
+          </span></span> 
+        </button>
       </p>
       {{end}}
 
       {{/* TEST */}} 
       <p class="control">
-        <a class="button is-small" href="/api/export?name={{.File.Alias}}">Download</a>
+        <a class="button is-small has-tooltip-arrow" data-tooltip="Download"
+          href="/api/export?name={{.File.Alias}}">
+          <span class="icon is-small"><span class="material-icons">
+            download
+          </span></span>
+        </a>
       </p>
     </div>
   </div>
@@ -83,14 +129,15 @@ function toggleWrap(){
   let mode = editor.session.getUseWrapMode();
   editor.session.setUseWrapMode(!mode)
   let el = document.getElementById('toolWrap');
+  let icon =document.getElementById('toolWrapIcon');
   if (mode){
     el.classList.remove('is-success');
     el.classList.add('is-danger');
-    el.innerHTML = 'NoWrap'
+    icon.innerText = 'view_headline'
   } else {
     el.classList.remove('is-danger');
     el.classList.add('is-success');
-    el.innerHTML = 'Wrap'
+    icon.innerText = 'wrap_text';
   }
 }
 
@@ -102,11 +149,17 @@ function toolFollow(){
   if (ToolIsFollow){
     ToolIsFollow = false
     let el = document.getElementById('toolFollow');
+    let icon = document.getElementById('toolFollowIcon');
     el.classList.remove('is-primary');
+    icon.classList.remove('icn-spinner');
+    icon.innerText='pause';
   } else {
     ToolIsFollow = true
     let el = document.getElementById('toolFollow');
+    let icon = document.getElementById('toolFollowIcon');
     el.classList.add('is-primary');
+    icon.innerText='sync';
+    icon.classList.add('icn-spinner');
     editor.gotoLine(editor.session.getLength());
   }
 }