From bf31d2d91ce9db8c9db57fee886f4fa10419e7b5 Mon Sep 17 00:00:00 2001 From: sairajzero Date: Sun, 29 Mar 2020 20:43:12 +0530 Subject: [PATCH] Adding Startup Loader and SignIn UI Added a loader for the startup Added SignIn UI Added functionality for SignOut --- FLO_LogSheet.html | 369 +++++++++++++++++++++++++++++++++++++++------- 1 file changed, 319 insertions(+), 50 deletions(-) diff --git a/FLO_LogSheet.html b/FLO_LogSheet.html index b20696a..79ba1d0 100644 --- a/FLO_LogSheet.html +++ b/FLO_LogSheet.html @@ -53,6 +53,136 @@ background-attachment: fixed; } + #loading-screen { + width: 100%; + height: 100%; + top: 0; + position: fixed; + display: flex; + align-items: center; + justify-content: center; + background: var(--accent-light); + z-index: 4; + } + + #loading-screen .appName { + top: 8rem; + position: fixed; + display: flex; + z-index: 5; + } + + #startup-load-msg { + position: fixed; + bottom: 0; + right: 0; + text-align: right; + font-size: 0.75rem; + } + + #startup-load-msg .success-log { + color: white; + } + + #startup-load-msg .error-log { + color: red; + } + + #sign-in-box { + height: 25rem; + width: 25rem; + background: rgba(var(--rgb-bw), 1); + z-index: inherit; + display: flex; + align-items: center; + justify-content: center; + border-radius: 1rem; + } + + #sign-in-box div { + text-align: center; + } + + #sign-in-box span { + color: var(--alt-light); + font: italic bold 1.5rem Georgia, serif; + } + + #sign-in-box input, + #sign-in-box button { + margin: 1rem; + padding: 0.5rem; + background: rgba(var(--rgb-bw), 0.5); + border: 0.1rem solid; + outline: none; + border-radius: 0.2rem; + font-size: 1.3rem; + color: transparent; + + } + + #sign-in-box input, + #sign-in-box button:first-child { + text-shadow: 0 0 0 var(--accent-dark); + border-color: var(--accent-dark); + } + + #sign-in-box input { + height: 2.5rem; + width: 20rem; + } + + #sign-in-box input:focus { + box-shadow: -0.1rem -0.1rem var(--accent-dark) + } + + #sign-in-box button { + height: 5rem; + width: 9rem; + } + + #sign-in-box button:last-child { + text-shadow: 0 0 0 var(--alt-dark); + border-color: var(--alt-dark); + } + + .loader { + display: inline-block; + position: absolute; + width: 80px; + height: 80px; + } + + .loader div { + position: absolute; + border: 4px solid #fff; + opacity: 1; + border-radius: 50%; + animation: loader 1s cubic-bezier(0, 0.2, 0.8, 1) infinite; + } + + .loader div:nth-child(2) { + animation-delay: -0.5s; + } + + @keyframes loader { + 0% { + top: 36px; + left: 36px; + width: 0; + height: 0; + opacity: 1; + } + + 100% { + top: 0px; + left: 0px; + width: 72px; + height: 72px; + opacity: 0; + } + } + button:hover, button:focus { outline: 0; @@ -65,7 +195,7 @@ [data-title] { position: relative; - z-index: 6; + z-index: 3; } [data-title]:hover::before { @@ -75,12 +205,14 @@ display: inline-block; padding: 3px 6px; border-radius: 2px; - background: #000; + background: var(--alt-dark); color: var(--alt-light); font-size: 12px; font-family: sans-serif; + font-weight: normal; + font-style: normal; white-space: nowrap; - z-index: 6; + z-index: 5; } [data-title]:hover::after { @@ -91,8 +223,8 @@ display: inline-block; color: var(--alt-light); border: 8px solid transparent; - border-bottom: 8px solid #000; - z-index: 6; + border-bottom: 8px solid var(--alt-dark); + z-index: 5; } header { @@ -104,7 +236,7 @@ padding: 0.2rem 1em; } - header h1 { + .appName h1 { margin: 1rem 0 0 1rem; padding: 0; color: var(--alt-light); @@ -112,7 +244,7 @@ text-shadow: -2.5px 2.5px rgba(var(--rgb-bw), 0.5); } - header h2 { + .appName h2 { margin-bottom: 0; padding: 0; color: var(--alt-light); @@ -120,9 +252,16 @@ text-shadow: -2.5px 2.5px rgba(var(--rgb-bw), 0.5); } + header span { + color: var(--alt-light); + right: 10rem; + position: absolute; + font: italic normal 0.9rem Georgia, serif; + } + header button { color: var(--alt-light); - background: var(--accent-light); + background: var(--accent-dark); border: 1px solid var(--alt-light); border-radius: 0.25em; position: absolute; @@ -135,7 +274,7 @@ header button:hover, header button:focus { background: var(--alt-light); - color: var(--accent-light); + color: var(--accent-dark); } .hide { @@ -147,6 +286,10 @@ transform: none !important; } + #confirmation div { + text-align: center; + } + #show-message, #save-button { transform: translate(0.4rem, 0); @@ -251,6 +394,11 @@ cursor: default; } + .list-header span { + color: transparent; + text-shadow: 0 0 0 var(--default-text); + } + .list-header button { float: right; border: none; @@ -334,29 +482,37 @@ display: block; } + #sheet-details { + padding: 0.5rem + } + #sheet-details h4 { - margin: 0; - padding: 1rem; + margin: 0.5rem; + padding: 0.5rem; font-weight: bolder; font-size: 1.3rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + border-radius: 0.25rem; + background: var(--alt-light); + color: var(--accent-dark); } #sheet-details h6 { - margin: 0; - padding: 0 1rem; + margin: 0 0.5rem; + padding: 0 0.5rem; font-style: italic; font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + color: var(--alt-dark) } #sheet-details p { - margin: 0; - padding: 0.5rem 1rem; + margin: 0.5rem; + padding: 0 0.5rem; overflow: hidden; height: 3rem; } @@ -442,7 +598,7 @@ } .input-container input[type="button"] { - background: var(--alt-light); + background: rgba(var(--rgb-bw), 0); color: var(--default-text); } @@ -457,7 +613,7 @@ } .input-container input[type="button"]:hover { - background: var(--alt-dark) + background: var(--alt-light) } .input-container input[type="submit"]:hover { @@ -501,22 +657,26 @@ margin: 0.5rem; } - #group-by > div{ + #group-by>div:first-child { text-align: center; - margin: 0.5rem; font-weight: bold; } - #group-by-menu{ + #group-by>div { + margin: 0.5rem; + } + + #group-by-menu { align-items: center; text-align: center; } - #group-by-menu .input-container{ + #group-by-menu .input-container { margin: 0; padding: 0; } - #group-by-menu select{ + + #group-by-menu select { height: 2rem; border-radius: 0.2rem; border: 0.1rem solid rgba(var(--rgb-bw), 0.2); @@ -524,22 +684,22 @@ margin: 0 1rem; } - #group-by-view{ + #group-by-view { width: 30rem; height: 15rem; overflow: scroll; } - - #group-by-view td:first-child{ + + #group-by-view td:first-child { width: 20rem; } - #group-by-view td:last-child{ + #group-by-view td:last-child { width: 10rem; text-align: right; } - #sheet-view input{ + #sheet-view input { width: 100%; border-radius: 0.2rem; border: 0.1rem solid rgba(var(--rgb-bw), 0.2); @@ -578,37 +738,97 @@ -
+

