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

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

Bug/05 ui
This commit is contained in:
Matias Alejo Garcia 2014-11-04 16:44:14 -03:00
parent 7209745446 861f3c584d
commit 80a26411a7
6 changed files with 312 additions and 359 deletions
Show Stats 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;
float: right;
background-color: #23C9A9;
padding: 22px 6px;
padding: 16px 6px;
color: #B6E9DF;
}
@ -401,7 +401,7 @@ table.last-transactions-content {
padding: 0;
border: 0;
background-color: #F8F8FB;
margin: 15px 0;
margin: 10px 0;
}
.last-transactions-content .box-status {
@ -438,9 +438,8 @@ table.last-transactions-content {
.private-message {
margin-bottom: 10px;
padding-bottom: 5px;
padding-bottom: 10px;
border-bottom: 1px solid #fff;
line-height: 20px;
}
.header-message {
@ -466,19 +465,18 @@ table.last-transactions-content {
}
.send-note {
font-style: italic;
color: gray;
background-color: #EDEDF5;
padding: 1.5rem;
width: 400px;
padding: 10px;
margin-bottom: 10px;
}
.box-note {
text-align: center;
clear: both;
font-style: italic;
color: gray;
margin-bottom: 10px;
.send-note p {
margin-bottom: 5px;
font-size: 12px;
}
.send-note b {
color: #000;
}
a.button-setup.add-wallet {

1
css/src/style.css
View File

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

4
views/history.html
View File

@ -10,7 +10,7 @@
<div
class="row"
ng-if="blockchain_txs[0].txid">
<div class="large-12 colums">
<div class="large-12 columns">
<div class="panel oh"
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">
<a>
<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>
</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>
</div>
<div class="last-transactions-header" ng-init="txIndex = $index">
@ -6,39 +6,19 @@
<i class="fi-comment-quotes"></i>
<span class="text-light">{{tx.comment}}</span>
</div>
<div class="row collapse">
<div class="large-9 medium-8 small-12 columns">
<div class="row collapse" ng-repeat="out in tx.outs">
<div class="large-3 medium-3 small-4 columns">
<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 class="row" ng-repeat="out in tx.outs">
<div class="large-3 medium-3 small-4 columns">
<div class="size-12">
<span>{{out.value |noFractionNumber}} {{$root.wallet.settings.unitName}}</span>
</div>
</div>
<div class="large-3 medium-4 columns text-right hide-for-small-only">
<span class="size-12">{{tx.createdTs | amCalendar}}</span>
<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>
<table class="last-transactions-content show-for-small-only">
<table class="last-transactions-content">
<tbody>
<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)}}
@ -59,64 +39,30 @@
</tr>
</tbody>
</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="row collapse">
<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 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>
</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>
</button>
</div>
<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>
</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>
</button>
</div>
</div>
<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>
</button>
</div>

195
views/more.html
View File

@ -1,120 +1,133 @@
<div class="backup" ng-controller="MoreController">
<h1 class="hide-for-large-up">{{$root.title}} </h1>
<div class="row collapse">
<form name="settingsForm" class="large-6 small-12 columns">
<fieldset>
<legend translate>Wallet Unit</legend>
<select class="form-control" ng-model="selectedUnit" ng-options="o.name for o in unitOpts" ng-change="save()">
</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 class="row">
<form name="settingsForm">
<div class="large-6 medium-6 columns">
<fieldset>
<legend translate>Wallet Unit</legend>
<select class="form-control" ng-model="selectedUnit" ng-options="o.name for o in unitOpts" ng-change="save()">
</select>
</fieldset>
</div>
<div class="large-6 medium-6 columns">
<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>
</div>
<div class="large-12 columns line-dashed-h m15b"></div>
<div class="large-6 columns panel">
<h2><i class="fi-download m10r"></i> <span translate>Backup</span> </h2>
<p translate class="text-gray">
It's important to backup your wallet so that you can recover it in case of disaster
</p>
<a translate class="button primary m0" ng-click="downloadBackup()"
ng-show="!isSafari">Download File</a>
<a translate class="button primary m0" ng-click="viewBackup()"
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 class="line-dashed-h m20b"></div>
<div class="row">
<div class="large-6 columns">
<div class="panel">
<h2><i class="fi-download m10r"></i> <span translate>Backup</span></h2>
<p translate class="text-gray">
It's important to backup your wallet so that you can recover it in case of disaster
</p>
<a translate class="button primary m0" ng-click="downloadBackup()"
ng-show="!isSafari">Download File</a>
<a translate class="button primary m0" ng-click="viewBackup()"
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 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 class="large-6 columns">
<div class="panel oh">
<h3><i class="fi-minus-circle m10r"></i> <span translate> Delete Wallet </span></h3>
<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>
<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 class="large-6 columns">
<div class="panel">
<h2><i class="fi-minus-circle m10r"></i> <span translate>Delete Wallet</span></h2>
<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>
<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>
</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>
<span translate ng-hide="!hideAdv">Show</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>
</div>
<div ng-hide="hideAdv" class="m10t">
<div class="oh large-12 columns panel">
<h3><i class="fi-minus-circle m10r"></i>
<span translate>Master Private Key</span> </h3>
<p translate class="large-8 columns text-gray">
Your master private key contains the information to sign <b>any</b> transaction on this wallet. Handle with care.
<div ng-hide="hideAdv" class="row">
<div class="large-12 columns">
<div class="panel">
<h2><i class="fi-minus-circle m10r"></i>
<span translate>Master Private Key</span> </h2>
<p translate class="text-gray">
Your master private key contains the information to sign <b>any</b> transaction on this wallet. Handle with care.
</p>
<div class="large-4 columns">
<a class="button primary expand" ng-click="hidePriv=!hidePriv">
<span translate ng-hide="!hidePriv">Show</span>
<span translate ng-hide="hidePriv">Hide</span>
</a>
</div>
<textarea ng-hide="hidePriv" readonly>{{priv}}</textarea>
<a class="button primary m0" ng-click="hidePriv=!hidePriv">
<span translate ng-hide="!hidePriv">Show</span>
<span translate ng-hide="hidePriv">Hide</span>
</a>
<textarea class="m10t" ng-hide="hidePriv">{{priv}}</textarea>
</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 class="oh large-12 columns panel">
<h3><i class="fi-minus-circle m10r"></i> <span translate>Purge ALL Transaction Proposals</span> </h3>
<p translate class="large-8 columns text-gray">
<div class="large-12 columns">
<div class="panel">
<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.
</p>
<div class="large-4 columns">
<a translate class="button warning expand" ng-click="purge(true)">
Purge All
</a>
</div>
<a translate class="button warning m0" ng-click="purge(true)">
Purge All
</a>
</div>
</div>
<div class="oh large-12 columns panel">
<h3><i class="fi-minus-circle m10r"></i>
<span translate>Join Secret</span> </h3>
<p translate class="large-8 columns text-gray">
<div class="large-12 columns">
<div class="panel">
<h2><i class="fi-minus-circle m10r"></i>
<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).
</p>
<div class="large-4 columns">
<a class="button primary expand" ng-click="hideSecret=!hideSecret">
</p>
<a class="button primary m0" ng-click="hideSecret=!hideSecret">
<span translate ng-hide="!hideSecret">Show</span>
<span translate ng-hide="hideSecret">Hide</span>
</a>
<textarea class="m10t" ng-hide="hideSecret">{{secret}}</textarea>
</div>
<textarea ng-hide="hideSecret" readonly>{{secret}}</textarea>
</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 ng-show='$root.wallet.isReady()'>
<h1 translate ng-show="txs.length != 0">Send Proposals</h1>
<div class="last-transactions" ng-repeat="tx in txs | paged">
<div ng-include="'views/includes/transaction.html'"></div>
<div class="row" ng-show="txs.length != 0">
<div class="large-12 columns">
<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 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>
<div class="row collapse m0">
<div class="large-6 columns">
<form name="sendForm" ng-submit="submitForm(sendForm)" novalidate>
<p class="text-warning size-16"
<div class="row">
<div class="large-6 columns">
<form name="sendForm" ng-submit="submitForm(sendForm)" novalidate>
<p class="text-warning size-16"
ng-show="error">
<i class="fi-alert"></i>
{{error|translate}}
</p>
<div class="row collapse">
<div class="large-12 columns">
<div class="row collapse">
<label for="address"><span translate>To </span><a class="has-tip size-12" href="#"
data-options="disable_for_touch:true"
tooltip-popup-delay='500'
tooltip="{{'Enter a valid Bitcoin address. Payment Protocol URLs are also supported'|translate}}"
tooltip-trigger="mouseenter"
tooltip-placement="right">(?)</a>
<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="has-error" ng-show="sendForm.address.$invalid && address">not valid</small>
</label>
<div class="small-10 columns">
<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>
<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>
<div class="row collapse">
<label for="address">
<span translate>To</span>
<i class="fi-info size-12" href="#"
data-options="disable_for_touch:true"
tooltip-popup-delay='500'
tooltip="{{'Enter a valid Bitcoin address. Payment Protocol URLs are also supported'|translate}}"
tooltip-trigger="mouseenter"
tooltip-placement="right"></i>
<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="has-error" ng-show="sendForm.address.$invalid && address">not valid</small>
</label>
<div class="small-10 columns">
<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>
<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>
</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 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 ng-hide="isMobile">
<video id="qrcode-scanner-video" width="300" height="225" ng-hide="isMobile"></video>
</div>
</div>
<div id="scanner" class="row" 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 class="row">
<div class="large-6 medium-6 columns">
<div class="row collapse">
<label for="amount"><span translate>Amount</span>
<small translate ng-hide="!sendForm.amount.$pristine">required</small>
<small translate class="is-valid"
ng-show="!sendForm.amount.$invalid &&
!sendForm.amount.$pristine">valid!</small>
<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 ng-hide="isMobile">
<video id="qrcode-scanner-video" width="300" height="225" ng-hide="isMobile"></video>
<div class="small-3 columns">
<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 class="row collapse">
<div class="large-6 medium-6 columns">
<div class="row collapse">
<label for="amount"><span translate>Amount</span>
<small translate ng-hide="!sendForm.amount.$pristine">required</small>
<small translate class="is-valid"
ng-show="!sendForm.amount.$invalid &&
!sendForm.amount.$pristine">valid!</small>
<small translate class="has-error"
ng-show="(sendForm.amount.$invalid || notValidAmount) &&
!sendForm.amount.$pristine">not valid
<div class="row">
<div class="large-12 columns" ng-show="!!$root.merchant">
<h3>This is a payment protocol transaction</h3>
<div class="send-note">
<p>
<b translate>Send to</b>:
{{$root.merchant.domain}}
</p>
<p>
<b translate>Total amount for this transaction</b>:
<i>{{amount + defaultFee |noFractionNumber}} {{$root.wallet.settings.unitName}}</i>
<small ng-if="isRateAvailable">
{{ rateService.toFiat((amount + defaultFee) * unitToSatoshi, alternativeIsoCode) | noFractionNumber: 2 }} {{ alternativeIsoCode }}
</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 class="small-3 columns">
<span class="postfix">{{$root.wallet.settings.unitName}}</span>
<small>
(<span translate>Including fee of</span>
{{defaultFee|noFractionNumber}}
{{$root.wallet.settings.unitName}})
</small>
</p>
<p>
<b translate>Server Says</b>:
{{$root.merchant.pr.pd.memo}}
</p>
<p>
<b translate>Certificate</b>:
<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>
<p>
<b translate>Payment Expiration</b>:
{{$root.merchant.expiration}}
</p>
</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="large-12 columns">
<div class="row collapse">
<div class="row">
<div class="large-12 columns">
<label for="comment"><span translate>Note</span>
<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>
</label>
<div class="large-12 columns">
<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>
</div>
<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>
</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="send-note">
<h6 translate>Send to</h6>
<p class="text-gray" ng-class="{'hidden': sendForm.address.$invalid || !address}"
title="{{$root.merchant.request_url}}">
{{$root.merchant.domain}}&nbsp;
</p>
<h6 translate>Total amount for this transaction:</h6>
<p class="text-gray" ng-class="{'hidden': sendForm.amount.$invalid || !amount > 0}">
<b>{{amount + defaultFee |noFractionNumber}}</b> {{$root.wallet.settings.unitName}}
<small ng-if="isRateAvailable">
{{ rateService.toFiat((amount + defaultFee) * unitToSatoshi, alternativeIsoCode) | noFractionNumber: 2 }} {{ alternativeIsoCode }}
<br>
</small>
<small>
<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 class="row">
<div class="large-12 columns text-right">
<button type="submit" class="button primary m0" ng-disabled="sendForm.$invalid || loading">
Send
</button>
</div>
</div>
</form>
</div>
</div><!-- end of row -->
<div class="row m20b" ng-show="$root.alternativeConversionRate > 0">
<div class="large-6 columns size-12">
<i class="fi-bitcoin-circle"></i>
1 BTC = {{alternativeConversionRate|noFractionNumber:2}} {{alternativeIsoCode}}
</div>
</div>
<div class="line-dashed-h m20b"></div>
<div class="large-12 columns">
<h2 translate>Address Book</h2>
<p translate class="text-gray m15b" ng-hide="showAddressBook()">Empty. Create an alias for your addresses</p>
<table class="large-12 medium-12 small-12" ng-show="showAddressBook()">
<thead>
<tr>
<th translate>Label</th>
<th translate>Address</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" translate>Date</th>
<th class="hide-for-small-only">&nbsp;</th>
<div class="row">
<div class="large-12 columns">
<h2 translate>Address Book</h2>
<p translate class="text-gray m15b" ng-hide="showAddressBook()">Empty. Create an alias for your addresses</p>
<table ng-show="showAddressBook()">
<thead>
<tr>
<th translate>Label</th>
<th translate>Address</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" 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>
</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>
</tbody>
</table>
<button translate class="button tiny primary text-center" ng-click="openAddressBookModal()"><i class="fi-plus m5r"></i>Add</button>
</tbody>
</table>
<button translate class="button tiny primary" ng-click="openAddressBookModal()">
<i class="fi-plus m5r"></i> Add</button>
</div>
</div>
</div>
</div>