From 59edea271b646dd2d9d1c643a6e47415108f5cd1 Mon Sep 17 00:00:00 2001 From: Andy Phillipson Date: Wed, 7 Jun 2017 18:55:43 -0400 Subject: [PATCH 1/5] Colors top-up icon green or pending. --- src/js/controllers/bitpayCard.js | 10 ++++- src/js/controllers/walletDetails.js | 22 +++------- src/js/directives/svg.js | 2 +- src/js/services/bitpayCardService.js | 1 + src/js/services/timeService.js | 30 ++++++++++++++ src/sass/views/bitpayCard.scss | 60 +++++++++++++++++++++++++++- www/views/includes/cardActivity.html | 58 +++++++++------------------ 7 files changed, 125 insertions(+), 58 deletions(-) create mode 100644 src/js/services/timeService.js diff --git a/src/js/controllers/bitpayCard.js b/src/js/controllers/bitpayCard.js index c17cdf4a1..a7e897507 100644 --- a/src/js/controllers/bitpayCard.js +++ b/src/js/controllers/bitpayCard.js @@ -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; diff --git a/src/js/controllers/walletDetails.js b/src/js/controllers/walletDetails.js index 95d24354c..640a263e0 100644 --- a/src/js/controllers/walletDetails.js +++ b/src/js/controllers/walletDetails.js @@ -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; }; diff --git a/src/js/directives/svg.js b/src/js/directives/svg.js index 077b155a3..99ee79261 100644 --- a/src/js/directives/svg.js +++ b/src/js/directives/svg.js @@ -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 diff --git a/src/js/services/bitpayCardService.js b/src/js/services/bitpayCardService.js index 1de0ce461..114074a28 100644 --- a/src/js/services/bitpayCardService.js +++ b/src/js/services/bitpayCardService.js @@ -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); }); diff --git a/src/js/services/timeService.js b/src/js/services/timeService.js new file mode 100644 index 000000000..02eeef45f --- /dev/null +++ b/src/js/services/timeService.js @@ -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; + +}); diff --git a/src/sass/views/bitpayCard.scss b/src/sass/views/bitpayCard.scss index 7db9296dd..5fc4b0273 100644 --- a/src/sass/views/bitpayCard.scss +++ b/src/sass/views/bitpayCard.scss @@ -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 { diff --git a/www/views/includes/cardActivity.html b/www/views/includes/cardActivity.html index 62ef1df84..e87f1460e 100644 --- a/www/views/includes/cardActivity.html +++ b/www/views/includes/cardActivity.html @@ -1,43 +1,23 @@ -
-
-
{{tx.timestamp | amDateFormat:'MMM'}}
-
{{tx.timestamp | amDateFormat:'DD'}}
-
-
- -
- -
-
- {{tx.merchant.name || 'Unknown Merchant'}} +
+ +
+
+
+
{{tx.merchant.name || 'Unknown Merchant'}}
+
{{tx.merchant.location}}
+
+
View Confirmation Status
+
+
-
- {{tx.merchant.location}} - - {{tx.timestamp | amDateFormat:'h:mm A'}} + + + {{tx.price | currency:bitpayCard.currencySymbol:2 }} -
-
- View Confirmation Status -
-
- - - -
-
- + - {{tx.price | currency:bitpayCard.currencySymbol:2 }} -
- - Pending +
+ + +
+
From ae777d66391b518489228c65d92dbc1d2c3e1675 Mon Sep 17 00:00:00 2001 From: Andy Phillipson Date: Thu, 8 Jun 2017 10:38:58 -0400 Subject: [PATCH 2/5] Fixed layout, relative time. Standardize on use of timeService. --- src/js/controllers/bitpayCard.js | 2 +- src/js/controllers/proposals.js | 6 ++--- src/js/controllers/tab-home.js | 4 +-- src/js/controllers/walletDetails.js | 2 +- src/js/services/timeService.js | 10 ++++---- src/sass/views/bitpayCard.scss | 36 +++++++++++++++++---------- www/views/bitpayCard.html | 2 +- www/views/includes/cardActivity.html | 4 +-- www/views/includes/txp.html | 4 +-- www/views/includes/walletHistory.html | 4 +-- 10 files changed, 40 insertions(+), 34 deletions(-) diff --git a/src/js/controllers/bitpayCard.js b/src/js/controllers/bitpayCard.js index a7e897507..2a1a3c55a 100644 --- a/src/js/controllers/bitpayCard.js +++ b/src/js/controllers/bitpayCard.js @@ -163,7 +163,7 @@ angular.module('copayApp.controllers').controller('bitpayCardController', functi runningBalance -= parseFloat(tx.amount); }; - this.withinPastDay = function(tx) { + $scope.createdWithinPastDay = function(tx) { var result = false; if (tx.timestamp) { result = timeService.withinPastDay(tx.timestamp); diff --git a/src/js/controllers/proposals.js b/src/js/controllers/proposals.js index 1e0e65030..0d997dfe9 100644 --- a/src/js/controllers/proposals.js +++ b/src/js/controllers/proposals.js @@ -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); }; }); diff --git a/src/js/controllers/tab-home.js b/src/js/controllers/tab-home.js index 7a3fd83f8..c119f160c 100644 --- a/src/js/controllers/tab-home.js +++ b/src/js/controllers/tab-home.js @@ -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() { diff --git a/src/js/controllers/walletDetails.js b/src/js/controllers/walletDetails.js index 640a263e0..e9d6ac076 100644 --- a/src/js/controllers/walletDetails.js +++ b/src/js/controllers/walletDetails.js @@ -201,7 +201,7 @@ angular.module('copayApp.controllers').controller('walletDetailsController', fun }; $scope.createdDuringSameMonth = function(curTx, prevTx) { - return timeService.withinSameMonth(curTx.time, prevTx.time); + return timeService.withinSameMonth(curTx.time * 1000, prevTx.time * 1000); }; $scope.createdWithinPastDay = function(time) { diff --git a/src/js/services/timeService.js b/src/js/services/timeService.js index 02eeef45f..23f0b348e 100644 --- a/src/js/services/timeService.js +++ b/src/js/services/timeService.js @@ -5,20 +5,20 @@ angular.module('copayApp.services').factory('timeService', function() { 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); + 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 * 1000); + var date = new Date(time); return (now.getTime() - date.getTime()) < (1000 * 60 * 60 * 24); }; root.isDateInCurrentMonth = function(date) { var now = new Date(); - return getMonthYear(now) === getMonthYear(date); + return root.getMonthYear(now) === root.getMonthYear(date); }; root.getMonthYear = function(date) { diff --git a/src/sass/views/bitpayCard.scss b/src/sass/views/bitpayCard.scss index 5fc4b0273..b897ee720 100644 --- a/src/sass/views/bitpayCard.scss +++ b/src/sass/views/bitpayCard.scss @@ -70,23 +70,33 @@ } } .item { - display: flex; - align-items: center; - background: #fff; - padding: 0 0 0 1rem; - margin: 0; - border: 0; + 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; + &.send .svg #-Transaction-icons { + } + &.receive .svg #-Transaction-icons { + stroke: #09C286; + } + &.pending .svg #-Transaction-icons { + stroke: $v-bitcoin-orange; + } } } .tx-icon { + width: 36px; + height: 36px; float: left; margin-right: 25px; } diff --git a/www/views/bitpayCard.html b/www/views/bitpayCard.html index 5f0a43e71..25256c3c7 100644 --- a/www/views/bitpayCard.html +++ b/www/views/bitpayCard.html @@ -64,7 +64,7 @@ Learn More
-