improve tx proposal list item styling

This commit is contained in:
Marty Alcala 2016-11-03 17:29:29 -04:00
commit 073b063a48
6 changed files with 105 additions and 16 deletions

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>

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">

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>