From 594878614f5d33493bda3c7754ad2d88d75a40aa Mon Sep 17 00:00:00 2001
From: Revertron <r@revertron.com>
Date: Fri, 26 Mar 2021 12:39:19 +0100
Subject: [PATCH] Added horizontal tabs to the new interface.

---
 src/web_ui.rs          |  1 +
 src/webview/index.html | 69 +++++++++++++++++++++++++++++++++++-------
 src/webview/scripts.js | 26 +++++++++++++++-
 src/webview/styles.css | 16 ++++++++++
 4 files changed, 100 insertions(+), 12 deletions(-)
diff --git a/src/web_ui.rs b/src/web_ui.rs
index b3a3fcc..0518c52 100644
--- a/src/web_ui.rs
+++ b/src/web_ui.rs
@@ -341,6 +341,7 @@ fn show_warning(web_view: &mut WebView<()>, text: &str) {
     }
 }
 
+#[allow(dead_code)]
 fn show_success(web_view: &mut WebView<()>, text: &str) {
     let str = text.replace('\'', "\\'");
     match web_view.eval(&format!("showSuccess('{}');", &str)) {
diff --git a/src/webview/index.html b/src/webview/index.html
index 8247840..7fb4f71 100644
--- a/src/webview/index.html
+++ b/src/webview/index.html
@@ -5,20 +5,64 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>ALFIS</title>
     {styles}
-    <link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/font-awesome-line-awesome/css/all.min.css">
     {scripts}
 </head>
 <body onload="onLoad();">
 
 <div class="container">
+    <!-- Tabs -->
+    <div class="tabs is-centered is-boxed">
+        <ul>
+            <li class="tab is-active">
+                <a onclick="openTab(this, 'tab_credentials')">
+                    <span class="icon">
+                        <svg viewBox="0 0 24 24" style="width: 20px; height: 20px;"><path d="M12,1L3,5V11C3,16.55 6.84,21.74 12,23C17.16,21.74 21,16.55 21,11V5L12,1M12,3.18L19,6.3V11.22C19,12.92 18.5,14.65 17.65,16.17C16,14.94 13.26,14.5 12,14.5C10.74,14.5 8,14.94 6.35,16.17C5.5,14.65 5,12.92 5,11.22V6.3L12,3.18M12,6A3.5,3.5 0 0,0 8.5,9.5A3.5,3.5 0 0,0 12,13A3.5,3.5 0 0,0 15.5,9.5A3.5,3.5 0 0,0 12,6M12,8A1.5,1.5 0 0,1 13.5,9.5A1.5,1.5 0 0,1 12,11A1.5,1.5 0 0,1 10.5,9.5A1.5,1.5 0 0,1 12,8M12,16.5C13.57,16.5 15.64,17.11 16.53,17.84C15.29,19.38 13.7,20.55 12,21C10.3,20.55 8.71,19.38 7.47,17.84C8.37,17.11 10.43,16.5 12,16.5Z"></path></svg>
+                    </span>
+                    <span>Credentials</span>
+                </a>
+            </li>
+            <li class="tab">
+                <a onclick="openTab(this, 'tab_domains')">
+                    <span class="icon">
+                        <svg viewBox="0 0 24 24" style="width: 20px; height: 20px;"><path d="M17.9,17.39C17.64,16.59 16.89,16 16,16H15V13A1,1 0 0,0 14,12H8V10H10A1,1 0 0,0 11,9V7H13A2,2 0 0,0 15,5V4.59C17.93,5.77 20,8.64 20,12C20,14.08 19.2,15.97 17.9,17.39M11,19.93C7.05,19.44 4,16.08 4,12C4,11.38 4.08,10.78 4.21,10.21L9,15V16A2,2 0 0,0 11,18M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path></svg>
+                    </span>
+                    <span>Domains</span>
+                </a>
+            </li>
+            <li class="tab">
+                <a onclick="openTab(this, 'tab_zones')">
+                    <span class="icon">
+                        <svg viewBox="0 0 24 24" style="width: 20px; height: 20px;"><path d="M18.25,22L15.5,19L16.66,17.82L18.25,19.41L21.84,15.82L23,17.23M20.5,3A0.5,0.5 0 0,1 21,3.5V13.36C20.36,13.13 19.69,13 19,13C17.46,13 16.06,13.6 15,14.56V7.1L9,5V16.9L13.04,18.3C13,18.54 13,18.77 13,19C13,19.46 13.06,19.92 13.16,20.36L9,18.9L3.66,20.97C3.59,21 3.55,21 3.5,21A0.5,0.5 0 0,1 3,20.5V5.38C3,5.15 3.16,4.97 3.35,4.9L9,3L15,5.1L20.33,3"></path></svg>
+                    </span>
+                    <span>Zones</span>
+                </a>
+            </li>
+            <li class="tab">
+                <a onclick="openTab(this, 'tab_events')">
+                    <span class="icon">
+                        <svg viewBox="0 0 24 24" style="width: 20px; height: 20px;"><path d="M4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H16L12,22L8,18H4A2,2 0 0,1 2,16V4A2,2 0 0,1 4,2M4,4V16H8.83L12,19.17L15.17,16H20V4H4M6,7H18V9H6V7M6,11H16V13H6V11Z"></path></svg>
+                    </span>
+                    <span>Events</span>
+                </a>
+            </li>
+            <li class="tab">
+                <a onclick="openTab(this, 'tab_help')">
+                    <span class="icon">
+                        <svg viewBox="0 0 24 24" style="width: 20px; height: 20px;"><path d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z"></path></svg>
+                    </span>
+                    <span>Help</span>
+                </a>
+            </li>
+        </ul>
+    </div>
+
     <!-- Credentials (Key management) -->
-    <div class="content">
-        <label class="label">Credentials</label>
+    <div class="tab content" id="tab_credentials">
         <div class="field is-grouped">
             <div class="control is-expanded has-icons-left">
                 <input class="input is-expanded" type="text" id="public_key_hash" placeholder="No key loaded" readonly>
                 <span class="icon is-small is-left">
-                    <i class="fas fa-lock"></i>
+                    <svg viewBox="0 0 24 24" style="width: 20px; height: 20px;"><path d="M12,17A2,2 0 0,0 14,15C14,13.89 13.1,13 12,13A2,2 0 0,0 10,15A2,2 0 0,0 12,17M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V10C4,8.89 4.9,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z"></path></svg>
                 </span>
             </div>
             <div class="buttons has-addons">
@@ -31,13 +75,12 @@
     </div>
 
     <!-- Domain mining -->
-    <div class="content">
-        <label class="label">Mine domain name</label>
+    <div class="tab content is-hidden" id="tab_domains">
         <div class="field is-grouped">
             <div class="control is-expanded has-icons-left">
                 <input class="input is-expanded" type="text" placeholder="example.tld" id="new_domain" oninput="onDomainChange(this)">
                 <span class="icon is-small is-left">
-                    <i class="fas fa-globe"></i>
+                    <svg viewBox="0 0 24 24" style="width: 20px; height: 20px;"><path d="M17.9,17.39C17.64,16.59 16.89,16 16,16H15V13A1,1 0 0,0 14,12H8V10H10A1,1 0 0,0 11,9V7H13A2,2 0 0,0 15,5V4.59C17.93,5.77 20,8.64 20,12C20,14.08 19.2,15.97 17.9,17.39M11,19.93C7.05,19.44 4,16.08 4,12C4,11.38 4.08,10.78 4.21,10.21L9,15V16A2,2 0 0,0 11,18M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path></svg>
                 </span>
             </div>
             <div class="buttons has-addons">
@@ -53,13 +96,12 @@
     </div>
 
     <!-- Zone mining -->
-    <div class="content">
-        <label class="label">Mine new zone</label>
+    <div class="tab content is-hidden" id="tab_zones">
         <div class="field is-grouped">
             <div class="control is-expanded has-icons-left">
                 <input class="input" type="text" placeholder="ygg" id="new_zone" oninput="onZoneChange()">
                 <span class="icon is-small is-left">
-                    <i class="fas fa-map"></i>
+                    <svg viewBox="0 0 24 24" style="width: 20px; height: 20px;"><path d="M18.25,22L15.5,19L16.66,17.82L18.25,19.41L21.84,15.82L23,17.23M20.5,3A0.5,0.5 0 0,1 21,3.5V13.36C20.36,13.13 19.69,13 19,13C17.46,13 16.06,13.6 15,14.56V7.1L9,5V16.9L13.04,18.3C13,18.54 13,18.77 13,19C13,19.46 13.06,19.92 13.16,20.36L9,18.9L3.66,20.97C3.59,21 3.55,21 3.5,21A0.5,0.5 0 0,1 3,20.5V5.38C3,5.15 3.16,4.97 3.35,4.9L9,3L15,5.1L20.33,3"></path></svg>
                 </span>
             </div>
             <div class="control has-icons-left">
@@ -75,8 +117,13 @@
         <p class="help">If you feel that we need another zone you can mine that too. Just select a name, a difficulty for domains in that zone, and hit "Mine zone".</p>
     </div>
 
+    <!-- Events and notifications -->
+    <div class="tab content is-hidden" id="tab_events">
+        <!-- TODO -->
+    </div>
+
     <!-- Help -->
-    <div class="content center is-hidden" id="help">
+    <div class="tab content is-hidden" id="tab_help">
         <h1>Welcome to ALFIS!</h1>
         <p>ALFIS stands for Alternative Free Identity System.</p>
         <p>It gives you an opportunity to create your own domains and use them in decentralized networks, store security certificates for browsers to trust without any centralized CA.</p>
diff --git a/src/webview/scripts.js b/src/webview/scripts.js
index 939186c..7b19c17 100644
--- a/src/webview/scripts.js
+++ b/src/webview/scripts.js
@@ -40,7 +40,9 @@ function refresh_records_list() {
                "<input class=\"input ml-3 has-text-centered\" type=\"text\" size=\"6\" style=\"width: 20%;\" value=\"{3}\" readonly>" +
                "<input class=\"input ml-3\" type=\"text\" value=\"{4}\" readonly>" +
                "<button class=\"button is-danger is-outlined ml-3\" id=\"record_delete\" onclick=\"delRecord({5});\">" +
-               "  <span class=\"icon is-small\"><i class=\"fas fa-times\"></i></span>" +
+               "  <span class=\"icon is-small\">" +
+               "    <svg viewBox=\"0 0 24 24\" style=\"width: 20px; height: 20px;\"><path d=\"M22.54 16.88L20.41 19L22.54 21.12L21.12 22.54L19 20.41L16.88 22.54L15.47 21.12L17.59 19L15.47 16.88L16.88 15.47L19 17.59L21.12 15.46L22.54 16.88M12 13C10.9 13 10 13.9 10 15S10.9 17 12 17 14 16.1 14 15 13.1 13 12 13M13.35 21H5.5C4.58 21 3.81 20.38 3.58 19.54L1.04 10.27C1 10.18 1 10.09 1 10C1 9.45 1.45 9 2 9H6.79L11.17 2.45C11.36 2.16 11.68 2 12 2S12.64 2.16 12.83 2.44L17.21 9H22C22.55 9 23 9.45 23 10L22.97 10.27L22 13.81C21.43 13.5 20.79 13.24 20.12 13.11L20.7 11H3.31L5.5 19H13C13 19.7 13.13 20.37 13.35 21M9.2 9H14.8L12 4.8L9.2 9Z\"></path></svg>" +
+               "  </span>" +
                "</button>" +
                "</div>";
         buf += text.replace("{1}", value.domain)
@@ -96,6 +98,28 @@ function onLoad() {
     external.invoke(JSON.stringify({cmd: 'loaded'}));
 }
 
+function openTab(element, tabName) {
+    // Declare all variables
+    var i, tabContent, tabLinks;
+
+    // Get all elements with class="content" and hide them
+    tabContent = document.getElementsByClassName("tab content");
+    for (i = 0; i < tabContent.length; i++) {
+        tabContent[i].className = "tab content is-hidden";
+    }
+
+    // Get all elements with class="tab" and remove the class "is-active"
+    tabLinks = document.getElementsByClassName("tab is-active");
+    for (i = 0; i < tabLinks.length; i++) {
+        tabLinks[i].className = "tab";
+    }
+
+    // Show the current tab, and add an "is-active" class to the button that opened the tab
+    document.getElementById(tabName).className = "tab content";
+    element.parentElement.className = "tab is-active";
+    refresh_records_list();
+}
+
 function loadKey() {
     external.invoke(JSON.stringify({cmd: 'loadKey'}));
 }
diff --git a/src/webview/styles.css b/src/webview/styles.css
index 399fbb8..7f151f2 100644
--- a/src/webview/styles.css
+++ b/src/webview/styles.css
@@ -27,4 +27,20 @@
   position: absolute;
   bottom: 0px;
   z-index: 9;
+}
+
+path {
+  fill: #4a4a4a;
+}
+
+.tabs > ul > li.is-active > a > span.icon > svg > path {
+  fill: #3273dc;
+}
+
+.control > span.icon > svg > path {
+  fill: #dbdbdb;
+}
+
+.is-danger > span.icon > svg > path {
+  fill: #f14668;
 }
\ No newline at end of file
