From 1ee7ee4f76b6bfe60db573472e8451a5ecb3a1ce Mon Sep 17 00:00:00 2001 From: Jamal Jackson Date: Fri, 11 Nov 2016 13:49:51 -0500 Subject: [PATCH] added animation to receive tab --- src/js/controllers/tab-receive.js | 40 ++++- src/sass/views/includes/wallets.scss | 7 +- src/sass/views/tab-receive.scss | 213 +++++++++++++++++++++++---- www/views/tab-receive.html | 51 ++++--- 4 files changed, 261 insertions(+), 50 deletions(-) diff --git a/src/js/controllers/tab-receive.js b/src/js/controllers/tab-receive.js index 11095db14..d98893c5b 100644 --- a/src/js/controllers/tab-receive.js +++ b/src/js/controllers/tab-receive.js @@ -4,6 +4,7 @@ angular.module('copayApp.controllers').controller('tabReceiveController', functi $scope.isCordova = platformInfo.isCordova; $scope.isNW = platformInfo.isNW; + $scope.walletAddrs = {}; $scope.shareAddress = function(addr) { if ($scope.generatingAddress) return; @@ -20,12 +21,19 @@ angular.module('copayApp.controllers').controller('tabReceiveController', functi $scope.generatingAddress = false; if (err) popupService.showAlert(gettextCatalog.getString('Error'), err); $scope.addr = addr; + if ($scope.walletAddrs[$scope.wallet.id]) $scope.walletAddrs[$scope.wallet.id] = addr; $timeout(function() { $scope.$apply(); }, 10); }); }; + $scope.loadAddresses = function(wallet, index) { + walletService.getAddress(wallet, false, function(err, addr) { + $scope.walletAddrs[wallet.id] = addr || null; + }); + } + $scope.goCopayers = function() { $ionicHistory.removeBackView(); $ionicHistory.nextViewOptions({ @@ -67,7 +75,32 @@ angular.module('copayApp.controllers').controller('tabReceiveController', functi }); }; + $scope.setWallet = function(index) { + $scope.wallet = $scope.wallets[index]; + $scope.walletIndex = index; + if ($scope.walletAddrs[$scope.walletIndex].addr) $scope.addr = $scope.walletAddrs[$scope.walletIndex].addr; + else $scope.setAddress(false); + } + + $scope.isActive = function(index) { + return $scope.wallets[index] == $scope.wallet; + } + + $scope.walletPosition = function(index) { + if (index == $scope.walletIndex) return 'current'; + if (index < $scope.walletIndex) return 'prev'; + if (index > $scope.walletIndex) return 'next'; + } + + $scope.$on('Wallet/Changed', function(event, wallet) { + $scope.wallet = wallet; + $scope.walletIndex = lodash.findIndex($scope.wallets, function(wallet) { + return wallet.id == $scope.wallet.id; + }); + if (!$scope.walletAddrs[wallet.id]) $scope.setAddress(false); + else $scope.addr = $scope.walletAddrs[wallet.id]; + $scope.$apply(); if (!wallet) { $log.debug('No wallet provided'); return; @@ -77,14 +110,13 @@ angular.module('copayApp.controllers').controller('tabReceiveController', functi return; } $scope.wallet = wallet; - $scope.generatingAddress = false; $log.debug('Wallet changed: ' + wallet.name); - $timeout(function() { - $scope.setAddress(false); - }, 100); }); $scope.$on("$ionicView.beforeEnter", function(event, data) { $scope.wallets = profileService.getWallets(); + lodash.each($scope.wallets, function(wallet, index) { + $scope.loadAddresses(wallet); + }); }); }); diff --git a/src/sass/views/includes/wallets.scss b/src/sass/views/includes/wallets.scss index a3e1a4320..7bb22c807 100644 --- a/src/sass/views/includes/wallets.scss +++ b/src/sass/views/includes/wallets.scss @@ -9,6 +9,7 @@ box-shadow:$subtle-box-shadow; padding:0; border-radius: 6px; + margin: 0 auto; @media (min-width: 500px) { & { width: 350px; @@ -32,7 +33,7 @@ visibility: hidden; } &.visible{ - visibility: visible !important; + visibility: visible !important; } } .big-icon-svg{ @@ -64,10 +65,10 @@ transform: scale(.8); } &.swiper-slide-prev { - left: 10vw; + left: 5vw; } &.swiper-slide-next { - left: -10vw; + left: -5vw; } } } diff --git a/src/sass/views/tab-receive.scss b/src/sass/views/tab-receive.scss index 1b18083c0..99bc97ea5 100644 --- a/src/sass/views/tab-receive.scss +++ b/src/sass/views/tab-receive.scss @@ -13,7 +13,7 @@ .scroll{height:100%;} #address { background: #fff; - height: calc(100vh - 33vh); + height: calc(100vh - 34vh); display: flex; align-items: center; justify-content: center; @@ -22,14 +22,26 @@ @media(max-height: 600px){ height: calc(100vh - 36vh); } + &-info{ + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + } article{ flex:1; width: 100%; } #bit-address{ - position: absolute; - bottom:0; - width:100%; + width: 100%; + align-self: flex-end; + margin-top: auto; + justify-content: center; + align-content: center; + position: relative; + min-height: 40px; #next-address{ color:$light-gray; } @@ -58,6 +70,31 @@ } .bit-address { font-size: .8rem; + // left:10%; + position: absolute; + transition: all .4s ease; + width:100%; + height: 100%; + z-index: 0; + position: absolute; + top:50%; + &, &.next{ + left:100%; + transform: translate(100%, -40%); + } + &.next, &.prev{ + z-index:2; + } + &.current, &.prev{ + left:50%; + } + &.current{ + transform: translate(-50%, -40%); + z-index: 3; + } + &.prev{ + transform: translate(-150%, -40%); + } .item { padding-top: 5px; padding-bottom: 5px; @@ -67,6 +104,32 @@ } .qr { padding: calc(100vh - 85vh) 0 calc(100vh - 96vh); + align-self: center; + margin-top: auto; + height: 220px; + position: relative; + justify-content: center; + flex: 1; + div{ + transition: all .4s ease; + &.current, &.prev, &.next{ + position: absolute; + top:50%; + } + &.current, &.prev{ + left:50%; + } + &.current{ + transform: translate(-50%, -40%); + } + &.prev{ + transform: translate(-150%, -40%); + } + &.next{ + left:100%; + transform: translate(100%, -40%); + } + } @media(max-height: 700px){ padding: calc(100vh - 90vh) 0 calc(100vh - 96vh); } @@ -74,13 +137,13 @@ display: flex; justify-content: center; align-items: center; + position: relative; + min-height: 220px; } } #qr-options{ - display: flex; - flex-direction: row; justify-content: center; - align-content: center; + align-self: flex-end; .item{ i{left:25px;} } @@ -90,6 +153,8 @@ color: #fff; position: absolute; top: 0; + left:0; + z-index: 2; i { padding: 10px; } @@ -122,7 +187,7 @@ left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); - z-index: 2; + z-index: 4; } } #first-time-tip { @@ -165,6 +230,9 @@ border-right: 1px solid rgb(228, 228, 228); padding-right: 10px; } + #wallets{ + #sidebar-wallet{display: none;} + } .wallets{ position: relative; height: calc(100vh - 83vh); @@ -175,6 +243,17 @@ top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); + max-width: 450px; + .swiper-slide{ + text-align: center; + .card{ + margin-top:2vh; + display: inline-block; + width:80%; + } + &-next{left:-25%;} + &-prev{left:25%;} + } @media (max-height: 600px){ &{ -webkit-transform: translate(-50%, -58%); @@ -184,23 +263,107 @@ } } } - // @media(min-width: 700px) and (min-height: 700px){ - // .wallets{display: none;} - // #address{ - // height:90vh; - // width:75%; - // .qr{ - // height: 70%; - // div{ - // transform: scale(1.5); - // } - // } - // #bit-address{ - // height: 10%; - // padding: calc(100vh - 99vh); - // } - // } - // } + @media(min-width: 700px) and (min-height: 700px){ + .wallets{display: none;} + #address{ + float:left; + height:90vh; + width:65%; + &-info{ + height: 100%; + } + .qr{ + height: 70%; + div{ + opacity: 0; + transition: none; + &.current{ + opacity: 1; + } + } + } + .bit-address{ + opacity: 0; + transition: none; + &.current{ + opacity: 1; + } + } + .backup, #bit-address{left:0;} + #bit-address{ + height: 10%; + padding: calc(100vh - 99vh); + } + } + #wallets{ + float:left; + width:35%; + height: 100%; + display: flex; + flex-direction: column; + overflow: visible; + #sidebar-wallet{display: block;} + .list{height: 100%;overflow: visible;} + #wallet-list{ + position: absolute; + width: 100%; + overflow-y: scroll; + height: 100%; + left: -6%; + } + .wallet{ + position: relative; + &.current{ + &:before { + right: 93%; + top: 50%; + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + border-right-color: #f2f2f2; + border-width: 20px; + margin-top: -20px; + } + } + } + .card { + max-width: 350px; + box-shadow:$subtle-box-shadow; + padding:0; + border-radius: 6px; + padding:2px; + width: 80%; + position: relative; + margin: 1.5rem auto 0; + .item{ + padding: 6% 10% 6% 8%; + i{left:auto;} + span{ + clear:both; + width: 100%; + display: inline-block; + &.wallet-name{ + margin-top:10px; + margin-bottom:5px; + font-size:13px; + } + &.wallet-number{ + visibility: hidden; + } + &.visible{ + visibility: visible !important; + } + } + .big-icon-svg{ + & > .bg{padding:.3rem;width: 40px;height:40px;} + } + } + } + } + } } @keyframes fadeIn { diff --git a/www/views/tab-receive.html b/www/views/tab-receive.html index 6f77a406c..31b386f28 100644 --- a/www/views/tab-receive.html +++ b/www/views/tab-receive.html @@ -3,11 +3,11 @@ {{'Receive' | translate}} -
+
No Wallet -
-
-
+
+
+
@@ -23,8 +23,8 @@
-
-
+
+
Incomplete wallet @@ -44,17 +44,17 @@
- -
+ +
Wallet not backed up
-
- -
+
+ +
...
@@ -72,20 +72,35 @@
-
+
... - {{addr}} + {{walletAddrs[wallet.id]}}
-
- -
-
-
+
+ + +