mirror of https://github.com/BTCPrivate/copay.git
change confirmation and alert modal for confirmation ionic popup
This commit is contained in:
Gabriel Bazán
Javier
parent
b2bf99b5bf
commit
8c16460d29
|
|
@ -27,8 +27,6 @@
|
|||
|
||||
<ion-side-menu-content>
|
||||
<div notifications="right top"></div>
|
||||
<div ng-include="'views/includes/alert.html'" ng-if="index.showAlert"></div>
|
||||
<div ng-include="'views/includes/confirm-tx.html'" ng-if="index.confirmTx"></div>
|
||||
<div id="sectionContainer">
|
||||
<div id="mainSection">
|
||||
<section ui-view="main"
|
||||
|
|
|
|||
|
|
@ -1,14 +1,9 @@
|
|||
<div class="modalMask">
|
||||
</div>
|
||||
|
||||
<div class="alertModal">
|
||||
<div class="columns m20t">
|
||||
<div class="m20t size-14 text-center">
|
||||
<i class="fi-alert"></i>
|
||||
{{index.showAlert.msg|translate}}
|
||||
</div>
|
||||
<div class="text-center m20t" ng-click="index.showAlert.close()">
|
||||
<a class="button outline light-gray round tiny small-4">OK</a>
|
||||
</div>
|
||||
<div class="columns m20t">
|
||||
<div class="m20t size-14 text-center">
|
||||
<i class="fi-alert"></i>
|
||||
{{msg|translate}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center m20t" ng-click="close()">
|
||||
<a class="button outline light-gray round tiny small-4">OK</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,47 +1,39 @@
|
|||
<div class="modalMask"></div>
|
||||
|
||||
<div class="confirmTxModal" ng-controller="confirmTxController as confirm" ng-init="tx = index.confirmTx.txp">
|
||||
|
||||
<div class="confirmHead" ng-style="{'background-color':index.backgroundColor}">
|
||||
<h1 class="m0 text-center text-white size-18" translate>Send bitcoin</h1>
|
||||
<div class="m20t">
|
||||
<label class="size-14 text-center">
|
||||
<span translate>Send bitcoin</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="size-36">{{tx.amountStr}}</div>
|
||||
<div class="size-12 label gray radius" ng-show="tx.alternativeAmountStr">{{tx.alternativeAmountStr}}</div>
|
||||
<i class="db fi-arrow-down size-24 m10v"></i>
|
||||
<div class="payment-proposal-to" ng-click="copyToClipboard(tx.toAddress)">
|
||||
<i class="fi-bitcoin left m10l"></i>
|
||||
<contact ng-if="!tx.hasMultiplesOutputs" class="dib enable_text_select ellipsis m5t m5b m15l size-14" address="{{tx.toAddress}}"></contact>
|
||||
<span ng-if="tx.hasMultiplesOutputs" translate>
|
||||
Multiple recipients
|
||||
</span>
|
||||
</div>
|
||||
<div class="p10">
|
||||
<div class="size-36">{{tx.amountStr}}</div>
|
||||
<div class="size-12 label gray radius" ng-show="tx.alternativeAmountStr">{{tx.alternativeAmountStr}}</div>
|
||||
<i class="db fi-arrow-down size-24 m10v"></i>
|
||||
<div class="payment-proposal-to" ng-click="copyToClipboard(tx.toAddress)">
|
||||
<i class="fi-bitcoin left m10l"></i>
|
||||
<contact ng-if="!tx.hasMultiplesOutputs" class="dib enable_text_select ellipsis m5t m5b m15l size-14" address="{{tx.toAddress}}"></contact>
|
||||
<span ng-if="tx.hasMultiplesOutputs" translate>
|
||||
Multiple recipients
|
||||
</span>
|
||||
<div class="m10t size-12" ng-init="processFee(tx.amount, tx.fee)">
|
||||
<div ng-show="!showPercentage" ng-click="showPercentage = true">
|
||||
<span translate>Fee</span> <span class="tl">({{feeLevel|translate}})</span>:
|
||||
<span class="text-bold">{{tx.feeStr}}</span>
|
||||
<span class="label gray radius">{{feeAlternativeStr}}</span>
|
||||
</div>
|
||||
<div class="m10t size-12" ng-init="confirm.processFee(tx.amount, tx.fee)">
|
||||
<div ng-show="!showPercentage" ng-click="showPercentage = true">
|
||||
<span translate>Fee</span> <span class="tl">({{confirm.feeLevel|translate}})</span>:
|
||||
<span class="text-bold">{{tx.feeStr}}</span>
|
||||
<span class="label gray radius">{{confirm.feeAlternativeStr}}</span>
|
||||
</div>
|
||||
<div ng-show="showPercentage" ng-click="showPercentage = false" translate>
|
||||
{{confirm.feeRateStr}} of the transaction
|
||||
</div>
|
||||
<div ng-show="showPercentage" ng-click="showPercentage = false" translate>
|
||||
{{feeRateStr}} of the transaction
|
||||
</div>
|
||||
<div class="row m20t">
|
||||
<div class="large-6 medium-6 small-6 columns">
|
||||
<button
|
||||
ng-click="confirm.close(index.confirmTx.callback)"
|
||||
class="small m10b round outline dark-gray expand" translate>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
<div class="large-6 medium-6 small-6 columns">
|
||||
<button
|
||||
ng-click="confirm.accept(index.confirmTx.callback)"
|
||||
class="small m10b round expand"
|
||||
ng-style="{'background-color':index.backgroundColor}" translate>
|
||||
Confirm
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row m20t dib">
|
||||
<div class="half-row left">
|
||||
<button ng-click="cancel()" class="round outline dark-gray expand">
|
||||
<span class="size-12" translate>Cancel</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="half-row left">
|
||||
<button ng-click="accept()" class="round expand" ng-style="{'background-color':index.backgroundColor}" translate>
|
||||
<span class="size-12" translate>Confirm</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<div class="input m20t">
|
||||
<input type="password" placeholder="{{'Your spending password'|translate}}"
|
||||
id="passwordInput" name="password" ng-model="data.password">
|
||||
id="passwordInput" name="password" ng-model="data.password" autofocus>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
|
|
@ -18,8 +18,8 @@
|
|||
<button
|
||||
class="round small-6 columns outline dark-gray expand"
|
||||
ng-click="cancel()"
|
||||
ng-disabled="loading" translate>
|
||||
CANCEL
|
||||
ng-disabled="loading">
|
||||
<span class="size-12" translate>CANCEL</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
|
@ -28,8 +28,8 @@
|
|||
ng-click="set()"
|
||||
ng-disabled="!data.password || loading"
|
||||
ng-style="{'background-color':index.backgroundColor}">
|
||||
<span ng-if="isSetup" translate>SET</span>
|
||||
<span ng-if="!isSetup">OK</span>
|
||||
<span ng-if="isSetup" class="size-12" translate>SET</span>
|
||||
<span ng-if="!isSetup" class="size-12">OK</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -32,6 +32,10 @@
|
|||
display: none;
|
||||
}
|
||||
|
||||
.popup-body {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.bct {
|
||||
background-color: transparent !important;
|
||||
margin-top: -25px;
|
||||
|
|
|
|||
|
|
@ -1,23 +0,0 @@
|
|||
'use strict';
|
||||
|
||||
angular.module('copayApp.controllers').controller('confirmTxController', function(configService, feeService, rateService) {
|
||||
|
||||
|
||||
this.processFee = function(amount, fee) {
|
||||
var walletSettings = configService.getSync().wallet.settings;
|
||||
var feeAlternativeIsoCode = walletSettings.alternativeIsoCode;
|
||||
|
||||
this.feeLevel = feeService.feeOpts[feeService.getCurrentFeeLevel()];
|
||||
this.feeAlternativeStr = parseFloat((rateService.toFiat(fee, feeAlternativeIsoCode)).toFixed(2), 10) + ' ' + feeAlternativeIsoCode;
|
||||
this.feeRateStr = (fee / (amount + fee) * 100).toFixed(2) + '%' ;
|
||||
};
|
||||
|
||||
this.close = function(cb) {
|
||||
return cb();
|
||||
};
|
||||
|
||||
this.accept = function(cb) {
|
||||
return cb(true);
|
||||
};
|
||||
|
||||
});
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
'use strict';
|
||||
|
||||
angular.module('copayApp.controllers').controller('indexController', function($rootScope, $scope, $log, $filter, $timeout, $ionicScrollDelegate, $ionicPopup, latestReleaseService, bwcService, pushNotificationsService, lodash, go, profileService, configService, rateService, storageService, addressService, gettext, gettextCatalog, amMoment, addonManager, bwsError, txFormatService, uxLanguage, glideraService, coinbaseService, platformInfo, addressbookService, walletService) {
|
||||
angular.module('copayApp.controllers').controller('indexController', function($rootScope, $scope, $log, $filter, $timeout, $ionicScrollDelegate, $ionicPopup, latestReleaseService, feeService, bwcService, pushNotificationsService, lodash, go, profileService, configService, rateService, storageService, addressService, gettext, gettextCatalog, amMoment, addonManager, bwsError, txFormatService, uxLanguage, glideraService, coinbaseService, platformInfo, addressbookService, walletService) {
|
||||
var self = this;
|
||||
var SOFT_CONFIRMATION_LIMIT = 12;
|
||||
var errors = bwcService.getErrors();
|
||||
|
|
@ -1111,15 +1111,23 @@ angular.module('copayApp.controllers').controller('indexController', function($r
|
|||
|
||||
self.showErrorPopup = function(msg, cb) {
|
||||
$log.warn('Showing err popup:' + msg);
|
||||
self.showAlert = {
|
||||
msg: msg,
|
||||
close: function() {
|
||||
self.showAlert = null;
|
||||
if (cb) return cb();
|
||||
},
|
||||
};
|
||||
$timeout(function() {
|
||||
$rootScope.$apply();
|
||||
|
||||
function openErrorPopup(msg, cb) {
|
||||
$scope.msg = msg;
|
||||
|
||||
self.errorPopup = $ionicPopup.show({
|
||||
templateUrl: 'views/includes/alert.html',
|
||||
scope: $scope,
|
||||
});
|
||||
|
||||
$scope.close = function() {
|
||||
return cb();
|
||||
};
|
||||
}
|
||||
|
||||
openErrorPopup(msg, function() {
|
||||
self.errorPopup.close();
|
||||
if (cb) return cb();
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -1864,15 +1872,37 @@ angular.module('copayApp.controllers').controller('indexController', function($r
|
|||
});
|
||||
|
||||
$rootScope.$on('Local/NeedsConfirmation', function(event, txp, cb) {
|
||||
self.confirmTx = {
|
||||
txp: txFormatService.processTx(txp),
|
||||
callback: function(accept) {
|
||||
self.confirmTx = null;
|
||||
return cb(accept);
|
||||
}
|
||||
};
|
||||
$timeout(function() {
|
||||
$rootScope.$apply();
|
||||
|
||||
function openConfirmationPopup(txp, cb) {
|
||||
|
||||
$scope.tx = txFormatService.processTx(txp);
|
||||
|
||||
self.confirmationPopup = $ionicPopup.show({
|
||||
templateUrl: 'views/includes/confirm-tx.html',
|
||||
scope: $scope,
|
||||
});
|
||||
|
||||
$scope.processFee = function(amount, fee) {
|
||||
var walletSettings = configService.getSync().wallet.settings;
|
||||
var feeAlternativeIsoCode = walletSettings.alternativeIsoCode;
|
||||
|
||||
$scope.feeLevel = feeService.feeOpts[feeService.getCurrentFeeLevel()];
|
||||
$scope.feeAlternativeStr = parseFloat((rateService.toFiat(fee, feeAlternativeIsoCode)).toFixed(2), 10) + ' ' + feeAlternativeIsoCode;
|
||||
$scope.feeRateStr = (fee / (amount + fee) * 100).toFixed(2) + '%';
|
||||
};
|
||||
|
||||
$scope.cancel = function() {
|
||||
return cb();
|
||||
};
|
||||
|
||||
$scope.accept = function() {
|
||||
return cb(true);
|
||||
};
|
||||
}
|
||||
|
||||
openConfirmationPopup(txp, function(accept) {
|
||||
self.confirmationPopup.close();
|
||||
return cb(accept);
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -89,7 +89,7 @@ h4.title a {
|
|||
}
|
||||
}
|
||||
|
||||
.modal-content h4, .glidera h4, .coinbase h4, .txModal h4 {
|
||||
.modal-content h4, .glidera h4, .coinbase h4 {
|
||||
background: #F6F7F9;
|
||||
padding: 25px 0px 5px 10px;
|
||||
text-transform: uppercase;
|
||||
|
|
@ -105,7 +105,7 @@ h4.title a {
|
|||
font-size: 16px;
|
||||
}
|
||||
|
||||
.preferences ul, .modal-content ul, .txModal ul {
|
||||
.preferences ul, .modal-content ul {
|
||||
font-size: 14px;
|
||||
background: white;
|
||||
}
|
||||
|
|
@ -255,6 +255,12 @@ a {
|
|||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
.half-row {
|
||||
width: 50%;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
|
|
@ -1339,61 +1345,6 @@ input.ng-invalid-match {
|
|||
}
|
||||
}
|
||||
|
||||
/* Confirmation popup */
|
||||
|
||||
.confirmTxModal {
|
||||
background: white;
|
||||
border-radius: 5px;
|
||||
position: absolute;
|
||||
width: 90%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 15% auto;
|
||||
z-index: 1100;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.confirmHead {
|
||||
padding: 10px;
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
}
|
||||
|
||||
.txModal-content {
|
||||
overflow: auto;
|
||||
height: 100%;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
.txModal {
|
||||
background: #f6f7f9;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
z-index: 1100;
|
||||
}
|
||||
|
||||
.alertModal, .passModal {
|
||||
background: #FFFFFF;
|
||||
border-radius: 5px;
|
||||
position: absolute;
|
||||
width: 90%;
|
||||
left: 5%;
|
||||
top: 15%;
|
||||
z-index: 1100;
|
||||
}
|
||||
|
||||
.modalMask {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1099;
|
||||
opacity: 0.8;
|
||||
background: black;
|
||||
}
|
||||
|
||||
.tx-details-blockchain li {
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
|
@ -2006,13 +1957,6 @@ body.modal-open {
|
|||
}
|
||||
}
|
||||
|
||||
.txModal.animated {
|
||||
&.slideInRight, &.slideOutRight {
|
||||
-webkit-animation-duration: 0.3s;
|
||||
animation-duration: 0.3s;
|
||||
}
|
||||
}
|
||||
|
||||
.reveal-modal.animated {
|
||||
&.fadeOutUp, &.slideInUp, &.slideInDown {
|
||||
-webkit-animation-duration: 0.3s;
|
||||
|
|
@ -2068,7 +2012,7 @@ body.modal-open {
|
|||
padding: 5px 15px;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
i {
|
||||
position: absolute;
|
||||
position: inherit;
|
||||
left: 25px;
|
||||
padding-right: 10px;
|
||||
border-right: 1px solid;
|
||||
|
|
|
|||
Loading…
Reference in New Issue