anders/Wallet
1
0
Fork 0
Code Issues Projects Releases Packages Wiki Activity

formatted amount controller update + css + renames + included in views

Browse source
This commit is contained in:
Sebastiaan Pasma 2018-08-07 16:11:47 +02:00
commit 9f418583ab
No known key found for this signature in database
GPG key ID: 9A2B0C8B95A1D26F
9 changed files with 58 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

29
src/js/directives/formattedAmount.js
View file

@ -15,16 +15,27 @@ angular.module('bitcoincom.directives')
return {
restrict: 'E',
scope: {
value: '=',
currency: '=',
sizeEqual: '='
value: '@',
currency: '@',
sizeEqual: '@'
},
templateUrl: 'views/includes/formatted-amount.html',
controller: function($scope, $timeout) {
if (!$scope.currency && $scope.value) { // If there is no currency available..
// Try to extract currency from value..
var currencySplit = $scope.value.split(" ");
if (currencySplit.length === 2) {
$scope.value = currencySplit[0];
$scope.currency = currencySplit[1];
}
}
$scope.displaySizeEqual = !!$scope.sizeEqual;
configService.whenAvailable(function(config) {
console.log("WAIT!!");
$timeout(function() {
console.log("FIRED!!");
var decimalPlaces = {
'0': ['BIF', 'CLP', 'DJF', 'GNF', 'ILS', 'JPY', 'KMF', 'KRW', 'MGA', 'PYG', 'RWF', 'UGX', 'VND', 'VUV', 'XAF', 'XOF', 'XPF'],
'3': ['BHD', 'IQD', 'JOD', 'KWD', 'OMR', 'TND'],
@ -44,9 +55,9 @@ angular.module('bitcoincom.directives')
};
var getDecimalPlaces = function(currency) {
if (decimalPlaces['0'].indexOf($scope.currency.toUpperCase()) > -1) return '0';
if (decimalPlaces['3'].indexOf($scope.currency.toUpperCase()) > -1) return '3';
if (decimalPlaces['8'].indexOf($scope.currency.toUpperCase()) > -1) return '8';
if (decimalPlaces['0'].indexOf(currency.toUpperCase()) > -1) return '0';
if (decimalPlaces['3'].indexOf(currency.toUpperCase()) > -1) return '3';
if (decimalPlaces['8'].indexOf(currency.toUpperCase()) > -1) return '8';
return '2';
};
@ -59,7 +70,7 @@ angular.module('bitcoincom.directives')
case '3':
var valueProcessing = parseFloat(parseFloat(value).toFixed(3));
var valueFormatted = localizeNumbers(valueProcessing);
var valueFormatted = localizeNumbers(valueProcessing, 3);
buildAmount(valueFormatted, '', '');
break;
@ -78,11 +89,11 @@ angular.module('bitcoincom.directives')
default:
var valueProcessing = parseFloat(parseFloat(value).toFixed(2));
var valueFormatted = localizeNumbers(valueProcessing);
var valueFormatted = localizeNumbers(valueProcessing, 2);
buildAmount(valueFormatted, '', '');
break;
}
}
};
formatNumbers($scope.currency, $scope.value);
$scope.$watchGroup(['currency', 'value'], function() {

2
src/sass/components/components.scss
View file

@ -8,4 +8,4 @@
@import "action-minor";
@import "expand-content";
@import "fee-summary";
@import "amount.scss";
@import "formatted-amount";

4
src/sass/components/amount.scss → src/sass/components/formatted-amount.scss
View file

@ -1,4 +1,6 @@
.amount {
.formatted-amount {
display: inline-block;
.start,
.middle,
.end,

12
www/views/amount.html
View file

@ -16,11 +16,13 @@
<div class="send-amount-tool-input amount">
<div class="primary-amount"
ng-class="{long: vm.amount.length > 5, 'very-long': vm.amount.length > 10}">
<span class="primary-amount-display text-selectable">{{vm.amount || '0'}} {{vm.unit}}</span>
<span class="primary-amount-display text-selectable">
<formatted-amount value="{{vm.amount || '0'}}" currency="{{vm.unit}}"></formatted-amount>
</span>
</div>
<span ng-show="vm.globalResult">{{vm.globalResult}} {{vm.unit}}</span>
<span ng-show="vm.globalResult"><formatted-amount value="{{vm.globalResult}}" currency="{{vm.unit}}"></formatted-amount></span>
<div class="alternative-amount">
<span class="text-selectable">{{vm.alternativeAmount || '0.00'}}</span> <span>{{vm.alternativeUnit}}</span>
<span class="text-selectable"><formatted-amount value="{{vm.alternativeAmount || '0.00'}}" currency="{{vm.alternativeUnit}}"></formatted-amount></span>
</div>
<div class="switch-currencies" ng-click="vm.changeUnit()"><img src="img/icon-convert.svg"></div>
</div>
@ -43,7 +45,7 @@
<div class="extra available-funds"
ng-class="{warning: vm.fundsAreInsufficient}"
ng-if="!vm.isRequestingSpecificAmount" translate>
<span>Available Funds:</span>&ensp;<span>{{vm.availableFunds}}</span>
<span>Available Funds:</span>&ensp;<span><formatted-amount value="{{vm.availableFunds}}"></formatted-amount></span>
</div>
</div>
</div>
@ -53,7 +55,7 @@
<button class="button button-sendmax" ng-click="vm.sendMax()">
<span>
<span translate>Use All Available Funds</span>&ensp;
<span class="available-funds-amount">({{vm.availableFunds}})</span>
<span class="available-funds-amount">(<formatted-amount value="{{vm.availableFunds}}"></formatted-amount>)</span>
</span>
</button>
</div>

2
www/views/includes/formatted-amount.html
View file

@ -1,4 +1,4 @@
<div class="amount"
<div class="formatted-amount"
ng-class="{ 'size-equal': displaySizeEqual }">
<span ng-if="start.length > 0" class="start">{{start}}</span><span ng-if="middle.length > 0" class="middle">{{middle}}</span><span ng-if="end.length > 0" class="end">{{end}}</span><span ng-if="currency.length > 0" class="currency">{{currency}}</span>
</div>

5
www/views/includes/walletHistory.html
View file

@ -64,17 +64,16 @@
<span class="item-note text-right wallet-details__tx-amount">
<span class="wallet-details__tx-amount" ng-class="{'wallet-details__tx-amount--recent': btx.recent, 'wallet-details__tx-amount--received': btx.action == 'received', 'wallet-details__tx-amount--sent': btx.action == 'sent'}">
<span ng-if="btx.action == 'sent'">–</span>
<span class="size-12" ng-if="btx.action == 'invalid'" translate>
(possible double spend)
</span>
<span ng-if="btx.action != 'invalid'">
{{btx.amountValueStr}} {{btx.amountUnitStr}}
<formatted-amount value="{{btx.action == 'sent'?'-':''}}{{btx.amountValueStr}}" currency="{{btx.amountUnitStr}}"></formatted-amount>
</span>
</span>
<div>
<span class="size-12 wallet-details__tx-amount" ng-class="{'wallet-details__tx-amount--recent': btx.recent, 'wallet-details__tx-amount--received': btx.action == 'received', 'wallet-details__tx-amount--sent': btx.action == 'sent'}">
{{btx.alternativeAmountStr}}
<formatted-amount value="{{btx.alternativeAmountStr}}"></formatted-amount>
</span>
</div>
</span>

8
www/views/includes/walletList.html
View file

@ -7,8 +7,12 @@
Incomplete
</span>
<span ng-if="wallet.isComplete()">
<span ng-if="selectedPriceDisplay == 'crypto' && !wallet.balanceHidden && !wallet.scanning"> {{wallet.status.totalBalanceStr ? wallet.status.totalBalanceStr : ( wallet.cachedBalance ? wallet.cachedBalance + (wallet.cachedBalanceUpdatedOn ? ' &middot; ' + ( wallet.cachedBalanceUpdatedOn * 1000 | amTimeAgo) : '') : '' ) }} </span>
<span ng-if="selectedPriceDisplay == 'fiat' && !wallet.balanceHidden && !wallet.scanning"> {{wallet.status.totalBalanceAlternative ? wallet.status.totalBalanceAlternative : ( wallet.cachedBalance ? wallet.cachedBalance + (wallet.cachedBalanceUpdatedOn ? ' &middot; ' + ( wallet.cachedBalanceUpdatedOn * 1000 | amTimeAgo) : '') : '' ) }} {{wallet.status.alternativeIsoCode}}</span>
<span ng-if="selectedPriceDisplay == 'crypto' && !wallet.balanceHidden && !wallet.scanning">
<formatted-amount value="{{wallet.status.totalBalanceStr ? wallet.status.totalBalanceStr : ( wallet.cachedBalance ? wallet.cachedBalance + (wallet.cachedBalanceUpdatedOn ? ' &middot; ' + ( wallet.cachedBalanceUpdatedOn * 1000 | amTimeAgo) : '') : '' ) }}"></formatted-amount>
</span>
<span ng-if="selectedPriceDisplay == 'fiat' && !wallet.balanceHidden && !wallet.scanning">
<formatted-amount value="{{wallet.status.totalBalanceAlternative ? wallet.status.totalBalanceAlternative : ( wallet.cachedBalance ? wallet.cachedBalance + (wallet.cachedBalanceUpdatedOn ? ' &middot; ' + ( wallet.cachedBalanceUpdatedOn * 1000 | amTimeAgo) : '') : '' ) }}" currency="{{wallet.status.alternativeIsoCode}}"></formatted-amount>
</span>
<span ng-if="wallet.scanning" translate> Scanning funds... </span>
<span ng-if="wallet.balanceHidden && !wallet.scanning" translate>[Balance Hidden]</span>

8
www/views/tx-details.html
View file

@ -24,13 +24,13 @@
<span ng-if="btx.action == 'received'" translate>Receiving</span>
</div>
<div class="amount-label">
<div class="amount">{{btx.amountValueStr}} <span class="unit">{{btx.amountUnitStr}}</span></div>
<div class="amount"><formatted-amount value="{{btx.amountValueStr}}" currency="{{btx.amountUnitStr}}"></formatted-amount></div>
<div class="alternative" ng-click="showRate = !showRate">
<span ng-if="!showRate">{{btx.alternativeAmountStr}}</span>
<span ng-if="!showRate"><formatted-amount value="{{btx.alternativeAmountStr}}"></formatted-amount></span>
<span ng-if="showRate">
<span ng-if="!rate">...</span>
<span ng-if="rate">
{{rate| currency:'':2}} {{alternativeIsoCode}} ({{rateDate | amDateFormat:'MM/DD/YYYY HH:mm a'}})
<formatted-amount value="{{rate| currency:'':2}}" currency="{{alternativeIsoCode}}"></formatted-amount> ({{rateDate | amDateFormat:'MM/DD/YYYY HH:mm a'}})
</span>
</span>
</div>
@ -115,7 +115,7 @@
<span class="label" translate>Fee</span>
<span class="m10l">{{btx.feeStr || '...'}}</span>
<span class="item-note m10l">
<span>{{btx.feeFiatStr || '...'}}&nbsp;<span class="fee-rate" ng-if="btx.feeRateStr" translate>- {{btx.feeRateStr}} of the transaction</span></span>
<span><span ng-if="btx.feeFiatStr"><formatted-amount value="{{btx.feeFiatStr}}"></formatted-amount></span><span ng-if="!btx.feeFiatStr">...</span><span class="fee-rate" ng-if="btx.feeRateStr" translate>- {{btx.feeRateStr}} of the transaction</span></span>
</span>
</div>
<div class="item low-fees" ng-if="btx.action == 'received' && btx.lowFees">

27
www/views/walletDetails.html
View file

@ -34,12 +34,12 @@
on-hold="hideToggle()"
ng-style="{'transform': amountScale}"
ng-class="{amount__balance: amountIsCollapsible}">
<strong class="size-36">{{status.totalBalanceAlternative}} {{status.alternativeIsoCode}}</strong>
<strong class="size-36"><formatted-amount value="{{status.totalBalanceAlternative}}" currency="{{status.alternativeIsoCode}}"></formatted-amount></strong>
<div
class="size-14 amount-alternative"
ng-if="status.totalBalanceAlternative && wallet.network == 'livenet'"
ng-if="status.totalBalanceStr && wallet.network == 'livenet'"
ng-style="{opacity: altAmountOpacity}">
{{status.totalBalanceStr}}
<formatted-amount value="{{status.totalBalanceStr}}"></formatted-amount>
</div>
</div>
@ -47,13 +47,14 @@
ng-show="selectedPriceDisplay=='crypto' && !updateStatusError && !wallet.balanceHidden && !wallet.scanning"
on-hold="hideToggle()"
ng-style="{'transform': amountScale}"
ng-if="status.totalBalanceStr"
ng-class="{amount__balance: amountIsCollapsible}">
<strong class="size-36">{{status.totalBalanceStr}}</strong>
<strong class="size-36"><formatted-amount value="{{status.totalBalanceStr}}"></formatted-amount></strong>
<div
class="size-14 amount-alternative"
ng-if="status.totalBalanceAlternative && wallet.network == 'livenet'"
ng-style="{opacity: altAmountOpacity}">
{{status.totalBalanceAlternative}} {{status.alternativeIsoCode}}
<formatted-amount value="{{status.totalBalanceAlternative}}" currency="{{status.alternativeIsoCode}}"></formatted-amount>
</div>
</div>
@ -86,7 +87,7 @@
</strong>
&nbsp;
<span>
{{status.spendableBalanceAlternative}} {{status.alternativeIsoCode}}
<formatted-amount value="{{status.spendableBalanceAlternative}}" currency="{{status.alternativeIsoCode}}"></formatted-amount>
</span>
</button>
</div>
@ -127,12 +128,12 @@
on-hold="hideToggle()"
ng-style="{'transform': amountScale}"
ng-class="{amount__balance: amountIsCollapsible}">
<strong class="size-36">{{status.totalBalanceStr}}</strong>
<strong ng-if="status.totalBalanceStr" class="size-36"><formatted-amount value="{{status.totalBalanceStr}}"></formatted-amount></strong>
<div
class="size-14 amount-alternative"
ng-if="status.totalBalanceAlternative && wallet.network == 'livenet'"
ng-style="{opacity: altAmountOpacity}">
{{status.totalBalanceAlternative}} {{status.alternativeIsoCode}}
<formatted-amount value="{{status.totalBalanceAlternative}}" currency="{{status.alternativeIsoCode}}"></formatted-amount>
</div>
</div>
@ -142,12 +143,12 @@
on-hold="hideToggle()"
ng-style="{'transform': amountScale}"
ng-class="{amount__balance: amountIsCollapsible}">
<strong class="size-36">{{status.totalBalanceAlternative}} {{status.alternativeIsoCode}}</strong>
<strong class="size-36"><formatted-amount value="{{status.totalBalanceAlternative}}" currency="{{status.alternativeIsoCode}}"></formatted-amount></strong>
<div
class="size-14 amount-alternative"
ng-if="status.totalBalanceAlternative && wallet.network == 'livenet'"
ng-if="status.totalBalanceStr && wallet.network == 'livenet'"
ng-style="{opacity: altAmountOpacity}">
{{status.totalBalanceStr}}
<formatted-amount value="{{status.totalBalanceStr}}"></formatted-amount>
</div>
</div>
@ -180,7 +181,7 @@
</strong>
&nbsp;
<span>
{{status.spendableBalanceAlternative}} {{status.alternativeIsoCode}}
<formatted-amount value="{{status.spendableBalanceAlternative}}" currency="{{status.alternativeIsoCode}}"></formatted-amount>
</span>
</button>
</div>
@ -189,7 +190,7 @@
<button class="button button-standard button-primary amount__button-balance size-14" ng-click="openBalanceModal()">
<i class="icon ion-ios-checkmark-outline"></i>
<strong>
{{status.spendableBalanceAlternative}} {{status.alternativeIsoCode}}
<formatted-amount value="{{status.spendableBalanceAlternative}}" currency="{{status.alternativeIsoCode}}"></formatted-amount>
</strong>
&nbsp;
<span>