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:
Matias Alejo Garcia
GitHub
commit
89d207d364
|
|
@ -40,6 +40,8 @@ angular.module('copayApp.controllers').controller('confirmController', function(
|
|||
|
||||
$scope.toAmount = parseInt($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;
|
||||
$scope.network = networkName;
|
||||
|
|
@ -65,6 +67,7 @@ angular.module('copayApp.controllers').controller('confirmController', function(
|
|||
if (err || !status) {
|
||||
$log.error(err);
|
||||
} else {
|
||||
w.status = status;
|
||||
if (!status.availableBalanceSat) $log.debug('No balance available in: ' + w.name);
|
||||
if (status.availableBalanceSat > $scope.toAmount) {
|
||||
filteredWallets.push(w);
|
||||
|
|
@ -75,6 +78,7 @@ angular.module('copayApp.controllers').controller('confirmController', function(
|
|||
if (++index == wallets.length) {
|
||||
if (!lodash.isEmpty(filteredWallets)) {
|
||||
$scope.wallets = lodash.clone(filteredWallets);
|
||||
setWallet($scope.wallets[0]);
|
||||
} else {
|
||||
|
||||
if (!enoughFunds)
|
||||
|
|
@ -108,6 +112,14 @@ angular.module('copayApp.controllers').controller('confirmController', function(
|
|||
setWallet(wallet, true);
|
||||
});
|
||||
|
||||
$scope.showWalletSelector = function() {
|
||||
$scope.showWallets = true;
|
||||
};
|
||||
|
||||
$scope.onWalletSelect = function(wallet) {
|
||||
setWallet(wallet);
|
||||
};
|
||||
|
||||
|
||||
$scope.showDescriptionPopup = function() {
|
||||
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) {
|
||||
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-border: transparent;
|
||||
|
||||
%button-standard {
|
||||
%button-standard,
|
||||
click-to-accept {
|
||||
width: 85%;
|
||||
max-width: 300px;
|
||||
margin-left: auto;
|
||||
|
|
|
|||
|
|
@ -1,30 +1,3 @@
|
|||
#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-vertical-padding: 10px;
|
||||
$item-border-color: #EFEFEF;
|
||||
|
|
@ -8,7 +9,7 @@
|
|||
background: #f5f5f5;
|
||||
}
|
||||
.slide-to-pay {
|
||||
bottom: 100px;
|
||||
bottom: 92px;
|
||||
}
|
||||
.head {
|
||||
padding: 30px $item-lateral-padding 4rem;
|
||||
|
|
@ -48,9 +49,19 @@
|
|||
span {
|
||||
display: block;
|
||||
}
|
||||
.badge {
|
||||
border-radius: 0;
|
||||
padding: .5rem;
|
||||
}
|
||||
.item {
|
||||
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 {
|
||||
font-size: 14px;
|
||||
|
|
@ -61,7 +72,8 @@
|
|||
&.single-line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 17px $item-lateral-padding;
|
||||
padding-top: 17px;
|
||||
padding-bottom: 17px;
|
||||
|
||||
.label {
|
||||
margin: 0;
|
||||
|
|
@ -112,15 +124,23 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
padding: .2rem 0;
|
||||
i {
|
||||
padding: 0;
|
||||
margin-bottom: 5px;
|
||||
|
||||
~ .bp-arrow-right {
|
||||
top: 14px;
|
||||
}
|
||||
img {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
padding: 2px;
|
||||
margin-right: .7rem;
|
||||
box-shadow: none;
|
||||
|
||||
> i {
|
||||
padding: 0;
|
||||
position: static;
|
||||
|
||||
> img {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
padding: 2px;
|
||||
margin-right: .7rem;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 "zero-state";
|
||||
@import "onboarding/onboarding";
|
||||
@import "includes/actionSheet";
|
||||
@import "includes/walletActivity";
|
||||
@import "includes/wallets";
|
||||
@import "includes/modals/modals";
|
||||
|
|
@ -25,4 +26,5 @@
|
|||
@import "includes/tx-details";
|
||||
@import "includes/txp-details";
|
||||
@import "includes/tx-status";
|
||||
@import "includes/walletSelector";
|
||||
@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-bar>
|
||||
|
||||
<ion-content ng-class="{'slide-to-pay': isCordova}">
|
||||
|
||||
<div class="list card">
|
||||
<div class="item item-text-wrap">
|
||||
<i class="icon ion-arrow-up-c"></i> <span class="text-bold size-16">Sending</span>
|
||||
<div class="text-bold size-28 m15t">{{amountStr}} </div>
|
||||
<div class="text-light size-20 m5t">{{alternativeAmountStr}} </div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list card">
|
||||
<div class="item">Fee: {{feeLevel}}
|
||||
<span class="item-note">
|
||||
{{fee || '...'}}
|
||||
</span>
|
||||
</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>
|
||||
<ion-content ng-class="{'slide-to-pay': !hasClick && !insuffientFunds}">
|
||||
<div class="list">
|
||||
<div class="item head">
|
||||
<div class="sending-label">
|
||||
<img src="img/sending-icon.svg">
|
||||
<span translate>Sending</span>
|
||||
</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 class="amount-label">
|
||||
<div class="amount">{{displayAmount}} <span class="unit">{{displayUnit}}</span></div>
|
||||
<div class="alternative">{{alternativeAmountStr}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="item">
|
||||
<span class="label" translate>To</span>
|
||||
<span class="payment-proposal-to" copy-to-clipboard="toAddress">
|
||||
<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>
|
||||
</div>
|
||||
<div class="text-center" ng-show="insuffientFunds">
|
||||
<span class="badge badge-energized" translate>Insufficient funds</span>
|
||||
</div>
|
||||
<a class="item item-icon-right" ng-hide="insuffientFunds" ng-click="showWalletSelector()">
|
||||
<span class="label" translate>From</span>
|
||||
<div class="wallet">
|
||||
<i class="icon big-icon-svg">
|
||||
<img src="img/icon-wallet.svg" ng-style="{'background-color': wallet.color}" class="bg"/>
|
||||
</i>
|
||||
<div>{{wallet.name}}</div>
|
||||
</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">
|
||||
<span class="badge badge-assertive" translate>Insufficient funds</span>
|
||||
</div>
|
||||
|
||||
<wallets ng-if="wallets[0]" wallets="wallets"></wallets>
|
||||
|
||||
<div ng-show="wallets[0]" class="list card">
|
||||
<div class="item item-icon-left item-icon-right" ng-click="showDescriptionPopup()">
|
||||
<i class="icon ion-ios-chatbubble-outline size-21"></i>
|
||||
<span ng-show="!description" translate>Add description</span>
|
||||
<span ng-show="description">{{description}}</span>
|
||||
<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>
|
||||
<click-to-accept
|
||||
|
|
@ -86,4 +79,13 @@
|
|||
<span ng-hide="wallet.m > 1">Payment Sent</span>
|
||||
<span ng-show="wallet.m > 1">Proposal Created</span>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -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