tx-details refactor

This commit is contained in:
Gabriel Bazán 2016-05-27 15:06:41 -03:00 committed by Javier
parent 0ee8af76c1
commit baf0b2f08c
5 changed files with 100 additions and 275 deletions

View File

@ -61,7 +61,7 @@ module.exports = function(grunt) {
'src/js/routes.js',
'src/js/services/*.js',
'src/js/models/*.js',
'src/js/controllers/*.js'
'src/js/controllers/**/*.js'
],
tasks: ['concat:js']
}
@ -179,11 +179,10 @@ module.exports = function(grunt) {
files: {
'i18n/po/template.pot': [
'public/index.html',
'public/views/*.html',
'public/views/**/*.html',
'src/js/routes.js',
'src/js/services/*.js',
'src/js/controllers/*.js'
'src/js/controllers/**/*.js'
]
}
},

View File

@ -1,159 +0,0 @@
<div
ng-controller="txController as txc"
class="txModal"
ng-swipe-disable-mouse
ng-swipe-right="txc.cancel()">
<nav class="tab-bar" ng-style="{'background-color':txc.color}">
<section class="left-small">
<a ng-click="txc.cancel()">
<i class="icon-arrow-left3 icon-back"></i>
<span class="text-back" translate>Back</span>
</a>
</section>
<section class="middle tab-bar-section">
<h1 class="title ellipsis" translate>
Transaction
</h1>
</section>
</nav>
<div class="txModal-content">
<div class="header-modal text-center" ng-init="txc.getAlternativeAmount(index.showTx)">
<div ng-show="index.showTx.action != 'invalid'">
<div ng-show="index.showTx.action == 'received'">
<img src="img/icon-receive-history.svg" alt="sync" width="50">
<p class="m0 text-gray size-14" translate>Received</p>
</div>
<div ng-show="index.showTx.action == 'sent'">
<img src="img/icon-sent-history.svg" alt="sync" width="50">
<p class="m0 text-gray size-14" translate>Sent</p>
</div>
<div ng-show="index.showTx.action == 'moved'">
<img src="img/icon-moved.svg" alt="sync" width="50">
<p class="m0 text-gray size-14" translate>Moved</p>
</div>
<div class="size-36" ng-click="txc.copyToClipboard(index.showTx.amountStr)">
<span ng-if="index.showTx.action == 'received'">+</span>
<span ng-if="index.showTx.action == 'sent'">-</span>
<span class="enable_text_select">{{index.showTx.amountStr}}</span>
</div>
<div class="alternative-amount" ng-click="showRate=!showRate" ng-init="showRate = false">
<span class="label gray radius" ng-show="!showRate && alternativeAmountStr">
{{alternativeAmountStr}}
</span>
<span class="size-12" ng-show="showRate && alternativeAmountStr">
{{rateStr}} ({{rateDate | amDateFormat:'MM/DD/YYYY HH:mm a'}})
</span>
</div>
</div>
<div ng-show="index.showTx.action == 'invalid'">
-
</div>
</div>
<h4 class="title m0" translate>Details</h4>
<ul class="no-bullet size-14 m0">
<li ng-if="!index.showTx.hasMultiplesOutputs && index.showTx.addressTo && index.showTx.addressTo != 'N/A'" class="line-b p10 oh"
ng-click="txc.copyToClipboard(index.showTx.addressTo)">
<span class="text-gray" translate>To</span>
<span class="right">
<span ng-if="index.showTx.merchant">
<span ng-show="index.showTx.merchant.pr.ca"><i class="fi-lock color-greeni"></i> {{index.showTx.merchant.domain}}</span>
<span ng-show="!index.showTx.merchant.pr.ca"><i class="fi-unlock color-yellowi"></i> {{index.showTx.merchant.domain}}</span>
</span>
<span ng-if="!index.showTx.merchant">
<span ng-show="index.showTx.labelTo">{{index.showTx.labelTo}}</span>
<contact ng-show="!index.showTx.labelTo" class="enable_text_select" address="{{index.showTx.addressTo}}"></contact>
</span>
</span>
</li>
<li ng-show="index.showTx.hasMultiplesOutputs" class="line-b p10 oh"
ng-click="showMultiplesOutputs = !showMultiplesOutputs">
<span class="text-gray" translate>Recipients</span>
<span class="right">{{index.showTx.recipientCount}}
<i ng-show="showMultiplesOutputs" class="icon-arrow-up3 size-24"></i>
<i ng-show="!showMultiplesOutputs" class="icon-arrow-down3 size-24"></i>
</span>
</li>
<div class="line-b" ng-show="index.showTx.hasMultiplesOutputs && showMultiplesOutputs"
ng-repeat="output in index.showTx.outputs"
ng-include="'views/includes/output.html'">
</div>
<li ng-if="index.showTx.action == 'invalid'" class="line-b p10 oh">
<span class="right" translate>
This transaction has become invalid; possibly due to a double spend attempt.
</span>
<li ng-if="index.showTx.time" class="line-b p10 oh">
<span class="text-gray" translate>Date</span>
<span class="right enable_text_select">
<time>{{ index.showTx.time * 1000 | amDateFormat:'MM/DD/YYYY HH:mm a'}}</time>
<time>({{ index.showTx.time * 1000 | amTimeAgo}})</time>
</span>
</li>
<li class="line-b p10" ng-show="index.showTx.action != 'received'"
ng-click="txc.copyToClipboard(index.showTx.feeStr)">
<span class="text-gray" translate>Fee</span>
<span class="right enable_text_select">{{index.showTx.feeStr}}</span>
</li>
<li class="line-b p10 oh" ng-if="index.showTx.message && index.showTx.action != 'received'"
ng-click="txc.copyToClipboard(index.showTx.message)">
<span class="text-gray" translate>Note</span>
<span class="right enable_text_select">{{index.showTx.message}}</span>
</li>
<li ng-if="index.showTx.merchant" class="line-b p10 oh"
ng-click="txc.copyToClipboard(index.showTx.merchant.pr.pd.memo)">
<span class="text-gray" translate>Merchant message</span>
<span class="right enable_text_select">
{{index.showTx.merchant.pr.pd.memo}}
</span>
</li>
<li ng-if="index.showTx.time" class="line-b p10 oh">
<span class="text-gray" translate>Confirmations</span>
<span class="right" >
<span class="text-warning" ng-show="!index.showTx.confirmations || index.showTx.confirmations == 0" translate>
Unconfirmed
</span>
<span class="label gray radius" ng-show="index.showTx.confirmations>0 && !index.showTx.safeConfirmed">
{{index.showTx.confirmations}}
</span>
<span class="label gray radius" ng-show="index.showTx.safeConfirmed">
{{index.showTx.safeConfirmed}}
</span>
</span>
</li>
</ul>
<div ng-if="index.showTx.actions[0] && txc.isShared">
<h4 class="title m0" translate>Participants</h4>
<ul class="no-bullet size-14 m0">
<li class="line-b p10 text-gray" ng-repeat="c in index.showTx.actions">
<i class="icon-contact size-24"></i>
<span class="right">
<i ng-if="c.type == 'reject'" class="fi-x icon-sign x db"></i>
<i ng-if="c.type == 'accept'" class="fi-check icon-sign check db"></i>
</span>
{{c.copayerName}} <span ng-if="c.copayerId == txc.copayerId">({{'Me'|translate}})</span>
</li>
</ul>
</div>
<div ng-show="index.showTx.txid" class="tx-details-blockchain">
<div class="text-center m20t">
<button class="button outline round dark-gray tiny" ng-click="$root.openExternalLink('https://' +
(txc.getShortNetworkName() == 'test' ? 'test-' : '') + 'insight.bitpay.com/tx/' + index.showTx.txid)">
<span class="text-gray" translate>See it on the blockchain</span>
</button>
</div>
</div>
<div class="extra-margin-bottom"></div>
</div>
</div>

