mirror of https://github.com/BTCPrivate/copay.git
Fixes layouts and improves appearance of balance page.
This commit is contained in:
Andy Phillipson
parent
326ce26126
commit
2d04eb4335
|
|
@ -1,9 +0,0 @@
|
|||
'use strict';
|
||||
|
||||
angular.module('copayApp.controllers').controller('walletBalanceController', function($scope) {
|
||||
|
||||
$scope.close = function() {
|
||||
$scope.walletBalanceModal.hide();
|
||||
};
|
||||
|
||||
});
|
||||
|
|
@ -114,6 +114,10 @@ angular.module('copayApp.controllers').controller('walletDetailsController', fun
|
|||
$scope.walletBalanceModal = modal;
|
||||
$scope.walletBalanceModal.show();
|
||||
});
|
||||
|
||||
$scope.close = function() {
|
||||
$scope.walletBalanceModal.hide();
|
||||
};
|
||||
};
|
||||
|
||||
$scope.recreate = function() {
|
||||
|
|
@ -243,11 +247,10 @@ angular.module('copayApp.controllers').controller('walletDetailsController', fun
|
|||
};
|
||||
|
||||
var prevPos;
|
||||
var screenInactive = true;
|
||||
|
||||
function getScrollPosition() {
|
||||
var scrollPosition = $ionicScrollDelegate.getScrollPosition();
|
||||
if (!scrollPosition || screenInactive) {
|
||||
if (!scrollPosition) {
|
||||
$window.requestAnimationFrame(function() {
|
||||
getScrollPosition();
|
||||
});
|
||||
|
|
@ -280,11 +283,31 @@ angular.module('copayApp.controllers').controller('walletDetailsController', fun
|
|||
|
||||
var s = amountScale;
|
||||
|
||||
// Make space for the balance button when it needs to display.
|
||||
var TOP_NO_BALANCE_BUTTON = 45;
|
||||
var TOP_BALANCE_BUTTON = 10;
|
||||
var top = TOP_NO_BALANCE_BUTTON;
|
||||
$scope.showBalanceButton = ($scope.wallet.status.totalBalanceSat != $scope.wallet.status.spendableAmount);
|
||||
if ($scope.showBalanceButton) {
|
||||
top = TOP_BALANCE_BUTTON;
|
||||
$scope.showBalanceButton = true;
|
||||
}
|
||||
|
||||
var amountTop = ((amountScale - 0.5) / 0.5) * top;
|
||||
if (amountTop < 5) {
|
||||
amountTop = 5;
|
||||
}
|
||||
if (amountTop > top) {
|
||||
amountTop = top;
|
||||
}
|
||||
|
||||
var t = amountTop;
|
||||
|
||||
$scope.altAmountOpacity = (amountHeight - 100) / 80;
|
||||
$window.requestAnimationFrame(function() {
|
||||
$scope.amountHeight = amountHeight + 'px';
|
||||
$scope.contentMargin = contentMargin + 'px';
|
||||
$scope.amountScale = 'scale3d(' + s + ',' + s + ',' + s + ')';
|
||||
$scope.amountScale = 'scale3d(' + s + ',' + s + ',' + s + ') translateY(' + t + 'px)';
|
||||
$scope.$digest();
|
||||
getScrollPosition();
|
||||
});
|
||||
|
|
@ -294,16 +317,10 @@ angular.module('copayApp.controllers').controller('walletDetailsController', fun
|
|||
|
||||
$scope.$on("$ionicView.enter", function(event, data) {
|
||||
setAndroidStatusBarColor();
|
||||
$timeout(function() {
|
||||
screenInactive = false;
|
||||
}, 200);
|
||||
if (scrollWatcherInitialized || !$scope.amountIsCollapsible) {
|
||||
return;
|
||||
}
|
||||
scrollWatcherInitialized = true;
|
||||
$timeout(function() {
|
||||
getScrollPosition();
|
||||
}, 100);
|
||||
});
|
||||
|
||||
$scope.$on("$ionicView.beforeEnter", function(event, data) {
|
||||
|
|
@ -317,6 +334,7 @@ angular.module('copayApp.controllers').controller('walletDetailsController', fun
|
|||
});
|
||||
|
||||
$scope.updateAll();
|
||||
getScrollPosition();
|
||||
|
||||
listeners = [
|
||||
$rootScope.$on('bwsEvent', function(e, walletId) {
|
||||
|
|
@ -337,7 +355,6 @@ angular.module('copayApp.controllers').controller('walletDetailsController', fun
|
|||
});
|
||||
|
||||
$scope.$on("$ionicView.leave", function(event, data) {
|
||||
screenInactive = true;
|
||||
lodash.each(listeners, function(x) {
|
||||
x();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -111,10 +111,10 @@
|
|||
font-weight: 300;
|
||||
color: $light-gray;
|
||||
}
|
||||
&__icon {
|
||||
width: 15px;
|
||||
&__status-icon {
|
||||
font-size: 18px;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
top: 1px;
|
||||
color: $light-gray;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,17 +4,28 @@
|
|||
|
||||
font-size: 16px;
|
||||
|
||||
&--available {
|
||||
&--total {
|
||||
color: $mid-gray;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&--available {
|
||||
color: #09C286;;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&--confirming {
|
||||
color: #09C286;
|
||||
color: #FF9900;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&--locked {
|
||||
color: $dark-gray;
|
||||
color: #FF9900;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&--alternative {
|
||||
color: $light-gray;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -74,18 +85,29 @@
|
|||
&__heading {
|
||||
font-size: 17px;
|
||||
color: #445;
|
||||
margin: 1rem 1rem 0 1rem;
|
||||
margin: 1rem 1rem 1rem 1rem;
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: 15px;
|
||||
font-size: 12.5px;
|
||||
color: #667;
|
||||
margin: 1rem;
|
||||
margin: 0.7rem;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#wallet-balance {
|
||||
.bar-header {
|
||||
border: 0;
|
||||
background: none;
|
||||
.title, .button {
|
||||
color: #fff;
|
||||
}
|
||||
.button {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
ion-content {
|
||||
background: #F5F5F5;
|
||||
|
|
|
|||
|
|
@ -130,7 +130,7 @@
|
|||
ion-content {
|
||||
|
||||
&.collapsible {
|
||||
margin-top: 180px;
|
||||
margin-top: 210px;
|
||||
}
|
||||
|
||||
padding-top: 0;
|
||||
|
|
@ -179,8 +179,7 @@
|
|||
}
|
||||
|
||||
&__balance {
|
||||
transform: scale3d(1, 1, 1);
|
||||
margin-top: 5px;
|
||||
transform: scale3d(1, 1, 1) translateY(45px);
|
||||
}
|
||||
|
||||
&__updating {
|
||||
|
|
@ -196,14 +195,11 @@
|
|||
line-height: 100%;
|
||||
}
|
||||
|
||||
&__top {
|
||||
margin-top: 45px;
|
||||
}
|
||||
|
||||
&__button-balance {
|
||||
background-color: transparent;
|
||||
border: 1px solid rgba(255,255,255,0.25);
|
||||
}
|
||||
|
||||
}
|
||||
.item.item-footer {
|
||||
font-weight: lighter;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,18 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 13.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 14948) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="33px" height="33px" viewBox="0 0 33 33" enable-background="new 0 0 33 33" xml:space="preserve">
|
||||
<title>Group 2</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<g id="Group-2" transform="translate(8.000000, 8.000000)">
|
||||
<g id="Group" transform="translate(8.000000, 7.500000)">
|
||||
<path id="Shape" fill="none" stroke="#7A8C9E" d="M-14.5,1c0-8.733,6.724-15.881,14.94-15.881c5.828,0,10.904,3.491,13.298,8.733"
|
||||
/>
|
||||
<path id="Shape_1_" fill="none" stroke="#7A8C9E" d="M15.5,1c0,8.732-6.73,15.881-14.94,15.881c-5.828,0-10.903-3.49-13.298-8.732
|
||||
"/>
|
||||
<polyline id="Shape_2_" fill="none" stroke="#7A8C9E" points="15.5,-14.881 14.248,-6.06 4.917,-7.258 "/>
|
||||
<polyline id="Shape_3_" fill="none" stroke="#7A8C9E" points="-14.5,16.881 -13.254,8.061 -3.911,9.258 "/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -1,22 +1,28 @@
|
|||
<ion-modal-view id="wallet-balance" ng-controller="walletBalanceController" ng-init="init()">
|
||||
<ion-header-bar align-title="center" class="bar-royal">
|
||||
<ion-modal-view id="wallet-balance">
|
||||
<ion-header-bar align-title="center" ng-style="{'background-color': wallet.color}">
|
||||
<button class="button button-clear" ng-click="close()">
|
||||
Close
|
||||
</button>
|
||||
<div class="title" translate>
|
||||
Balance
|
||||
{{wallet.name}}
|
||||
</div>
|
||||
<div class="buttons buttons-right header-item">
|
||||
<span class="secondary-buttons">
|
||||
<button class="button button-clear" ng-click="updateAll(true)">
|
||||
<i class="icon ion-ios-refresh-empty"></i>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</ion-header-bar>
|
||||
<ion-content>
|
||||
<div class="wallet-balance__heading" translate>All of your bitcoin wallet balance may not be available for immediate spending.</div>
|
||||
<div class="wallet-balance__list list">
|
||||
<div class="wallet-balance__description" translate>Total is the total amount of bitcoin stored in this wallet. It is the sum of Available, Confirming, and Locked balances.</div>
|
||||
<div class="wallet-balance__item item">
|
||||
<img class="wallet-balance__icon" src="img/icon-sigma.svg" height="18"\>
|
||||
<img class="wallet-balance__icon" src="img/icon-sigma.svg" height="18" width="18"\>
|
||||
<div class="wallet-balance__content no-border">
|
||||
<div class="wallet-balance__title">Total</div>
|
||||
<span class="item-note text-right wallet-balance__amount">
|
||||
<span class="wallet-balance__amount wallet-balance__amount--available">
|
||||
<span class="wallet-balance__amount wallet-balance__amount--total">
|
||||
{{status.totalBalanceStr}}
|
||||
</span>
|
||||
<div>
|
||||
|
|
@ -27,7 +33,7 @@
|
|||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wallet-balance__description" translate>Available is the immediatley spendable amount of bitcoin stored in this wallet. It is the Total less Confirming and Locked balances. If you have enabled Use Unconfirmed Funds setting then the Available amount is the Total less Locked balance.</div>
|
||||
<div class="wallet-balance__description" translate><b>Total</b> is the total amount of bitcoin stored in this wallet. It is the sum of Available, Confirming, and Locked amounts.</div>
|
||||
<div class="wallet-balance__item item">
|
||||
<i class="wallet-balance__icon icon ion-ios-checkmark-outline"></i>
|
||||
<div class="wallet-balance__content no-border">
|
||||
|
|
@ -44,13 +50,13 @@
|
|||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wallet-balance__description" translate>Confirming is the amount of bitcoin stored in this wallet with fewer than 3 block chain confirmations.</div>
|
||||
<div class="wallet-balance__description" translate><b>Available</b> is the immediatley spendable amount of bitcoin stored in this wallet. It is the Total less Confirming and Locked amounts. If you have enabled Use Unconfirmed Funds setting then the Available amount is the Total less Locked amount.</div>
|
||||
<div class="wallet-balance__item item">
|
||||
<i class="wallet-balance__icon icon ion-more"></i>
|
||||
<img class="wallet-balance__icon" src="img/icon-confirming-clear.svg" width="18"\>
|
||||
<div class="wallet-balance__content no-border">
|
||||
<div class="wallet-balance__title">Confirming</div>
|
||||
<span class="item-note text-right wallet-balance__amount">
|
||||
<span class="wallet-balance__amount wallet-balance__amount--available">
|
||||
<span class="wallet-balance__amount wallet-balance__amount--confirming">
|
||||
{{status.pendingBalanceStr}}
|
||||
</span>
|
||||
<div>
|
||||
|
|
@ -61,13 +67,13 @@
|
|||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wallet-balance__description" translate>Locked is the amount of bitcoin stored in this wallet that is allocated as inputs to pending transaction proposals. This amount is determined using unspent transaction outputs associated with the wallet and may be more than the actual amounts associated with your pending transaction proposals.</div>
|
||||
<div class="wallet-balance__description" translate><b>Confirming</b> is the amount of bitcoin stored in this wallet with fewer than 6 block chain confirmations.</div>
|
||||
<div class="wallet-balance__item item">
|
||||
<i class="wallet-balance__icon icon ion-ios-locked-outline"></i>
|
||||
<img class="wallet-balance__icon" src="img/icon-lock.svg" width="18"\>
|
||||
<div class="wallet-balance__content no-border">
|
||||
<div class="wallet-balance__title">Locked</div>
|
||||
<span class="item-note text-right wallet-balance__amount">
|
||||
<span class="wallet-balance__amount wallet-balance__amount--available">
|
||||
<span class="wallet-balance__amount wallet-balance__amount--locked">
|
||||
{{status.lockedBalanceStr}}
|
||||
</span>
|
||||
<div>
|
||||
|
|
@ -78,6 +84,7 @@
|
|||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wallet-balance__description" translate><b>Locked</b> is the amount of bitcoin stored in this wallet that is allocated as inputs to pending transaction proposals. This amount is determined using unspent transaction outputs associated with the wallet and may be more than the actual amounts associated with your pending transaction proposals.</div>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-modal-view>
|
||||
|
|
|
|||
|
|
@ -80,8 +80,9 @@
|
|||
Incomplete
|
||||
</span>
|
||||
<span ng-if="wallet.isComplete()">
|
||||
<span ng-if="!wallet.balanceHidden">{{wallet.status.totalBalanceStr}}</span>
|
||||
<img ng-if="!wallet.balanceHidden && (status.totalBalanceSat != status.spendableAmount)" class="tab-home__wallet__icon" src="img/icon-important.svg"/>
|
||||
<span ng-if="!wallet.balanceHidden">{{wallet.status.totalBalanceStr}}
|
||||
<i ng-if="!wallet.balanceHidden && (status.totalBalanceSat != status.spendableAmount)" class="tab-home__wallet__status-icon ion-ios-timer-outline"></i>
|
||||
</span>
|
||||
<span ng-if="wallet.balanceHidden" translate>[Balance Hidden]</span>
|
||||
<span class="tab-home__wallet__multisig-number" ng-if="wallet.n > 1">
|
||||
{{wallet.m}}-of-{{wallet.n}}
|
||||
|
|
|
|||
|
|
@ -27,11 +27,12 @@
|
|||
<div ng-if="!notAuthorized && !updatingStatus">
|
||||
|
||||
<div ng-show="updateStatusError">
|
||||
<span class="size-12 db m10">{{updateStatusError}}</span>
|
||||
<a class="button button-outline button-light button-small" ng-click='update()' translate>Tap to retry</a>
|
||||
</div>
|
||||
|
||||
<div ng-show="walletNotRegistered">
|
||||
<span class="size-12 db m10b" translate>This wallet is not registered at the given Bitcore Wallet Service (BWS). You can recreate it from the local information.</span>
|
||||
<span class="size-12 db m10" translate>This wallet is not registered at the given Bitcore Wallet Service (BWS). You can recreate it from the local information.</span>
|
||||
<a class="button button-outline button-light button-small" ng-click='recreate()' translate>Recreate</a>
|
||||
</div>
|
||||
|
||||
|
|
@ -45,8 +46,7 @@
|
|||
ng-show="!updateStatusError && wallet.walletScanStatus != 'error' && !wallet.balanceHidden"
|
||||
on-hold="hideToggle()"
|
||||
ng-style="{'transform': amountScale}"
|
||||
class="amount__balance"
|
||||
ng-class="{'amount__top': status.totalBalanceSat == status.spendableAmount}">
|
||||
class="amount__balance">
|
||||
<strong class="size-36">{{status.totalBalanceStr}}</strong>
|
||||
<div
|
||||
class="size-14 amount-alternative"
|
||||
|
|
@ -56,6 +56,7 @@
|
|||
{{status.totalBalanceAlternative}} {{status.alternativeIsoCode}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ng-style="{'transform': amountScale}"
|
||||
class="amount__balance"
|
||||
ng-show="!updateStatusError && wallet.walletScanStatus != 'error' && wallet.balanceHidden"
|
||||
|
|
@ -65,7 +66,8 @@
|
|||
Tap and hold to show
|
||||
</div>
|
||||
</div>
|
||||
<div ng-if="!wallet.balanceHidden && (status.totalBalanceSat != status.spendableAmount)" ng-style="{'opacity': altAmountOpacity, 'transform': amountScale}">
|
||||
|
||||
<div ng-if="!wallet.balanceHidden && showBalanceButton" ng-style="{'opacity': altAmountOpacity, 'transform': amountScale}">
|
||||
<button class="button button-standard button-primary amount__button-balance size-14" ng-click="openBalanceModal()">
|
||||
<i class="icon ion-ios-checkmark-outline"></i>
|
||||
<strong>
|
||||
|
|
@ -77,6 +79,7 @@
|
|||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div ng-if="updatingStatus" class="amount__updating">
|
||||
<div class="size-36">
|
||||
|
|
@ -110,12 +113,12 @@
|
|||
<div ng-if="!updatingStatus">
|
||||
|
||||
<div ng-show="updateStatusError">
|
||||
<span class="size-12 db m10b">{{updateStatusError}}</span>
|
||||
<span class="size-12 db m10">{{updateStatusError}}</span>
|
||||
<a class="button button-outline button-light button-small" ng-click='updateAll()' translate>Tap to retry</a>
|
||||
</div>
|
||||
|
||||
<div ng-show="walletNotRegistered">
|
||||
<span class="size-12 db m10b" translate>This wallet is not registered at the given Bitcore Wallet Service (BWS). You can recreate it from the local information.</span>
|
||||
<span class="size-12 db m10" translate>This wallet is not registered at the given Bitcore Wallet Service (BWS). You can recreate it from the local information.</span>
|
||||
<a class="button button-outline button-light button-small" ng-click='recreate()' translate>Recreate</a>
|
||||
</div>
|
||||
<div ng-show="!updateStatusError && wallet.balanceHidden" on-hold="hideToggle()">
|
||||
|
|
|
|||
Loading…
Reference in New Issue