Implemented status bar with some status information: sync process, connected nodes and blockchain height.

This commit is contained in:
Revertron
2021-02-27 18:57:15 +01:00
parent 0d3b8c3db0
commit e53245315f
12 changed files with 192 additions and 95 deletions
+9
View File
@@ -10846,4 +10846,13 @@ html {
width: 50%;
top: 10pt;
right: 10pt;
}
.footer {
background-color: #f4f4f4;
padding: 0.2rem 0.5rem 0.2rem 0.5rem;
width: 100%;
position: absolute;
bottom: 0px;
z-index: 9;
}
+34
View File
@@ -0,0 +1,34 @@
.busy_indicator {
width:24px;
height:24px;
display:inline-block;
padding:0px;
text-align:left;
float:left;
margin-left: -5px;
}
.busy_indicator span {
position:absolute;
display:inline-block;
width:24px;
height:24px;
border-radius:100%;
background:#ee3333;
-webkit-animation:busy_indicator 1.6s linear infinite;
animation:busy_indicator 1.6s linear infinite;
}
.busy_indicator span:last-child {
animation-delay:-0.8s;
-webkit-animation-delay:-0.8s;
}
@keyframes busy_indicator {
0% {transform: scale(0, 0);opacity:0.9;}
100% {transform: scale(1, 1);opacity:0;}
}
@-webkit-keyframes busy_indicator {
0% {-webkit-transform: scale(0, 0);opacity:0.9;}
100% {-webkit-transform: scale(1, 1);opacity:0;}
}
.busy_blue span {
background:#3273dc;
}
+20 -5
View File
@@ -9,10 +9,6 @@
{scripts}
</head>
<body onload="onLoad();">
<div class="mining_indicator" id="mining_indicator" onclick="miningIndicatorClick(this)">
<span></span>
<span></span>
</div>
<div id="modal_dialog" class="modal">
<div class="modal-background"></div>
@@ -328,6 +324,25 @@
</div> <!-- columns -->
</div>
<div class="footer is-hidden">Some footer text is here</div>
<div class="footer is-family-code">
<div class="level">
<div class="level-left">
<div class="level-item" id="indicator_parent">
<div class="busy_indicator busy_blue" id="busy_indicator" onclick="miningIndicatorClick(this)">
<span></span>
<span></span>
</div>
</div>
<div class="level-item">
<div id="status_bar_left">Connecting and syncing...</div>
</div>
</div>
<div class="level-right">
<div class="level-item" id="status_bar_right">No data</div>
</div>
</div>
</div>
</body>
</html>
-34
View File
@@ -1,34 +0,0 @@
.mining_indicator {
position:absolute;
left:0px;
bottom:0px;
width:30px;
height:30px;
display:inline-block;
padding:0px;
text-align:left;
float:left;
z-index:10;
}
.mining_indicator span {
position:absolute;
display:inline-block;
width:30px;
height:30px;
border-radius:100%;
background:#ee3333;
-webkit-animation:mining_indicator 1.6s linear infinite;
animation:mining_indicator 1.6s linear infinite;
}
.mining_indicator span:last-child {
animation-delay:-0.8s;
-webkit-animation-delay:-0.8s;
}
@keyframes mining_indicator {
0% {transform: scale(0, 0);opacity:0.5;}
100% {transform: scale(1, 1);opacity:0;}
}
@-webkit-keyframes mining_indicator {
0% {-webkit-transform: scale(0, 0);opacity:0.5;}
100% {-webkit-transform: scale(1, 1);opacity:0;}
}
+21 -4
View File
@@ -249,12 +249,19 @@ function showWarning(text) {
setTimeout(button.onclick, 5000);
}
function showMiningIndicator(visible) {
indicator = document.getElementById("mining_indicator");
function showMiningIndicator(visible, blue) {
var indicator = document.getElementById("busy_indicator");
var parent = document.getElementById("indicator_parent");
var add = "";
if (blue) {
add = " busy_blue";
}
if (visible) {
indicator.style.visibility = 'visible';
indicator.className = 'busy_indicator' + add;
parent.style.display = 'flex';
} else {
indicator.style.visibility = 'hidden';
indicator.className = 'busy_indicator is-hidden';
parent.style.display = 'none';
}
}
@@ -264,6 +271,16 @@ function miningIndicatorClick(element) {
});
}
function setLeftStatusBarText(text) {
var bar = document.getElementById("status_bar_left");
bar.innerHTML = text;
}
function setRightStatusBarText(text) {
var bar = document.getElementById("status_bar_right");
bar.innerHTML = text;
}
function keystoreChanged(path, pub_key) {
if (path == '') {
path = "In memory";