Colors top-up icon green or pending.

This commit is contained in:
Andy Phillipson 2017-06-07 18:55:43 -04:00
parent 39f974dd50
commit 59edea271b
No known key found for this signature in database
GPG Key ID: D813A67D567D6C88
7 changed files with 125 additions and 58 deletions

View File

@ -1,6 +1,6 @@
'use strict';
angular.module('copayApp.controllers').controller('bitpayCardController', function($scope, $timeout, $log, $state, lodash, bitpayCardService, moment, popupService, gettextCatalog, $ionicHistory, bitpayService, externalLinkService) {
angular.module('copayApp.controllers').controller('bitpayCardController', function($scope, $timeout, $log, $state, lodash, bitpayCardService, moment, popupService, gettextCatalog, $ionicHistory, bitpayService, externalLinkService, timeService) {
var self = this;
var runningBalance;
@ -163,6 +163,14 @@ angular.module('copayApp.controllers').controller('bitpayCardController', functi
runningBalance -= parseFloat(tx.amount);
};
this.withinPastDay = function(tx) {
var result = false;
if (tx.timestamp) {
result = timeService.withinPastDay(tx.timestamp);
}
return result;
};
this.openExternalLink = function(url) {
var optIn = true;
var title = null;

View File

@ -1,6 +1,6 @@
'use strict';
angular.module('copayApp.controllers').controller('walletDetailsController', function($scope, $rootScope, $interval, $timeout, $filter, $log, $ionicModal, $ionicPopover, $state, $stateParams, $ionicHistory, profileService, lodash, configService, platformInfo, walletService, txpModalService, externalLinkService, popupService, addressbookService, storageService, $ionicScrollDelegate, $window, bwcError, gettextCatalog) {
angular.module('copayApp.controllers').controller('walletDetailsController', function($scope, $rootScope, $interval, $timeout, $filter, $log, $ionicModal, $ionicPopover, $state, $stateParams, $ionicHistory, profileService, lodash, configService, platformInfo, walletService, txpModalService, externalLinkService, popupService, addressbookService, storageService, $ionicScrollDelegate, $window, bwcError, gettextCatalog, timeService) {
var HISTORY_SHOW_LIMIT = 10;
var currentTxHistoryPage = 0;
@ -200,28 +200,18 @@ angular.module('copayApp.controllers').controller('walletDetailsController', fun
return $scope.isFirstInGroup(index + 1);
};
function createdDuringSameMonth(tx1, tx2) {
if (!tx1 || !tx2) return false;
var date1 = new Date(tx1.time * 1000);
var date2 = new Date(tx2.time * 1000);
return getMonthYear(date1) === getMonthYear(date2);
}
$scope.createdDuringSameMonth = function(curTx, prevTx) {
return timeService.withinSameMonth(curTx.time, prevTx.time);
};
$scope.createdWithinPastDay = function(time) {
var now = new Date();
var date = new Date(time * 1000);
return (now.getTime() - date.getTime()) < (1000 * 60 * 60 * 24);
return timeService.withinPastDay(time);
};
$scope.isDateInCurrentMonth = function(date) {
var now = new Date();
return getMonthYear(now) === getMonthYear(date);
return timeService.isDateInCurrentMonth(date);
};
function getMonthYear(date) {
return date.getMonth() + date.getFullYear();
}
$scope.isUnconfirmed = function(tx) {
return !tx.confirmations || tx.confirmations === 0;
};

View File

@ -10,7 +10,7 @@ angular.module('copayApp.directives')
link: function(scope, element, attrs) {
var imgId = attrs.id;
var imgClass = attrs.class;
var imgUrl = attrs.src;
var imgUrl = attrs.src || attrs.ngSrc;
var svg;
// Load svg content

View File

@ -65,6 +65,7 @@ angular.module('copayApp.services').factory('bitpayCardService', function($log,
n.lastFourDigits = x.lastFourDigits;
n.token = x.token;
n.currency = x.currency;
n.country = x.country;
cards.push(n);
});

View File

@ -0,0 +1,30 @@
'use strict';
angular.module('copayApp.services').factory('timeService', function() {
var root = {};
root.withinSameMonth = function(time1, time2) {
if (!time1 || !time2) return false;
var date1 = new Date(time1 * 1000);
var date2 = new Date(time2 * 1000);
return getMonthYear(date1) === getMonthYear(date2);
}
root.withinPastDay = function(time) {
var now = new Date();
var date = new Date(time * 1000);
return (now.getTime() - date.getTime()) < (1000 * 60 * 60 * 24);
};
root.isDateInCurrentMonth = function(date) {
var now = new Date();
return getMonthYear(now) === getMonthYear(date);
};
root.getMonthYear = function(date) {
return date.getMonth() + date.getFullYear();
}
return root;
});

View File

@ -70,7 +70,65 @@
}
}
.item {
border-color: $item-border-color;
display: flex;
align-items: center;
background: #fff;
padding: 0 0 0 1rem;
margin: 0;
border: 0;
&.send .svg #-Transaction-icons {
}
&.receive .svg #-Transaction-icons {
stroke: #09C286;
}
&.pending .svg #-Transaction-icons {
stroke: $v-bitcoin-orange;
}
}
.tx-icon {
float: left;
margin-right: 25px;
}
.tx-content {
display: flex;
align-items: center;
flex-grow: 1;
padding: 1rem 0;
padding-right: 1rem;
border-bottom: 1px solid rgb(245, 245, 245);
overflow: hidden;
}
.tx-title {
flex-grow: 1;
color: $v-dark-gray;
overflow: hidden;
}
.tx-message {
margin-right: 1rem;
}
.tx-location {
margin-right: 1rem;
font-size: 12.5px;
color: $v-light-gray;
}
.tx-amount {
font-size: 16px;
white-space: nowrap;
&--received {
color: #09C286;
}
&--sent {
color: $v-dark-gray;
}
&--pending {
color: $v-bitcoin-orange;
}
}
.tx-time {
white-space: nowrap;
color: $v-light-gray;
font-size: 12.5px;
}
.info {
.badge {

View File

@ -1,43 +1,23 @@
<div class="item row">
<div class="col col-10 text-center">
<div class="tu size-10">{{tx.timestamp | amDateFormat:'MMM'}}</div>
<div class="text-light">{{tx.timestamp | amDateFormat:'DD'}}</div>
</div>
<div class="col col-10">
<img class="m15t" ng-src="img/mcc-icons/{{tx.icon}}.svg" width="24">
</div>
<div class="col col-50">
<div class="size-12 text-bold">
{{tx.merchant.name || 'Unknown Merchant'}}
<div class="item" ng-class="{'sent': tx.price.toString().indexOf('-') > -1 && !tx.pending, 'receive': tx.price.toString().indexOf('-') == -1 && !tx.pending, 'pending': tx.pending}">
<img class="tx-icon svg" ng-src="img/mcc-icons/{{tx.icon}}.svg" width="40">
<div class="tx-content">
<div class="tx-title">
<div class="ellipsis">
<div class="tx-message ellipsis">{{tx.merchant.name || 'Unknown Merchant'}}</div>
<div class="tx-location ellipsis" ng-show="tx.merchant.city && tx.merchant.state">{{tx.merchant.location}}</div>
<div ng-show="tx.pending && tx.transactionId" class="size-12 tx-amount--pending">
<div ng-click="bitpayCard.viewOnBlockchain(tx.transactionId)">View Confirmation Status</div>
</div>
</div>
</div>
<div class="size-12 text-gray">
<span ng-show="tx.merchant.city && tx.merchant.state">{{tx.merchant.location}}</span>
<span ng-class="{'m5l':tx.merchant.city && tx.merchant.state}">
{{tx.timestamp | amDateFormat:'h:mm A'}}
<span class="item-note text-right">
<span class="tx-amount" ng-class="{'tx-amount--sent': tx.price.toString().indexOf('-') > -1 && !tx.pending, 'tx-amount--received': tx.price.toString().indexOf('-') == -1 && !tx.pending, 'tx-amount--pending': tx.pending}">
{{tx.price | currency:bitpayCard.currencySymbol:2 }}
</span>
</div>
<div ng-show="tx.pending && tx.transactionId" class="size-12">
<a ng-click="bitpayCard.viewOnBlockchain(tx.transactionId)">View Confirmation Status</a>
</div>
</div>
<!-- <div class="col size-12">
{{tx.desc}}
</div>
<div class="col col-10 text-center p10t">
<img ng-show="!tx.pending" ng-src="img/check.svg" width="14">
<img ng-show="tx.pending" ng-src="img/sync.svg" width="14">
</div> -->
<div class="col text-right">
<div ng-class="{
'balanced': tx.price.toString().indexOf('-') == -1 && !tx.pending,
'text-gray': tx.price.toString().indexOf('-') == -1 && tx.pending}">
<span ng-show="tx.price.toString().indexOf('-') == -1">+ </span>
{{tx.price | currency:bitpayCard.currencySymbol:2 }}
</div>
<time class="size-12 text-gray" ng-if="!tx.pending">{{tx.runningBalance | currency:bitpayCard.currencySymbol:2}}</time>
<span class="size-12 text-gray text-italic" ng-if="tx.pending" class="tu" translate>Pending</span>
<div>
<time class="tx-time" ng-if="createdWithinPastDay(tx)">{{tx.timestamp | amTimeAgo}}</time>
<time class="tx-time" ng-if="!createdWithinPastDay(tx)">{{tx.timestamp | amDateFormat:'MMM D, YYYY'}}</time>
</div>
</span>
</div>
</div>