View File

@ -1,61 +1,62 @@
<ion-modal-view ng-controller="txDetailsController">
<ion-modal-view class="txModal" ng-controller="txDetailsController">
<ion-content>
<nav class="tab-bar" ng-style="{'background-color':color}">
<section class="left-small">
<a ng-click="cancel()" class="p10">
<span class="text-close" translate>Close</span>
<a ng-click="cancel()">
<i class="icon-arrow-left3 icon-back"></i>
<span class="text-back" translate>Back</span>
</a>
</section>
<section class="middle tab-bar-section">
<h1 class="title ellipsis" translate>Transaction</h1>
<h1 class="title ellipsis" translate>
Transaction
</h1>
</section>
</nav>
<div class="modal-content" ng-class="{'status-bar-content':index.useViewManagedStatusBar}" ng-style="{'background':skin.view.viewBackground}">
<div class="header-modal text-center" ng-init="getAlternativeAmount()"
ng-style="{'background':skin.view.viewSectionHeaderBackground}">
<div class="txModal-content">
<div class="header-modal text-center" ng-init="getAlternativeAmount(btx)">
<div ng-show="btx.action != 'invalid'">
<div ng-show="btx.action == 'received'">
<img src="img/icon-receive-history.svg" alt="sync" width="50">
<p class="m0 text-gray size-14" ng-style="{'color':skin.view.viewPrimaryTextColor}" translate>Received</p>
<p class="m0 text-gray size-14" translate>Received</p>
</div>
<div ng-show="btx.action == 'sent'">
<img src="img/icon-sent-history.svg" alt="sync" width="50">
<p class="m0 text-gray size-14" ng-style="{'color':skin.view.viewPrimaryTextColor}" translate>Sent</p>
<p class="m0 text-gray size-14" translate>Sent</p>
</div>
<div ng-show="btx.action == 'moved'">
<img src="img/icon-moved.svg" alt="sync" width="50">
<p class="m0 text-gray size-14" ng-style="{'color':skin.view.viewPrimaryTextColor}" translate>Moved</p>
<p class="m0 text-gray size-14" translate>Moved</p>
</div>
<div class="size-36" ng-style="{'color':skin.view.viewPrimaryTextColor}">
<span ng-if="btx.action == 'received'">+</span><span ng-if="btx.action == 'sent'">-</span>{{btx.amountStr}}
<div class="size-36" ng-click="copyToClipboard(btx.amountStr)">
<span ng-if="btx.action == 'received'">+</span>
<span ng-if="btx.action == 'sent'">-</span>
<span class="enable_text_select">{{btx.amountStr}}</span>
</div>
<div class="alternative-amount" ng-click="showRate=!showRate" ng-init="showRate = false">
<span class="label gray radius" ng-show="!showRate && alternativeAmountStr"
ng-style="{'color':skin.view.complementaryColor, 'background-color':skin.view.primaryColor}">
<span class="label gray radius" ng-show="!showRate && alternativeAmountStr">
{{alternativeAmountStr}}
</span>
<span class="size-12" ng-show="showRate && alternativeAmountStr"
ng-style="{'color':skin.view.complementaryColor, 'background-color':skin.view.primaryColor}">
<span class="size-12" ng-show="showRate && alternativeAmountStr">
{{rateStr}} ({{rateDate | amDateFormat:'MM/DD/YYYY HH:mm a'}})
</span>
</div>
</div>
<div ng-style="{'color':skin.view.viewPrimaryTextColor}" ng-show="btx.action == 'invalid'">
<div ng-show="btx.action == 'invalid'">
-
</div>
</div>
<h4 class="title m0" ng-style="{'color':skin.view.viewSectionHeaderColor, 'background':skin.view.viewSectionHeaderBackground}" translate>Details</h4>
<h4 class="title m0" translate>Details</h4>
<ul class="no-bullet size-14 m0">
<li ng-if="!btx.hasMultiplesOutputs && btx.addressTo && btx.addressTo != 'N/A'" class="line-b p10 oh" ng-click="copyToClipboard(btx.addressTo)"
ng-style="{'background':skin.view.viewListItemBackground, 'border-bottom-color':skin.view.viewListItemSeparatorColor}">
<span class="text-gray" ng-style="{'color':skin.view.viewPrimaryTextColor}" translate>To</span>
<span class="right" ng-style="{'color':skin.view.viewSecondaryTextColor}">
<li ng-if="!btx.hasMultiplesOutputs && btx.addressTo && btx.addressTo != 'N/A'" class="line-b p10 oh"
ng-click="copyToClipboard(btx.addressTo)">
<span class="text-gray" translate>To</span>
<span class="right">
<span ng-if="btx.merchant">
<span ng-show="btx.merchant.pr.ca"><i class="fi-lock color-greeni"></i> {{btx.merchant.domain}}</span>
<span ng-show="!btx.merchant.pr.ca"><i class="fi-unlock color-yellowi"></i> {{btx.merchant.domain}}</span>
@ -68,10 +69,9 @@
</li>
<li ng-show="btx.hasMultiplesOutputs" class="line-b p10 oh"
ng-click="showMultiplesOutputs = !showMultiplesOutputs"
ng-style="{'background':skin.view.viewListItemBackground, 'border-bottom-color':skin.view.viewListItemSeparatorColor}">
<span class="text-gray" ng-style="{'color':skin.view.viewPrimaryTextColor}" translate>Recipients</span>
<span class="right" ng-style="{'color':skin.view.viewSecondaryTextColor}">{{btx.recipientCount}}
ng-click="showMultiplesOutputs = !showMultiplesOutputs">
<span class="text-gray" translate>Recipients</span>
<span class="right">{{btx.recipientCount}}
<i ng-show="showMultiplesOutputs" class="icon-arrow-up3 size-24"></i>
<i ng-show="!showMultiplesOutputs" class="icon-arrow-down3 size-24"></i>
</span>
@ -82,50 +82,44 @@
ng-include="'views/includes/output.html'">
</div>
<li ng-if="btx.action == 'invalid'" class="line-b p10 oh"
ng-style="{'background':skin.view.viewListItemBackground, 'border-bottom-color':skin.view.viewListItemSeparatorColor}">
<span class="right" ng-style="{'color':skin.view.viewSecondaryTextColor}" translate>
<li ng-if="btx.action == 'invalid'" class="line-b p10 oh">
<span class="right" translate>
This transaction has become invalid; possibly due to a double spend attempt.
</span>
</li>
<li ng-if="btx.time" class="line-b p10 oh"
ng-style="{'background':skin.view.viewListItemBackground, 'border-bottom-color':skin.view.viewListItemSeparatorColor}">
<span class="text-gray" ng-style="{'color':skin.view.viewPrimaryTextColor}" translate>Date</span>
<span class="right enable_text_select" ng-style="{'color':skin.view.viewSecondaryTextColor}">
<li ng-if="btx.time" class="line-b p10 oh">
<span class="text-gray" translate>Date</span>
<span class="right enable_text_select">
<time>{{ btx.time * 1000 | amDateFormat:'MM/DD/YYYY HH:mm a'}}</time>
<time>({{ btx.time * 1000 | amTimeAgo}})</time>
</span>
</li>
<li class="line-b p10" ng-show="btx.action != 'received'" ng-click="copyToClipboard(btx.feeStr)"
ng-style="{'background':skin.view.viewListItemBackground, 'border-bottom-color':skin.view.viewListItemSeparatorColor}">
<span class="text-gray" ng-style="{'color':skin.view.viewPrimaryTextColor}" translate>Fee</span>
<span class="right enable_text_select" ng-style="{'color':skin.view.viewSecondaryTextColor}">{{btx.feeStr}}</span>
<li class="line-b p10" ng-show="btx.action != 'received'"
ng-click="copyToClipboard(btx.feeStr)">
<span class="text-gray" translate>Fee</span>
<span class="right enable_text_select">{{btx.feeStr}}</span>
</li>
<li class="line-b p10 oh" ng-show="btx.message && btx.action != 'received'" ng-click="copyToClipboard(btx.message)"
ng-style="{'background':skin.view.viewListItemBackground, 'border-bottom-color':skin.view.viewListItemSeparatorColor}">
<span class="text-gray" ng-style="{'color':skin.view.viewPrimaryTextColor}" translate>Note</span>
<span class="right enable_text_select" ng-style="{'color':skin.view.viewSecondaryTextColor}">{{btx.message}}</span>
<li class="line-b p10 oh" ng-if="btx.message && btx.action != 'received'"
ng-click="copyToClipboard(btx.message)">
<span class="text-gray" translate>Note</span>
<span class="right enable_text_select">{{btx.message}}</span>
</li>
<li ng-if="btx.merchant" class="line-b p10 oh" ng-click="copyToClipboard(btx.merchant.pr.pd.memo)"
ng-style="{'background':skin.view.viewListItemBackground, 'border-bottom-color':skin.view.viewListItemSeparatorColor}">
<span class="text-gray" ng-style="{'color':skin.view.viewPrimaryTextColor}" translate>Merchant message</span>
<span class="right enable_text_select" ng-style="{'color':skin.view.viewSecondaryTextColor}">
<li ng-if="btx.merchant" class="line-b p10 oh"
ng-click="copyToClipboard(btx.merchant.pr.pd.memo)">
<span class="text-gray" translate>Merchant message</span>
<span class="right enable_text_select">
{{btx.merchant.pr.pd.memo}}
</span>
</li>
<li ng-if="btx.time" class="line-b p10 oh"
ng-style="{'background':skin.view.viewListItemBackground, 'border-bottom-color':skin.view.viewListItemSeparatorColor}">
<span class="text-gray" ng-style="{'color':skin.view.viewPrimaryTextColor}" translate>Confirmations</span>
<span class="right" ng-style="{'color':skin.view.viewAlertTextColor}">
<span ng-style="{'color':skin.view.viewAlertTextColor}" ng-show="!btx.confirmations || btx.confirmations == 0" translate>
<li ng-if="btx.time" class="line-b p10 oh">
<span class="text-gray" translate>Confirmations</span>
<span class="right" >
<span class="text-warning" ng-show="!btx.confirmations || btx.confirmations == 0" translate>
Unconfirmed
</span>
<span class="label gray radius" ng-show="btx.confirmations>0 && !btx.safeConfirmed"
ng-style="{'color':skin.view.complementaryColor, 'background-color':skin.view.primaryColor}">
<span class="label gray radius" ng-show="btx.confirmations>0 && !btx.safeConfirmed">
{{btx.confirmations}}
</span>
<span class="label gray radius" ng-show="btx.safeConfirmed"
ng-style="{'color':skin.view.complementaryColor, 'background-color':skin.view.primaryColor}">
<span class="label gray radius" ng-show="btx.safeConfirmed">
{{btx.safeConfirmed}}
</span>
@ -134,12 +128,11 @@
</ul>
<div ng-if="btx.actions[0] && isShared">
<h4 class="title m0" ng-style="{'color':skin.view.viewSectionHeaderColor, 'background':skin.view.viewSectionHeaderBackground}" translate>Participants</h4>
<h4 class="title m0" translate>Participants</h4>
<ul class="no-bullet size-14 m0">
<li class="line-b p10 text-gray" ng-style="{'color':skin.view.viewPrimaryTextColor}" ng-repeat="c in btx.actions"
ng-style="{'background':skin.view.viewListItemBackground, 'border-bottom-color':skin.view.viewListItemSeparatorColor}">
<li class="line-b p10 text-gray" ng-repeat="c in btx.actions">
<i class="icon-contact size-24"></i>
<span class="right" ng-style="{'color':skin.view.viewSecondaryTextColor}">
<span class="right">
<i ng-if="c.type == 'reject'" class="fi-x icon-sign x db"></i>
<i ng-if="c.type == 'accept'" class="fi-check icon-sign check db"></i>
</span>
@ -150,10 +143,9 @@
<div ng-show="btx.txid" class="tx-details-blockchain">
<div class="text-center m20t">
<button class="button outline round dark-gray tiny"
ng-style="{'background':skin.view.secondaryButtonBackground, 'border':skin.view.secondaryButtonBorder, 'color':skin.view.secondaryButtonTextColor}"
ng-click="$root.openExternalLink('https://' + (getShortNetworkName() == 'test' ? 'test-' : '') + 'insight.bitpay.com/tx/' + btx.txid)">
<span class="text-gray" ng-style="{'color':skin.view.viewSecondaryTextColor}" translate>See it on the blockchain</span>
<button class="button outline round dark-gray tiny" ng-click="$root.openExternalLink('https://' +
(getShortNetworkName() == 'test' ? 'test-' : '') + 'insight.bitpay.com/tx/' + btx.txid)">
<span class="text-gray" translate>See it on the blockchain</span>
</button>
</div>
</div>
@ -161,4 +153,4 @@
<div class="extra-margin-bottom"></div>
</div>
</ion-content>
</ion-modal-view>
</ion-modal-view>

