From cefb1eb87f7fb5d88182cf76f1094a1888080f28 Mon Sep 17 00:00:00 2001
From: Revertron <r@revertron.com>
Date: Wed, 28 Apr 2021 13:07:13 +0200
Subject: [PATCH] Rewised domains interface a lot.

---
 Cargo.toml             |   2 +-
 src/webview/index.html | 106 ++++++++++++++++++++++-------------------
 src/webview/scripts.js |  16 +++++--
 src/webview/styles.css |  22 +++++++++
 4 files changed, 93 insertions(+), 53 deletions(-)

diff --git a/Cargo.toml b/Cargo.toml
index 7c35d92..09aa8b6 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "alfis"
-version = "0.4.32"
+version = "0.4.33"
 authors = ["Revertron <alfis@revertron.com>"]
 edition = "2018"
 build = "build.rs"
diff --git a/src/webview/index.html b/src/webview/index.html
index 3aa34c0..129fc77 100644
--- a/src/webview/index.html
+++ b/src/webview/index.html
@@ -75,55 +75,11 @@
     </div>
 
     <!-- Domain mining -->
-    <div class="tab row page is-hidden" id="tab_domains">
-        <div class="field is-grouped is-fullwidth">
-            <div class="control field has-addons is-expanded">
-                <div class="control is-expanded has-icons-left">
-                    <input class="input is-expanded" type="text" placeholder="domain" id="new_domain" oninput="onDomainChange(this)" title="Just a name of desired domain, like mail, facehook, etc.">
-                    <span class="icon is-small is-left">
-                        <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>
-
-                <!-- Zones -->
-                <div class="control">
-                    <div class="dropdown" id="zones-dropdown" onclick="toggle(this, event);" title="Select your TLD - Top Level Domain">
-                        <div class="dropdown-trigger">
-                            <button class="button" aria-haspopup="true" aria-controls="zones-menu" onblur="closeZonesDropdown()">
-                                <span id="zones-current-name">Select zone</span>
-                                <span class="icon is-small">
-                                    <svg viewBox="0 0 24 24" style="width: 20px; height: 20px;"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"></path></svg>
-                                </span>
-                            </button>
-                        </div>
-                        <div class="dropdown-menu" id="zones-menu" role="menu">
-                            <div class="dropdown-content" id="zones-links">
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <div class="control">
-                <div class="buttons has-addons">
-                    <button id="add_record_button" class="button is-info is-light" onclick="showNewRecordDialog();" title="Domain is nothing without good DNS records">Add record</button>
-                    <button disabled id="owners_button" class="button is-info is-light" onclick="showOwnersDialog();" title="You can change domain owners. Leave empty to be yours only.">
-                        <span>Set owners</span><span id="owners_count" class="tag is-info is-hidden ml-2">0</span>
-                    </button>
-                    <button disabled id="add_contacts_button" class="button is-info is-light" onclick="showContactsDialog();" title="You can add contact information to your domain, if you wish">Set contacts</button>
-                    <button id="new_domain_button" class="button is-info" onclick="createDomain();" title="Start mining">Mine domain</button>
-                </div>
-            </div>
-        </div>
-        <p class="help">Enter domain name, add some DNS-records, then hit the "Mine domain" button!</p>
-
-        <div class="list pb-3" id="domain_records">
-            <!-- Here will be our domain records, added by dialog -->
-        </div>
-
-        <div id="my_domains" class="container is-fluid cards-container">
+    <div class="tab row page is-hidden" id="tab_domains" style="align-items: center;">
+        <div id="my_domains" class="container is-fluid cards-container mt-0">
             <!-- Here will be our domains -->
         </div>
+        <button class="button is-info mt-2" onclick="showNewDomainDialog()" style="max-width: 200px;">New domain</button>
     </div>
 
     <!-- Zone mining -->
@@ -220,6 +176,60 @@ <h4>If you want to get your own domain</h4>
     </div>
 </div>
 
+<div id="new_domain_dialog" class="modal">
+    <div class="modal-background"></div>
+    <div class="modal-content">
+        <div class="box" id="new_domain_dialog_box">
+            <button class="delete" aria-label="close" onclick="closeDialog('new_domain_dialog')"></button>
+            <label class="label">New domain:</label>
+            <div class="field is-grouped is-fullwidth">
+                <div class="control field has-addons is-expanded">
+                    <div class="control is-expanded has-icons-left">
+                        <input class="input is-expanded" type="text" placeholder="domain" id="new_domain" oninput="onDomainChange(this)" title="Just a name of desired domain, like mail, facehook, etc.">
+                        <span class="icon is-small is-left">
+                            <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>
+
+                    <!-- Zones -->
+                    <div class="control">
+                        <div class="dropdown" id="zones-dropdown" onclick="toggle(this, event);" title="Select your TLD - Top Level Domain">
+                            <div class="dropdown-trigger">
+                                <button class="button" aria-haspopup="true" aria-controls="zones-menu" onblur="closeZonesDropdown()">
+                                    <span id="zones-current-name">Select zone</span>
+                                    <span class="icon is-small">
+                                        <svg viewBox="0 0 24 24" style="width: 20px; height: 20px;"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"></path></svg>
+                                    </span>
+                                </button>
+                            </div>
+                            <div class="dropdown-menu" id="zones-menu" role="menu">
+                                <div class="dropdown-content" id="zones-links">
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="control">
+                    <div class="buttons has-addons">
+                        <button id="add_record_button" class="button is-info is-light" onclick="showNewRecordDialog();" title="Domain is nothing without good DNS records">Add record</button>
+                        <button disabled id="owners_button" class="button is-info is-light" onclick="showOwnersDialog();" title="You can change domain owners. Leave empty to be yours only.">
+                            <span>Set owners</span><span id="owners_count" class="tag is-info is-hidden ml-2">0</span>
+                        </button>
+                        <button disabled id="add_contacts_button" class="button is-info is-light" onclick="showContactsDialog();" title="You can add contact information to your domain, if you wish">Set contacts</button>
+                        <button id="new_domain_button" class="button is-info" onclick="createDomain();" title="Start mining">Mine domain</button>
+                    </div>
+                </div>
+            </div>
+            <p class="help">Enter domain name, add some DNS-records, then hit the "Mine domain" button!</p>
+
+            <div class="list mt-2" id="domain_records">
+                <!-- Here will be our domain records, added by dialog -->
+            </div>
+        </div>
+    </div>
+</div>
+
 <div id="owners_dialog" class="modal">
     <div class="modal-background"></div>
     <div class="modal-content">
