anders/Wallet
1
0
Fork 0
Code Issues Projects Releases Packages Wiki Activity

added animation to receive tab

Browse source
This commit is contained in:
Jamal Jackson 2016-11-11 13:49:51 -05:00
commit 1ee7ee4f76
4 changed files with 260 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

40
src/js/controllers/tab-receive.js
View file

@ -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);
});
});
});

7
src/sass/views/includes/wallets.scss
View file

@ -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;
}
}
}

213
src/sass/views/tab-receive.scss
View file

@ -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 {

51
www/views/tab-receive.html
View file

@ -3,11 +3,11 @@
<ion-nav-title>{{'Receive' | translate}}</ion-nav-title>
</ion-nav-bar>
<ion-content scroll="false">
<div class="list card padding text-center" ng-if="!wallets[0]">
<article class="list card padding text-center" ng-if="!wallets[0]">
<span translate>No Wallet</span>
</div>
<div id="address" ng-if="wallets[0]">
<article class="text-center" ng-if="!wallet">
</article>
<article id="address" ng-if="wallets[0]">
<div id="address-info" class="text-center" ng-if="!wallet">
<div class="row qr">
<div class="text-center col center-block">
<div style="height:225px; width:220px; margin:auto; background: white; padding-top: 25%;">
@ -23,8 +23,8 @@
</div>
</div>
</div>
</article>
<article class="text-center" ng-if="wallet && !wallet.isComplete()">
</div>
<div id="address-info" class="text-center" ng-if="wallet && !wallet.isComplete()">
<div class="incomplete">
<div class="title">
<span translate>Incomplete wallet</span>
@ -44,17 +44,17 @@
</div>
</div>
</div>
</article>
<article ng-if="wallet && wallet.isComplete()">
</div>
<div id="address-info" ng-if="wallet && wallet.isComplete()">
<div class="row backup" ng-show="wallet.needsBackup" ng-click="openBackupNeededModal()">
<div class="text-center col center-block">
<i class="icon ion-alert"></i><span translate>Wallet not backed up</span><i class="icon ion-ios-arrow-thin-right"></i>
</div>
</div>
<div class="row qr">
<div class="text-center col center-block" copy-to-clipboard="addr">
<qrcode ng-if="addr" size="220" data="bitcoin:{{addr}}" color="#334"></qrcode>
<div ng-if="!addr" style="height:225px; width:220px; margin:auto; background: white; padding-top: 25%;">
<div class="text-center col center-block" copy-to-clipboard="addr" ng-repeat="wallet in wallets track by $index" ng-class="walletPosition($index)">
<qrcode ng-if="walletAddrs[wallet.id]" size="220" data="bitcoin:{{walletAddrs[wallet.id]}}" color="#334"></qrcode>
<div ng-if="!walletAddrs[wallet.id]" style="height:225px; width:220px; margin:auto;padding-top: 25%;position:absolute;left:50%;top:50%;z-index:1;">
...
</div>
</div>
@ -72,20 +72,35 @@
</div>
</div>
<div id="bit-address" class="row border-top">
<div class="col col-90 center-block bit-address text-center">
<div class="center-block bit-address text-center" ng-repeat="wallet in wallets track by $index" ng-class="walletPosition($index)">
<div class="item item-icon-left item-icon-right">
<i class="icon icon-svg receive-tab-bitcoin-icon"><img src="img/icon-bitcoin-symbol.svg"></i>
<span class="bit-address-gen-address" ng-if="generatingAddress">...</span>
<span class="bit-address-gen-address" ng-if="!generatingAddress" copy-to-clipboard="addr">{{addr}}</span>
<span class="bit-address-gen-address" ng-if="!generatingAddress" copy-to-clipboard="walletAddrs[wallet.id]">{{walletAddrs[wallet.id]}}</span>
</div>
</div>
</div>
</article>
</div>
<article id="wallets" ng-if="wallets[0]">
<div class="list">
<wallets wallets="wallets"></wallets>
</div>
</article>
<article id="wallets" ng-if="wallets[0]">
<div id="sidebar-wallet" class="list">
<div id="wallet-list">
<div class="wallet" ng-repeat="wallet in wallets track by $index" ng-click="setWallet($index)" ng-class="walletPosition($index)">
<div class="card">
<div class="item item-icon-left text-right" ng-class="{'noBalance': !wallet.status.availableBalanceStr}">
<i class="icon big-icon-svg">
<img src="img/icon-wallet.svg" ng-style="{'background-color': wallet.color}" class="bg"/>
</i>
<span class="wallet-name">{{wallet.name || wallet.id}}</span>
<span class="item-note m10l">
{{wallet.status.availableBalanceStr}}
</span>
</div>
</div>
</div>
</div>
</div>
<wallets id="wallet-slider" wallets="wallets" options="sliderOptions"></wallets>
</article>
</ion-content>
</ion-view>