mirror of https://github.com/BTCPrivate/copay.git
Merge pull request #6197 from ajp8164/feat/unify-card-view
Unifies card history view with wallet view
This commit is contained in:
Gustavo Maximiliano Cortez
GitHub
commit
3f5a8307e3
|
|
@ -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);
|
||||
};
|
||||
|
||||
$scope.createdWithinPastDay = 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;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
'use strict';
|
||||
|
||||
angular.module('copayApp.controllers').controller('proposalsController',
|
||||
function($timeout, $scope, profileService, $log, txpModalService, addressbookService) {
|
||||
function($timeout, $scope, profileService, $log, txpModalService, addressbookService, timeService) {
|
||||
|
||||
$scope.fetchingProposals = true;
|
||||
|
||||
|
|
@ -27,8 +27,6 @@ angular.module('copayApp.controllers').controller('proposalsController',
|
|||
$scope.openTxpModal = txpModalService.open;
|
||||
|
||||
$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);
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
'use strict';
|
||||
|
||||
angular.module('copayApp.controllers').controller('tabHomeController',
|
||||
function($rootScope, $timeout, $scope, $state, $stateParams, $ionicModal, $ionicScrollDelegate, $window, gettextCatalog, lodash, popupService, ongoingProcess, externalLinkService, latestReleaseService, profileService, walletService, configService, $log, platformInfo, storageService, txpModalService, appConfigService, startupService, addressbookService, feedbackService, bwcError, nextStepsService, buyAndSellService, homeIntegrationsService, bitpayCardService, pushNotificationsService) {
|
||||
function($rootScope, $timeout, $scope, $state, $stateParams, $ionicModal, $ionicScrollDelegate, $window, gettextCatalog, lodash, popupService, ongoingProcess, externalLinkService, latestReleaseService, profileService, walletService, configService, $log, platformInfo, storageService, txpModalService, appConfigService, startupService, addressbookService, feedbackService, bwcError, nextStepsService, buyAndSellService, homeIntegrationsService, bitpayCardService, pushNotificationsService, timeService) {
|
||||
var wallet;
|
||||
var listeners = [];
|
||||
var notifications = [];
|
||||
|
|
@ -131,9 +131,7 @@ angular.module('copayApp.controllers').controller('tabHomeController',
|
|||
});
|
||||
|
||||
$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.openExternalLink = function() {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -190,7 +190,7 @@ angular.module('copayApp.controllers').controller('walletDetailsController', fun
|
|||
}
|
||||
var curTx = $scope.txHistory[index];
|
||||
var prevTx = $scope.txHistory[index - 1];
|
||||
return !createdDuringSameMonth(curTx, prevTx);
|
||||
return !$scope.createdDuringSameMonth(curTx, prevTx);
|
||||
};
|
||||
|
||||
$scope.isLastInGroup = function(index) {
|
||||
|
|
@ -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 * 1000, prevTx.time * 1000);
|
||||
};
|
||||
|
||||
$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;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
var date2 = new Date(time2);
|
||||
return root.getMonthYear(date1) === root.getMonthYear(date2);
|
||||
}
|
||||
|
||||
root.withinPastDay = function(time) {
|
||||
var now = new Date();
|
||||
var date = new Date(time);
|
||||
return (now.getTime() - date.getTime()) < (1000 * 60 * 60 * 24);
|
||||
};
|
||||
|
||||
root.isDateInCurrentMonth = function(date) {
|
||||
var now = new Date();
|
||||
return root.getMonthYear(now) === root.getMonthYear(date);
|
||||
};
|
||||
|
||||
root.getMonthYear = function(date) {
|
||||
return date.getMonth() + date.getFullYear();
|
||||
}
|
||||
|
||||
return root;
|
||||
|
||||
});
|
||||
|
|
@ -71,6 +71,100 @@
|
|||
}
|
||||
.item {
|
||||
border-color: $item-border-color;
|
||||
&.activity-header {
|
||||
z-index: 3;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #EFEFEF;
|
||||
}
|
||||
&.activity {
|
||||
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 {
|
||||
margin-right: 25px;
|
||||
.houston {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 40px;
|
||||
border: 1px solid;
|
||||
&.no-border {
|
||||
border: none;
|
||||
.svg {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
top: 50%;
|
||||
-webkit-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
.svg {
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
top: 50%;
|
||||
-webkit-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
.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 {
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@
|
|||
<a ng-click="bitpayCard.openExternalLink('https://help.bitpay.com/bitpay-card/why-was-i-overcharged-on-my-bitpay-card-account-why-is-there-a-hold-on-my-account')" translate>Learn More</a>
|
||||
</div>
|
||||
<div class="list" ng-show="!bitpayCard.getStarted">
|
||||
<label class="item item-input item-select">
|
||||
<label class="item item-input item-select activity-header">
|
||||
<div class="input-label" translate>
|
||||
Activity
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,43 +1,29 @@
|
|||
<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 activity" ng-class="{'sent': tx.price.toString().indexOf('-') > -1 && !tx.pending, 'receive': tx.price.toString().indexOf('-') == -1 && !tx.pending, 'pending': tx.pending}">
|
||||
<div class="tx-icon">
|
||||
<div class="houston" ng-class="{'no-border': tx.icon.includes('topup')}">
|
||||
<img class="svg" ng-src="img/mcc-icons/{{tx.icon}}.svg">
|
||||
</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'}}
|
||||
</div>
|
||||
<div class="tx-content">
|
||||
<div class="tx-title">
|
||||
<div class="ellipsis">
|
||||
<div class="tx-message ellipsis">{{tx.merchant.name || 'Unknown Merchant'}}</div>
|
||||
<!-- Removed to cleanup look and since intl card does not provide location.
|
||||
<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>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -28,8 +28,8 @@
|
|||
</span>
|
||||
</span>
|
||||
<div>
|
||||
<time class="wallet-details__tx-time" ng-if="tx.createdOn && createdWithinPastDay(tx.createdOn)">{{tx.createdOn * 1000 | amTimeAgo}}</time>
|
||||
<time class="wallet-details__tx-time" ng-if="tx.createdOn && !createdWithinPastDay(tx.createdOn)">{{tx.createdOn * 1000 | date:'MMMM d, y'}}</time>
|
||||
<time class="wallet-details__tx-time" ng-if="tx.createdOn && createdWithinPastDay(tx.createdOn * 1000)">{{tx.createdOn * 1000 | amTimeAgo}}</time>
|
||||
<time class="wallet-details__tx-time" ng-if="tx.createdOn && !createdWithinPastDay(tx.createdOn * 1000)">{{tx.createdOn * 1000 | date:'MMMM d, y'}}</time>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -64,8 +64,8 @@
|
|||
</span>
|
||||
</span>
|
||||
<div>
|
||||
<time class="wallet-details__tx-time" ng-if="btx.time && createdWithinPastDay(btx.time)">{{btx.time * 1000 | amTimeAgo}}</time>
|
||||
<time class="wallet-details__tx-time" ng-if="btx.time && !createdWithinPastDay(btx.time)">
|
||||
<time class="wallet-details__tx-time" ng-if="btx.time && createdWithinPastDay(btx.time * 1000)">{{btx.time * 1000 | amTimeAgo}}</time>
|
||||
<time class="wallet-details__tx-time" ng-if="btx.time && !createdWithinPastDay(btx.time * 1000)">
|
||||
{{btx.time * 1000 | amDateFormat:'MMM D, YYYY'}}
|
||||
</time>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue