mirror of https://github.com/BTCPrivate/copay.git
send page
This commit is contained in:
bechi
parent
5f27f1e7a6
commit
45db939dd8
41
css/main.css
41
css/main.css
|
|
@ -66,6 +66,11 @@ h3 {
|
|||
font-weight: 100;
|
||||
font-size: 22px;
|
||||
color: #2C3E50;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
body, html{
|
||||
|
|
@ -149,6 +154,7 @@ body, html{
|
|||
.m10b {margin-bottom: 10px;}
|
||||
.m15b {margin-bottom: 20px;}
|
||||
.m10r {margin-right: 10px;}
|
||||
.m15l {margin-left: 15px;}
|
||||
.m20r {margin-right: 20px;}
|
||||
.m10 {margin: 10px;}
|
||||
.m15 {margin: 15px;}
|
||||
|
|
@ -565,6 +571,41 @@ button[disabled].warning:focus,
|
|||
height: 50px;
|
||||
}
|
||||
|
||||
.icon-input {
|
||||
position: absolute;
|
||||
top: 11px;
|
||||
right: 20px;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.icon-input .fi-check {
|
||||
background-color: #1ABC9C;
|
||||
padding: 0.2rem 0.4rem;
|
||||
}
|
||||
|
||||
.icon-input .fi-x {
|
||||
background-color: #C0392A;
|
||||
padding: 0.2rem 0.4rem;
|
||||
}
|
||||
|
||||
.send-bar {
|
||||
background-color: #EDEDF5;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.row {
|
||||
margin-left: -0.9375rem;
|
||||
}
|
||||
|
||||
.has-error {
|
||||
color: #C0392A;
|
||||
}
|
||||
|
||||
.is-valid {
|
||||
color: #1ABC9C;
|
||||
}
|
||||
|
||||
input.ng-invalid-match, input.ng-invalid-match:focus {
|
||||
border-color: red;
|
||||
}
|
||||
|
|
|
|||
190
views/send.html
190
views/send.html
|
|
@ -1,119 +1,107 @@
|
|||
<div class="send" data-ng-controller="SendController">
|
||||
<div class="row" ng-show='$root.wallet.isReady()'>
|
||||
<div class="medium-8 medium-centered large-6 large-centered columns">
|
||||
<div ng-show='$root.wallet.isReady()'>
|
||||
<form name="sendForm" ng-submit="submitForm(sendForm)" novalidate>
|
||||
<h3>{{title}}</h3>
|
||||
<form name="sendForm" ng-submit="submitForm(sendForm)" novalidate>
|
||||
<div class="large-7 columns">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<div class="row collapse">
|
||||
<label for="address">To address
|
||||
<small ng-hide="!sendForm.address.$pristine || address">required</small>
|
||||
<small class="is-valid" ng-show="!sendForm.address.$invalid && address">valid!</small>
|
||||
<small 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"
|
||||
placeholder="Send to" ng-model="address" valid-address required>
|
||||
</div>
|
||||
<div class="small-2 columns" ng-hide="showScanner || !isHttp">
|
||||
<a class="postfix button secondary" ng-click="openScanner()"><i class="fi-camera"></i></a>
|
||||
</div>
|
||||
<div class="small-2 columns" ng-show="showScanner && isHttp">
|
||||
<a class="postfix button warning" ng-click="cancelScanner()">Cancel</a>
|
||||
</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>
|
||||
Get QR code
|
||||
</span>
|
||||
<input id="qrcode-camera" type="file" capture="camera" accept="image/*">
|
||||
</div>
|
||||
</div>
|
||||
<div ng-hide="isMobile">
|
||||
<video id="qrcode-scanner-video" width="300" height="225" ng-hide="isMobile"></video>
|
||||
</div>
|
||||
</div>
|
||||
<h4 class="large-2 medium-3 columns text-right">To address <small class="text-gray">(*)</small> </h4>
|
||||
<div class="large-8 medium-7 small-10 columns pr m15b" for="address">
|
||||
<input style="margin:0;" type="text" id="address" name="address" ng-disabled="loading"
|
||||
placeholder="Send to" ng-model="address" 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>
|
||||
<small class="is-valid" ng-show="!sendForm.address.$invalid && address"> Valid</small>
|
||||
<small class="has-error" ng-show="sendForm.address.$invalid && address"> Not valid </small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="large-2 small-2 columns" ng-hide="showScanner || !isHttp">
|
||||
<a class="postfix button secondary" ng-click="openScanner()"><i class="fi-camera"></i></a>
|
||||
</div>
|
||||
<div class="small-2 columns" ng-show="showScanner && isHttp">
|
||||
<a class="postfix button warning" ng-click="cancelScanner()">Cancel</a>
|
||||
</div>
|
||||
</div> <!-- end of to address -->
|
||||
<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>
|
||||
Get QR code
|
||||
</span>
|
||||
<input id="qrcode-camera" type="file" capture="camera" accept="image/*">
|
||||
</div>
|
||||
</div>
|
||||
<div ng-hide="isMobile">
|
||||
<video id="qrcode-scanner-video" width="300" height="225" ng-hide="isMobile"></video>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="large-6 medium-6 columns">
|
||||
<div class="row collapse">
|
||||
<label for="amount">Amount
|
||||
<small ng-hide="!sendForm.amount.$pristine">required</small>
|
||||
<small class="is-valid" ng-show="!sendForm.amount.$invalid && !sendForm.amount.$pristine">Valid</small>
|
||||
<small class="has-error" ng-show="sendForm.amount.$invalid && !sendForm.amount.$pristine && !notEnoughAmount">
|
||||
Not valid
|
||||
</small>
|
||||
<small ng-show="notEnoughAmount" class="has-error">Insufficient funds</small>
|
||||
</label>
|
||||
<div class="small-9 columns">
|
||||
<input type="number" id="amount" ng-disabled="loading"
|
||||
name="amount" placeholder="Amount" ng-model="amount"
|
||||
min="0.0001" max="10000000000" enough-amount required
|
||||
autocomplete="off"
|
||||
>
|
||||
<a class="small input-note" title="Send all funds"
|
||||
ng-show="$root.availableBalance > 0"
|
||||
ng-click="topAmount(sendForm)">
|
||||
Use all funds ({{getAvailableAmount()}} {{$root.unitName}})
|
||||
</a>
|
||||
</div>
|
||||
<div class="small-3 columns">
|
||||
<span class="postfix">{{$root.unitName}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<h4 class="large-2 medium-3 text-right columns">Amount <small class="text-gray">(*)</small></h4>
|
||||
<div class="large-8 medium-7 columns m15b">
|
||||
<input style="margin:0;" type="number" id="amount" ng-disabled="loading"
|
||||
name="amount" placeholder="Amount" ng-model="amount"
|
||||
min="0.0001" max="10000000000" enough-amount required
|
||||
autocomplete="off"
|
||||
>
|
||||
<a class="small input-note" title="Send all funds"
|
||||
ng-show="$root.availableBalance > 0"
|
||||
ng-click="topAmount(sendForm)">
|
||||
Use all funds ({{getAvailableAmount()}} {{$root.unitName}})
|
||||
</a>
|
||||
<div for="amount">
|
||||
<small class="is-valid" ng-show="!sendForm.amount.$invalid && !sendForm.amount.$pristine">Valid</small>
|
||||
<small class="has-error" ng-show="sendForm.amount.$invalid && !sendForm.amount.$pristine && !notEnoughAmount">Not valid</small>
|
||||
<small ng-show="notEnoughAmount" class="has-error">Insufficient funds</small>
|
||||
<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 && amount"><i class="fi-x"></i></small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="large-6 medium-6 columns m10t" ng-show="amount>0">
|
||||
<small>
|
||||
Total amount for this transaction:
|
||||
</small>
|
||||
<div class="totalAmount">
|
||||
<b>{{amount + defaultFee |noFractionNumber}}</b> {{$root.unitName}}
|
||||
<small>
|
||||
{{ ((amount + defaultFee) * unitToBtc)|noFractionNumber:8}} BTC
|
||||
</small>
|
||||
</div>
|
||||
<small>
|
||||
Including fee of {{defaultFee|noFractionNumber}} {{$root.unitName}}
|
||||
</small>
|
||||
<div class="large-2 small-3 columns">
|
||||
<span class="postfix">{{$root.unitName}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- end of amount -->
|
||||
|
||||
<div class="row" ng-show="wallet.totalCopayers > 1">
|
||||
<div class="large-12 columns">
|
||||
<div class="row collapse">
|
||||
<label for="comment">Note
|
||||
<small ng-hide="!sendForm.comment.$pristine">optional</small>
|
||||
<small class="is-valid" ng-show="!sendForm.comment.$invalid && !sendForm.comment.$pristine">valid!</small>
|
||||
<small 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="Leave a private message to your copayers" ng-model="commentText" ng-maxlength="100"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<h4 class="large-2 medium-3 columns text-right" for="comment">Note
|
||||
</h4>
|
||||
<div class="large-10 medium-9 columns m15b">
|
||||
<textarea style="margin:0; height: 100px;" id="comment" ng-disabled="loading" name="comment" placeholder="Leave a private message to your copayers" ng-model="commentText" ng-maxlength="100"></textarea>
|
||||
<small class="has-error" ng-show="sendForm.comment.$invalid && !sendForm.comment.$pristine">too long!</small>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- end of note -->
|
||||
</div> <!-- end of col left -->
|
||||
|
||||
<div class="row">
|
||||
<div class="large-5 columns">
|
||||
<button type="submit" class="button secondary radius text-center" ng-disabled="sendForm.$invalid || loading" loading="Sending">
|
||||
Send
|
||||
</button>
|
||||
<div class="send-bar large-4 columns left">
|
||||
<h6>Send to</h6>
|
||||
<p class="text-gray">address</p>
|
||||
<div class="large-6 medium-6 columns m10t" ng-show="amount>0">
|
||||
<h6>
|
||||
Total amount for this transaction:
|
||||
</h6>
|
||||
<div class="totalAmount">
|
||||
<b>{{amount + defaultFee |noFractionNumber}}</b> {{$root.unitName}}
|
||||
<small>
|
||||
{{ ((amount + defaultFee) * unitToBtc)|noFractionNumber:8}} BTC
|
||||
</small>
|
||||
</div>
|
||||
<small>
|
||||
Including fee of {{defaultFee|noFractionNumber}} {{$root.unitName}}
|
||||
</small>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="large-6 medium-8 columns large-centered medium-centered line-dashed-h"> </div>
|
||||
<div class="medium-8 medium-centered large-6 large-centered columns">
|
||||
<div>
|
||||
<button type="submit" class="button secondary expand text-center m0" ng-disabled="sendForm.$invalid || loading" loading="Sending">
|
||||
Send
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="large-12 columns line-dashed">
|
||||
<h3>Address Book</h3>
|
||||
<p class="text-gray" ng-hide="showAddressBook()">Empty. Create an alias for your addresses</p>
|
||||
<table ng-show="showAddressBook()">
|
||||
|
|
|
|||
Loading…
Reference in New Issue