BTCPrivate
/
copay
mirror of https://github.com/BTCPrivate/copay.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

improve tx proposal list item styling

This commit is contained in:
Marty Alcala 2016-11-03 17:29:29 -04:00
parent b0e23b7231
commit 073b063a48
6 changed files with 105 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/js/controllers/walletDetails.js
View File

@ -172,9 +172,9 @@ angular.module('copayApp.controllers').controller('walletDetailsController', fun
return getMonthYear(date1) === getMonthYear(date2);
}
$scope.createdWithinPastDay = function(tx) {
$scope.createdWithinPastDay = function(time) {
var now = new Date();
var date = new Date(tx.time * 1000);
var date = new Date(time * 1000);
return (now.getTime() - date.getTime()) < (1000 * 60 * 60 * 24);
};
@ -187,6 +187,10 @@ angular.module('copayApp.controllers').controller('walletDetailsController', fun
return date.getMonth() + date.getFullYear();
}
$scope.isUnconfirmed = function(tx) {
return !tx.time && (!tx.confirmations || tx.confirmations === 0);
};
$scope.showMore = function() {
$timeout(function() {
currentTxHistoryPage++;

8
src/sass/views/walletDetails.scss
View File

@ -39,6 +39,14 @@
align-items: center;
background: #fff;
padding-left: 1rem;
&__marker {
position: absolute;
height: 100%;
width: 3px;
background: #F5A623;
left: 0;
}
}
&__tx-content {

23
www/img/icon-proposal-pending.svg Normal file
View File

@ -0,0 +1,23 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="33px" height="33px" viewBox="0 0 33 33" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 40.1 (33804) - http://www.bohemiancoding.com/sketch -->
<title>Group</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Icons/Transaction/Pending" transform="translate(-8.000000, -8.000000)">
<g id="Icons/Send">
<g id="icons/received">
<g id="users-24px-outline-2_a-check" transform="translate(8.000000, 8.000000)">
<g id="Group">
<path d="M16.5,33 C25.6126984,33 33,25.6126984 33,16.5 C33,7.38730163 25.6126984,0 16.5,0 C7.38730163,0 0,7.38730163 0,16.5 C0,25.6126984 7.38730163,33 16.5,33 Z" id="Oval-204" fill="#FFF6EF"></path>
<path d="M15.7275949,17.3034598 C13.3028473,17.3034598 11.1520001,17.8512604 9.73870884,18.3277955 C8.69548354,18.680689 8,19.6638107 8,20.7654223 L8,24.172433 L14.8689732,24.172433" id="Shape" stroke="#F6A623"></path>
<path d="M15.7275949,17.3034598 L15.7275949,17.3034598 C13.3569405,17.3034598 11.4344866,14.5223843 11.4344866,12.1517299 L11.4344866,11.2931083 C11.4344866,8.92245388 13.3569405,7 15.7275949,7 L15.7275949,7 C18.0982492,7 20.0207031,8.92245388 20.0207031,11.2931083 L20.0207031,12.1517299 C20.0207031,14.5223843 18.0982492,17.3034598 15.7275949,17.3034598 L15.7275949,17.3034598 Z" id="Shape" stroke="#F6A623"></path>
<polyline id="Shape" stroke="#F6A623" points="19.1620815 23.3138114 20.8793248 25.0310547 25.172433 20.7379464"></polyline>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

54
www/views/includes/txp.html
View File

@ -1,4 +1,4 @@
<!--
<div class="wallet-activity" ng-class="{'wallet-activity-not-pending':!tx.pendingForUs}">
<div class="wallet-activity-amount">
{{tx.amountStr}}
@ -24,4 +24,54 @@
<span class="wallet-activity-note-child">{{tx.wallet.name}}</span>
<time class="wallet-activity-note-child">{{tx.createdOn * 1000 | amTimeAgo}}</time>
</p>
</div>
</div> -->
<div class="wallet-details__item__marker"></div>
<img class="wallet-details__tx-icon" src="img/icon-proposal-pending.svg" width="40">
<div class="wallet-details__tx-content">
<div class="wallet-details__tx-title">
<span ng-show="!tx.merchant">
<span ng-show="addressbook[tx.toAddress] && !tx.message">
{{addressbook[tx.toAddress].name || addressbook[tx.toAddress]}}
</span>
<span class="ellipsis" ng-show="!addressbook[tx.toAddress] && tx.message">
{{tx.message}}
</span>
<span ng-show="!addressbook[tx.toAddress] && !tx.message" translate>
Sending
</span>
</span>
<span ng-show="tx.merchant">
<span ng-show="tx.merchant.pr.ca"><i class="fi-lock"></i> {{tx.merchant.domain}}</span>
<span ng-show="!tx.merchant.pr.ca"><i class="fi-unlock"></i> {{tx.merchant.domain}}</span>
</span>
</div>
<div class="wallet-details__tx-title" ng-if="tx.confirmations === 0">
<div class="ellipsis" style="color: #B4B4B4;">
Confirming
</div>
</div>
<span class="item-note text-right wallet-details__tx-amount">
<span class="wallet-details__tx-amount" ng-class="{'wallet-details__tx-amount--recent': tx.recent, 'wallet-details__tx-amount--received': tx.action == 'received', 'wallet-details__tx-amount--sent': tx.action == 'sent'}">
<span ng-if="tx.action == 'sent'">–</span>
<span class="size-12" ng-if="tx.action == 'invalid'" translate>
(possible double spend)
</span>
<span ng-if="tx.action != 'invalid'">
{{tx.amountStr}}
</span>
</span>
<div>
<time class="wallet-details__tx-time" ng-if="tx.createdOn && createdWithinPastDay(tx.createdOn)">{{tx.createdOn * 1000 | amTimeAgo}}</time>
<time class="wallet-details__tx-time" ng-if="tx.createdOn && !createdWithinPastDay(tx.createdOn)">{{tx.createdOn * 1000 | date:'MMMM d, y'}}</time>
<!-- <span translate class="text-warning"
ng-show="!tx.time && (!tx.confirmations || tx.confirmations == 0)">
Unconfirmed
</span> -->
</div>
</span>
</div>

8
www/views/tab-home.html
View File

@ -37,9 +37,13 @@
<span class="badge badge-assertive m5t m10r" ng-show="txpsN>3"> {{txpsN}}</span>
</a>
<a ng-repeat="tx in txps" class="item item-sub" ng-click="openTxpModal(tx)">
<!-- <a ng-repeat="tx in txps" class="item item-sub" ng-click="openTxpModal(tx)">
<span ng-include="'views/includes/txp.html'"></span>
</a>
</a> -->
<div ng-repeat="tx in txps" ng-click="openTxpModal(tx)">
<div class="wallet-details__item" ng-include="'views/includes/txp.html'"></div>
</div>
</div>
<div class="list card" ng-if="notifications[0] && recentTransactionsEnabled">

20
www/views/walletDetails.html
View File

@ -96,8 +96,8 @@
<span ng-show="requiresMultipleSignatures" translate>Payment Proposals</span>
<span ng-show="!requiresMultipleSignatures" translate>Unsent transactions</span>
</div>
<div ng-repeat="tx in txps" class="item item-icon-left" ng-click="openTxpModal(tx)">
<span ng-include="'views/includes/txp.html'"></span>
<div ng-repeat="tx in txps" ng-click="openTxpModal(tx)">
<div class="wallet-details__item" ng-include="'views/includes/txp.html'"></div>
</div>
<div class="item item-footer description" ng-show="status.lockedBalanceSat">
<span translate>Total Locked Balance</span>:
@ -186,8 +186,8 @@
</div>
<div class="wallet-details__item">
<img class="wallet-details__tx-icon" src="img/icon-confirming.svg" width="40" ng-if="btx.confirmations === 0">
<span ng-if="btx.confirmations > 0">
<img class="wallet-details__tx-icon" src="img/icon-confirming.svg" width="40" ng-if="isUnconfirmed(btx)">
<span ng-if="!isUnconfirmed(btx)">
<img class="wallet-details__tx-icon" src="img/icon-tx-received.svg" width="40" ng-if="btx.action == 'received'">
<img class="wallet-details__tx-icon" src="img/icon-tx-sent.svg" width="40" ng-if="btx.action == 'sent'">
<img class="wallet-details__tx-icon" src="img/icon-tx-moved.svg" width="40" ng-if="btx.action == 'moved'">
@ -195,7 +195,7 @@
<div class="wallet-details__tx-content">
<div class="wallet-details__tx-title" ng-if="btx.confirmations > 0">
<div class="wallet-details__tx-title" ng-if="!isUnconfirmed(btx)">
<div ng-show="btx.action == 'received'" class="ellipsis">
<div ng-if="btx.note.body">{{btx.note.body}}</div>
<div ng-if="!btx.note.body" translate> Received</div>
@ -217,7 +217,7 @@
<span class="label tu warning radius" ng-if="btx.action == 'invalid'" translate>Invalid</span>
</div>
<div class="wallet-details__tx-title" ng-if="btx.confirmations === 0">
<div class="wallet-details__tx-title" ng-if="isUnconfirmed(btx)">
<div class="ellipsis" style="color: #B4B4B4;">
Confirming
</div>
@ -234,13 +234,13 @@
</span>
</span>
<div>
<time class="wallet-details__tx-time" ng-if="btx.time && createdWithinPastDay(btx)">{{btx.time * 1000 | amTimeAgo}}</time>
<time class="wallet-details__tx-time" ng-if="btx.time && !createdWithinPastDay(btx)">{{btx.time * 1000 | date:'MMMM d, y'}}</time>
<time class="wallet-details__tx-time" ng-if="btx.time && createdWithinPastDay(btx.time)">{{btx.time * 1000 | amTimeAgo}}</time>
<time class="wallet-details__tx-time" ng-if="btx.time && !createdWithinPastDay(btx.time)">{{btx.time * 1000 | date:'MMMM d, y'}}</time>
<span translate class="text-warning"
<!-- <span translate class="text-warning"
ng-show="!btx.time && (!btx.confirmations || btx.confirmations == 0)">
Unconfirmed
</span>
</span> -->
</div>
</span>
</div>