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

make wallet selector a standalone directive

Browse source
This commit is contained in:
Marty Alcala 2016-10-12 20:13:28 -04:00
commit ec3fca4cda
8 changed files with 132 additions and 102 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/js/controllers/confirm.js
View file

@ -113,16 +113,11 @@ angular.module('copayApp.controllers').controller('confirmController', function(
});
$scope.showWalletSelector = function() {
console.log('showWalletSelector called');
console.log('$scope.wallets', $scope.wallets);
$scope.showWallets = true;
};
$scope.selectWallet = function(w) {
$timeout(function() {
$scope.showWallets = false;
}, 100);
setWallet(w);
$scope.onWalletSelect = function(wallet) {
setWallet(wallet);
};

5
src/js/directives/actionSheet.js
View file

@ -10,11 +10,6 @@ angular.module('copayApp.directives')
show: '=actionSheetShow',
},
link: function(scope, element, attrs) {
console.log('action sheet instantiated');
scope.$watch('show', function() {
console.log('show called', scope.show);
});
scope.hide = function() {
scope.show = false;
};

27
src/js/directives/walletSelector.js Normal file
View file

@ -0,0 +1,27 @@
'use strict';
angular.module('copayApp.directives')
.directive('walletSelector', function($timeout) {
return {
restrict: 'E',
templateUrl: 'views/includes/walletSelector.html',
transclude: true,
scope: {
show: '=walletSelectorShow',
wallets: '=walletSelectorWallets',
selectedWallet: '=walletSelectorSelectedWallet',
onSelect: '=walletSelectorOnSelect'
},
link: function(scope, element, attrs) {
scope.hide = function() {
scope.show = false;
};
scope.selectWallet = function(wallet) {
$timeout(function() {
scope.hide();
}, 100);
scope.onSelect(wallet);
};
}
};
});

59
src/sass/views/confirm.scss
View file

@ -1,60 +1,3 @@
#view-confirm {
$border-color: #EFEFEF;
height: auto;
.wallet-selector {
.wallet {
border: 0;
padding-right: 0;
padding-top: 0;
padding-left: 65px;
padding-bottom: 0;
margin-bottom: 1px;
overflow: visible;
> i {
padding: 0;
margin-left: -5px;
> img {
height: 39px;
width: 39px;
padding: 4px;
}
}
}
.wallet-inner {
display: flex;
position: relative;
padding-top: 16px;
padding-bottom: 16px;
&::after {
display: block;
position: absolute;
width: 100%;
height: 1px;
background: $border-color;
bottom: 0;
right: 0;
content: '';
}
.check {
padding: 0 1.2rem;
}
}
.wallet-details {
flex-grow: 1;
.wallet-name {
padding-bottom: 5px;
}
.wallet-balance {
color: #3A3A3A;
font-family: "Roboto-Light";
}
}
}
}

62
src/sass/views/includes/walletSelector.scss Normal file
View file

@ -0,0 +1,62 @@
wallet-selector {
$border-color: #EFEFEF;
.wallet-selector {
.wallet {
border: 0;
padding-right: 0;
padding-top: 0;
padding-left: 65px;
padding-bottom: 0;
margin-bottom: 1px;
overflow: visible;
> i {
padding: 0;
margin-left: -5px;
> img {
height: 39px;
width: 39px;
padding: 4px;
}
}
}
.wallet-inner {
display: flex;
position: relative;
padding-top: 16px;
padding-bottom: 16px;
&::after {
display: block;
position: absolute;
width: 100%;
height: 1px;
background: $border-color;
bottom: 0;
right: 0;
content: '';
}
.check {
padding: 0 1.2rem;
}
}
.wallet-details {
flex-grow: 1;
.wallet-name {
padding-bottom: 5px;
}
.wallet-balance {
color: #3A3A3A;
font-family: "Roboto-Light";
}
}
}
}

1
src/sass/views/views.scss
View file

@ -27,4 +27,5 @@
@import "includes/tx-details";
@import "includes/txp-details";
@import "includes/tx-status";
@import "includes/walletSelector";
@import "integrations/coinbase.scss";

41
www/views/confirm.html
View file

@ -79,38 +79,15 @@
<span ng-hide="wallet.m > 1">Payment Sent</span>
<span ng-show="wallet.m > 1">Proposal Created</span>
</slide-to-accept-success>
<action-sheet action-sheet-show="showWallets" class="wallet-selector">
<!-- <div ng-repeat="wallet in wallets">{{wallet.name}}</div> -->
<a
ng-repeat="w in wallets track by $index"
class="item item-icon-left item-big-icon-left item-icon-right wallet"
ng-click="selectWallet(w)"
>
<i class="icon big-icon-svg">
<img src="img/icon-wallet.svg" ng-style="{'background-color': w.color}" class="bg">
</i>
<div class="wallet-inner">
<div class="wallet-details">
<div class="wallet-name">
{{w.name}}
</div>
<p class="wallet-balance">
<span ng-if="!w.isComplete()" class="assertive" translate>
Incomplete
</span>
<span ng-if="w.isComplete()">
<span ng-if="!w.balanceHidden">{{w.status.availableBalanceStr}}</span>
<span ng-if="w.balanceHidden" translate>[Balance Hidden]</span>
</span>
</span>
&nbsp;
</p>
</div>
<img class="check" src="img/icon-check-selected.svg" ng-show="wallet === w">
</div>
<!-- <i class="icon bp-arrow-right"></i> -->
</a>
</action-sheet>
<wallet-selector
wallet-selector-wallets="wallets"
wallet-selector-selected-wallet="wallet"
wallet-selector-show="showWallets"
wallet-selector-on-select="onWalletSelect"
>
</wallet-selector>
</ion-view>
<!-- <ion-view id="view-confirm">
<ion-nav-bar class="bar-royal">

30
www/views/includes/walletSelector.html Normal file
View file

@ -0,0 +1,30 @@
<action-sheet action-sheet-show="show" class="wallet-selector">
<a
ng-repeat="w in wallets track by $index"
class="item item-icon-left item-big-icon-left item-icon-right wallet"
ng-click="selectWallet(w)"
>
<i class="icon big-icon-svg">
<img src="img/icon-wallet.svg" ng-style="{'background-color': w.color}" class="bg">
</i>
<div class="wallet-inner">
<div class="wallet-details">
<div class="wallet-name">
{{w.name}}
</div>
<p class="wallet-balance">
<span ng-if="!w.isComplete()" class="assertive" translate>
Incomplete
</span>
<span ng-if="w.isComplete()">
<span ng-if="!w.balanceHidden">{{w.status.availableBalanceStr}}</span>
<span ng-if="w.balanceHidden" translate>[Balance Hidden]</span>
</span>
</span>
&nbsp;
</p>
</div>
<img class="check" src="img/icon-check-selected.svg" ng-show="selectedWallet === w">
</div>
</a>
</action-sheet>