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

View file

@ -17,10 +17,8 @@
<span ng-show="!tx.merchant.pr.ca"><i class="fi-unlock"></i> {{tx.merchant.domain}}</span>
</span>
<span ng-if="tx.outputs">
{{tx.outputs[0].toAddress.substring(0, 16)+'...'}}
<span translate>and </span>
{{tx.outputs.length - 1}}
<span translate> more</span>
<span>{{tx.outputs[0].summary.length}}</span>
<span translate>recipients</span>
</span>
<span ng-if="!tx.outputs">
<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()">
<h4 class="title m0" translate>Details</h4>
<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="right" translate ng-if="tx.outputs">See details below</span>
<span class="right enable_text_select" ng-if="!tx.outputs">{{tx.toAddress}}</span>
<span class="right enable_text_select">{{tx.toAddress}}</span>
</li>
<li class="line-b p10">
<li ng-if="!tx.outputs" class="line-b p10">
<span class="text-gray" translate>Amount</span>:
<span class="right">{{amountStr}}
<span class="label gray radius">{{alternativeAmountStr}}</span>
</span>
</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">
<span class="text-gray" translate>Fee</span>:
<span class="right">{{feeStr}}</span>
@ -39,10 +46,6 @@
<span class="text-gray" translate>Created by</span>:
<span class="right">{{tx.creatorName}}</span>
</li>
<li class="line-b p10 oh">
<span class="text-gray" translate>Note</span>:
<span class="right">{{tx.message}}</span>
</li>
</ul>
<div ng-if="tx.paypro">
<h4 class="title m0" translate>Payment details</h4>
@ -148,11 +151,5 @@
</button>
</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>

View file

@ -431,16 +431,21 @@ angular.module('copayApp.controllers').controller('indexController', function($r
lodash.each(txps, function(tx) {
// gregg hack test data
if (!tx.outputs) {
tx.outputs = [
{ toAddress: '2MzCXF7QW4ArgiwDTh12qU3ymWNZzNsrbLo', amount: 123456, message: 'Bitography, Inc.' },
{ toAddress: '2N9JWQkJxbpbW6M4sVaz2Yvn4yczTZgZZh6', amount: 76543, message: 'Chipotle @ Buckhead' },
{ toAddress: '2NFvpdtduhJzQaJcsx3Hf1oJ1U4ouUfLiFG', amount: 543210, message: 'Grand Decentral' }
];
var maxCount = 5;
var notes = [ 'bitography.co', 'Chipotle @ Buckhead', 'Decentralus Maximus', 'Everyday Deals', 'FinTech Solutions'];
var addrs = [ '2MzCXF7QW4ArgiwDTh12qU3ymWNZzNsrbLo', '2N9JWQkJxbpbW6M4sVaz2Yvn4yczTZgZZh6', '2NFvpdtduhJzQaJcsx3Hf1oJ1U4ouUfLiFG'];
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
function formatAmount(obj) {
var amount = obj.amount * self.satToUnit;
function formatAmount(obj, amount) {
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.alternativeAmountStr = obj.alternativeAmount + " " + config.alternativeIsoCode;
@ -454,24 +459,24 @@ angular.module('copayApp.controllers').controller('indexController', function($r
delete tx.outputs;
} else {
tx.amount = lodash.reduce(tx.outputs, function(total, o) {
formatAmount(o, o.amount * self.satToUnit);
return total + o.amount;
}, 0);
var cumAmount = 0;
var cumPercent = 0;
var sorted = lodash.sortBy(tx.outputs, function(o) {
var summary = lodash.sortBy(tx.outputs, function(o) {
return -1 * o.amount; // descending order
});
tx.outputs = lodash.transform(sorted, function(outputs, o) {
cumAmount += o.amount;
cumPercent += 100 * (o.amount / tx.amount);
o.cumAmount = cumAmount;
o.cumPercent = cumPercent;
formatAmount(o);
outputs.push(o);
}, []);
tx.outputs = [{
amount: tx.amount,
message: tx.message,
summary: summary
}];
tx.outputs[0].parent = tx.outputs;
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.alternativeIsoCode = config.alternativeIsoCode;

View file

@ -364,6 +364,20 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
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() {
$modalInstance.dismiss('cancel');
};