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

Merge pull request #236 from Bitcoin-com/wallet/task/428

Browse source 
Improvement - 428 - Send/Receive buttons
This commit is contained in:
Jean-Baptiste Dominguez 2018-08-08 10:53:48 +09:00 • committed by GitHub
commit f20f5ae648
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 157 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/js/controllers/tab-home.js
View file

@ -224,6 +224,7 @@ angular.module('copayApp.controllers').controller('tabHomeController',
cb(); cb();
} }
} }
$scope.walletsWithFunds = profileService.getWallets({hasFunds: true});
}); });
}); });
}; };

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

@ -233,10 +233,14 @@ angular.module('copayApp.controllers').controller('tabReceiveController', functi
if (!$scope.wallets[0]) return; if (!$scope.wallets[0]) return;
// select first wallet if no wallet selected previously var selectedWallet = null;
var selectedWallet = checkSelectedWallet($scope.wallet, $scope.wallets); if (data.stateParams.walletId) { // from walletDetails
selectedWallet = checkSelectedWallet(profileService.getWallet(data.stateParams.walletId), $scope.wallets);
} else {
// select first wallet if no wallet selected previously
selectedWallet = checkSelectedWallet($scope.wallet, $scope.wallets);
}
$scope.onWalletSelect(selectedWallet); $scope.onWalletSelect(selectedWallet);
$scope.showShareButton = platformInfo.isCordova ? (platformInfo.isIOS ? 'iOS' : 'Android') : null; $scope.showShareButton = platformInfo.isCordova ? (platformInfo.isIOS ? 'iOS' : 'Android') : null;
listeners = [ listeners = [

33
src/js/controllers/walletDetails.js
View file

@ -342,9 +342,9 @@ angular.module('copayApp.controllers').controller('walletDetailsController', fun
top = TOP_BALANCE_BUTTON; top = TOP_BALANCE_BUTTON;
} }
var amountTop = ((amountScale - 0.7) / 0.7) * top; var amountTop = ((amountScale - 0.80) / 0.80) * top;
if (amountTop < -10) { if (amountTop < -2) {
amountTop = -10; amountTop = -2;
} }
if (amountTop > top) { if (amountTop > top) {
amountTop = top; amountTop = top;
@ -353,6 +353,7 @@ angular.module('copayApp.controllers').controller('walletDetailsController', fun
var t = amountTop; var t = amountTop;
$scope.altAmountOpacity = (amountHeight - 100) / 80; $scope.altAmountOpacity = (amountHeight - 100) / 80;
$scope.buttonsOpacity = (amountHeight - 140) / 70;
$window.requestAnimationFrame(function() { $window.requestAnimationFrame(function() {
$scope.amountHeight = amountHeight + 'px'; $scope.amountHeight = amountHeight + 'px';
$scope.contentMargin = contentMargin + 'px'; $scope.contentMargin = contentMargin + 'px';
@ -469,4 +470,30 @@ angular.module('copayApp.controllers').controller('walletDetailsController', fun
function rgbToHex(r, g, b) { function rgbToHex(r, g, b) {
return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b); return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
} }
$scope.goToSend = function() {
$state.go('tabs.home', {
walletId: $scope.wallet.id
}).then(function () {
$ionicHistory.clearHistory();
$state.go('tabs.send');
});
};
$scope.goToReceive = function() {
$state.go('tabs.home', {
walletId: $scope.wallet.id
}).then(function () {
$ionicHistory.clearHistory();
$state.go('tabs.receive', {
walletId: $scope.wallet.id
});
});
};
$scope.goToBuy = function() {
$state.go('tabs.home', {
walletId: $scope.wallet.id
}).then(function () {
$ionicHistory.clearHistory();
$state.go('tabs.buyandsell');
});
};
}); });

2
src/js/routes.js
View file

@ -236,7 +236,7 @@ angular.module('copayApp').config(function(historicLogProvider, $provide, $logPr
} }
}) })
.state('tabs.receive', { .state('tabs.receive', {
url: '/receive', url: '/receive/:walletId',
views: { views: {
'tab-receive': { 'tab-receive': {
controller: 'tabReceiveController', controller: 'tabReceiveController',

12
src/sass/buttons.scss
View file

@ -72,5 +72,17 @@
&.activated { &.activated {
color: #FFF; color: #FFF;
} }
&-outline {
@include button-style(transparent, #FFFFFF, #FAFAFA, #FFF, #FFFFFF);
@include button-outline(#FFFFFF);
background: none;
box-shadow: none;
}
}
&-grey-outline {
@include button-style(transparent, #727272, #FAFAFA, #727272, #727272);
@include button-outline(#727272);
background: none;
box-shadow: none;
} }
} }

4
src/sass/shame.scss
View file

@ -233,6 +233,10 @@ input[type=number] {
font-size: 24px; font-size: 24px;
} }
.size-25 {
font-size: 25px;
}
.size-28 { .size-28 {
font-size: 28px; font-size: 28px;
} }

19
src/sass/views/tab-home.scss
View file

@ -69,6 +69,25 @@
} }
} }
} }
.buttons {
margin: 6px auto -12px;
max-width: 600px;
>.col {
padding: 5px 10px;
margin-bottom: 0;
}
.button {
border: 2px solid;
border-radius: 47px;
padding: 0 15px 0 15px;
text-align: center;
width: 100%;
font-size: 19px;
font-weight: bolder;
min-height: auto;
line-height: 36px;
}
}
.wallet-coin-logo { .wallet-coin-logo {
vertical-align: middle; vertical-align: middle;
margin-right: 5px; margin-right: 5px;

29
src/sass/views/walletDetails.scss
View file

@ -135,11 +135,12 @@
&.status-bar { &.status-bar {
margin-top: 20px; margin-top: 20px;
margin-top: env(safe-area-inset-top);
} }
} }
.bar-header { .bar-header {
border: 0; border: 0;
background: none; background: rgb(238, 182, 64);
.title, .button { .title, .button {
color: #fff; color: #fff;
} }
@ -153,7 +154,7 @@
ion-content { ion-content {
&.collapsible { &.collapsible {
margin-top: 210px; margin-top: 230px;
} }
padding-top: 0; padding-top: 0;
@ -190,12 +191,34 @@
transform: translateY(100px); transform: translateY(100px);
} }
} }
.send-receive-buttons {
max-width: 600px;
position: absolute;
bottom: 20px;
>.col {
padding: 5px 10px;
margin-bottom: 0;
}
.button {
border: 2px solid;
border-radius: 47px;
padding: 0 15px 0 15px;
text-align: center;
width: 100%;
font-size: 19px;
font-weight: bolder;
min-height: auto;
line-height: 36px;
}
}
} }
.amount { .amount {
width: 100%; width: 100%;
text-align: center; text-align: center;
color: #fff; color: #fff;
height: 210px; height: 230px;
padding-top: 40px; padding-top: 40px;
display: block; display: block;
align-items: center; align-items: center;

18
www/views/tab-home.html
View file

@ -22,6 +22,24 @@
</div> </div>
</div> </div>
<div class="buttons row">
<div class="col">
<div class="button button-outline button-grey-outline" ui-sref="tabs.receive">
<span translate>Receive</span>
</div>
</div>
<div class="col">
<div class="button button-outline button-grey-outline" ng-class="{'ng-hide': walletsWithFunds.length}"
ui-sref="tabs.buyandsell">
<span translate>Buy Bitcoin</span>
</div>
<div class="button button-outline button-grey-outline" ng-class="{'ng-hide': !walletsWithFunds.length}"
ui-sref="tabs.send">
<span translate>Send</span>
</div>
</div>
</div>
<div class="list card homeTip" ng-if="homeTip"> <div class="list card homeTip" ng-if="homeTip">
<div class="item item-icon-right item-heading"> <div class="item item-icon-right item-heading">
<div class="title" translate> <div class="title" translate>

46
www/views/walletDetails.html
View file

@ -34,7 +34,7 @@
on-hold="hideToggle()" on-hold="hideToggle()"
ng-style="{'transform': amountScale}" ng-style="{'transform': amountScale}"
ng-class="{amount__balance: amountIsCollapsible}"> ng-class="{amount__balance: amountIsCollapsible}">
<strong class="size-36">{{status.totalBalanceAlternative}} {{status.alternativeIsoCode}}</strong> <strong class="size-25">{{status.totalBalanceAlternative}} {{status.alternativeIsoCode}}</strong>
<div <div
class="size-14 amount-alternative" class="size-14 amount-alternative"
ng-if="status.totalBalanceAlternative && wallet.network == 'livenet'" ng-if="status.totalBalanceAlternative && wallet.network == 'livenet'"
@ -48,7 +48,7 @@
on-hold="hideToggle()" on-hold="hideToggle()"
ng-style="{'transform': amountScale}" ng-style="{'transform': amountScale}"
ng-class="{amount__balance: amountIsCollapsible}"> ng-class="{amount__balance: amountIsCollapsible}">
<strong class="size-36">{{status.totalBalanceStr}}</strong> <strong class="size-25">{{status.totalBalanceStr}}</strong>
<div <div
class="size-14 amount-alternative" class="size-14 amount-alternative"
ng-if="status.totalBalanceAlternative && wallet.network == 'livenet'" ng-if="status.totalBalanceAlternative && wallet.network == 'livenet'"
@ -91,6 +91,22 @@
</button> </button>
</div> </div>
<div class="send-receive-buttons row" ng-if="(status.availableBalanceSat || status.availableBalanceSat === 0) && (buttonsOpacity > 0 || isAndroid)" ng-style="{opacity: buttonsOpacity}">
<div class="col">
<div class="button button-outline button-white-outline" ng-click="goToReceive()">
<span translate>Receive</span>
</div>
</div>
<div class="col">
<div class="button button-outline button-white-outline" ng-if="!status.availableBalanceSat" ng-click="goToBuy()">
<span translate>Buy Bitcoin</span>
</div>
<div class="button button-outline button-white-outline" ng-if="status.availableBalanceSat>0" ng-click="goToSend()">
<span translate>Send</span>
</div>
</div>
</div>
</div> </div>
<div class="wallet-details-wallet-info" ng-style="{opacity: altAmountOpacity}"> <div class="wallet-details-wallet-info" ng-style="{opacity: altAmountOpacity}">
<span ng-include="'views/includes/walletInfo.html'"></span> <span ng-include="'views/includes/walletInfo.html'"></span>
@ -127,7 +143,7 @@
on-hold="hideToggle()" on-hold="hideToggle()"
ng-style="{'transform': amountScale}" ng-style="{'transform': amountScale}"
ng-class="{amount__balance: amountIsCollapsible}"> ng-class="{amount__balance: amountIsCollapsible}">
<strong class="size-36">{{status.totalBalanceStr}}</strong> <strong class="size-25">{{status.totalBalanceStr}}</strong>
<div <div
class="size-14 amount-alternative" class="size-14 amount-alternative"
ng-if="status.totalBalanceAlternative && wallet.network == 'livenet'" ng-if="status.totalBalanceAlternative && wallet.network == 'livenet'"
@ -142,9 +158,9 @@
on-hold="hideToggle()" on-hold="hideToggle()"
ng-style="{'transform': amountScale}" ng-style="{'transform': amountScale}"
ng-class="{amount__balance: amountIsCollapsible}"> ng-class="{amount__balance: amountIsCollapsible}">
<strong class="size-36">{{status.totalBalanceAlternative}} {{status.alternativeIsoCode}}</strong> <strong class="size-25">{{status.totalBalanceAlternative}} {{status.alternativeIsoCode}}</strong>
<div <div
class="size-14 amount-alternative" class="size-16 amount-alternative"
ng-if="status.totalBalanceAlternative && wallet.network == 'livenet'" ng-if="status.totalBalanceAlternative && wallet.network == 'livenet'"
ng-style="{opacity: altAmountOpacity}"> ng-style="{opacity: altAmountOpacity}">
{{status.totalBalanceStr}} {{status.totalBalanceStr}}
@ -156,7 +172,7 @@
ng-show="!updateStatusError && wallet.balanceHidden && !wallet.scanning" ng-show="!updateStatusError && wallet.balanceHidden && !wallet.scanning"
on-hold="hideToggle()"> on-hold="hideToggle()">
<strong class="size-24" translate>[Balance Hidden]</strong> <strong class="size-24" translate>[Balance Hidden]</strong>
<div ng-style="{opacity: altAmountOpacity}" class="size-14 amount-alternative" translate> <div ng-style="{opacity: altAmountOpacity}" class="size-16 amount-alternative" translate>
Tap and hold to show Tap and hold to show
</div> </div>
</div> </div>
@ -166,7 +182,7 @@
class="amount__balance" class="amount__balance"
ng-show="!updateStatusError && wallet.scanning"> ng-show="!updateStatusError && wallet.scanning">
<strong class="size-24" translate>[Scanning Funds]</strong> <strong class="size-24" translate>[Scanning Funds]</strong>
<div ng-style="{opacity: altAmountOpacity}" class="size-14 amount-alternative" translate> <div ng-style="{opacity: altAmountOpacity}" class="size-16 amount-alternative" translate>
Please wait Please wait
</div> </div>
</div> </div>
@ -198,6 +214,22 @@
</button> </button>
</div> </div>
<div class="send-receive-buttons row" ng-if="(status.availableBalanceSat || status.availableBalanceSat === 0) && (buttonsOpacity > 0 || isAndroid)" ng-style="{opacity: buttonsOpacity}">
<div class="col">
<div class="button button-outline button-white-outline" ng-click="goToReceive()">
<span translate>Receive</span>
</div>
</div>
<div class="col">
<div class="button button-outline button-white-outline" ng-if="!status.availableBalanceSat" ng-click="goToBuy()">
<span translate>Buy Bitcoin</span>
</div>
<div class="button button-outline button-white-outline" ng-if="status.availableBalanceSat>0" ng-click="goToSend()">
<span translate>Send</span>
</div>
</div>
</div>
</div> </div>
<div class="wallet-details-wallet-info" ng-style="{opacity: altAmountOpacity}"> <div class="wallet-details-wallet-info" ng-style="{opacity: altAmountOpacity}">
<span ng-include="'views/includes/walletInfo.html'"></span> <span ng-include="'views/includes/walletInfo.html'"></span>