View File

@ -20,10 +20,6 @@
z-index: -1;
}
.scroll {
height: 100%;
}
.bct {
background-color: transparent !important;
margin-top: -25px;

View File

@ -1,53 +1,50 @@
'use strict';
angular.module('copayApp.controllers').controller('txDetailsController', function($scope, $rootScope, $log, $filter, profileService, configService) {
angular.module('copayApp.controllers').controller('txDetailsController', function($rootScope, $scope, $filter, profileService, nodeWebkit, configService, gettextCatalog) {
var self = $scope.self;
var fc = profileService.focusedClient;
var self = $scope.self;
var fc = profileService.focusedClient;
var config = configService.getSync();
var configWallet = config.wallet;
var walletSettings = configWallet.settings;
$scope.settings = configService.getSync();
$scope.copayerId = fc.credentials.copayerId;
$scope.isShared = fc.credentials.n > 1;
$scope.alternativeIsoCode = walletSettings.alternativeIsoCode;
$scope.color = fc.backgroundColor;
$scope.copayerId = fc.credentials.copayerId;
$scope.isShared = fc.credentials.n > 1;
$scope.getAlternativeAmount = function() {
var satToBtc = 1 / 100000000;
fc.getFiatRate({
code: self.alternativeIsoCode,
ts: $scope.btx.time * 1000
}, function(err, res) {
if (err) {
$log.debug('Could not get historic rate');
return;
}
if (res && res.rate) {
var alternativeAmountBtc = ($scope.btx.amount * satToBtc).toFixed(8);
$scope.rateDate = res.fetchedOn;
$scope.rateStr = res.rate + ' ' + self.alternativeIsoCode;
$scope.alternativeAmountStr = $filter('noFractionNumber')(alternativeAmountBtc * res.rate, 2) + ' ' + self.alternativeIsoCode;
$scope.$apply();
}
});
};
$scope.getAlternativeAmount = function() {
var satToBtc = 1 / 100000000;
fc.getFiatRate({
code: $scope.alternativeIsoCode,
ts: $scope.btx.time * 1000
}, function(err, res) {
if (err) {
$log.debug('Could not get historic rate');
return;
}
if (res && res.rate) {
var alternativeAmountBtc = ($scope.btx.amount * satToBtc).toFixed(8);
$scope.rateDate = res.fetchedOn;
$scope.rateStr = res.rate + ' ' + $scope.alternativeIsoCode;
$scope.alternativeAmountStr = $filter('noFractionNumber')(alternativeAmountBtc * res.rate, 2) + ' ' + $scope.alternativeIsoCode;
$scope.$apply();
}
});
};
$scope.getAmount = function(amount) {
return self.getAmount(amount);
};
$scope.getShortNetworkName = function() {
var n = fc.credentials.network;
return n.substring(0, 4);
};
$scope.getUnitName = function() {
return self.getUnitName();
};
$scope.copyToClipboard = function(addr) {
if (!addr) return;
self.copyToClipboard(addr);
};
$scope.getShortNetworkName = function() {
var n = fc.credentials.network;
return n.substring(0, 4);
};
$scope.cancel = function() {
$scope.txDetailsModal.hide();
};
$scope.copyToClipboard = function(addr) {
if (!addr) return;
self.copyToClipboard(addr);
};
$scope.cancel = function() {
$scope.txDetailsModal.hide();
};
});
});