@@ -317,7 +327,7 @@ <h4>If you want to get your own domain</h4>
             <br/>
             <div class="buttons is-grouped is-centered">
                 <button class="button is-info" id="new_record_positive_button">Add</button>
-                <button class="button is-link is-light" id="new_record_negative_button">Cancel</button>
+                <button class="button is-info is-light" id="new_record_negative_button">Cancel</button>
             </div>
         </div>
     </div>
diff --git a/src/webview/scripts.js b/src/webview/scripts.js
index 3dbc391..e5eb60b 100644
--- a/src/webview/scripts.js
+++ b/src/webview/scripts.js
@@ -107,15 +107,13 @@ function addMyDomain(name, timestamp, data) {
 }
 
 function refreshMyDomains() {
-    var edit_icon = '<svg viewBox="0 0 24 24" class="tag-button" onclick="editDomain(\'{domain}\');"><path d="M21.04 12.13C21.18 12.13 21.31 12.19 21.42 12.3L22.7 13.58C22.92 13.79 22.92 14.14 22.7 14.35L21.7 15.35L19.65 13.3L20.65 12.3C20.76 12.19 20.9 12.13 21.04 12.13M19.07 13.88L21.12 15.93L15.06 22H13V19.94L19.07 13.88M11 19L9 21H5C3.9 21 3 20.1 3 19V5C3 3.9 3.9 3 5 3H9.18C9.6 1.84 10.7 1 12 1C13.3 1 14.4 1.84 14.82 3H19C20.1 3 21 3.9 21 5V9L19 11V5H17V7H7V5H5V19H11M12 3C11.45 3 11 3.45 11 4C11 4.55 11.45 5 12 5C12.55 5 13 4.55 13 4C13 3.45 12.55 3 12 3Z"></path></svg>';
-    var card = '<div class="card is-inline-block"><div class="card-content p-3"><div class="content is-small"><h3>{title}</h3><div class="tags">{tags}{edit}</div></div></div></div>';
+    var card = '<div class="card is-clickable is-inline-block" onclick="editDomain(\'{domain}\');"><div class="card-content p-3"><div class="content is-small"><h3>{title}</h3><div class="tags">{tags}</div></div></div></div>';
     var tag = '<span class="tag" title="{ip}">{domain}</span>';
     var cards = "";
     myDomains.forEach(function(value, index, array) {
         var title = value.name;
         var domain_data = JSON.parse(value.data);
         var tags = "";
-        var edit = edit_icon.replace("{domain}", title);
         domain_data.records.forEach(function(v, i, a) {
             if (typeof v.domain !== 'undefined') {
                 var buf = tag.replace("{domain}", v.domain);
@@ -127,7 +125,7 @@ function refreshMyDomains() {
                 tags = tags + buf;
             }
         });
-        cards = cards + card.replace("{title}", title).replace("{tags}", tags).replace("{edit}", edit);
+        cards = cards + card.replace("{title}", title).replace("{domain}", title).replace("{tags}", tags);
     });
     document.getElementById("my_domains").innerHTML = cards;
 }
@@ -146,6 +144,7 @@ function editDomain(domain) {
         document.getElementById("new_domain").value = title.replace("." + domain_data.zone, "");
         changeZone(domain_data.zone);
         refreshRecordsList();
+        showNewDomainDialog();
     });
 }
 
@@ -214,6 +213,14 @@ function recordOkay(okay) {
     }
 }
 
+function showNewDomainDialog() {
+    document.getElementById("new_domain_dialog").className = "modal is-active";
+}
+
+function closeDialog(name) {
+    document.getElementById(name).className = "modal";
+}
+
 function createDomain() {
     if (typeof currentZone == 'undefined') {
         showWarning("Select a domain zone first");
@@ -234,6 +241,7 @@ function createDomain() {
 function domainMiningStarted() {
     //recordsBuffer = [];
     //refreshRecordsList();
+    document.getElementById("new_domain_dialog").className = "modal";
     document.getElementById("tab_domains").disabled = true;
     document.getElementById("domain_records").disabled = true;
     document.getElementById("add_record_button").disabled = true;
diff --git a/src/webview/styles.css b/src/webview/styles.css
index c6bb606..a0dbf09 100644
--- a/src/webview/styles.css
+++ b/src/webview/styles.css
@@ -42,6 +42,28 @@ body {
 
 /* ========================================== */
 
+@media screen and (min-width: 769px) {
+  .modal-content,
+  .modal-card {
+    width: 100%;
+    max-width: calc(100vw - 60px);
+  }
+}
+
+.modal-background {
+  background-color: rgba(10, 10, 10, 0.76);
+}
+
+#new_domain_dialog_box {
+  min-height: 380px;
+}
+
+.delete {
+  position: absolute;
+  top: 1.0rem;
+  right: 1.25rem;
+}
+
 .container {
   margin: 10pt;
 }