status notifications

This commit is contained in:
bechi 2015-04-23 16:54:19 -03:00
commit 1a5dc6a468
2 changed files with 178 additions and 118 deletions

View file

@ -50,17 +50,20 @@
</div> </div>
</div> </div>
<div class="onGoingProcess" <div class="onGoingProcess" ng-show="index.anyOnGoingProcess" ng-style="{'background-color':index.backgroundColor}">
ng-show="index.anyOnGoingProcess" <div class="spinner">
ng-style="{'background-color':index.backgroundColor}" <div class="rect1"></div>
ng-class="{'opacityCycle':index.anyOnGoingProcess}" <div class="rect2"></div>
> <div class="rect3"></div>
<span translate ng-show="index.onGoingProcessName == 'openingWallet'">Opening Wallet...</span> <div class="rect4"></div>
<span translate ng-show="index.onGoingProcessName == 'updatingStatus'">Updating Status...</span> <div class="rect5"></div>
<span translate ng-show="index.onGoingProcessName == 'updatingBalance'">Updating Balance...</span> </div>
<span translate ng-show="index.onGoingProcessName == 'updatingPendingTxps'">Updating Pending Transactions...</span> <span translate ng-show="index.onGoingProcessName == 'openingWallet'"> Updating Wallet... </span>
<span translate ng-show="index.onGoingProcessName == 'updatingStatus'"> Updating Status...</span>
<span translate ng-show="index.onGoingProcessName == 'updatingBalance'">Updating Wallet... </span>
<span translate ng-show="index.onGoingProcessName == 'updatingPendingTxps'">Updating Wallet...</span>
<span translate ng-show="index.onGoingProcessName == 'scanning'">Scanning Wallet funds...</span> <span translate ng-show="index.onGoingProcessName == 'scanning'">Scanning Wallet funds...</span>
<span translate ng-show="index.onGoingProcessName == 'recreating'">Recreating Wallet on BWS...</span> <span translate ng-show="index.onGoingProcessName == 'recreating'">Recreating Wallet...</span>
</div> </div>
<div class="m20t" ng-show="index.notAuthorized"> <div class="m20t" ng-show="index.notAuthorized">
@ -410,4 +413,3 @@ history
</div> </div>
<div class="extra-margin-bottom"></div> <div class="extra-margin-bottom"></div>

View file

@ -1108,18 +1108,76 @@ input.ng-invalid-match, input.ng-invalid-match:focus {
} }
.onGoingProcess { .onGoingProcess {
background: #213140;
text-align: center; text-align: center;
max-width: 14.5rem; max-width: 14.5rem;
max-height: 2rem; max-height: 3.5rem;
top:auto; top:auto;
left:0; left:0;
right:0; right:0;
bottom: 130px; bottom:90px;
margin: auto; margin: auto;
border-radius: 3px; border-radius: 3px;
color: #fff; color: #fff;
padding: 0.3rem 0.5rem; padding: 0.5rem;
font-size: 14px; font-size: 13px;
position: absolute; position: absolute;
background:#DDD; opacity: 0.8;
}
/*/////////////////// SPINNER ////////////////////*/
.spinner {
margin: 0 auto;
width: 35px;
height: 27px;
text-align: center;
font-size: 10px;
vertical-align: middle;
}
.spinner > div {
background-color: #fff;
height: 100%;
width: 2px;
display: inline-block;
-webkit-animation: stretchdelay 1.2s infinite ease-in-out;
animation: stretchdelay 1.2s infinite ease-in-out;
}
.spinner .rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.spinner .rect3 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
.spinner .rect4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.spinner .rect5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
@-webkit-keyframes stretchdelay {
0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
20% { -webkit-transform: scaleY(1.0) }
}
@keyframes stretchdelay {
0%, 40%, 100% {
transform: scaleY(0.4);
-webkit-transform: scaleY(0.4);
} 20% {
transform: scaleY(1.0);
-webkit-transform: scaleY(1.0);
}
} }