mirror of https://github.com/BTCPrivate/copay.git
Merge pull request #5886 from gabrielbazan7/feat/placeholder
adding loading placeholders to avoid the screen resize in tab-home view
This commit is contained in:
Matias Alejo Garcia
GitHub
commit
4fa427f2ab
|
|
@ -194,6 +194,7 @@ angular.module('copayApp.controllers').controller('tabHomeController',
|
|||
if (err) $log.error(err);
|
||||
$scope.txps = txps;
|
||||
$scope.txpsN = n;
|
||||
$scope.txpsFinished = true;
|
||||
$timeout(function() {
|
||||
$ionicScrollDelegate.resize();
|
||||
$scope.$apply();
|
||||
|
|
@ -225,6 +226,7 @@ angular.module('copayApp.controllers').controller('tabHomeController',
|
|||
}
|
||||
if (++j == i) {
|
||||
updateTxps();
|
||||
$scope.walletsFinished = true;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -252,6 +254,7 @@ angular.module('copayApp.controllers').controller('tabHomeController',
|
|||
}
|
||||
$scope.notifications = notifications;
|
||||
$scope.notificationsN = total;
|
||||
$scope.notificationsFinished = true;
|
||||
$timeout(function() {
|
||||
$ionicScrollDelegate.resize();
|
||||
$scope.$apply();
|
||||
|
|
|
|||
|
|
@ -53,6 +53,44 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
.loading-block-title {
|
||||
height: 20px;
|
||||
width: 150px;
|
||||
background:-webkit-radial-gradient(#fff, #f7f7f7);
|
||||
background-size: 20px 100px;
|
||||
-webkit-animation: m .6s linear infinite;
|
||||
}
|
||||
.loading-block-body {
|
||||
width: 100%;
|
||||
height: 160px;
|
||||
background: -webkit-radial-gradient(#fff, #f7f7f7);
|
||||
background-size: 25px 100%;
|
||||
-webkit-animation: m .6s linear infinite;
|
||||
}
|
||||
@keyframes m {
|
||||
0% {
|
||||
background-position: 20px 0;
|
||||
}
|
||||
100% {
|
||||
}
|
||||
}
|
||||
}
|
||||
.card-loading-placeholder {
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.loading-placeholder {
|
||||
height: 100%;
|
||||
.row {
|
||||
height: 50%;
|
||||
}
|
||||
}
|
||||
.animate-show-hide.ng-hide {
|
||||
opacity: 0;
|
||||
}
|
||||
.animate-show-hide.ng-hide-add,
|
||||
.animate-show-hide.ng-hide-remove {
|
||||
transition: all linear 0.2s;
|
||||
}
|
||||
.wallet-details__item.item {
|
||||
padding-top: 0;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
</i>
|
||||
<span class="wallet-name">{{wallet.name || wallet.id}}</span>
|
||||
<span class="item-note m10l" ng-if="!wallet.balanceHidden">
|
||||
{{wallet.status.availableBalanceStr}}
|
||||
{{wallet.status.availableBalanceStr || '...'}}
|
||||
</span>
|
||||
<span class="item-note m10l" ng-if="wallet.balanceHidden" translate>[Balance Hidden]</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -39,76 +39,100 @@
|
|||
On this screen you can see all your wallets, accounts, and assets.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list card" ng-hide="!txps[0]">
|
||||
<a class="item item-icon-right item-heading" ui-sref="tabs.proposals">
|
||||
{{'Payment Proposals'|translate}}
|
||||
<i class="icon bp-arrow-right"></i>
|
||||
<span class="badge badge-assertive m5t m10r" ng-show="txpsN>3"> {{txpsN}}</span>
|
||||
</a>
|
||||
|
||||
<div ng-repeat="tx in txps" ng-click="openTxpModal(tx)">
|
||||
<a class="wallet-details__item item item-sub" ng-include="'views/includes/txp.html'"></a>
|
||||
<div class="loading-placeholder" ng-show="!txpsFinished || !notificationsFinished || !walletsFinished">
|
||||
<div class="row">
|
||||
<div class="list card card-loading-placeholder">
|
||||
<a class="item item-icon-right item-heading">
|
||||
<div class="loading-block-title"></div>
|
||||
<i class="icon bp-arrow-right"></i>
|
||||
</a>
|
||||
<a class="item">
|
||||
<div class="loading-block-body"></div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="list card card-loading-placeholder">
|
||||
<a class="item item-icon-right item-heading">
|
||||
<div class="loading-block-title"></div>
|
||||
<i class="icon bp-arrow-right"></i>
|
||||
</a>
|
||||
<a class="item">
|
||||
<div class="loading-block-body"></div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list card" ng-if="notifications[0] && recentTransactionsEnabled">
|
||||
<a class="item item-icon-right item-heading" ui-sref="tabs.activity">
|
||||
<span translate>Recent Transactions</span>
|
||||
<i class="icon bp-arrow-right"></i>
|
||||
<span class="badge badge-assertive m5t m10r" ng-show="notificationsN>3"> {{notificationsN}}</span>
|
||||
</a>
|
||||
<a class="item item-sub activity" ng-repeat="notification in notifications" ng-click="openNotificationModal(notification)">
|
||||
<span ng-include="'views/includes/walletActivity.html'"></span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="list card">
|
||||
<div class="item item-icon-right item-heading">
|
||||
<span translate>Wallets</span>
|
||||
<a ui-sref="tabs.add" ng-if="wallets[0]"><i class="icon ion-ios-plus-empty list-add-button"></i></a>
|
||||
</div>
|
||||
<div>
|
||||
<a ng-if="!wallets[0]" ui-sref="tabs.add" class="item item-icon-left item-big-icon-left item-icon-right next-step">
|
||||
<i class="icon big-icon-svg">
|
||||
<img src="img/icon-wallet.svg" class="bg wallet icon-create-wallet"/>
|
||||
</i>
|
||||
<span translate>Create bitcoin wallet</span>
|
||||
<div class="animate-show-hide" ng-show="txpsFinished && notificationsFinished && walletsFinished">
|
||||
<div class="list card" ng-hide="!txps[0]">
|
||||
<a class="item item-icon-right item-heading" ui-sref="tabs.proposals">
|
||||
{{'Payment Proposals'|translate}}
|
||||
<i class="icon bp-arrow-right"></i>
|
||||
<span class="badge badge-assertive m5t m10r" ng-show="txpsN>3"> {{txpsN}}</span>
|
||||
</a>
|
||||
<a ng-repeat="wallet in wallets track by $index"
|
||||
class="item item-sub item-icon-left item-big-icon-left item-icon-right wallet"
|
||||
ng-click="openWallet(wallet)">
|
||||
<i class="icon big-icon-svg">
|
||||
<img src="img/icon-wallet.svg" ng-class="{'wallet-background-color-default': !wallet.color}" ng-style="{'background-color': wallet.color}" class="bg wallet"/>
|
||||
</i>
|
||||
<span>
|
||||
{{wallet.name || wallet.id}}
|
||||
</span>
|
||||
<p>
|
||||
<span ng-if="!wallet.isComplete()" class="assertive" translate>
|
||||
Incomplete
|
||||
</span>
|
||||
<span ng-if="wallet.isComplete()">
|
||||
<span ng-if="!wallet.balanceHidden"> {{wallet.status.totalBalanceStr ? wallet.status.totalBalanceStr : ( wallet.cachedBalance ? wallet.cachedBalance + (wallet.cachedBalanceUpdatedOn ? ' · ' + ( wallet.cachedBalanceUpdatedOn * 1000 | amTimeAgo) : '') : '' ) }} </span>
|
||||
|
||||
<span ng-if="wallet.balanceHidden" translate>[Balance Hidden]</span>
|
||||
<span class="tab-home__wallet__multisig-number" ng-if="wallet.n > 1">
|
||||
{{wallet.m}}-of-{{wallet.n}}
|
||||
<div ng-repeat="tx in txps" ng-click="openTxpModal(tx)">
|
||||
<a class="wallet-details__item item item-sub" ng-include="'views/includes/txp.html'"></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list card" ng-if="notifications[0] && recentTransactionsEnabled">
|
||||
<a class="item item-icon-right item-heading" ui-sref="tabs.activity">
|
||||
<span translate>Recent Transactions</span>
|
||||
<i class="icon bp-arrow-right"></i>
|
||||
<span class="badge badge-assertive m5t m10r" ng-show="notificationsN>3"> {{notificationsN}}</span>
|
||||
</a>
|
||||
<a class="item item-sub activity" ng-repeat="notification in notifications" ng-click="openNotificationModal(notification)">
|
||||
<span ng-include="'views/includes/walletActivity.html'"></span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="list card">
|
||||
<div class="item item-icon-right item-heading">
|
||||
<span translate>Wallets</span>
|
||||
<a ui-sref="tabs.add" ng-if="wallets[0]"><i class="icon ion-ios-plus-empty list-add-button"></i></a>
|
||||
</div>
|
||||
<div>
|
||||
<a ng-if="!wallets[0]" ui-sref="tabs.add" class="item item-icon-left item-big-icon-left item-icon-right next-step">
|
||||
<i class="icon big-icon-svg">
|
||||
<img src="img/icon-wallet.svg" class="bg wallet icon-create-wallet"/>
|
||||
</i>
|
||||
<span translate>Create bitcoin wallet</span>
|
||||
<i class="icon bp-arrow-right"></i>
|
||||
</a>
|
||||
<a ng-repeat="wallet in wallets track by $index"
|
||||
class="item item-sub item-icon-left item-big-icon-left item-icon-right wallet"
|
||||
ng-click="openWallet(wallet)">
|
||||
<i class="icon big-icon-svg">
|
||||
<img src="img/icon-wallet.svg" ng-class="{'wallet-background-color-default': !wallet.color}" ng-style="{'background-color': wallet.color}" class="bg wallet"/>
|
||||
</i>
|
||||
<span>
|
||||
{{wallet.name || wallet.id}}
|
||||
</span>
|
||||
<i ng-if="!wallet.balanceHidden && (wallet.status.totalBalanceSat != wallet.status.spendableAmount)" class="tab-home__wallet__status-icon ion-ios-timer-outline"></i>
|
||||
<span class="assertive" ng-if="wallet.error">{{wallet.error}}</span>
|
||||
</span>
|
||||
|
||||
</p>
|
||||
<i class="icon bp-arrow-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ng-hide" ng-show="wallets[0] && bitpayCardItems.length>0" ng-include="'views/includes/bitpayCardsCard.html'"></div>
|
||||
<div class="ng-hide" ng-show="wallets[0] && buyAndSellItems.length>0" ng-include="'views/includes/buyAndSellCard.html'"></div>
|
||||
<div class="ng-hide" ng-show="homeIntegrations.length>0" ng-include="'views/includes/homeIntegrations.html'"></div>
|
||||
<div class="ng-hide" ng-show="nextStepsItems.length>0" ng-include="'views/includes/nextSteps.html'"></div>
|
||||
<p>
|
||||
<span ng-if="!wallet.isComplete()" class="assertive" translate>
|
||||
Incomplete
|
||||
</span>
|
||||
<span ng-if="wallet.isComplete()">
|
||||
<span ng-if="!wallet.balanceHidden"> {{wallet.status.totalBalanceStr ? wallet.status.totalBalanceStr : ( wallet.cachedBalance ? wallet.cachedBalance + (wallet.cachedBalanceUpdatedOn ? ' · ' + ( wallet.cachedBalanceUpdatedOn * 1000 | amTimeAgo) : '') : '' ) }} </span>
|
||||
|
||||
<span ng-if="wallet.balanceHidden" translate>[Balance Hidden]</span>
|
||||
<span class="tab-home__wallet__multisig-number" ng-if="wallet.n > 1">
|
||||
{{wallet.m}}-of-{{wallet.n}}
|
||||
</span>
|
||||
<i ng-if="!wallet.balanceHidden && (wallet.status.totalBalanceSat != wallet.status.spendableAmount)" class="tab-home__wallet__status-icon ion-ios-timer-outline"></i>
|
||||
<span class="assertive" ng-if="wallet.error">{{wallet.error}}</span>
|
||||
</span>
|
||||
|
||||
</p>
|
||||
<i class="icon bp-arrow-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ng-hide" ng-show="wallets[0] && bitpayCardItems.length>0" ng-include="'views/includes/bitpayCardsCard.html'"></div>
|
||||
<div class="ng-hide" ng-show="wallets[0] && buyAndSellItems.length>0" ng-include="'views/includes/buyAndSellCard.html'"></div>
|
||||
<div class="ng-hide" ng-show="homeIntegrations.length>0" ng-include="'views/includes/homeIntegrations.html'"></div>
|
||||
<div class="ng-hide" ng-show="nextStepsItems.length>0" ng-include="'views/includes/nextSteps.html'"></div>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-view>
|
||||
|
|
|
|||
|
|
@ -90,7 +90,7 @@
|
|||
</i>
|
||||
<span class="wallet-name">{{wallet.name || wallet.id}}</span>
|
||||
<span class="item-note m10l">
|
||||
{{wallet.status.availableBalanceStr}}
|
||||
{{wallet.status.availableBalanceStr || '...'}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -47,22 +47,25 @@
|
|||
<i class="icon bp-arrow-right"></i>
|
||||
</a>
|
||||
<a class="item has-setting-value item-icon-left item-icon-right" ui-sref="tabs.language">
|
||||
<i class="icon big-icon-svg">
|
||||
<img src="img/icon-language.svg" class="bg"/>
|
||||
</i>
|
||||
<span class="setting-title">{{'Language' | translate}}</span>
|
||||
<span class="setting-value">
|
||||
{{currentLanguageName|translate}}
|
||||
</span>
|
||||
<i class="icon bp-arrow-right"></i>
|
||||
</a>
|
||||
<i class="icon big-icon-svg">
|
||||
<img src="img/icon-language.svg" class="bg"/>
|
||||
</i>
|
||||
<span class="setting-title">{{'Language' | translate}}</span>
|
||||
<span class="setting-value">
|
||||
{{currentLanguageName | translate}}
|
||||
</span>
|
||||
<span ng-if="!currentLanguageName" class="setting-value">
|
||||
...
|
||||
</span>
|
||||
<i class="icon bp-arrow-right"></i>
|
||||
</a>
|
||||
<a class="item has-setting-value item-icon-left item-icon-right" ui-sref="tabs.unit">
|
||||
<i class="icon big-icon-svg">
|
||||
<img src="img/icon-unit.svg" class="bg"/>
|
||||
</i>
|
||||
<span class="setting-title">{{'Bitcoin Unit' | translate}}</span>
|
||||
<span class="setting-value">
|
||||
{{unitName}}
|
||||
{{unitName || '...'}}
|
||||
</span>
|
||||
<i class="icon bp-arrow-right"></i>
|
||||
</a>
|
||||
|
|
@ -73,7 +76,7 @@
|
|||
</i>
|
||||
<span class="setting-title">{{'Alternative Currency' | translate}}</span>
|
||||
<span class="setting-value">
|
||||
{{selectedAlternative.name}}
|
||||
{{selectedAlternative.name || '...'}}
|
||||
</span>
|
||||
<i class="icon bp-arrow-right"></i>
|
||||
</a>
|
||||
|
|
@ -84,7 +87,10 @@
|
|||
</i>
|
||||
<span class="setting-title">{{'Bitcoin Network Fee Policy' | translate}}</span>
|
||||
<span class="setting-value">
|
||||
{{feeOpts[currentFeeLevel]|translate}}
|
||||
{{feeOpts[currentFeeLevel] | translate}}
|
||||
</span>
|
||||
<span ng-if="!feeOpts[currentFeeLevel]" class="setting-value">
|
||||
...
|
||||
</span>
|
||||
<i class="icon bp-arrow-right"></i>
|
||||
</a>
|
||||
|
|
|
|||
Loading…
Reference in New Issue