Skip to content
This repository has been archived by the owner on Apr 15, 2019. It is now read-only.

Commit

Permalink
Add pending status spinner to transactions list
Browse files Browse the repository at this point in the history
  • Loading branch information
reyraa committed Jun 14, 2017
1 parent 9abd400 commit 760fa7e
Showing 3 changed files with 46 additions and 39 deletions.
38 changes: 0 additions & 38 deletions src/components/delegates/delegates.less
Original file line number Diff line number Diff line change
@@ -84,46 +84,8 @@ delegates {
}

.spinner {
width: 40px;
text-align: center;
margin-left: -10px;
}

.spinner > div {
width: 8px;
height: 8px;
background-color: #aaa;

border-radius: 100%;
display: inline-block;
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}

.spinner .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0.5) }
40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
0%, 80%, 100% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
} 40% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
}
}
}

.lsk-vote-remove-button {
42 changes: 42 additions & 0 deletions src/components/main/main.less
Original file line number Diff line number Diff line change
@@ -7,3 +7,45 @@ md-tabs.main-tabs md-tabs-wrapper.md-stretch-tabs md-pagination-wrapper {
box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.12);
margin-left: 2px;
}

// Pending state
.spinner {
width: 40px;
text-align: center;
display: inline-block;
& > div {
width: 8px;
height: 8px;
background-color: #aaa;

border-radius: 100%;
display: inline-block;
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
}

// Spinner animations
@-webkit-keyframes sk-bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0.5) }
40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
0%, 80%, 100% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
} 40% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
}
}
5 changes: 4 additions & 1 deletion src/components/transactions/transactions.pug
Original file line number Diff line number Diff line change
@@ -18,7 +18,10 @@ md-card.offline-hide
tr(md-row, ng-repeat="transaction in $ctrl.transactions track by transaction.id | orderBy:'-timestamp'")
td(md-cell)
timestamp(data='transaction.timestamp', ng-show='transaction.confirmations')
span(ng-bind='transaction.confirmations ? "" : "PENDING"')
.spinner(ng-show='!transaction.confirmations')
.bounce1
.bounce2
.bounce3
td(md-cell)
span(ng-bind='transaction.id')
md-tooltip(md-direction='top', md-delay='350') {{ transaction.confirmations }} confirmations

0 comments on commit 760fa7e

Please sign in to comment.