anders/Wallet
1
0
Fork 0
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #2599 from bechi/layout-details-09

Browse source 
status notifications
This commit is contained in:
Matias Alejo Garcia 2015-04-23 15:55:03 -03:00
commit 736a3c1f99
2 changed files with 154 additions and 107 deletions
Download patch file Download diff file Expand all files Collapse all files

24
public/views/walletHome.html
View file

@ -54,17 +54,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">
@ -122,4 +125,3 @@
</div> </div>
<div class="extra-margin-bottom"></div> <div class="extra-margin-bottom"></div>

79
src/css/main.css
View file

@ -1191,23 +1191,11 @@ input.ng-invalid-match, input.ng-invalid-match:focus {
-webkit-animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite;
} }
@-webkit-keyframes opCycle-animation
{
0% {opacity:1}
15% {opacity:0.7}
30% {opacity:0.85}
45% {opacity:0.5}
60% {opacity:0.8}
75% {opacity:0.7}
99% {opacity:1;}
}
.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;
@ -1215,8 +1203,65 @@ input.ng-invalid-match, input.ng-invalid-match:focus {
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);
}
} }