anders/Wallet
1
0
Fork 0
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #1719 from cmgustavo/bug/05-ui

Browse source 
Bug/05 ui
This commit is contained in:
Matias Alejo Garcia 2014-11-04 16:44:14 -03:00
commit 80a26411a7
6 changed files with 307 additions and 354 deletions
Download patch file Download diff file Expand all files Collapse all files

26
css/src/main.css
View file

@ -218,7 +218,7 @@ header .alt-currency {
width: 30px; width: 30px;
float: right; float: right;
background-color: #23C9A9; background-color: #23C9A9;
padding: 22px 6px; padding: 16px 6px;
color: #B6E9DF; color: #B6E9DF;
} }
@ -401,7 +401,7 @@ table.last-transactions-content {
padding: 0; padding: 0;
border: 0; border: 0;
background-color: #F8F8FB; background-color: #F8F8FB;
margin: 15px 0; margin: 10px 0;
} }
.last-transactions-content .box-status { .last-transactions-content .box-status {
@ -438,9 +438,8 @@ table.last-transactions-content {
.private-message { .private-message {
margin-bottom: 10px; margin-bottom: 10px;
padding-bottom: 5px; padding-bottom: 10px;
border-bottom: 1px solid #fff; border-bottom: 1px solid #fff;
line-height: 20px;
} }
.header-message { .header-message {
@ -466,19 +465,18 @@ table.last-transactions-content {
} }
.send-note { .send-note {
font-style: italic;
color: gray;
background-color: #EDEDF5; background-color: #EDEDF5;
padding: 1.5rem; padding: 10px;
width: 400px; margin-bottom: 10px;
} }
.box-note { .send-note p {
text-align: center; margin-bottom: 5px;
clear: both; font-size: 12px;
font-style: italic; }
color: gray;
margin-bottom: 10px; .send-note b {
color: #000;
} }
a.button-setup.add-wallet { a.button-setup.add-wallet {

1
css/src/style.css
View file

@ -17,6 +17,7 @@
font-variant: normal; font-variant: normal;
text-transform: none; text-transform: none;
line-height: 1; line-height: 1;
vertical-align: middle;
/* Better Font Rendering =========== */ /* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;

4
views/history.html
View file

@ -10,7 +10,7 @@
<div <div
class="row" class="row"
ng-if="blockchain_txs[0].txid"> ng-if="blockchain_txs[0].txid">
<div class="large-12 colums"> <div class="large-12 columns">
<div class="panel oh" <div class="panel oh"
ng-repeat="btx in blockchain_txs | orderBy: 'time':true" ng-click="btx.showDetails = !btx.showDetails"> ng-repeat="btx in blockchain_txs | orderBy: 'time':true" ng-click="btx.showDetails = !btx.showDetails">
@ -49,7 +49,7 @@
<div class="large-1 columns show-for-large-up text-gray text-right" ng-init="btx.showDetails = false"> <div class="large-1 columns show-for-large-up text-gray text-right" ng-init="btx.showDetails = false">
<a> <a>
<i ng-if="!btx.showDetails" class="icon-arrow-down4"></i> <i ng-if="!btx.showDetails" class="icon-arrow-down4"></i>
<i ng-if="btx.showDetails" class="icon-arrow-up4 size-12"></i> <i ng-if="btx.showDetails" class="icon-arrow-up4"></i>
</a> </a>
</div> </div>

82
views/includes/transaction.html
View file

@ -1,4 +1,4 @@
<div class="show-for-small-only header-message"> <div class="header-message">
<span class="date-message">{{tx.createdTs | amCalendar}}</span> <span class="date-message">{{tx.createdTs | amCalendar}}</span>
</div> </div>
<div class="last-transactions-header" ng-init="txIndex = $index"> <div class="last-transactions-header" ng-init="txIndex = $index">
@ -6,39 +6,19 @@
<i class="fi-comment-quotes"></i> <i class="fi-comment-quotes"></i>
<span class="text-light">{{tx.comment}}</span> <span class="text-light">{{tx.comment}}</span>
</div> </div>
<div class="row collapse"> <div class="row" ng-repeat="out in tx.outs">
<div class="large-9 medium-8 small-12 columns"> <div class="large-3 medium-3 small-4 columns">
<div class="row collapse" ng-repeat="out in tx.outs"> <div class="size-12">
<div class="large-3 medium-3 small-4 columns"> <span>{{out.value |noFractionNumber}} {{$root.wallet.settings.unitName}}</span>
<div class="size-14 hide-for-small-only">
<span
ng-class="{'has-tip': alternativeCurrency[txIndex]}"
ng-init="amountAlternative(out.value, txIndex)"
data-options="disable_for_touch:true"
tooltip-popup-delay='500'
tooltip="{{alternativeCurrency[txIndex]|noFractionNumber}} {{alternativeIsoCode}}"
tooltip-trigger="mouseenter"
tooltip-placement="right"
>{{out.value |noFractionNumber}}
{{$root.wallet.settings.unitName}}</span>
</div>
<div class="size-12 show-for-small-only">
<span>{{out.value |noFractionNumber}} {{$root.wallet.settings.unitName}}</span>
</div>
</div>
<div class="large-1 medium-1 small-1 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> </div>
<div class="large-1 medium-1 small-1 columns fi-arrow-right"></div>
<div class="large-3 medium-4 columns text-right hide-for-small-only"> <div class="large-8 medium-8 small-7 columns ellipsis">
<span class="size-12">{{tx.createdTs | amCalendar}}</span> <contact address="{{out.address}}" tooltip-popup-delay="500" tooltip tooltip-placement="right" />
</div> </div>
</div> </div>
</div> </div>
<table class="last-transactions-content show-for-small-only"> <table class="last-transactions-content">
<tbody> <tbody>
<tr ng-repeat="c in tx.actionList"> <tr ng-repeat="c in tx.actionList">
<td class="copayer-name" width="100%">{{c.cId === $root.wallet.getMyCopayerId() ? 'Me' : $root.wallet.publicKeyRing.nicknameForCopayer(c.cId)}} <td class="copayer-name" width="100%">{{c.cId === $root.wallet.getMyCopayerId() ? 'Me' : $root.wallet.publicKeyRing.nicknameForCopayer(c.cId)}}
@ -59,64 +39,30 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
<div class="last-transactions-content show-for-medium-up">
<div class="box-copayer" ng-repeat="c in tx.actionList">
<a class="has-tip">
<img class="copayer-ico br100" src="./img/satoshi.gif" alt="{{c.cId}}">
</a>
<div class="box-status">
<a ng-if="c.actions.create" tooltip-popup-delay="1000" tooltip="Created {{c.actions.create | amTimeAgo}}">
<i class="fi-crown icon-status icon-active"></i>
</a>
<a ng-if="!c.actions.create"><i class="fi-crown icon-status"></i></a>
<a ng-if="c.actions.seen" tooltip-popup-delay="1000" tooltip="Seen {{c.actions.seen | amTimeAgo}}">
<i class="fi-eye icon-status icon-active"></i>
</a>
<a ng-if="!c.actions.seen"><i class="fi-eye icon-status"></i></a>
<a ng-if="c.actions.rejected" tooltip-popup-delay="1000" tooltip="Rejected {{c.actions.rejected | amTimeAgo}}">
<i class="fi-x icon-status icon-active-x"></i>
</a>
<a ng-if="c.actions.sign" tooltip-popup-delay="1000" tooltip="Signed {{c.actions.sign | amTimeAgo}}">
<i class="fi-check icon-status icon-active-check"></i>
</a>
<a ng-if="!c.actions.sign && !c.actions.rejected && tx.missingSignatures" class="icon-status">
<i class="fi-loop icon-rotate"></i>
</a>
</div>
<div class="text-center m5t size-12 text-gray ellipsis">
{{c.cId === $root.wallet.getMyCopayerId() ? 'Me' : $root.wallet.publicKeyRing.nicknameForCopayer(c.cId)}}
</div>
</div>
</div>
<div class="last-transactions-footer"> <div class="last-transactions-footer">
<div class="row collapse"> <div class="row collapse">
<div class="large-5 medium-7 small-12 columns" ng-show="!tx.sentTs"> <div class="large-5 medium-7 small-12 columns" ng-show="!tx.sentTs">
<div ng-show="!tx.signedByUs && !tx.rejectedByUs && !tx.finallyRejected && tx.missingSignatures"> <div ng-show="!tx.signedByUs && !tx.rejectedByUs && !tx.finallyRejected && tx.missingSignatures">
<div class="hide-for-small-only"> <div class="hide-for-small-only">
<button class="primary m15r" ng-click="sign(tx.ntxid)" ng-disabled="loading"> <button class="primary tiny m0 m15r" ng-click="sign(tx.ntxid)" ng-disabled="loading">
<i class="fi-check"></i> <span translate>Sign</span> <i class="fi-check"></i> <span translate>Sign</span>
</button> </button>
<button class="warning" ng-click="reject(tx.ntxid)" ng-disabled="loading"> <button class="warning tiny m0" ng-click="reject(tx.ntxid)" ng-disabled="loading">
<i class="fi-x" ></i> <span translate>Reject</span> <i class="fi-x" ></i> <span translate>Reject</span>
</button> </button>
</div> </div>
<div class="show-for-small-only row"> <div class="show-for-small-only row">
<button class="primary small-5 columns m10b" ng-click="sign(tx.ntxid)" ng-disabled="loading"> <button class="primary tiny small-5 columns m10b" ng-click="sign(tx.ntxid)" ng-disabled="loading">
<i class="fi-check"></i> <span translate>Sign</span> <i class="fi-check"></i> <span translate>Sign</span>
</button> </button>
<button class="warning small-5 columns m10b" ng-click="reject(tx.ntxid)" ng-disabled="loading"> <button class="warning tiny small-5 columns m10b" ng-click="reject(tx.ntxid)" ng-disabled="loading">
<i class="fi-x" ></i> <span translate>Reject</span> <i class="fi-x" ></i> <span translate>Reject</span>
</button> </button>
</div> </div>
</div> </div>
<div ng-show="!tx.missingSignatures && !tx.sentTs"> <div ng-show="!tx.missingSignatures && !tx.sentTs">
<button class="primary" ng-click="send(tx.ntxid)" ng-disabled="loading"> <i class=".fi-upload-cloud"></i> <button class="primary tiny m0" ng-click="send(tx.ntxid)" ng-disabled="loading"> <i class=".fi-upload-cloud"></i>
<span translate>Broadcast Transaction</span> <span translate>Broadcast Transaction</span>
</button> </button>
</div> </div>

195
views/more.html
View file

@ -1,120 +1,133 @@
<div class="backup" ng-controller="MoreController"> <div class="backup" ng-controller="MoreController">
<h1 class="hide-for-large-up">{{$root.title}} </h1> <h1 class="hide-for-large-up">{{$root.title}} </h1>
<div class="row collapse"> <div class="row">
<form name="settingsForm" class="large-6 small-12 columns"> <form name="settingsForm">
<fieldset> <div class="large-6 medium-6 columns">
<legend translate>Wallet Unit</legend> <fieldset>
<select class="form-control" ng-model="selectedUnit" ng-options="o.name for o in unitOpts" ng-change="save()"> <legend translate>Wallet Unit</legend>
</select> <select class="form-control" ng-model="selectedUnit" ng-options="o.name for o in unitOpts" ng-change="save()">
</fieldset> </select>
<fieldset> </fieldset>
<legend translate>Alternative Currency</legend> </div>
<select class="form-control" ng-model="selectedAlternative" ng-options="alternative.name for alternative in alternativeOpts" ng-change="save()"> <div class="large-6 medium-6 columns">
</select> <fieldset>
</fieldset> <legend translate>Alternative Currency</legend>
<select class="form-control" ng-model="selectedAlternative" ng-options="alternative.name for alternative in alternativeOpts" ng-change="save()">
</select>
</fieldset>
</div>
</form> </form>
</div> </div>
<div class="large-12 columns line-dashed-h m15b"></div>
<div class="large-6 columns panel"> <div class="line-dashed-h m20b"></div>
<h2><i class="fi-download m10r"></i> <span translate>Backup</span> </h2>
<p translate class="text-gray"> <div class="row">
It's important to backup your wallet so that you can recover it in case of disaster <div class="large-6 columns">
</p> <div class="panel">
<a translate class="button primary m0" ng-click="downloadBackup()" <h2><i class="fi-download m10r"></i> <span translate>Backup</span></h2>
ng-show="!isSafari">Download File</a> <p translate class="text-gray">
<a translate class="button primary m0" ng-click="viewBackup()" It's important to backup your wallet so that you can recover it in case of disaster
ng-show="isSafari && !hideViewBackup">View Backup</a> </p>
<div ng-show="backupPlainText"> <a translate class="button primary m0" ng-click="downloadBackup()"
<div class="show-for-large-up"> ng-show="!isSafari">Download File</a>
<textarea readonly rows="5">{{backupPlainText}}</textarea> <a translate class="button primary m0" ng-click="viewBackup()"
<span translate class="size-12">Copy to clipboard</span> <span class="btn-copy" clip-copy="backupPlainText"> </span> ng-show="isSafari && !hideViewBackup">View Backup</a>
<div ng-show="backupPlainText">
<div class="show-for-large-up">
<textarea readonly rows="5">{{backupPlainText}}</textarea>
<span translate class="size-12">Copy to clipboard</span> <span class="btn-copy" clip-copy="backupPlainText"> </span>
</div>
<div class="hide-for-large-up">
<textarea rows="10">{{backupPlainText}}</textarea>
</div>
<div translate class="m10t size-12 text-gray text-right">Copy this text as it is in a safe place (notepad or email)</div>
</div>
</div> </div>
<div class="hide-for-large-up">
<textarea rows="10">{{backupPlainText}}</textarea>
</div>
<div translate class="m10t size-12 text-gray text-right">Copy this text as it is in a safe place (notepad or email)</div>
</div> </div>
</div> <div class="large-6 columns">
<div class="large-6 columns"> <div class="panel">
<div class="panel oh"> <h2><i class="fi-minus-circle m10r"></i> <span translate>Delete Wallet</span></h2>
<h3><i class="fi-minus-circle m10r"></i> <span translate> Delete Wallet </span></h3> <p translate class="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>
<p translate 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> <a translate class="button warning m0" ng-really-message="{{'Are you sure to delete this wallet from this computer?'|translate}}" ng-really-click="deleteWallet()"> Delete</a>
<div class="large-4 columns">
<a translate class="button warning expand" ng-really-message="{{'Are you sure to delete this wallet from this computer?'|translate}}" ng-really-click="deleteWallet()"> Delete</a>
</div> </div>
</div> </div>
</div> </div>
<a class="large-12 columns small" ng-click="hideAdv=!hideAdv">
<div class="line-dashed-h m20b"></div>
<div class="m20b">
<a class="size-12" ng-click="hideAdv=!hideAdv">
<i class="fi-widget m3r"></i> <i class="fi-widget m3r"></i>
<span translate ng-hide="!hideAdv">Show</span> <span translate ng-hide="!hideAdv">Show</span>
<span translate ng-hide="hideAdv">Hide</span> <span translate ng-hide="hideAdv">Hide</span>
<span translate>advanced options</span> <span translate>advanced options</span>
<i ng-if="hideAdv" class="icon-arrow-down4"></i>
<i ng-if="!hideAdv" class="icon-arrow-up4"></i>
</a> </a>
</div>
<div ng-hide="hideAdv" class="row">
<div ng-hide="hideAdv" class="m10t"> <div class="large-12 columns">
<div class="oh large-12 columns panel"> <div class="panel">
<h3><i class="fi-minus-circle m10r"></i> <h2><i class="fi-minus-circle m10r"></i>
<span translate>Master Private Key</span> </h3> <span translate>Master Private Key</span> </h2>
<p translate class="large-8 columns text-gray"> <p translate class="text-gray">
Your master private key contains the information to sign <b>any</b> transaction on this wallet. Handle with care. Your master private key contains the information to sign <b>any</b> transaction on this wallet. Handle with care.
</p> </p>
<div class="large-4 columns"> <a class="button primary m0" ng-click="hidePriv=!hidePriv">
<a class="button primary expand" ng-click="hidePriv=!hidePriv"> <span translate ng-hide="!hidePriv">Show</span>
<span translate ng-hide="!hidePriv">Show</span> <span translate ng-hide="hidePriv">Hide</span>
<span translate ng-hide="hidePriv">Hide</span> </a>
</a> <textarea class="m10t" ng-hide="hidePriv">{{priv}}</textarea>
</div>
<textarea ng-hide="hidePriv" readonly>{{priv}}</textarea>
</div> </div>
<div class="oh large-12 columns panel">
<h3><i class="fi-minus-circle m10r"></i> <span translate>Scan Wallet Addresses</span> </h3>
<p translate class="large-8 columns text-gray">
This will scan the blockchain looking for addresses derived from your wallet, in case you have funds in addresses not yet generated (e.g.: you restored an old backup). This will also trigger a synchronization of addresses to other connected peers.
</p>
<div class="large-4 columns">
<a translate class="button primary expand" ng-click="updateIndexes()">
Scan
</a>
</div>
</div>
<div class="oh large-12 columns panel">
<h3><i class="fi-minus-circle m10r"></i> <span translate>Purge Pending Transaction Proposals</span> </h3>
<p translate class="large-8 columns text-gray">
Pending Transactions Proposals will be discarded. This needs to be done on <b>ALL</b> peers of a wallet, to prevent the old proposals to be resynced again.
</p>
<div class="large-4 columns">
<a translate class="button warning expand" ng-click="purge()">
Purge
</a>
</div>
</div> </div>
<div class="oh large-12 columns panel"> <div class="large-12 columns">
<h3><i class="fi-minus-circle m10r"></i> <span translate>Purge ALL Transaction Proposals</span> </h3> <div class="panel">
<p translate class="large-8 columns text-gray"> <h2><i class="fi-minus-circle m10r"></i> <span translate>Scan Wallet Addresses</span></h2>
<p translate class="text-gray">
This will scan the blockchain looking for addresses derived from your wallet, in case you have funds in addresses not yet generated (e.g.: you restored an old backup). This will also trigger a synchronization of addresses to other connected peers.
</p>
<a translate class="button primary m0" ng-click="updateIndexes()">
Scan
</a>
</div>
</div>
<div class="large-12 columns">
<div class="panel">
<h2><i class="fi-minus-circle m10r"></i> <span translate>Purge Pending Transaction Proposals</span></h2>
<p translate class="text-gray">
Pending Transactions Proposals will be discarded. This needs to be done on <b>ALL</b> peers of a wallet, to prevent the old proposals to be resynced again.
</p>
<a translate class="button warning m0" ng-click="purge()">
Purge
</a>
</div>
</div>
<div class="large-12 columns">
<div class="panel">
<h2><i class="fi-minus-circle m10r"></i> <span translate>Purge ALL Transaction Proposals</span></h2>
<p translate class="text-gray">
ALL Transactions Proposals will be discarded. This needs to be done on <b>ALL</b> peers of a wallet, to prevent the old proposals to be resynced again. ALL Transactions Proposals will be discarded. This needs to be done on <b>ALL</b> peers of a wallet, to prevent the old proposals to be resynced again.
</p> </p>
<div class="large-4 columns"> <a translate class="button warning m0" ng-click="purge(true)">
<a translate class="button warning expand" ng-click="purge(true)"> Purge All
Purge All </a>
</a> </div>
</div>
</div> </div>
<div class="oh large-12 columns panel"> <div class="large-12 columns">
<h3><i class="fi-minus-circle m10r"></i> <div class="panel">
<span translate>Join Secret</span> </h3> <h2><i class="fi-minus-circle m10r"></i>
<p translate class="large-8 columns text-gray"> <span translate>Join Secret</span> </h2>
<p translate class="text-gray">
This is the initial secret join string. Since your wallet it is already complete, this is only useful to rejoin peers that lost their backup BUT have the extended private key stored (they will be rejected on other case). They need to enter their extended private key during the join process (in advanced options). This is the initial secret join string. Since your wallet it is already complete, this is only useful to rejoin peers that lost their backup BUT have the extended private key stored (they will be rejected on other case). They need to enter their extended private key during the join process (in advanced options).
</p> </p>
<div class="large-4 columns"> <a class="button primary m0" ng-click="hideSecret=!hideSecret">
<a class="button primary expand" ng-click="hideSecret=!hideSecret">
<span translate ng-hide="!hideSecret">Show</span> <span translate ng-hide="!hideSecret">Show</span>
<span translate ng-hide="hideSecret">Hide</span> <span translate ng-hide="hideSecret">Hide</span>
</a> </a>
<textarea class="m10t" ng-hide="hideSecret">{{secret}}</textarea>
</div> </div>
<textarea ng-hide="hideSecret" readonly>{{secret}}</textarea>
</div> </div>
</div> </div>
</div> </div>

363
views/send.html
View file

@ -1,223 +1,218 @@
<div class="send" data-ng-controller="SendController" data-ng-init="loadTxs()"> <div class="send" data-ng-controller="SendController" data-ng-init="loadTxs()">
<div ng-show='$root.wallet.isReady()'> <div ng-show='$root.wallet.isReady()'>
<h1 translate ng-show="txs.length != 0">Send Proposals</h1> <div class="row" ng-show="txs.length != 0">
<div class="last-transactions" ng-repeat="tx in txs | paged"> <div class="large-12 columns">
<div ng-include="'views/includes/transaction.html'"></div> <h2 translate>Pending Transactions Proposals</h2>
<div class="last-transactions"
ng-repeat="tx in txs | paged"
ng-include="'views/includes/transaction.html'"></div>
</div>
</div> </div>
<div ng-show="txs.length != 0" class="large-12 line-dashed" style="padding: 0;"></div> <div ng-show="txs.length != 0" class="line-dashed-h m20b"></div>
<h1 class="hide-for-large-up">{{$root.title}}</h1> <h1 class="hide-for-large-up">{{$root.title}}</h1>
<div class="row collapse m0"> <div class="row">
<div class="large-6 columns"> <div class="large-6 columns">
<form name="sendForm" ng-submit="submitForm(sendForm)" novalidate> <form name="sendForm" ng-submit="submitForm(sendForm)" novalidate>
<p class="text-warning size-16" <p class="text-warning size-16"
ng-show="error"> ng-show="error">
<i class="fi-alert"></i> <i class="fi-alert"></i>
{{error|translate}} {{error|translate}}
</p> </p>
<div class="row collapse"> <div class="row collapse">
<div class="large-12 columns"> <label for="address">
<div class="row collapse"> <span translate>To</span>
<label for="address"><span translate>To </span><a class="has-tip size-12" href="#" <i class="fi-info size-12" href="#"
data-options="disable_for_touch:true" data-options="disable_for_touch:true"
tooltip-popup-delay='500' tooltip-popup-delay='500'
tooltip="{{'Enter a valid Bitcoin address. Payment Protocol URLs are also supported'|translate}}" tooltip="{{'Enter a valid Bitcoin address. Payment Protocol URLs are also supported'|translate}}"
tooltip-trigger="mouseenter" tooltip-trigger="mouseenter"
tooltip-placement="right">(?)</a> tooltip-placement="right"></i>
<small translate ng-hide="!sendForm.address.$pristine || address">required</small> <small translate ng-hide="!sendForm.address.$pristine || address">required</small>
<small translate class="is-valid" ng-show="!sendForm.address.$invalid && address">valid!</small> <small translate class="is-valid" ng-show="!sendForm.address.$invalid && address">valid!</small>
<small translate class="has-error" ng-show="sendForm.address.$invalid && address">not valid</small> <small translate class="has-error" ng-show="sendForm.address.$invalid && address">not valid</small>
</label> </label>
<div class="small-10 columns"> <div class="small-10 columns">
<input type="text" id="address" name="address" ng-disabled="loading || !!$root.merchant" <input type="text" id="address" name="address" ng-disabled="loading || !!$root.merchant"
placeholder="{{'Bitcoin address'|translate}}" ng-model="address" ng-change="onChanged()" valid-address required> placeholder="{{'Bitcoin address'|translate}}" ng-model="address" ng-change="onChanged()" valid-address required>
<small class="icon-input" ng-show="!sendForm.address.$invalid && address"><i class="fi-check"></i></small> <small class="icon-input" ng-show="!sendForm.address.$invalid && address"><i class="fi-check"></i></small>
<small class="icon-input" ng-show="sendForm.address.$invalid && address"><i class="fi-x"></i></small> <small class="icon-input" ng-show="sendForm.address.$invalid && address"><i class="fi-x"></i></small>
</div>
<div class="small-2 columns" ng-hide="showScanner || disableScanner">
<a class="postfix button black" ng-click="openScanner()"><i class="fi-camera"></i></a>
</div>
<div class="small-2 columns" ng-show="showScanner">
<a translate class="postfix button warning" ng-click="cancelScanner()">Cancel</a>
</div>
</div>
<div id="scanner" ng-if="showScanner">
<div class="text-centered">
<canvas id="qr-canvas" width="200" height="150"></canvas>
<div ng-show="isMobile">
<div id="file-input-wrapper" class="btn btn-primary">
<span class="pull-left text-centered">
<i class="glyphicon glyphicon-refresh icon-rotate"></i>
<span translate>Get QR code</span>
</span>
<input id="qrcode-camera" type="file" capture="camera" accept="image/*">
</div>
</div> </div>
<div class="small-2 columns" ng-hide="showScanner || disableScanner"> <div ng-hide="isMobile">
<a class="postfix button black" ng-click="openScanner()"><i class="fi-camera"></i></a> <video id="qrcode-scanner-video" width="300" height="225" ng-hide="isMobile"></video>
</div>
<div class="small-2 columns" ng-show="showScanner">
<a translate class="postfix button warning" ng-click="cancelScanner()">Cancel</a>
</div> </div>
</div> </div>
<div id="scanner" class="row" ng-if="showScanner"> </div>
<div class="text-centered">
<canvas id="qr-canvas" width="200" height="150"></canvas> <div class="row">
<div ng-show="isMobile"> <div class="large-6 medium-6 columns">
<div id="file-input-wrapper" class="btn btn-primary"> <div class="row collapse">
<span class="pull-left text-centered"> <label for="amount"><span translate>Amount</span>
<i class="glyphicon glyphicon-refresh icon-rotate"></i> <small translate ng-hide="!sendForm.amount.$pristine">required</small>
<span translate>Get QR code</span> <small translate class="is-valid"
</span> ng-show="!sendForm.amount.$invalid &&
<input id="qrcode-camera" type="file" capture="camera" accept="image/*"> !sendForm.amount.$pristine">valid!</small>
</div> <small translate class="has-error"
ng-show="(sendForm.amount.$invalid || notValidAmount) &&
!sendForm.amount.$pristine">not valid
</small>
</label>
<div class="small-9 columns">
<input type="number" id="amount"
ng-disabled="loading || ($root.merchant && +$root.merchant.total > 0)"
name="amount" placeholder="{{'Amount'|translate}}" ng-model="amount"
min="0.00000001" max="10000000000" valid-amount required
autocomplete="off">
<small class="icon-input" ng-show="!sendForm.amount.$invalid && amount"><i class="fi-check"></i></small>
<small class="icon-input" ng-show="sendForm.amount.$invalid &&
!sendForm.amount.$pristine && !notValidAmount"><i class="fi-x"></i></small>
<a class="small input-note" title="{{'Send all funds'|translate}}"
ng-show="availableBalance && (!$root.merchant || +$root.merchant.total === 0)"
ng-click="topAmount(sendForm)">
<span translate>Use all funds</span> ({{availableBalance}} {{$root.wallet.settings.unitName}})
</a>
</div> </div>
<div ng-hide="isMobile"> <div class="small-3 columns">
<video id="qrcode-scanner-video" width="300" height="225" ng-hide="isMobile"></video> <span class="postfix">{{$root.wallet.settings.unitName}}</span>
</div>
</div>
</div>
<div class="large-6 medium-6 columns">
<div class="row collapse">
<label for="alternative"><span translate>Amount in</span> {{ alternativeName }} </label>
<div class="small-9 columns">
<input type="number" id="alternative_amount"
ng-disabled="loading || !isRateAvailable || ($root.merchant && +$root.merchant.total > 0)"
name="alternative" placeholder="{{'Amount'|translate}}" ng-model="alternative"
required
autocomplete="off"
>
</div>
<div class="small-3 columns">
<span class="postfix">{{alternativeIsoCode}}</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="row collapse"> <div class="row">
<div class="large-6 medium-6 columns"> <div class="large-12 columns" ng-show="!!$root.merchant">
<div class="row collapse"> <h3>This is a payment protocol transaction</h3>
<label for="amount"><span translate>Amount</span> <div class="send-note">
<small translate ng-hide="!sendForm.amount.$pristine">required</small> <p>
<small translate class="is-valid" <b translate>Send to</b>:
ng-show="!sendForm.amount.$invalid && {{$root.merchant.domain}}
!sendForm.amount.$pristine">valid!</small> </p>
<small translate class="has-error" <p>
ng-show="(sendForm.amount.$invalid || notValidAmount) && <b translate>Total amount for this transaction</b>:
!sendForm.amount.$pristine">not valid <i>{{amount + defaultFee |noFractionNumber}} {{$root.wallet.settings.unitName}}</i>
<small ng-if="isRateAvailable">
{{ rateService.toFiat((amount + defaultFee) * unitToSatoshi, alternativeIsoCode) | noFractionNumber: 2 }} {{ alternativeIsoCode }}
</small> </small>
</label> <small>
<div class="small-9 columns"> (<span translate>Including fee of</span>
<input type="number" id="amount" {{defaultFee|noFractionNumber}}
ng-disabled="loading || ($root.merchant && +$root.merchant.total > 0)" {{$root.wallet.settings.unitName}})
name="amount" placeholder="{{'Amount'|translate}}" ng-model="amount" </small>
min="0.00000001" max="10000000000" valid-amount required </p>
autocomplete="off"> <p>
<small class="icon-input" ng-show="!sendForm.amount.$invalid && amount"><i class="fi-check"></i></small> <b translate>Server Says</b>:
<small class="icon-input" ng-show="sendForm.amount.$invalid && {{$root.merchant.pr.pd.memo}}
!sendForm.amount.$pristine && !notValidAmount"><i class="fi-x"></i></small> </p>
<a class="small input-note" title="{{'Send all funds'|translate}}" <p>
ng-show="availableBalance && (!$root.merchant || +$root.merchant.total === 0)" <b translate>Certificate</b>:
ng-click="topAmount(sendForm)"> <span ng-show="!!$root.merchant.pr.ca">{{$root.merchant.pr.ca}}</span>
<span translate>Use all funds</span> ({{availableBalance}} {{$root.wallet.settings.unitName}}) <span ng-show="!$root.merchant.pr.ca" style="color:red;weight:bold;">Untrusted</span>
</a> </p>
</div> <p>
<div class="small-3 columns"> <b translate>Payment Expiration</b>:
<span class="postfix">{{$root.wallet.settings.unitName}}</span> {{$root.merchant.expiration}}
</p>
</div> </div>
</div> </div>
</div> </div>
<div class="large-5 medium-5 columns">
<div class="row collapse">
<label for="alternative"><span translate>Amount in</span> {{ alternativeName }} </label>
<div class="small-9 columns">
<input type="number" id="alternative_amount"
ng-disabled="loading || !isRateAvailable || ($root.merchant && +$root.merchant.total > 0)"
name="alternative" placeholder="{{'Amount'|translate}}" ng-model="alternative"
required
autocomplete="off"
>
</div>
<div class="small-3 columns">
<span class="postfix">{{alternativeIsoCode}}</span>
</div>
</div>
</div>
</div>
<div class="row collapse"> <div class="row">
<div class="large-12 columns"> <div class="large-12 columns">
<div class="row collapse">
<label for="comment"><span translate>Note</span> <label for="comment"><span translate>Note</span>
<small translate ng-hide="!sendForm.comment.$pristine">optional</small> <small translate ng-hide="!sendForm.comment.$pristine">optional</small>
<small translate class="has-error" ng-show="sendForm.comment.$invalid && !sendForm.comment.$pristine">too long!</small> <small translate class="has-error" ng-show="sendForm.comment.$invalid && !sendForm.comment.$pristine">too long!</small>
</label> </label>
<div class="large-12 columns"> <textarea id="comment" ng-disabled="loading"
<textarea id="comment" ng-disabled="loading" name="comment" placeholder="{{(wallet.isShared() ? 'Leave a private message to your copayers' : 'Add a private comment to identify the transaction') |translate}}" ng-model="commentText" ng-maxlength="100"></textarea>
name="comment" placeholder="{{(wallet.isShared() ? 'Leave a private message to your copayers' : 'Add a private comment to identify the transaction') |translate}}" ng-model="commentText" ng-maxlength="100"></textarea>
</div>
</div> </div>
</div> </div>
</div>
<div class="row collapse">
<span ng-if="!$root.alternativeConversionRate">
<i class="fi-bitcoin-circle icon-rotate spinner"></i>
</span>
<span class="left m5t text-gray size-14" ng-if="$root.alternativeConversionRate > 0">1 BTC = {{alternativeConversionRate|noFractionNumber:2}} {{alternativeIsoCode}}
</span>
<div class="large-5 medium-3 small-6 columns right">
<button type="submit" class="button primary expand text-center" ng-disabled="sendForm.$invalid || loading">
Send
</button>
</div>
</div>
</form>
</div>
</div><!-- end of row -->
<div class="large-6 columns show-for-large-up" ng-show="!!$root.merchant"> <div class="row">
<div class="send-note"> <div class="large-12 columns text-right">
<h6 translate>Send to</h6> <button type="submit" class="button primary m0" ng-disabled="sendForm.$invalid || loading">
<p class="text-gray" ng-class="{'hidden': sendForm.address.$invalid || !address}" Send
title="{{$root.merchant.request_url}}"> </button>
{{$root.merchant.domain}}&nbsp; </div>
</p> </div>
<h6 translate>Total amount for this transaction:</h6> </form>
<p class="text-gray" ng-class="{'hidden': sendForm.amount.$invalid || !amount > 0}">
<b>{{amount + defaultFee |noFractionNumber}}</b> {{$root.wallet.settings.unitName}} </div>
<small ng-if="isRateAvailable"> </div><!-- end of row -->
{{ rateService.toFiat((amount + defaultFee) * unitToSatoshi, alternativeIsoCode) | noFractionNumber: 2 }} {{ alternativeIsoCode }} <div class="row m20b" ng-show="$root.alternativeConversionRate > 0">
<br> <div class="large-6 columns size-12">
</small> <i class="fi-bitcoin-circle"></i>
<small> 1 BTC = {{alternativeConversionRate|noFractionNumber:2}} {{alternativeIsoCode}}
<span translate>Including fee of</span> {{defaultFee|noFractionNumber}} {{$root.wallet.settings.unitName}}
</small>
</p>
<div ng-show="wallet.isShared()">
<h6 translate>Note</h6>
<p ng-class="{'hidden': !commentText}">{{commentText}}</p>
</div>
<div ng-show="!!$root.merchant">
<h6 translate>Merchant Data:</h6>
<p class="text-gray">
Note: This is a payment protocol transaction.
</p>
<h6 translate>Server Says:</h6>
<p class="text-gray">
{{$root.merchant.pr.pd.memo}}
</p>
<h6 translate>Certificate:</h6>
<p class="text-gray">
<span ng-show="!!$root.merchant.pr.ca">{{$root.merchant.pr.ca}}</span>
<span ng-show="!$root.merchant.pr.ca" style="color:red;weight:bold;">Untrusted</span>
</p>
<h6 translate>Payment Expiration:</h6>
<p class="text-gray">
{{$root.merchant.expiration}}
</p>
</div>
</div> </div>
</div> </div>
<div class="line-dashed-h m20b"></div> <div class="line-dashed-h m20b"></div>
<div class="large-12 columns"> <div class="row">
<h2 translate>Address Book</h2> <div class="large-12 columns">
<p translate class="text-gray m15b" ng-hide="showAddressBook()">Empty. Create an alias for your addresses</p> <h2 translate>Address Book</h2>
<table class="large-12 medium-12 small-12" ng-show="showAddressBook()"> <p translate class="text-gray m15b" ng-hide="showAddressBook()">Empty. Create an alias for your addresses</p>
<thead> <table ng-show="showAddressBook()">
<tr> <thead>
<th translate>Label</th> <tr>
<th translate>Address</th> <th translate>Label</th>
<th ng-class="{'hide-for-small-only' : $root.wallet.isShared()}" ng-show="$root.wallet.isShared()" translate>Creator</th> <th translate>Address</th>
<th class="hide-for-small-only" translate>Date</th> <th ng-class="{'hide-for-small-only' : $root.wallet.isShared()}" ng-show="$root.wallet.isShared()" translate>Creator</th>
<th class="hide-for-small-only">&nbsp;</th> <th class="hide-for-small-only" translate>Date</th>
<th class="hide-for-small-only">&nbsp;</th>
</tr>
</thead>
<tbody>
<tr
ng-repeat="(addr, info) in $root.wallet.addressBook"
ng-class="{'addressbook-disabled': info.hidden}">
<td><a ng-click="copyAddress(addr)" title="Copy address">{{info.label}}</a></td>
<td class="size-12">{{addr}} <span class="btn-copy" clip-copy="addr"></span></td>
<td ng-show="$root.wallet.isShared()" ng-class="{'hide-for-small-only' : $root.wallet.isShared()}">{{$root.wallet.publicKeyRing.nicknameForCopayer(info.copayerId)}}</td>
<td class="hide-for-small-only"><time>{{info.createdTs | amCalendar}}</time></td>
<td class="hide-for-small-only" width="5"><a ng-click="toggleAddressBookEntry(addr)">{{info.hidden ?
'Enable' : 'Disable'}}</a></td>
</tr> </tr>
</thead> </tbody>
<tbody> </table>
<tr <button translate class="button tiny primary" ng-click="openAddressBookModal()">
ng-repeat="(addr, info) in $root.wallet.addressBook" <i class="fi-plus m5r"></i> Add</button>
ng-class="{'addressbook-disabled': info.hidden}"> </div>
<td><a ng-click="copyAddress(addr)" title="Copy address">{{info.label}}</a></td>
<td class="size-12">{{addr}} <span class="btn-copy" clip-copy="addr"></span></td>
<td ng-show="$root.wallet.isShared()" ng-class="{'hide-for-small-only' : $root.wallet.isShared()}">{{$root.wallet.publicKeyRing.nicknameForCopayer(info.copayerId)}}</td>
<td class="hide-for-small-only"><time>{{info.createdTs | amCalendar}}</time></td>
<td class="hide-for-small-only" width="5"><a ng-click="toggleAddressBookEntry(addr)">{{info.hidden ?
'Enable' : 'Disable'}}</a></td>
</tr>
</tbody>
</table>
<button translate class="button tiny primary text-center" ng-click="openAddressBookModal()"><i class="fi-plus m5r"></i>Add</button>
</div> </div>
</div> </div>
</div> </div>