Merge pull request #5360 from gabrielbazan7/fix/uiconfirm

improve confirm view UI
This commit is contained in:
Javier Donadío 2016-12-28 16:38:52 -03:00 committed by GitHub
commit 72f366dcaf
8 changed files with 24 additions and 62 deletions

View file

@ -63,9 +63,8 @@ angular.module('copayApp.controllers').controller('confirmController', function(
if (!$scope.wallets || !$scope.wallets.length) {
$scope.noMatchingWallet = true;
if ($scope.paypro) {
displayValues();
}
displayValues();
$log.warn('No ' + $scope.network + ' wallets to make the payment');
$timeout(function() {
$scope.$apply();
});
@ -107,6 +106,7 @@ angular.module('copayApp.controllers').controller('confirmController', function(
} else initConfirm();
} else {
if (!enoughFunds) $scope.insufficientFunds = true;
displayValues();
$log.warn('No wallet available to make the payment');
}
$timeout(function() {

View file

@ -8,7 +8,9 @@ angular.module('copayApp.directives')
transclude: true,
scope: {
sendStatus: '=clickSendStatus',
wallet: '=hasWalletChosen'
hasWalletChosen: '=hasWalletChosen',
insufficientFunds: '=insufficientFunds',
noMatchingWallet: '=noMatchingWallet'
},
link: function(scope, element, attrs) {
scope.$watch('sendStatus', function() {

View file

@ -1,4 +1,5 @@
#view-confirm {
background-color: #ffffff;
@extend .deflash-blue;
.icon-amazon {
background-image: url("../img/icon-amazon.svg");

View file

@ -60,12 +60,18 @@
<span class="label" ng-if="!isGlidera" translate>From</span>
<span class="label" ng-if="isGlidera == 'buy'">To</span>
<span class="label" ng-if="isGlidera == 'sell'">From</span>
<div class="wallet">
<div class="wallet" ng-if="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 class="wallet" ng-if="!wallet">
<i class="icon big-icon-svg">
<img src="img/icon-wallet.svg" ng-style="{'background-color': 'grey'}" class="bg"/>
</i>
<div>...</div>
</div>
<i class="icon bp-arrow-right"></i>
</a>
<a class="item single-line item-icon-right" ng-if="!insufficientFunds && !noMatchingWallet && !isGlidera" ng-click="showDescriptionPopup()">
@ -120,17 +126,21 @@
</ion-content>
<click-to-accept
ng-click="approve(statusChangeHandler)"
ng-if="!isCordova && wallets[0] && !insufficientFunds && !noMatchingWallet"
ng-if="!isCordova"
click-send-status="sendStatus"
has-wallet-chosen="wallet">
has-wallet-chosen="wallet"
insufficient-funds="insufficientFunds"
no-matching-wallet="noMatchingWallet">
{{'Accept' | translate}}
</click-to-accept>
<slide-to-accept
ng-disabled="!wallet"
ng-if="isCordova && wallets[0] && !insufficientFunds && !noMatchingWallet"
ng-if="isCordova"
slide-on-confirm="onConfirm()"
slide-send-status="sendStatus"
has-wallet-chosen="wallet">
has-wallet-chosen="wallet"
insufficient-funds="insufficientFunds"
no-matching-wallet="noMatchingWallet">
{{'Accept' | translate}}
</slide-to-accept>
<slide-to-accept-success

View file

@ -1,9 +0,0 @@
<div class="columns m20t">
<div class="m20t size-14 text-center">
<i class="fi-alert"></i>
{{msg|translate}}
</div>
<div class="text-center m20t" ng-click="close()">
<a class="button outline light-gray round tiny small-4">OK</a>
</div>
</div>

View file

@ -1,4 +1,4 @@
<button ng-disabled="!wallet" class="click-to-accept__button button button-standard button-primary" ng-class="{disable: sendStatus}">
<button ng-disabled="!hasWalletChosen || insufficientFunds || noMatchingWallet" class="click-to-accept__button button button-standard button-primary" ng-class="{disable: sendStatus}">
<span ng-if="!sendStatus">
<ng-transclude></ng-transclude>
</span>

View file

@ -1,42 +0,0 @@
<div class="columns m20t">
<label class="size-14 text-center" for="password" ng-if="isSetup">
<span ng-show="!isVerification" translate>Set up a spending password</span>
<span ng-show="isVerification" translate>Repeat the spending password</span>
</label>
<label class="size-14 text-center" for="password" ng-if="!isSetup">
<span translate>Enter your spending password</span>
</label>
<div class="input m20t">
<input type="password" placeholder="{{'Your spending password'|translate}}"
id="passwordInput" name="password" ng-model="data.password" ng-keypress="keyPress($event)" autofocus>
</div>
</div>
<div class="row">
<div class="small-6 columns">
<button
class="round small-6 columns outline dark-gray expand"
ng-click="cancel()"
ng-disabled="loading">
<span class="size-12" translate>Cancel</span>
</button>
</div>
<div class="small-6 columns">
<button class="round expand"
ng-click="set()"
ng-disabled="!data.password || loading"
ng-style="{'background-color':index.backgroundColor}">
<span ng-if="isSetup" class="size-12" translate>SET</span>
<span ng-if="!isSetup" class="size-12">OK</span>
</button>
</div>
</div>
<p class="text-warning size-12 columns m20t text-center" ng-show="isSetup">
<i class="fi-alert"></i>
<span ng-show="!error" translate> Your wallet key will be encrypted. The Spending Password cannot be recovered. Be sure to write it down</span>
<span ng-show="error">{{error|translate}}</span>
</p>

View file

@ -1,4 +1,4 @@
<ion-view id="view-confirm" hide-tabs>
<ion-view id="txp-details" hide-tabs>
<ion-nav-bar class="bar-royal">
<ion-nav-title>
{{title}}