From 10986850d0704d5dc665e884eb50fc46aa8afcf1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gabriel=20Baz=C3=A1n?= Date: Fri, 14 Apr 2017 18:26:56 -0300 Subject: [PATCH] adding loading placeholders to avoid the screen resize --- src/js/controllers/tab-home.js | 3 + src/sass/views/tab-home.scss | 38 +++++++++ www/views/tab-home.html | 152 +++++++++++++++++++-------------- 3 files changed, 129 insertions(+), 64 deletions(-) diff --git a/src/js/controllers/tab-home.js b/src/js/controllers/tab-home.js index 7a3fd83f8..020716608 100644 --- a/src/js/controllers/tab-home.js +++ b/src/js/controllers/tab-home.js @@ -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(); diff --git a/src/sass/views/tab-home.scss b/src/sass/views/tab-home.scss index 3886ba7ee..e0620cbd6 100644 --- a/src/sass/views/tab-home.scss +++ b/src/sass/views/tab-home.scss @@ -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 1s; } .wallet-details__item.item { padding-top: 0; diff --git a/www/views/tab-home.html b/www/views/tab-home.html index 6d2ec9247..0bbcba945 100644 --- a/www/views/tab-home.html +++ b/www/views/tab-home.html @@ -39,76 +39,100 @@ On this screen you can see all your wallets, accounts, and assets. - -
- - {{'Payment Proposals'|translate}} - - {{txpsN}} - - -
- +
+
+
+ +
+ + + +
+ +
+
+
+
+ +
+ + + +
+ +
- -
- - Recent Transactions - - {{notificationsN}} - - - - -
- -
-
- Wallets - -
-
- - - - - Create bitcoin wallet +
+
+ + {{'Payment Proposals'|translate}} + {{txpsN}} - - - - - - {{wallet.name || wallet.id}} - -

- - Incomplete - - - {{wallet.status.totalBalanceStr ? wallet.status.totalBalanceStr : ( wallet.cachedBalance ? wallet.cachedBalance + (wallet.cachedBalanceUpdatedOn ? ' · ' + ( wallet.cachedBalanceUpdatedOn * 1000 | amTimeAgo) : '') : '' ) }} - [Balance Hidden] - - {{wallet.m}}-of-{{wallet.n}} +

+ +
+
+ +
+ + Recent Transactions + + {{notificationsN}} + + + + +
+ +
+
+ Wallets + +
+ -
-
-
-
-
+

+ + Incomplete + + + {{wallet.status.totalBalanceStr ? wallet.status.totalBalanceStr : ( wallet.cachedBalance ? wallet.cachedBalance + (wallet.cachedBalanceUpdatedOn ? ' · ' + ( wallet.cachedBalanceUpdatedOn * 1000 | amTimeAgo) : '') : '' ) }} + [Balance Hidden] + + {{wallet.m}}-of-{{wallet.n}} + + + {{wallet.error}} + +   +

+ + +
+
+
+
+
+
+