added animation to receive tab
This commit is contained in:
Jamal Jackson
parent
e6d4782f94
commit
1ee7ee4f76
4 changed files with 260 additions and 49 deletions
|
|
@ -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);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue