Skip to content

Commit

Permalink
feat(transaction): menu to copy transaction details
Browse files Browse the repository at this point in the history
Introduced a new component for copying tx data to clipboard
Removed redundant copy tx addresses to clipboard functionality
Removed extra markup for that from index.html
  • Loading branch information
beregovoy68 committed Jan 30, 2017
1 parent d9e9769 commit 4b1a5d2
Show file tree
Hide file tree
Showing 5 changed files with 105 additions and 34 deletions.
3 changes: 2 additions & 1 deletion Gruntfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ module.exports = function (grunt) {

'src/js/vendor/jquery.modal.js',

'bower_components/wavesplatform-core-js/distr/wavesplatform-core-js-0.2.0.js'
'bower_components/wavesplatform-core-js/distr/wavesplatform-core.js'
],
application: [
// project sources
Expand All @@ -110,6 +110,7 @@ module.exports = function (grunt) {
'src/js/shared/transaction.broadcast.factory.js',
'src/js/shared/decimal.input.restrictor.directive.js',
'src/js/shared/integer.input.restrictor.directive.js',
'src/js/shared/transaction.menu.component.js',

'src/js/login/login.module.js',
'src/js/login/login.constants.js',
Expand Down
45 changes: 17 additions & 28 deletions src/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -416,26 +416,12 @@ <h2 class="sectionHeader">LATEST TRANSACTIONS</h2>
<td>{{tx.formatted.datetime}}</td>
<td>{{tx.formatted.type}}</td>
<td>{{tx.formatted.asset}}</td>
<td ng-if="!tx.formatted.isSenderCopiable">{{tx.formatted.sender}}</td>
<td ng-if="tx.formatted.isSenderCopiable"><span class="clipSpan" tooltipster tooltip-theme="tooltipster-theme1" ngclipboard data-clipboard-text="{{tx.formatted.sender}}" title="Copy this address to the clipboard." ngclipboard-success="clipboardOk()">{{tx.formatted.sender}}</span></td>
<td ng-if="!tx.formatted.isRecipientCopiable">{{tx.formatted.recipient}}</td>
<td ng-if="tx.formatted.isRecipientCopiable"><span class="clipSpan" tooltipster tooltip-theme="tooltipster-theme1" ngclipboard data-clipboard-text="{{tx.formatted.recipient}}" title="Copy this address to the clipboard." ngclipboard-success="clipboardOk()">{{tx.formatted.recipient}}</span></td>
<td>{{tx.formatted.sender}}</td>
<td>{{tx.formatted.recipient}}</td>
<td>{{tx.formatted.fee}}</td>
<td>{{tx.formatted.amount}}</td>
<td width="16">
<md-menu>
<md-button class="md-icon-button" ng-click="$mdOpenMenu($event)">
<img ng-src="img/slack_icon.svg" height="16" width="16" />
</md-button>
<md-menu-content width="2">
<md-menu-item>
<md-button><span md-menu-align-target>Copy Tx ID</span></md-button>
</md-menu-item>
<md-menu-item>
<md-button><span md-menu-align-target>Copy Full Tx</span></md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
<tx-menu transaction="tx"></tx-menu>
</td>
</tr>
</tbody>
Expand Down Expand Up @@ -464,8 +450,7 @@ <h2 class="sectionHeader">PORTFOLIO</h2>
</tr>
<tr ng-show="!assetList.noData" ng-repeat="tx in assetList.assets | orderBy:'timestamp':true | asset track by tx.id">
<td>{{tx.name}}</td>
<td ng-if="!tx.formatted.isSenderCopiable">{{tx.formatted.sender}}</td>
<td ng-if="tx.formatted.isSenderCopiable"><span class="clipSpan" tooltipster tooltip-theme="tooltipster-theme1" ngclipboard data-clipboard-text="{{tx.formatted.sender}}" title="Copy this address to the clipboard." ngclipboard-success="clipboardOk()">{{tx.formatted.sender}}</span></td>
<td>{{tx.formatted.sender}}</td>
<td>{{tx.reissuable}}</td>
<td>{{tx.balance}}</td>
<td>
Expand Down Expand Up @@ -768,32 +753,35 @@ <h2 class="sectionHeader">LATEST TRANSACTIONS</h2>
<td>RECIPIENT</td>
<td>FEE</td>
<td>UNITS</td>
<td></td>
</tr>
</thead>
<tbody>
<tr ng-repeat="tx in history.unconfirmed | orderBy:'timestamp':true | limitTo:10 | transaction track by tx.timestamp" class="wavesTable-txUnc" ng-class="{'wavesTable-txIn': !tx.formatted.isOutgoing, 'wavesTable-txOut': tx.formatted.isOutgoing}">
<td>{{tx.formatted.datetime}}</td>
<td>{{tx.formatted.type}}</td>
<td>{{tx.formatted.asset}}</td>
<td ng-if="!tx.formatted.isSenderCopiable">{{tx.formatted.sender}}</td>
<td ng-if="tx.formatted.isSenderCopiable"><span class="clipSpan" tooltipster tooltip-theme="tooltipster-theme1" ngclipboard data-clipboard-text="{{tx.formatted.sender}}" title="Copy this address to the clipboard." ngclipboard-success="clipboardOk()">{{tx.formatted.sender}}</span></td>
<td ng-if="!tx.formatted.isRecipientCopiable">{{tx.formatted.recipient}}</td>
<td ng-if="tx.formatted.isRecipientCopiable"><span class="clipSpan" tooltipster tooltip-theme="tooltipster-theme1" ngclipboard data-clipboard-text="{{tx.formatted.recipient}}" title="Copy this address to the clipboard." ngclipboard-success="clipboardOk()">{{tx.formatted.recipient}}</span></td>
<td>{{tx.formatted.sender}}</td>
<td>{{tx.formatted.recipient}}</td>
<td>{{tx.formatted.fee}}</td>
<td>{{tx.formatted.amount}}</td>
<td width="16">
<tx-menu transaction="tx"></tx-menu>
</td>
</tr>
</tbody>
<tbody>
<tr ng-repeat="tx in history.confirmed | orderBy:'timestamp':true | limitTo:10 | transaction track by tx.timestamp" ng-class="{'wavesTable-txIn': !tx.formatted.isOutgoing, 'wavesTable-txOut': tx.formatted.isOutgoing}">
<td>{{tx.formatted.datetime}}</td>
<td>{{tx.formatted.type}}</td>
<td>{{tx.formatted.asset}}</td>
<td ng-if="!tx.formatted.isSenderCopiable">{{tx.formatted.sender}}</td>
<td ng-if="tx.formatted.isSenderCopiable"><span class="clipSpan" tooltipster tooltip-theme="tooltipster-theme1" ngclipboard data-clipboard-text="{{tx.formatted.sender}}" title="Copy this address to the clipboard." ngclipboard-success="clipboardOk()">{{tx.formatted.sender}}</span></td>
<td ng-if="!tx.formatted.isRecipientCopiable">{{tx.formatted.recipient}}</td>
<td ng-if="tx.formatted.isRecipientCopiable"><span class="clipSpan" tooltipster tooltip-theme="tooltipster-theme1" ngclipboard data-clipboard-text="{{tx.formatted.recipient}}" title="Copy this address to the clipboard." ngclipboard-success="clipboardOk()">{{tx.formatted.recipient}}</span></td>
<td>{{tx.formatted.sender}}</td>
<td>{{tx.formatted.recipient}}</td>
<td>{{tx.formatted.fee}}</td>
<td>{{tx.formatted.amount}}</td>
<td width="16">
<tx-menu transaction="tx"></tx-menu>
</td>
</tr>
</tbody>
</table>
Expand Down Expand Up @@ -974,7 +962,7 @@ <h2 class="sectionHeader">LATEST BLOCKS INFORMATION</h2>
<script src="js/vendor/jquery.modal.js"></script>

<!-- application modules -->
<script src="../bower_components/wavesplatform-core-js/distr/wavesplatform-core-js-0.2.0.js"></script>
<script src="../bower_components/wavesplatform-core-js/distr/wavesplatform-core.js"></script>

<script src="js/ui.module.js"></script>
<script src="js/application.context.factory.js"></script>
Expand All @@ -994,6 +982,7 @@ <h2 class="sectionHeader">LATEST BLOCKS INFORMATION</h2>
<script src="js/shared/shared.autocomplete.factory.js"></script>
<script src="js/shared/decimal.input.restrictor.directive.js"></script>
<script src="js/shared/integer.input.restrictor.directive.js"></script>
<script src="js/shared/transaction.menu.component.js"></script>

<script src="js/login/login.module.js"></script>
<script src="js/login/login.constants.js"></script>
Expand Down
2 changes: 0 additions & 2 deletions src/js/portfolio/asset.filter.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,6 @@
canReissue: transaction.reissuable && isMyAddress(transaction.sender)
};

transaction.formatted.isSenderCopiable = addressService.validateAddress(transaction.formatted.sender);

return transaction;
}

Expand Down
3 changes: 0 additions & 3 deletions src/js/shared/transaction.filter.js
Original file line number Diff line number Diff line change
Expand Up @@ -115,9 +115,6 @@

processTransaction(transaction);

transaction.formatted.isSenderCopiable = addressService.validateAddress(transaction.formatted.sender);
transaction.formatted.isRecipientCopiable = addressService.validateAddress(transaction.formatted.recipient);

return transaction;
}

Expand Down
86 changes: 86 additions & 0 deletions src/js/shared/transaction.menu.component.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
(function () {
'use strict';

var ADDRESS_STUB = 'n/a';

function TransactionMenuController(notificationService) {
var ctrl = this;

ctrl.idCopied = idCopied;
ctrl.dataCopied = dataCopied;
ctrl.fullTransactionData = fullTransactionData;
ctrl.hasRecipient = hasRecipient;
ctrl.addressCopied = addressCopied;

function addressCopied () {
return notificationService.notice('Address has been copied');
}

function idCopied () {
notificationService.notice('Transaction ID has been copied');
}

function dataCopied () {
notificationService.notice('Full transaction data have been copied');
}

function hasRecipient () {
return !!ctrl.transaction.recipient;
}

function fullTransactionData () {
var recipient = hasRecipient() ? ctrl.transaction.recipient : ADDRESS_STUB;

return 'TX ID: ' + ctrl.transaction.id +
' | TYPE: ' + ctrl.transaction.formatted.type +
' | DATE: ' + ctrl.transaction.formatted.datetime +
' | SENDER ADDRESS: ' + ctrl.transaction.sender +
' | TX AMOUNT: ' + ctrl.transaction.formatted.amount + ' ' + ctrl.transaction.formatted.asset +
' | RECIPIENT ADDRESS: ' + recipient +
' | TX FEE: ' + ctrl.transaction.formatted.fee;
}
}

TransactionMenuController.$inject = ['notificationService'];

angular
.module('app.shared')
.component('txMenu', {
controller: TransactionMenuController,
bindings: {
transaction: '<'
},
template: '<md-menu>' +
'<md-button class="md-icon-button" ng-click="$mdOpenMenu($event)">' +
'<img ng-src="img/slack_icon.svg" height="16" width="16" />' +
'</md-button>' +
'<md-menu-content width="2">' +
'<md-menu-item>' +
'<md-button ngclipboard data-clipboard-text="{{::$ctrl.transaction.sender}}" ' +
'ngclipboard-success="$ctrl.addressCopied()">' +
'<span md-menu-align-target>Copy sender address</span>' +
'</md-button>' +
'</md-menu-item>' +
'<md-menu-item>' +
'<md-button ng-disabled="!$ctrl.hasRecipient()" ngclipboard ' +
'data-clipboard-text="{{::$ctrl.transaction.recipient}}" ' +
'ngclipboard-success="$ctrl.addressCopied()">' +
'<span md-menu-align-target>Copy recipient address</span>' +
'</md-button>' +
'</md-menu-item>' +
'<md-menu-item>' +
'<md-button ngclipboard data-clipboard-text="{{::$ctrl.transaction.id}}" ' +
'ngclipboard-success="$ctrl.idCopied()">' +
'<span md-menu-align-target>Copy TX ID</span>' +
'</md-button>' +
'</md-menu-item>' +
'<md-menu-item>' +
'<md-button ngclipboard ngclipboard-text-provider="$ctrl.fullTransactionData()" ' +
'ngclipboard-success="$ctrl.dataCopied()">' +
'<span md-menu-align-target>Copy full TX data</span>' +
'</md-button>' +
'</md-menu-item>' +
'</md-menu-content>' +
'</md-menu>'
});
})();

0 comments on commit 4b1a5d2

Please sign in to comment.