mirror of https://github.com/BTCPrivate/copay.git
Merge pull request #426 from msalcala11/sendStyling
Send view styling and wallet switcher
This commit is contained in:
commit
89d207d364
|
@ -40,6 +40,8 @@ angular.module('copayApp.controllers').controller('confirmController', function(
|
||||||
|
|
||||||
$scope.toAmount = parseInt($scope.toAmount);
|
$scope.toAmount = parseInt($scope.toAmount);
|
||||||
$scope.amountStr = txFormatService.formatAmountStr($scope.toAmount);
|
$scope.amountStr = txFormatService.formatAmountStr($scope.toAmount);
|
||||||
|
$scope.displayAmount = getDisplayAmount($scope.amountStr);
|
||||||
|
$scope.displayUnit = getDisplayUnit($scope.amountStr);
|
||||||
|
|
||||||
var networkName = (new bitcore.Address($scope.toAddress)).network.name;
|
var networkName = (new bitcore.Address($scope.toAddress)).network.name;
|
||||||
$scope.network = networkName;
|
$scope.network = networkName;
|
||||||
|
@ -65,6 +67,7 @@ angular.module('copayApp.controllers').controller('confirmController', function(
|
||||||
if (err || !status) {
|
if (err || !status) {
|
||||||
$log.error(err);
|
$log.error(err);
|
||||||
} else {
|
} else {
|
||||||
|
w.status = status;
|
||||||
if (!status.availableBalanceSat) $log.debug('No balance available in: ' + w.name);
|
if (!status.availableBalanceSat) $log.debug('No balance available in: ' + w.name);
|
||||||
if (status.availableBalanceSat > $scope.toAmount) {
|
if (status.availableBalanceSat > $scope.toAmount) {
|
||||||
filteredWallets.push(w);
|
filteredWallets.push(w);
|
||||||
|
@ -75,6 +78,7 @@ angular.module('copayApp.controllers').controller('confirmController', function(
|
||||||
if (++index == wallets.length) {
|
if (++index == wallets.length) {
|
||||||
if (!lodash.isEmpty(filteredWallets)) {
|
if (!lodash.isEmpty(filteredWallets)) {
|
||||||
$scope.wallets = lodash.clone(filteredWallets);
|
$scope.wallets = lodash.clone(filteredWallets);
|
||||||
|
setWallet($scope.wallets[0]);
|
||||||
} else {
|
} else {
|
||||||
|
|
||||||
if (!enoughFunds)
|
if (!enoughFunds)
|
||||||
|
@ -108,6 +112,14 @@ angular.module('copayApp.controllers').controller('confirmController', function(
|
||||||
setWallet(wallet, true);
|
setWallet(wallet, true);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
$scope.showWalletSelector = function() {
|
||||||
|
$scope.showWallets = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
$scope.onWalletSelect = function(wallet) {
|
||||||
|
setWallet(wallet);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
$scope.showDescriptionPopup = function() {
|
$scope.showDescriptionPopup = function() {
|
||||||
var message = gettextCatalog.getString('Add description');
|
var message = gettextCatalog.getString('Add description');
|
||||||
|
@ -123,6 +135,14 @@ angular.module('copayApp.controllers').controller('confirmController', function(
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
function getDisplayAmount(amountStr) {
|
||||||
|
return amountStr.split(' ')[0];
|
||||||
|
}
|
||||||
|
|
||||||
|
function getDisplayUnit(amountStr) {
|
||||||
|
return amountStr.split(' ')[1];
|
||||||
|
}
|
||||||
|
|
||||||
var setFromPayPro = function(uri, cb) {
|
var setFromPayPro = function(uri, cb) {
|
||||||
if (!cb) cb = function() {};
|
if (!cb) cb = function() {};
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,18 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
angular.module('copayApp.directives')
|
||||||
|
.directive('actionSheet', function() {
|
||||||
|
return {
|
||||||
|
restrict: 'E',
|
||||||
|
templateUrl: 'views/includes/actionSheet.html',
|
||||||
|
transclude: true,
|
||||||
|
scope: {
|
||||||
|
show: '=actionSheetShow',
|
||||||
|
},
|
||||||
|
link: function(scope, element, attrs) {
|
||||||
|
scope.hide = function() {
|
||||||
|
scope.show = false;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
});
|
|
@ -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);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
});
|
|
@ -19,7 +19,8 @@ $button-secondary-border: transparent;
|
||||||
$button-secondary-active-bg: darken($subtle-gray, 5%);
|
$button-secondary-active-bg: darken($subtle-gray, 5%);
|
||||||
$button-secondary-active-border: transparent;
|
$button-secondary-active-border: transparent;
|
||||||
|
|
||||||
%button-standard {
|
%button-standard,
|
||||||
|
click-to-accept {
|
||||||
width: 85%;
|
width: 85%;
|
||||||
max-width: 300px;
|
max-width: 300px;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
|
|
|
@ -1,30 +1,3 @@
|
||||||
#view-confirm {
|
#view-confirm {
|
||||||
.icon-bitpay-card {
|
|
||||||
background-image: url("../img/icon-bitpay.svg");
|
|
||||||
}
|
|
||||||
.slide-to-pay{
|
|
||||||
bottom: 149px;
|
|
||||||
}
|
|
||||||
.send-gravatar {
|
|
||||||
left: 11px;
|
|
||||||
position: absolute;
|
|
||||||
top: 10px;
|
|
||||||
}
|
|
||||||
.accept-slide {
|
|
||||||
position: fixed;
|
|
||||||
bottom: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100px;
|
|
||||||
background-color: #647CE8;
|
|
||||||
color: #ffffff;
|
|
||||||
font-size: 25px;
|
|
||||||
text-align: center;
|
|
||||||
padding-top: 34px;
|
|
||||||
line-height: 32px;
|
|
||||||
}
|
|
||||||
.accept-slide i {
|
|
||||||
float: right;
|
|
||||||
font-size: 32px;
|
|
||||||
margin-right: 20px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,58 @@
|
||||||
|
action-sheet {
|
||||||
|
.bp-action-sheet {
|
||||||
|
$border-color: #EFEFEF;
|
||||||
|
|
||||||
|
&__sheet {
|
||||||
|
background: #fff;
|
||||||
|
width: calc(100% + 1px);
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateY(100%) translateX(-50%);
|
||||||
|
transition: transform 250ms cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||||
|
z-index: 100;
|
||||||
|
padding-top: 1.75rem;
|
||||||
|
padding-left: 2rem;
|
||||||
|
padding-right: .75rem;
|
||||||
|
color: #2f2f2f;
|
||||||
|
padding-bottom: 3.5rem;
|
||||||
|
max-width: 550px;
|
||||||
|
max-height: 100vh;
|
||||||
|
overflow: scroll;
|
||||||
|
|
||||||
|
&.slide-up {
|
||||||
|
transform: translateY(0) translateX(-50%);
|
||||||
|
box-shadow: 0px 2px 13px 3px rgba(0, 0, 0, .3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-arrow {
|
||||||
|
padding-bottom: 1.25rem;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
font-weight: 600;
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
margin-bottom: 1px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__backdrop {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
background: rgba(0, 0, 0, 0);
|
||||||
|
transition: background 250ms cubic-bezier(0.4, 0.0, 0.2, 1);;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 99;
|
||||||
|
|
||||||
|
&.fade-in {
|
||||||
|
background: rgba(0, 0, 0, .4);
|
||||||
|
pointer-events: all;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,4 +1,5 @@
|
||||||
#txp-details {
|
#txp-details,
|
||||||
|
#view-confirm {
|
||||||
$item-lateral-padding: 20px;
|
$item-lateral-padding: 20px;
|
||||||
$item-vertical-padding: 10px;
|
$item-vertical-padding: 10px;
|
||||||
$item-border-color: #EFEFEF;
|
$item-border-color: #EFEFEF;
|
||||||
|
@ -8,7 +9,7 @@
|
||||||
background: #f5f5f5;
|
background: #f5f5f5;
|
||||||
}
|
}
|
||||||
.slide-to-pay {
|
.slide-to-pay {
|
||||||
bottom: 100px;
|
bottom: 92px;
|
||||||
}
|
}
|
||||||
.head {
|
.head {
|
||||||
padding: 30px $item-lateral-padding 4rem;
|
padding: 30px $item-lateral-padding 4rem;
|
||||||
|
@ -48,9 +49,19 @@
|
||||||
span {
|
span {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
.badge {
|
||||||
|
border-radius: 0;
|
||||||
|
padding: .5rem;
|
||||||
|
}
|
||||||
.item {
|
.item {
|
||||||
color: #4A4A4A;
|
color: #4A4A4A;
|
||||||
padding: $item-vertical-padding $item-lateral-padding;
|
padding-top: $item-vertical-padding;
|
||||||
|
padding-bottom: $item-vertical-padding;
|
||||||
|
padding-left: $item-lateral-padding;
|
||||||
|
|
||||||
|
&:not(.item-icon-right) {
|
||||||
|
padding-right: $item-lateral-padding;
|
||||||
|
}
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
@ -61,7 +72,8 @@
|
||||||
&.single-line {
|
&.single-line {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 17px $item-lateral-padding;
|
padding-top: 17px;
|
||||||
|
padding-bottom: 17px;
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
@ -112,10 +124,17 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: .2rem 0;
|
padding: .2rem 0;
|
||||||
i {
|
margin-bottom: 5px;
|
||||||
padding: 0;
|
|
||||||
|
~ .bp-arrow-right {
|
||||||
|
top: 14px;
|
||||||
}
|
}
|
||||||
img {
|
|
||||||
|
> i {
|
||||||
|
padding: 0;
|
||||||
|
position: static;
|
||||||
|
|
||||||
|
> img {
|
||||||
height: 24px;
|
height: 24px;
|
||||||
width: 24px;
|
width: 24px;
|
||||||
padding: 2px;
|
padding: 2px;
|
||||||
|
@ -123,6 +142,7 @@
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.timeline-item {
|
.timeline-item {
|
||||||
border: 0;
|
border: 0;
|
||||||
|
|
|
@ -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";
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -16,6 +16,7 @@
|
||||||
@import "wallet-backup-phrase";
|
@import "wallet-backup-phrase";
|
||||||
@import "zero-state";
|
@import "zero-state";
|
||||||
@import "onboarding/onboarding";
|
@import "onboarding/onboarding";
|
||||||
|
@import "includes/actionSheet";
|
||||||
@import "includes/walletActivity";
|
@import "includes/walletActivity";
|
||||||
@import "includes/wallets";
|
@import "includes/wallets";
|
||||||
@import "includes/modals/modals";
|
@import "includes/modals/modals";
|
||||||
|
@ -25,4 +26,5 @@
|
||||||
@import "includes/tx-details";
|
@import "includes/tx-details";
|
||||||
@import "includes/txp-details";
|
@import "includes/txp-details";
|
||||||
@import "includes/tx-status";
|
@import "includes/tx-status";
|
||||||
|
@import "includes/walletSelector";
|
||||||
@import "integrations/coinbase.scss";
|
@import "integrations/coinbase.scss";
|
||||||
|
|
|
@ -0,0 +1,18 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="22px" height="15px" viewBox="0 0 22 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<!-- Generator: Sketch 40.1 (33804) - http://www.bohemiancoding.com/sketch -->
|
||||||
|
<title>controls-ico-back</title>
|
||||||
|
<desc>Created with Sketch.</desc>
|
||||||
|
<defs></defs>
|
||||||
|
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<g id="Header/Controls/Back-(Dark)" transform="translate(-20.000000, -35.000000)" stroke-width="2" stroke="#4D4D4D">
|
||||||
|
<g id="controls-ico-back" transform="translate(21.000000, 36.000000)">
|
||||||
|
<g id="Icons/Back-Arrow/Light">
|
||||||
|
<g id="Back-arrow-(White)">
|
||||||
|
<path d="M12.1129878,12.8087726 L19.6825617,6.27049696 M11.9604103,0.0270404646 L19.7044837,6.19072819 M0.25515308,6.21111111 L19.5439223,6.21111111" id="Line" transform="translate(9.979818, 6.417907) scale(-1, 1) translate(-9.979818, -6.417907) "></path>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 1.1 KiB |
|
@ -0,0 +1,24 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="20px" height="17px" viewBox="0 0 20 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<!-- Generator: Sketch 40.1 (33804) - http://www.bohemiancoding.com/sketch -->
|
||||||
|
<title>Icons/Check/Green</title>
|
||||||
|
<desc>Created with Sketch.</desc>
|
||||||
|
<defs></defs>
|
||||||
|
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g id="Views/Select-Wallet" transform="translate(-325.000000, -344.000000)" stroke="#12E5B6">
|
||||||
|
<g id="Componets/Select-Wallet">
|
||||||
|
<g id="Items/Activity-Cards/Recent-Activity" transform="translate(15.000000, 256.000000)">
|
||||||
|
<g id="Group-3" transform="translate(0.000000, 60.000000)">
|
||||||
|
<g id="Icons/Check/Green" transform="translate(311.000000, 29.000000)">
|
||||||
|
<g id="ui-24px-outline-1_check">
|
||||||
|
<g id="Group" transform="translate(0.500000, 0.500000)" stroke-width="2">
|
||||||
|
<polyline id="Shape" points="0 7 7 14 17.5 0"></polyline>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 1.3 KiB |
|
@ -7,62 +7,55 @@
|
||||||
</ion-nav-back-button>
|
</ion-nav-back-button>
|
||||||
</ion-nav-bar>
|
</ion-nav-bar>
|
||||||
|
|
||||||
<ion-content ng-class="{'slide-to-pay': isCordova}">
|
<ion-content ng-class="{'slide-to-pay': !hasClick && !insuffientFunds}">
|
||||||
|
<div class="list">
|
||||||
<div class="list card">
|
<div class="item head">
|
||||||
<div class="item item-text-wrap">
|
<div class="sending-label">
|
||||||
<i class="icon ion-arrow-up-c"></i> <span class="text-bold size-16">Sending</span>
|
<img src="img/sending-icon.svg">
|
||||||
<div class="text-bold size-28 m15t">{{amountStr}} </div>
|
<span translate>Sending</span>
|
||||||
<div class="text-light size-20 m5t">{{alternativeAmountStr}} </div>
|
</div>
|
||||||
|
<div class="amount-label">
|
||||||
|
<div class="amount">{{displayAmount}} <span class="unit">{{displayUnit}}</span></div>
|
||||||
|
<div class="alternative">{{alternativeAmountStr}}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="info">
|
||||||
<div class="list card">
|
<div class="item">
|
||||||
<div class="item">Fee: {{feeLevel}}
|
<span class="label" translate>To</span>
|
||||||
<span class="item-note">
|
<span class="payment-proposal-to" copy-to-clipboard="toAddress">
|
||||||
{{fee || '...'}}
|
<img src="img/icon-bitcoin-small.svg">
|
||||||
|
<contact class="ellipsis" address="{{toAddress}}">{{toAddress}}</contact>
|
||||||
|
<!-- <contact ng-if="!tx.hasMultiplesOutputs" class="ellipsis" address="{{toAddress}}"></contact>
|
||||||
|
<span ng-if="tx.hasMultiplesOutputs" translate>Multiple recipients</span> -->
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="item item-icon-left">
|
|
||||||
<i ng-if="isWallet" class="icon ion-briefcase size-21"></i>
|
|
||||||
<div ng-if="!isWallet">
|
|
||||||
<gravatar ng-if="!isCard" class="send-gravatar" name="{{toName}}" width="30" email="{{toEmail}}"></gravatar>
|
|
||||||
<i ng-if="isCard" class="icon big-icon-svg">
|
|
||||||
<div class="bg icon-bitpay-card"></div>
|
|
||||||
</i>
|
|
||||||
</div>
|
|
||||||
<div ng-class="{'m10l':isCard}">
|
|
||||||
<span translate>To</span>: {{toAddress}}
|
|
||||||
<p ng-show="toName">{{toName}}</p>
|
|
||||||
|
|
||||||
<div ng-show="_paypro" ng-click="openPPModal(_paypro)">
|
|
||||||
<i ng-show="_paypro.verified && _paypro.caTrusted" class="ion-locked" style="color:green"></i>
|
|
||||||
<i ng-show="!_paypro.caTrusted" class="ion-unlocked" style="color:red"></i>
|
|
||||||
{{_paypro.domain}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="text-center" ng-show="noMatchingWallet">
|
|
||||||
<span class="badge badge-assertive" translate>No appropiate wallet to make this payment</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="text-center" ng-show="insuffientFunds">
|
<div class="text-center" ng-show="insuffientFunds">
|
||||||
<span class="badge badge-assertive" translate>Insufficient funds</span>
|
<span class="badge badge-energized" translate>Insufficient funds</span>
|
||||||
</div>
|
</div>
|
||||||
|
<a class="item item-icon-right" ng-hide="insuffientFunds" ng-click="showWalletSelector()">
|
||||||
<wallets ng-if="wallets[0]" wallets="wallets"></wallets>
|
<span class="label" translate>From</span>
|
||||||
|
<div class="wallet">
|
||||||
<div ng-show="wallets[0]" class="list card">
|
<i class="icon big-icon-svg">
|
||||||
<div class="item item-icon-left item-icon-right" ng-click="showDescriptionPopup()">
|
<img src="img/icon-wallet.svg" ng-style="{'background-color': wallet.color}" class="bg"/>
|
||||||
<i class="icon ion-ios-chatbubble-outline size-21"></i>
|
</i>
|
||||||
<span ng-show="!description" translate>Add description</span>
|
<div>{{wallet.name}}</div>
|
||||||
<span ng-show="description">{{description}}</span>
|
</div>
|
||||||
<i ng-show="!description" class="icon ion-ios-plus-empty size-21"></i>
|
<i class="icon bp-arrow-right"></i>
|
||||||
|
</a>
|
||||||
|
<a class="item single-line item-icon-right" ng-hide="insuffientFunds">
|
||||||
|
<span class="label" translate>{{'Add Memo'|translate}}</span>
|
||||||
|
<span class="item-note">
|
||||||
|
{{description}}
|
||||||
|
</span>
|
||||||
|
<i class="icon bp-arrow-right"></i>
|
||||||
|
</a>
|
||||||
|
<a class="item single-line item-icon-right" ng-hide="insuffientFunds">
|
||||||
|
<span class="label" translate>Fee</span>
|
||||||
|
<span class="item-note">
|
||||||
|
{{fee}}
|
||||||
|
</span>
|
||||||
|
<i class="icon bp-arrow-right"></i>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<click-to-accept
|
<click-to-accept
|
||||||
|
@ -86,4 +79,13 @@
|
||||||
<span ng-hide="wallet.m > 1">Payment Sent</span>
|
<span ng-hide="wallet.m > 1">Payment Sent</span>
|
||||||
<span ng-show="wallet.m > 1">Proposal Created</span>
|
<span ng-show="wallet.m > 1">Proposal Created</span>
|
||||||
</slide-to-accept-success>
|
</slide-to-accept-success>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
|
@ -0,0 +1,10 @@
|
||||||
|
<div
|
||||||
|
class="bp-action-sheet__backdrop"
|
||||||
|
ng-class="{'fade-in': show}"
|
||||||
|
ng-click="hide()">
|
||||||
|
</div>
|
||||||
|
<div class="bp-action-sheet__sheet" ng-class="{'slide-up': show}">
|
||||||
|
<img class="back-arrow" src="img/icon-back-arrow.svg" ng-click="hide()">
|
||||||
|
<div class="header">Send from</div>
|
||||||
|
<ng-transclude></ng-transclude>
|
||||||
|
</div>
|
|
@ -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>
|
||||||
|
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<img class="check" src="img/icon-check-selected.svg" ng-show="selectedWallet === w">
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</action-sheet>
|
Loading…
Reference in New Issue