Implemented status bar with some status information: sync process, connected nodes and blockchain height.
This commit is contained in:
Vendored
+9
@@ -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;
|
||||
}
|
||||
@@ -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
@@ -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>
|
||||
@@ -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
@@ -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";
|
||||
|
||||
Reference in New Issue
Block a user