replace outputs list at bottom with expandable list at top
This commit is contained in:
parent
805eebb752
commit
d61ba54899
5 changed files with 73 additions and 56 deletions
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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');
|
||||||
};
|
};
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue