fixes: layout of transactions, addresses and backups. Icon for qr-address. Hide box with shipping information

This commit is contained in:
Gustavo Maximiliano Cortez 2014-07-24 19:57:42 -03:00
parent 031a65e0e4
commit fc3d5e3157
5 changed files with 170 additions and 165 deletions

View File

@ -266,17 +266,19 @@ a:hover {
}
.last-transactions-header {
padding: 10px;
padding: 10px 0;
overflow: hidden;
}
.last-transactions-footer {
padding: 10px;
padding: 10px 0;
overflow: hidden;
}
.last-transactions-content {
background-color: #FDFCFC;
overflow: hidden;
padding: 10px;
padding: 10px 0;
}
.last-transactions-content .box-status {
@ -285,9 +287,15 @@ a:hover {
}
.last-transactions-content .box-copayer {
width: 80px;
width: 60px;
margin-right: 20px;
float: left;
text-align: center;
}
.last-transactions-content .copayer-ico {
width: 30px;
height: 30px;
}
.last-transactions-content .box-copayer .icon-inactive {
@ -629,7 +637,9 @@ input[type=number]::-webkit-outer-spin-button {
color: #B4D455;
}
.success {background-color: #1ABC9C !important;}
.success {
color: #1ABC9C;
}
.dr-notification-text {
font-size: 12px;

View File

@ -8,20 +8,25 @@
<div class="large-12 medium-12" ng-if="!!(addresses|removeEmpty).length">
<div class="large-12 medium-12" ng-init="showAll=0">
<ul>
<li class="panel radius db" ng-repeat="addr in addresses|removeEmpty|limitAddress:showAll">
<li class="panel radius oh" ng-repeat="addr in addresses|removeEmpty|limitAddress:showAll">
<span><contact address="{{addr.address}}" tooltip-popup-delay="500" tooltip tooltip-placement="right"/></span>
<small ng-if="addr.isChange">change</small>
<a href="#" ng-click="openAddressModal(addr)">Show QR</a>
<span class="right">
<div class="large-8 small-6 column">
<div class="ellipsis">
<a href="#" ng-click="openAddressModal(addr)"><i
class="fi-thumbnails">&nbsp;</i></a>
<span><contact address="{{addr.address}}" tooltip-popup-delay="500" tooltip tooltip-placement="right"/></span>
<small ng-if="addr.isChange">change</small>
</div>
</div>
<div class="large-4 small-6 column text-right">
<span ng-if="$root.updatingBalance">
<i class="fi-bitcoin-circle icon-rotate spinner"></i>
</span>
<span ng-if="!$root.updatingBalance">
{{addr.balance || 0|noFractionNumber}} {{$root.unitName}}
</span>
</span>
</div>
</li>
</ul>

View File

@ -1,15 +1,15 @@
<div class="backup" ng-controller="BackupController">
<h1>Backup & Delete </h1>
<div class="oh large-9 columns panel">
<div class="oh large-12 columns panel">
<h3><i class="fi-download m10r"></i> Backup </h3>
<p class="large-8 columns text-gray"> Its important to back up your wallet so that you can recover your wallet in case of disaster </p>
<div class="large-4 columns">
<a class="button radius primary expand" ng-click="downloadBackup()">Download File</a>
</div>
</div>
<div class="large-9 columns line-dashed-h m15b"> </div>
<div class="large-12 columns line-dashed-h m15b"> </div>
<div>
<div class="oh large-9 columns panel">
<div class="oh large-12 columns panel">
<h3><i class="fi-minus-circle m10r"></i> Delete Wallet </h3>
<p class="large-8 columns text-gray"> If all funds have been removed from your wallet and you do not wish to have the wallet data stored on your computer anymore, you can delete your wallet. </p>
<div class="large-4 columns">

View File

@ -93,7 +93,7 @@
</div>
<div class="row">
<div class="large-5 columns">
<div class="large-5 medium-3 small-4 columns">
<button type="submit" class="button primary expand text-center" ng-disabled="sendForm.$invalid || loading" loading="Sending">
Send
</button>
@ -102,7 +102,7 @@
</form>
</div>
<div class="large-6 columns">
<div class="large-6 columns show-for-large-up">
<div class="send-note">
<h6>Send to</h6>
<p class="text-gray" ng-class="{'hidden': sendForm.address.$invalid || !address}">

View File

@ -1,109 +1,107 @@
<div class="transactions" data-ng-controller="TransactionsController">
<div ng-show='$root.wallet.isReady()'>
<h1 ng-show="wallet.totalCopayers > 1"> Transaction proposals <small>({{txs.length}})</small></h1>
<div class="row">
<div class="large-12 columns" ng-show="wallet.totalCopayers > 1">
<ul class="inline-list">
<li> <a class="text-gray size-12" ng-click="show(true)" ng-disabled="loading || onlyPending" loading="Updating" ng-class="{'active' : onlyPending}"> [ Pending ] </a> </li>
<li> <a class="text-gray size-12" ng-click="show()" ng-disabled="loading || !onlyPending" loading="Updating" ng-class="{'active' : !onlyPending}"> [ All ] </a> </li>
</ul>
<div class="last-transactions" ng-repeat="tx in txs | paged">
<div class="last-transactions-header row">
<div class="large-8 medium-8 small-12 columns">
<div class="row" ng-repeat="out in tx.outs">
<div class="large-3 medium-3 small-3 columns ellipsis">
{{out.value | noFractionNumber}} {{$root.unitName}}</div>
<div class="large-1 medium-1 small-2 columns fi-arrow-right size-24"> </div>
<div class="large-8 medium-8 small-7 columns ellipsis">
<contact address="{{out.address}}" tooltip-popup-delay="500" tooltip tooltip-placement="right"/>
</div>
</div>
</div>
<div class="large-4 medium-4 small-12 columns text-right">
<h6>{{tx.createdTs | amCalendar}}</h6>
</div>
</div>
<div class="last-transactions-content">
<div class="box-note large-12" ng-show="tx.comment">
"{{tx.comment}}" - {{$root.wallet.publicKeyRing.nicknameForCopayer(tx.creator)}}
</div>
<div class="box-copayer" ng-repeat="(cId, actions) in tx.peerActions">
<a href="/transactions" class="has-tip" tooltip-popup-delay="1000" tooltip="{{cId === $root.wallet.getMyCopayerId() ? 'You' : $root.wallet.publicKeyRing.nicknameForCopayer(cId)}}">
<img class="copayer-ico br100" src="./img/satoshi.gif" alt="{{cId}}">
</a>
<div class="box-status">
<span ng-repeat="(action, ts) in actions">
<a ng-if="action == 'create'" href="/transactions" tooltip-popup-delay="1000" tooltip="Created {{ts | amTimeAgo}}">
<i class="fi-crown icon-status icon-active"></i>
</a>
<a ng-if="action == 'seen'" href="/transactions" tooltip-popup-delay="1000" tooltip="Seen {{ts | amTimeAgo}}">
<i class="fi-eye icon-status icon-active"></i>
</a>
<a ng-if="action == 'sign'" href="/transactions" tooltip-popup-delay="1000" tooltip="Signed {{ts | amTimeAgo}}">
<i class="fi-check icon-status icon-active-check"></i>
</a>
<a ng-if="action == 'rejected'" href="/transactions" tooltip-popup-delay="1000" tooltip="Rejected {{ts | amTimeAgo}}">
<i class="fi-x icon-status icon-active-x"></i>
</a>
</span>
</div>
<div class="text-center">
{{$root.wallet.publicKeyRing.nicknameForCopayer(cId)}}
<div class="large-12" ng-show="wallet.totalCopayers > 1">
<ul class="inline-list">
<li> <a class="text-gray size-12" ng-click="show(true)" ng-disabled="loading || onlyPending" loading="Updating" ng-class="{'active' : onlyPending}"> [ Pending ] </a> </li>
<li> <a class="text-gray size-12" ng-click="show()" ng-disabled="loading || !onlyPending" loading="Updating" ng-class="{'active' : !onlyPending}"> [ All ] </a> </li>
</ul>
<div class="last-transactions" ng-repeat="tx in txs | paged">
<div class="last-transactions-header">
<div class="large-8 medium-8 small-12 columns">
<div ng-repeat="out in tx.outs">
<div class="large-3 medium-3 small-3 columns">
{{out.value | noFractionNumber}} {{$root.unitName}}</div>
<div class="large-1 medium-1 small-2 columns fi-arrow-right"> </div>
<div class="large-8 medium-8 small-7 columns ellipsis">
<contact address="{{out.address}}" tooltip-popup-delay="500" tooltip tooltip-placement="right"/>
</div>
</div>
</div>
<div class="large-4 medium-4 small-12 columns text-right">
{{tx.createdTs | amCalendar}}
</div>
</div>
<div class="row last-transactions-footer">
<div class="large-5 medium-5 columns" ng-show="!tx.sentTs">
<div ng-show="!tx.signedByUs && !tx.rejectedByUs && !tx.finallyRejected && tx.missingSignatures">
<button class="secondary radius m10r" ng-click="sign(tx.ntxid)" ng-disabled="loading" loading="Signing">
<i class="fi-check"></i> Sign
</button>
<button class="warning radius" ng-click="reject(tx.ntxid)" ng-disabled="loading" loading="Rejecting">
<i class="fi-x" ></i> Reject
</button>
</div>
<div ng-show="!tx.missingSignatures && !tx.sentTs">
<button class="primary radius" ng-click="send(tx.ntxid)" ng-disabled="loading" loading="Broadcasting"> <i class=".fi-upload-cloud"></i>
Broadcast Transaction
</button>
</div>
<div class="last-transactions-content">
<div class="box-note large-12" ng-show="tx.comment">
"{{tx.comment}}" - {{$root.wallet.publicKeyRing.nicknameForCopayer(tx.creator)}}
</div>
<div class="box-copayer" ng-repeat="(cId, actions) in tx.peerActions">
<a href="/transactions" class="has-tip" tooltip-popup-delay="1000" tooltip="{{cId === $root.wallet.getMyCopayerId() ? 'You' : $root.wallet.publicKeyRing.nicknameForCopayer(cId)}}">
<img class="copayer-ico br100" src="./img/satoshi.gif" alt="{{cId}}">
</a>
<div class="box-status">
<span ng-repeat="(action, ts) in actions">
<a ng-if="action == 'create'" href="/transactions" tooltip-popup-delay="1000" tooltip="Created {{ts | amTimeAgo}}">
<i class="fi-crown icon-status icon-active"></i>
</a>
<a ng-if="action == 'seen'" href="/transactions" tooltip-popup-delay="1000" tooltip="Seen {{ts | amTimeAgo}}">
<i class="fi-eye icon-status icon-active"></i>
</a>
<a ng-if="action == 'sign'" href="/transactions" tooltip-popup-delay="1000" tooltip="Signed {{ts | amTimeAgo}}">
<i class="fi-check icon-status icon-active-check"></i>
</a>
<a ng-if="action == 'rejected'" href="/transactions" tooltip-popup-delay="1000" tooltip="Rejected {{ts | amTimeAgo}}">
<i class="fi-x icon-status icon-active-x"></i>
</a>
</span>
</div>
<div class="large-7 medium-7 columns text-right">
<div ng-show="tx.finallyRejected" class="text-warning m10b">
Transaction finally rejected
</div>
<div ng-show="!tx.missingSignatures && tx.sentTs">
<div class="success m10b">
<strong>Sent</strong> <span class="text-gray" am-time-ago="tx.sentTs"></span>
</div>
<div class="ellipsis small">
Transaction ID:
<a href="http://{{getShortNetworkName()}}.insight.is/tx/{{tx.sentTxid}}" target="blank">
{{tx.sentTxid}}
</a>
</div>
</div>
<p class="text-gray m5b" ng-show="!tx.finallyRejected && tx.missingSignatures==1">
One signature missing
</p>
<p class="text-gray m5b" ng-show="!tx.finallyRejected && tx.missingSignatures>1">
{{tx.missingSignatures}} signatures missing</p>
<div class="ellipsis small text-gray">
<strong>Fee:</strong> {{tx.fee|noFractionNumber}} {{$root.unitName}}
<strong>Proposal ID:</strong> {{tx.ntxid}}
</div>
<div class="text-center">
{{$root.wallet.publicKeyRing.nicknameForCopayer(cId)}}
</div>
</div>
</div>
<div class="last-transactions-footer">
<div class="large-5 medium-5 columns" ng-show="!tx.sentTs">
<div ng-show="!tx.signedByUs && !tx.rejectedByUs && !tx.finallyRejected && tx.missingSignatures">
<button class="secondary radius m10r" ng-click="sign(tx.ntxid)" ng-disabled="loading" loading="Signing">
<i class="fi-check"></i> Sign
</button>
<button class="warning radius" ng-click="reject(tx.ntxid)" ng-disabled="loading" loading="Rejecting">
<i class="fi-x" ></i> Reject
</button>
</div>
<div ng-show="!tx.missingSignatures && !tx.sentTs">
<button class="primary radius" ng-click="send(tx.ntxid)" ng-disabled="loading" loading="Broadcasting"> <i class=".fi-upload-cloud"></i>
Broadcast Transaction
</button>
</div>
</div>
<div class="large-7 medium-7 columns text-right">
<div ng-show="tx.finallyRejected" class="text-warning m10b">
Transaction finally rejected
</div>
<div ng-show="!tx.missingSignatures && tx.sentTs">
<div class="success m10b">
<strong>Sent</strong> <span class="text-gray" am-time-ago="tx.sentTs"></span>
</div>
<div class="ellipsis small">
Transaction ID:
<a href="http://{{getShortNetworkName()}}.insight.is/tx/{{tx.sentTxid}}" target="blank">
{{tx.sentTxid}}
</a>
</div>
</div>
<p class="text-gray m5b" ng-show="!tx.finallyRejected && tx.missingSignatures==1">
One signature missing
</p>
<p class="text-gray m5b" ng-show="!tx.finallyRejected && tx.missingSignatures>1">
{{tx.missingSignatures}} signatures missing</p>
<div class="ellipsis small text-gray">
<strong>Fee:</strong> {{tx.fee|noFractionNumber}} {{$root.unitName}}
<strong>Proposal ID:</strong> {{tx.ntxid}}
</div>
</div>
</div>
<p ng-show="onlyPending && txs.length == 0">No pending transactions proposals.</p>
<p ng-show="!onlyPending && txs.length == 0">No transactions proposals yet.</p>
<pagination ng-show="!onlyPending && txs.length > txpItemsPerPage" total-items="txs.length" items-per-page="txpItemsPerPage" page="txpCurrentPage" on-select-page="show()" class="pagination-small primary"></pagination>
</div>
<p ng-show="onlyPending && txs.length == 0">No pending transactions proposals.</p>
<p ng-show="!onlyPending && txs.length == 0">No transactions proposals yet.</p>
<pagination ng-show="!onlyPending && txs.length > txpItemsPerPage" total-items="txs.length" items-per-page="txpItemsPerPage" page="txpCurrentPage" on-select-page="show()" class="pagination-small primary"></pagination>
</div>
<h1 ng-class="{'line-dashed': wallet.totalCopayers > 1}">
@ -113,68 +111,60 @@
</small>
</h1>
<div class="row">
<div class="large-12 columns">
<div class="m10b size-12" ng-hide="wallet.totalCopayers == 1">
<a class="text-gray active" ng-click="toogleLast()" ng-disabled="loading" loading="Loading" ng-hide="lastShowed && !loading">[ Show ]</a>
<a class="text-gray" ng-click="toogleLast()" ng-disabled="loading" loading="Loading" ng-show="lastShowed && !loading">[ Hide ]</a>
</div>
<div class="large-12">
<div class="m10b size-12" ng-hide="wallet.totalCopayers == 1">
<a class="text-gray active" ng-click="toogleLast()" ng-disabled="loading" loading="Loading" ng-hide="lastShowed && !loading">[ Show ]</a>
<a class="text-gray" ng-click="toogleLast()" ng-disabled="loading" loading="Loading" ng-show="lastShowed && !loading">[ Hide ]</a>
</div>
<div class="btransactions" ng-if="lastShowed">
<div ng-if="!blockchain_txs[0].txid && !loading">
No transactions yet.
<div class="btransactions" ng-if="lastShowed">
<div ng-if="!blockchain_txs[0].txid && !loading">
No transactions yet.
</div>
<div class="last-transactions" ng-repeat="btx in blockchain_txs | orderBy: 'time':true">
<div class="last-transactions-header">
<div class="large-8 columns">
<a class="ellipsis" href="http://{{getShortNetworkName()}}.insight.is/tx/{{btx.txid}}" target="blank">
{{btx.txid}}
</a>
</div>
<div class="large-4 columns text-right">
<div data-ng-show="btx.firstSeenTs">
first seen at
<time>{{btx.firstSeenTs * 1000 | amCalendar}}</time>
</div>
<div data-ng-show="btx.time && !btx.firstSeenTs">
mined at
<time>{{btx.time * 1000 | amCalendar}}</time>
</div>
</div>
</div>
<div class="last-transactions" ng-repeat="btx in blockchain_txs | orderBy: 'time':true">
<div class="last-transactions-header">
<div class="row">
<div class="large-8 columns">
<a class="ellipsis" href="http://{{getShortNetworkName()}}.insight.is/tx/{{btx.txid}}" target="blank">
{{btx.txid}}
</a>
</div>
<div class="large-4 columns text-right">
<div data-ng-show="btx.firstSeenTs">
first seen at
<time>{{btx.firstSeenTs * 1000 | amCalendar}}</time>
</div>
<div data-ng-show="btx.time && !btx.firstSeenTs">
mined at
<time>{{btx.time * 1000 | amCalendar}}</time>
</div>
</div>
<div class="last-transactions-content">
<div class="large-5 medium-5 small-5 columns">
<div ng-repeat="vin in btx.vinSimple">
<small class="right m5t">{{vin.value| noFractionNumber}} {{$root.unitName}}</small>
<p class="ellipsis text-gray size-12">
<contact address="{{vin.addr}}" tooltip-popup-delay="500" tooltip tooltip-placement="right"/>
</p>
</div>
</div>
<div class="last-transactions-content">
<div class="row">
<div class="large-5 medium-5 small-5 columns">
<div ng-repeat="vin in btx.vinSimple">
<small class="right m5t">{{vin.value| noFractionNumber}} {{$root.unitName}}</small>
<p class="ellipsis text-gray size-12">
<contact address="{{vin.addr}}" tooltip-popup-delay="500" tooltip tooltip-placement="right"/>
</p>
</div>
</div>
<div class="large-1 medium-1 small-1 columns text-center">
<i class="fi-arrow-right"></i>
</div>
<div class="large-6 medium-6 small-6 columns">
<div ng-repeat="vout in btx.voutSimple">
<small class="right m5t">{{vout.value| noFractionNumber}} {{$root.unitName}}</small>
<p class="ellipsis text-gray size-12">
<contact address="{{vout.addr}}" tooltip-popup-delay="500" tooltip tooltip-placement="right"/>
</p>
</div>
</div>
</div>
</div>
<div class="last-transactions-footer">
<div class="row">
<div class="large-4 medium-4 small-4 columns">Fees: {{btx.fees | noFractionNumber}} {{$root.unitName}}</div>
<div class="large-4 medium-4 small-4 columns text-center">Confirmations: {{btx.confirmations || 0}}</div>
<div class="large-4 medium-4 small-4 columns text-right">Total: {{btx.valueOut| noFractionNumber}} {{$root.unitName}}</div>
<div class="large-1 medium-1 small-1 columns text-center">
<i class="fi-arrow-right"></i>
</div>
<div class="large-6 medium-6 small-6 columns">
<div ng-repeat="vout in btx.voutSimple">
<small class="right m5t">{{vout.value| noFractionNumber}} {{$root.unitName}}</small>
<p class="ellipsis text-gray size-12">
<contact address="{{vout.addr}}" tooltip-popup-delay="500" tooltip tooltip-placement="right"/>
</p>
</div>
</div>
</div>
<div class="last-transactions-footer">
<div class="large-4 medium-4 small-4 columns">Fees: {{btx.fees | noFractionNumber}} {{$root.unitName}}</div>
<div class="large-4 medium-4 small-4 columns text-center">Confirmations: {{btx.confirmations || 0}}</div>
<div class="large-4 medium-4 small-4 columns text-right">Total: {{btx.valueOut| noFractionNumber}} {{$root.unitName}}</div>
</div>
</div>
</div>
</div>