replace outputs list at bottom with expandable list at top

This commit is contained in:
Gregg Zigler 2015-07-02 11:06:37 -07:00
commit d61ba54899
5 changed files with 73 additions and 56 deletions

View file

@ -1,20 +1,23 @@
<div class="ng-animate-disabled row collapse line-b" ng-class="text-gray'"> <div class="ng-animate-disabled row collapse line-b" ng-class="text-gray">
<ul class="no-bullet size-14 m0"> <li ng-if="output.summary" class="line-b p10 oh" ng-click="expand(output.parent)">
<li class="line-b p10 oh"> <span class="text-gray" translate>To</span>:
</li> <span class="right enable_text_select">{{output.summary.length}}
<li class="line-b p10 oh" ng-click="copyAddress(output.toAddress)"> <span class="enable_text_select" translate>recipients</span>
<span class="text-gray" translate>To</span>: <i class="icon-arrow-down size-24"></i>
<span class="right enable_text_select">{{output.toAddress}}</span> </span>
</li> </li>
<li class="line-b p10"> <li ng-if="!output.summary" class="line-b p10 oh" ng-click="copyAddress(output.toAddress)">
<span class="text-gray" translate>Amount</span>: <span class="text-gray" translate>To</span>:
<span class="right">{{output.amountStr}} <span class="right enable_text_select">{{output.toAddress}}</span>
<span class="label gray radius">{{output.alternativeAmountStr}}</span> </li>
</span> <li class="line-b p10" ng-click="expand(output.parent)">
</li> <span class="text-gray" translate>Amount</span>:
<li class="line-b p10 oh"> <span class="right">{{output.amountStr}}
<span class="text-gray" translate>Note</span>: <span class="label gray radius enable_text_select">{{output.alternativeAmountStr}}</span>
<span class="right">{{output.message}}</span> </span>
</li> </li>
</ul> <li class="line-b p10 oh" ng-click="expand(output.parent)">
<span class="text-gray" translate>Note</span>:
<span class="right enable_text_select">{{output.message}}</span>
</li>
</div> </div>

View file

@ -17,10 +17,8 @@
<span ng-show="!tx.merchant.pr.ca"><i class="fi-unlock"></i> {{tx.merchant.domain}}</span> <span ng-show="!tx.merchant.pr.ca"><i class="fi-unlock"></i> {{tx.merchant.domain}}</span>
</span> </span>
<span ng-if="tx.outputs"> <span ng-if="tx.outputs">
{{tx.outputs[0].toAddress.substring(0, 16)+'...'}} <span>{{tx.outputs[0].summary.length}}</span>
<span translate>and </span> <span translate>recipients</span>
{{tx.outputs.length - 1}}
<span translate> more</span>
</span> </span>
<span ng-if="!tx.outputs"> <span ng-if="!tx.outputs">
<contact address="{{tx.toAddress}}" ng-hide="tx.merchant"> </contact> <contact address="{{tx.toAddress}}" ng-hide="tx.merchant"> </contact>

View file

@ -14,17 +14,24 @@
<div class="modal-content fix-modals-touch" ng-init="updateCopayerList()"> <div class="modal-content fix-modals-touch" ng-init="updateCopayerList()">
<h4 class="title m0" translate>Details</h4> <h4 class="title m0" translate>Details</h4>
<ul class="no-bullet size-14 m0"> <ul class="no-bullet size-14 m0">
<li class="line-b p10 oh" ng-click="copyAddress(tx.toAddress)"> <div ng-if="tx.outputs"
ng-repeat="output in tx.outputs"
ng-include="'views/includes/output.html'">
</div>
<li ng-if="!tx.outputs" class="line-b p10 oh" ng-click="copyAddress(tx.toAddress)">
<span class="text-gray" translate>To</span>: <span class="text-gray" translate>To</span>:
<span class="right" translate ng-if="tx.outputs">See details below</span> <span class="right enable_text_select">{{tx.toAddress}}</span>
<span class="right enable_text_select" ng-if="!tx.outputs">{{tx.toAddress}}</span>
</li> </li>
<li class="line-b p10"> <li ng-if="!tx.outputs" class="line-b p10">
<span class="text-gray" translate>Amount</span>: <span class="text-gray" translate>Amount</span>:
<span class="right">{{amountStr}} <span class="right">{{amountStr}}
<span class="label gray radius">{{alternativeAmountStr}}</span> <span class="label gray radius">{{alternativeAmountStr}}</span>
</span> </span>
</li> </li>
<li ng-if="!tx.outputs" class="line-b p10 oh">
<span class="text-gray" translate>Note</span>:
<span class="right">{{tx.message}}</span>
</li>
<li class="line-b p10"> <li class="line-b p10">
<span class="text-gray" translate>Fee</span>: <span class="text-gray" translate>Fee</span>:
<span class="right">{{feeStr}}</span> <span class="right">{{feeStr}}</span>
@ -39,10 +46,6 @@
<span class="text-gray" translate>Created by</span>: <span class="text-gray" translate>Created by</span>:
<span class="right">{{tx.creatorName}}</span> <span class="right">{{tx.creatorName}}</span>
</li> </li>
<li class="line-b p10 oh">
<span class="text-gray" translate>Note</span>:
<span class="right">{{tx.message}}</span>
</li>
</ul> </ul>
<div ng-if="tx.paypro"> <div ng-if="tx.paypro">
<h4 class="title m0" translate>Payment details</h4> <h4 class="title m0" translate>Payment details</h4>
@ -148,11 +151,5 @@
</button> </button>
</div> </div>
<div ng-if="tx.outputs">
<div ng-repeat="output in tx.outputs"
ng-include="'views/includes/output.html'">
</div>
</div>
<div class="extra-margin-bottom"></div> <div class="extra-margin-bottom"></div>
</div> </div>

