trial of texts-based toolbox icons (for desktop version). probably no…

…t going to be standard.
ae27ff · Dec 27, 2018 · 180c9bf · 180c9bf
1 parent 43b27c3
commit 180c9bf
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 19 deletions.
diff --git a/css/desktop.css b/css/desktop.css
@@ -26,7 +26,19 @@ html,body {height: 100%;width: 100%;  overflow: hidden; }
     color: #00FF00;
 }
 
-
+.fa,.far,.fas,.tltx{
+    font-size:42px;
+}
+div.tool{
+    min-height:48px;
+    min-width:48px;
+    text-align:center;
+    color:black;
+}
+div.toolopen{
+    text-align:center;
+    color:black;
+}
 
 #border {
     border-top:0;

diff --git a/index.html b/index.html
@@ -9,6 +9,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <link rel="stylesheet" type="text/css" href="css/jxlate.css">
         <link rel="stylesheet" type="text/css" href="css/desktop.css">
+        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
 
         <script src="js/lib/rumkin-util.js"></script>
         <script src="js/lib/ascii85.js"></script>
@@ -61,7 +62,7 @@
                     <li><input type="radio" name="mode" value="14" id="rad14"><label for="rad14">Radix-N</label></li>
                 </ul>
                 <div id="border"></div>
-                <div class="toolopen"><img src="img/tools.png" onclick="jxlate.ui.toolbox.events.toggle()" alt="tools" title="text tools"></div>
+                <div class="toolopen" onclick="jxlate.ui.toolbox.events.toggle()"><i class="fas fa-tools"></i></div>
             </div>
             <textarea name="text" spellcheck="false" wrap="hard" placeholder="Enter your data here" class="grey" id="text" cols="32"></textarea>
         </form>

diff --git a/js/toolbox.js b/js/toolbox.js
@@ -16,16 +16,16 @@ jxlate.ui.toolbox = {
      * @type {Array}
      */
     tools: [
-        ['replace', 'Replace one phrase with another'],
-        ['case', 'Toggle letter case'],
-        ['length', 'Find the total length'],
-        ['reverse', 'Reverse all characters'],
-        ['shift', 'Apply Caesar shift'],
-        ['invert', 'Invert bit values'],
-        ['greverse', 'Reverse groupings only'],
-        ['stripspaces', 'Remove spaces'],
-        ['xor', 'XOR each byte against a number'],
-        ['byteshift','Shift each byte value by some amount']
+        ['replace', 'Replace one phrase with another','<i class="fas fa-sync"></i>'],
+        ['case', 'Toggle letter case','<span class="tltx">aA</span>'],
+        ['length', 'Find the total length','<i class="fas fa-ruler"></i>'],
+        ['reverse', 'Reverse all characters','<i class="fas fa-arrow-left"></i>'],
+        ['shift', 'Apply Caesar shift','<i class="fas fa-sort-alpha-up"></i>'],
+        ['invert', 'Invert bit values','<span class="tltx">10</span>'],
+        ['greverse', 'Reverse groupings only','<span class="tltx">GR</span>'],
+        ['stripspaces', 'Remove spaces','<span class="tltx">_</span>'],
+        ['xor', 'XOR each byte against a number','<i class="fas fa-plus-circle"></i>'],
+        ['byteshift','Shift each byte value by some amount','<i class="fas fa-sort-numeric-up"></i>']
     ],
 
     /**
@@ -127,7 +127,7 @@ jxlate.ui.toolbox = {
      * @return {undefined}
      */
     addtooln: function (i) {
-        this.addtool(this.tools[i][0], this.tools[i][1]);
+        this.addtool(this.tools[i][0], this.tools[i][1], this.tools[i][2]);
     },
 
     /** Adds a tool option [visually] to the toolbox element.
@@ -139,17 +139,18 @@ jxlate.ui.toolbox = {
      * @param {type} sdesc the description of the tool
      * @return {undefined}
      */
-    addtool: function (sname, sdesc) {
+    addtool: function (sname, sdesc, sdisp) {
         var sfunc = "jxlate.ui.toolbox.events.action_" + sname;
 
         var tool = document.createElement("div");
         tool.className = "tool";
 
-        var img = document.createElement("img");
-        img.title = sdesc;
-        img.alt = sname;
-        img.src = "img/" + sname + ".png";
-        img.style.borderStyle = "none";
+        var img = document.createElement("div");
+        //img.title = sdesc;
+        //img.alt = sname;
+        //img.src = "img/" + sname + ".png";
+        //img.style.borderStyle = "none";
+        img.innerHTML = sdisp;
         tool.onclick = (function(sfunc){
             return function(){
                 eval(sfunc)();