l

ogSheet

-
+
+
+

l

+

ogSheet

+
+
+
+
+
+ SIGN IN +
+
+
+
+
+
+
+ +
+
+
+
+ + +
+
+
+
@@ -689,7 +909,7 @@
👥  Persons - +
@@ -698,15 +918,15 @@
-

TitleOfTable

-
XYZ, ABC, OPQ
-

Lorem ipsum dolor sit amet,

+

+
+

@@ -729,10 +949,22 @@ else if (e.target.tagName === "TD" && e.target.parentElement.parentElement.tagName === "THEAD") document.getElementById("group-by").parentNode.classList.remove("hide") } catch (error) { - + //do nothing } }; + document.getElementById("sign-out").addEventListener('click', function(e){ + getConfirmation('Are you sure you want to Sign out?').then(result => { + try{ + floDapps.clearCredentials(); + showMessage("Successfully Signed out") + setTimeout(onLoadStartUp, 2000) + }catch(error){ + showMessage(error, "error") + } + }) + }); + document.getElementById("sheet-list").addEventListener('wheel', function (e) { e.preventDefault(); this.scrollLeft += (e.wheelDelta ? e.wheelDelta * -0.5 : e.deltaY * 25) @@ -813,6 +1045,32 @@ return element; } + function getConfirmation(message){ + let confirmation = document.getElementById("confirmation"); + confirmation.children[0].textContent = message; + confirmation.parentNode.classList.remove("hide") + return new Promise((resolve, reject) => { + let interval = setInterval(()=>{ + if(confirmation.parentNode.classList.contains("hide")){ + confirmation.children[1].children[0].onclick = null; + confirmation.children[1].children[1].onclick = null; + clearInterval(interval); + reject(false); + } + }, 1000) + confirmation.children[1].children[0].onclick = () => { + clearInterval(interval); + confirmation.parentNode.classList.add("hide") + resolve(true) + } + confirmation.children[1].children[1].onclick = () => { + clearInterval(interval); + confirmation.parentNode.classList.add("hide") + reject(true) + } + }) + } + function showMessage(message, mode = "normal", fixed = false) { if (mode === "error") console.error(message) @@ -9507,11 +9765,10 @@ Bitcoin.Util = { compactIDB.writeData("lastTx",result.totalTxs,floGlobals.SNStorageID); compactIDB.readAllData("supernodes").then(result => { floGlobals.supernodes = result; - floSupernode.kBucket.launch(Object.keys(floGlobals.supernodes),floGlobals.SNStorageID) .then(result => resolve("Loaded Supernode list\n"+result)) }) - }) + }).catch(error => reject(error)) }).catch(error => reject(error)) }) }, @@ -9534,7 +9791,7 @@ Bitcoin.Util = { floGlobals.subAdmins = Object.keys(result); resolve("Read subAdmins from blockchain"); }) - }) + }).catch(error => reject(error)) }).catch(error => reject(error)) }) }, @@ -9740,10 +9997,22 @@ Bitcoin.Util = { } reactor.registerEvent("startUpSuccessLog"); - reactor.addEventListener("startUpSuccessLog", log => console.log(log)) + reactor.addEventListener("startUpSuccessLog", log => { + console.log(log) + let element = document.createElement('div') + element.setAttribute("class", "success-log") + element.textContent = log + document.getElementById("startup-load-msg").appendChild(element) + }) reactor.registerEvent("startUpErrorLog"); - reactor.addEventListener("startUpErrorLog", log => console.error(log)) + reactor.addEventListener("startUpErrorLog", log => { + console.error(log) + let element = document.createElement('div') + element.setAttribute("class", "error-log") + element.textContent = log + document.getElementById("startup-load-msg").appendChild(element) + })