Merges amount directive
This commit is contained in:
Sam Cheng Hung
commit
343fde08f3
5 changed files with 131 additions and 153 deletions
85
src/js/directives/amount.js
Normal file
85
src/js/directives/amount.js
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
'use strict';
|
||||
|
||||
/**
|
||||
* @desc amount directive that can be used to display formatted financial values
|
||||
* size-equal attribute is optional, defaults to false.
|
||||
* @example fee = {
|
||||
* value: 12.49382901,
|
||||
* currency: 'BCH'
|
||||
* }
|
||||
* @example <amount value="fee.value" currency="fee.currency"></amount>
|
||||
* @example <amount value="fee.value" currency="fee.currency" size-equal="true"></amount>
|
||||
*/
|
||||
angular.module('bitcoincom.directives')
|
||||
.directive('amount', [
|
||||
'$timeout',
|
||||
function($timeout) {
|
||||
return {
|
||||
restrict: 'E',
|
||||
scope: {
|
||||
value: '=',
|
||||
currency: '=',
|
||||
sizeEqual: '='
|
||||
},
|
||||
templateUrl: 'views/includes/amount.html',
|
||||
controller: ['$scope', function($scope) {
|
||||
if (typeof $scope.sizeEqual != 'undefined') $scope.sizeEqual = false;
|
||||
|
||||
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'],
|
||||
'8': ['BCH', 'BTC']
|
||||
};
|
||||
|
||||
var numberWithCommas = function(x) {
|
||||
return parseFloat(x).toLocaleString();
|
||||
};
|
||||
|
||||
var buildAmount = function(start, middle, end) {
|
||||
$scope.start = start;
|
||||
$scope.middle = middle;
|
||||
$scope.end = end;
|
||||
};
|
||||
|
||||
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';
|
||||
return '2';
|
||||
};
|
||||
|
||||
switch (getDecimalPlaces($scope.currency)) {
|
||||
case '0':
|
||||
var valueFormatted = numberWithCommas(Math.round(parseFloat($scope.value)));
|
||||
buildAmount(valueFormatted, '', '');
|
||||
break;
|
||||
|
||||
case '2':
|
||||
var valueProcessing = parseFloat(parseFloat($scope.value).toFixed(2));
|
||||
var valueFormatted = numberWithCommas(valueProcessing);
|
||||
buildAmount(valueFormatted, '', '');
|
||||
break;
|
||||
|
||||
case '3':
|
||||
var valueProcessing = parseFloat(parseFloat($scope.value).toFixed(3));
|
||||
var valueFormatted = numberWithCommas(valueProcessing);
|
||||
buildAmount(valueFormatted, '', '');
|
||||
break;
|
||||
|
||||
case '8':
|
||||
var valueFormatted = parseFloat($scope.value).toFixed(8);
|
||||
if (parseFloat($scope.value) == 0) {
|
||||
buildAmount('0', '', '');
|
||||
} else {
|
||||
buildAmount(valueFormatted, '', '');
|
||||
var start = numberWithCommas(valueFormatted.slice(0, -5));
|
||||
var middle = valueFormatted.slice(-5, -2);
|
||||
var end = valueFormatted.substr(valueFormatted.length - 2);
|
||||
buildAmount(start, middle, end);
|
||||
}
|
||||
break;
|
||||
}
|
||||
}]
|
||||
};
|
||||
}
|
||||
]);
|
||||
35
src/sass/components/amount.scss
Normal file
35
src/sass/components/amount.scss
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
.amount {
|
||||
.start,
|
||||
.middle,
|
||||
.end,
|
||||
.currency {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.start {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.middle {
|
||||
font-size: 0.7857em;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.end {
|
||||
font-size: 0.7857em;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
&.size-equal {
|
||||
.middle,
|
||||
.end {
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.currency {
|
||||
font-size: 1em;
|
||||
margin-left: 5px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
|
@ -8,3 +8,4 @@
|
|||
@import "action-minor";
|
||||
@import "expand-content";
|
||||
@import "fee-summary";
|
||||
@import "amount.scss";
|
||||
|
|
|
|||
159
www/css/main.css
159
www/css/main.css
|
|
@ -15082,164 +15082,17 @@ log-options #check-bar .checkbox-icon {
|
|||
border-radius: 3px;
|
||||
display: inline-block; }
|
||||
|
||||
.elastic {
|
||||
width: 100%;
|
||||
font-size: 14px; }
|
||||
(??)
|
||||
|
||||
/*
|
||||
* Extends Ionic v1 item
|
||||
*/
|
||||
.item.item-compact {
|
||||
padding: 11px 13px; }
|
||||
(??)
|
||||
|
||||
.item.item-gutterless {
|
||||
padding: 0; }
|
||||
(??)
|
||||
|
||||
.item .item-content.item-content-avatar {
|
||||
min-height: 69px;
|
||||
padding: 13px 11px 13px 68px; }
|
||||
.item .item-content.item-content-avatar > img:first-child,
|
||||
.item .item-content.item-content-avatar > i:first-child {
|
||||
position: absolute;
|
||||
max-width: 40px;
|
||||
max-height: 40px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
left: 13px;
|
||||
top: 50%;
|
||||
padding: 0;
|
||||
transform: translate(0, -50%); }
|
||||
(??)
|
||||
|
||||
.item .item-content.item-content-compact {
|
||||
min-height: 0;
|
||||
padding: 13px 11px; }
|
||||
(??)
|
||||
|
||||
.item .item-content .highlight {
|
||||
color: #FAB915; }
|
||||
|
||||
.item .item-content + .item-content {
|
||||
padding-top: 0; }
|
||||
|
||||
/*
|
||||
* Extends Ionic v1 ion-content
|
||||
*/
|
||||
ion-content.bg-neutral {
|
||||
background-color: #F2F2F2; }
|
||||
|
||||
ion-content.padded-bottom-cta {
|
||||
bottom: 92px; }
|
||||
|
||||
ion-content.padded-bottom-cta-with-summary {
|
||||
bottom: 134px; }
|
||||
|
||||
.card.card-gutter-compact {
|
||||
margin: 10px 12px; }
|
||||
|
||||
.header {
|
||||
padding: 29px 12px 61px;
|
||||
background-color: #FAB915;
|
||||
color: #FFFFFF; }
|
||||
.header .title {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
line-height: 1em;
|
||||
color: #FFFFFF;
|
||||
text-align: center; }
|
||||
.header .title + .content {
|
||||
margin-top: 23px; }
|
||||
.header .content {
|
||||
text-align: center; }
|
||||
.header .content p {
|
||||
margin: 0;
|
||||
line-height: 1em;
|
||||
font-size: 18px; }
|
||||
.header .content p.large {
|
||||
font-size: 29px;
|
||||
font-weight: 600; }
|
||||
.header .content p + p {
|
||||
margin-top: 8px; }
|
||||
|
||||
.content-frame.negative-top {
|
||||
margin-top: -40px; }
|
||||
.content-frame.negative-top .card:first-child {
|
||||
margin-top: 0; }
|
||||
|
||||
.address {
|
||||
background-color: #F8F8F8;
|
||||
border: 0.5px solid #EDEBEB;
|
||||
border-radius: 3px;
|
||||
padding: 9px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis; }
|
||||
.address.expanded {
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all; }
|
||||
.address .prefix {
|
||||
color: #000000; }
|
||||
.address .mid {
|
||||
color: #919191; }
|
||||
.address .suffix {
|
||||
color: #000000; }
|
||||
|
||||
.action-minor {
|
||||
margin: 20px 14px;
|
||||
font-size: 14px; }
|
||||
.action-minor.mt-negative {
|
||||
margin-top: 0; }
|
||||
.action-minor.text-right {
|
||||
text-align: right; }
|
||||
.action-minor > .action-icon {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
vertical-align: middle;
|
||||
margin-right: 3px; }
|
||||
.action-minor > .action-text {
|
||||
vertical-align: middle;
|
||||
color: #444444; }
|
||||
|
||||
.expand-content-frame {
|
||||
position: relative; }
|
||||
.expand-content-frame .expand-content-trigger {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
right: 0; }
|
||||
.expand-content-frame .expand-content-trigger.expand-content-revealed {
|
||||
opacity: 0; }
|
||||
.expand-content-frame .expand-content {
|
||||
opacity: 0;
|
||||
transform-origin: 100% 0%;
|
||||
transform: scale(0, 0);
|
||||
transition: opacity 0.3s ease, transform 0.3s ease; }
|
||||
.expand-content-frame .expand-content.expand-content-revealed {
|
||||
opacity: 1;
|
||||
transform: scale(1, 1); }
|
||||
|
||||
.fee-summary {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding: 5px 12px 15px;
|
||||
box-sizing: border-box;
|
||||
background-color: #F2F2F2; }
|
||||
.fee-summary:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -15px;
|
||||
width: 100%;
|
||||
height: 15px;
|
||||
background: linear-gradient(to bottom, rgba(242, 242, 242, 0) 0%, #f2f2f2 100%); }
|
||||
.fee-summary .fee-fiat.positive {
|
||||
color: #70955F; }
|
||||
.fee-summary .fee-fiat.negative {
|
||||
color: #C24633; }
|
||||
.fee-summary .fee-crypto {
|
||||
color: #A7A7A7; }
|
||||
(??)
|
||||
|
||||
/* This is for rules that don't yet have a home.
|
||||
* Our goal is to delete this file. Search the regex: /class=".*CLASS.*?"/
|
||||
|
|
|
|||
4
www/views/includes/amount.html
Normal file
4
www/views/includes/amount.html
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<div class="amount"
|
||||
ng-class="{ 'size-equal': sizeEqual }">
|
||||
<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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue