Sweetbread/Alfis
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added horizontal tabs to the new interface.

Browse Source
This commit is contained in:
Revertron
2021-03-26 12:39:19 +01:00
parent fc90706213
commit 594878614f
4 changed files with 100 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/web_ui.rs
+1
View File
@@ -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)) {
src/webview/index.html
+58 -11
View File
@@ -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>
src/webview/scripts.js
+25 -1
View File
@@ -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'}));
}
src/webview/styles.css
+16
View File
@@ -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;
}