View file

@ -431,16 +431,21 @@ angular.module('copayApp.controllers').controller('indexController', function($r
lodash.each(txps, function(tx) { lodash.each(txps, function(tx) {
// gregg hack test data // gregg hack test data
if (!tx.outputs) { if (!tx.outputs) {
tx.outputs = [ var maxCount = 5;
{ toAddress: '2MzCXF7QW4ArgiwDTh12qU3ymWNZzNsrbLo', amount: 123456, message: 'Bitography, Inc.' }, var notes = [ 'bitography.co', 'Chipotle @ Buckhead', 'Decentralus Maximus', 'Everyday Deals', 'FinTech Solutions'];
{ toAddress: '2N9JWQkJxbpbW6M4sVaz2Yvn4yczTZgZZh6', amount: 76543, message: 'Chipotle @ Buckhead' }, var addrs = [ '2MzCXF7QW4ArgiwDTh12qU3ymWNZzNsrbLo', '2N9JWQkJxbpbW6M4sVaz2Yvn4yczTZgZZh6', '2NFvpdtduhJzQaJcsx3Hf1oJ1U4ouUfLiFG'];
{ toAddress: '2NFvpdtduhJzQaJcsx3Hf1oJ1U4ouUfLiFG', amount: 543210, message: 'Grand Decentral' } tx.outputs = [];
]; for (var i = 0; i < maxCount; i++) {
tx.outputs.push({
toAddress: addrs[Math.round(Math.random() * addrs.length) % addrs.length],
amount: 100 * Math.round(Math.random() * Math.pow(10, (i % 5) + 2)) + 1,
message: notes[Math.round(Math.random() * notes.length) % notes.length]
});
}
} }
// gregg hack test data // gregg hack test data
function formatAmount(obj) { function formatAmount(obj, amount) {
var amount = obj.amount * self.satToUnit;
obj.amountStr = profileService.formatAmount(obj.amount) + ' ' + config.unitName; obj.amountStr = profileService.formatAmount(obj.amount) + ' ' + config.unitName;
obj.alternativeAmount = rateService.toFiat(obj.amount, config.alternativeIsoCode) ? rateService.toFiat(obj.amount, config.alternativeIsoCode).toFixed(2) : 'N/A'; obj.alternativeAmount = rateService.toFiat(obj.amount, config.alternativeIsoCode) ? rateService.toFiat(obj.amount, config.alternativeIsoCode).toFixed(2) : 'N/A';
obj.alternativeAmountStr = obj.alternativeAmount + " " + config.alternativeIsoCode; obj.alternativeAmountStr = obj.alternativeAmount + " " + config.alternativeIsoCode;
@ -454,24 +459,24 @@ angular.module('copayApp.controllers').controller('indexController', function($r
delete tx.outputs; delete tx.outputs;
} else { } else {
tx.amount = lodash.reduce(tx.outputs, function(total, o) { tx.amount = lodash.reduce(tx.outputs, function(total, o) {
formatAmount(o, o.amount * self.satToUnit);
return total + o.amount; return total + o.amount;
}, 0); }, 0);
var cumAmount = 0; var summary = lodash.sortBy(tx.outputs, function(o) {
var cumPercent = 0;
var sorted = lodash.sortBy(tx.outputs, function(o) {
return -1 * o.amount; // descending order return -1 * o.amount; // descending order
}); });
tx.outputs = lodash.transform(sorted, function(outputs, o) { tx.outputs = [{
cumAmount += o.amount; amount: tx.amount,
cumPercent += 100 * (o.amount / tx.amount); message: tx.message,
o.cumAmount = cumAmount; summary: summary
o.cumPercent = cumPercent; }];
formatAmount(o); tx.outputs[0].parent = tx.outputs;
outputs.push(o); tx.outputs.transform = formatAmount;
}, []); tx.outputs.accumulator = 'amount';
formatAmount(tx.outputs[0], tx.amount * self.satToUnit);
} }
} }
formatAmount(tx); formatAmount(tx, tx.amount * self.satToUnit);
tx.feeStr = profileService.formatAmount(tx.fee) + ' ' + config.unitName; tx.feeStr = profileService.formatAmount(tx.fee) + ' ' + config.unitName;
tx.alternativeIsoCode = config.alternativeIsoCode; tx.alternativeIsoCode = config.alternativeIsoCode;

View file

@ -364,6 +364,20 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
self.copyAddress(addr); self.copyAddress(addr);
}; };
$scope.expand = function(list) {
if (list && list.length && list[list.length - 1].summary) {
var lastItem = list.pop();
if (lastItem.summary.length === 0) return;
var nextItem = lastItem.summary.shift();
lastItem[list.accumulator] -= nextItem[list.accumulator];
list.push(nextItem);
if (lastItem.summary.length) {
list.transform(lastItem, lastItem[list.accumulator]);
list.push(lastItem);
}
}
};
$scope.cancel = function() { $scope.cancel = function() {
$modalInstance.dismiss('cancel'); $modalInstance.dismiss('cancel');
}; };