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

send page

Browse source
This commit is contained in:
bechi 2014-07-18 18:56:39 -03:00
commit 45db939dd8
2 changed files with 128 additions and 99 deletions
Download patch file Download diff file Expand all files Collapse all files

41
css/main.css
View file

@ -66,6 +66,11 @@ h3 {
font-weight: 100; font-weight: 100;
font-size: 22px; font-size: 22px;
color: #2C3E50; color: #2C3E50;
margin-bottom: 2rem;
}
h4 {
font-size: 0.875rem;
} }
body, html{ body, html{
@ -149,6 +154,7 @@ body, html{
.m10b {margin-bottom: 10px;} .m10b {margin-bottom: 10px;}
.m15b {margin-bottom: 20px;} .m15b {margin-bottom: 20px;}
.m10r {margin-right: 10px;} .m10r {margin-right: 10px;}
.m15l {margin-left: 15px;}
.m20r {margin-right: 20px;} .m20r {margin-right: 20px;}
.m10 {margin: 10px;} .m10 {margin: 10px;}
.m15 {margin: 15px;} .m15 {margin: 15px;}
@ -565,6 +571,41 @@ button[disabled].warning:focus,
height: 50px; 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 { input.ng-invalid-match, input.ng-invalid-match:focus {
border-color: red; border-color: red;
} }

102
views/send.html
View file

@ -1,28 +1,27 @@
<div class="send" data-ng-controller="SendController"> <div class="send" data-ng-controller="SendController">
<div class="row" ng-show='$root.wallet.isReady()'> <div ng-show='$root.wallet.isReady()'>
<div class="medium-8 medium-centered large-6 large-centered columns">
<h3>{{title}}</h3>
<form name="sendForm" ng-submit="submitForm(sendForm)" novalidate> <form name="sendForm" ng-submit="submitForm(sendForm)" novalidate>
<h3>{{title}}</h3>
<div class="large-7 columns">
<div class="row"> <div class="row">
<div class="large-12 columns"> <h4 class="large-2 medium-3 columns text-right">To address <small class="text-gray">(*)</small> </h4>
<div class="row collapse"> <div class="large-8 medium-7 small-10 columns pr m15b" for="address">
<label for="address">To address <input style="margin:0;" type="text" id="address" name="address" ng-disabled="loading"
<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> 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 class="small-2 columns" ng-hide="showScanner || !isHttp"> </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> <a class="postfix button secondary" ng-click="openScanner()"><i class="fi-camera"></i></a>
</div> </div>
<div class="small-2 columns" ng-show="showScanner && isHttp"> <div class="small-2 columns" ng-show="showScanner && isHttp">
<a class="postfix button warning" ng-click="cancelScanner()">Cancel</a> <a class="postfix button warning" ng-click="cancelScanner()">Cancel</a>
</div> </div>
</div> </div> <!-- end of to address -->
<div id="scanner" class="row" ng-if="showScanner"> <div id="scanner" class="row" ng-if="showScanner">
<div class="text-centered"> <div class="text-centered">
<canvas id="qr-canvas" width="200" height="150"></canvas> <canvas id="qr-canvas" width="200" height="150"></canvas>
@ -40,22 +39,11 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
<div class="row"> <div class="row">
<div class="large-6 medium-6 columns"> <h4 class="large-2 medium-3 text-right columns">Amount <small class="text-gray">(*)</small></h4>
<div class="row collapse"> <div class="large-8 medium-7 columns m15b">
<label for="amount">Amount <input style="margin:0;" type="number" id="amount" ng-disabled="loading"
<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" name="amount" placeholder="Amount" ng-model="amount"
min="0.0001" max="10000000000" enough-amount required min="0.0001" max="10000000000" enough-amount required
autocomplete="off" autocomplete="off"
@ -65,16 +53,36 @@
ng-click="topAmount(sendForm)"> ng-click="topAmount(sendForm)">
Use all funds ({{getAvailableAmount()}} {{$root.unitName}}) Use all funds ({{getAvailableAmount()}} {{$root.unitName}})
</a> </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="small-3 columns"> </div>
<div class="large-2 small-3 columns">
<span class="postfix">{{$root.unitName}}</span> <span class="postfix">{{$root.unitName}}</span>
</div> </div>
</div> <!-- end of amount -->
<div class="row" ng-show="wallet.totalCopayers > 1">
<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> </div> <!-- end of note -->
</div> <!-- end of col left -->
<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"> <div class="large-6 medium-6 columns m10t" ng-show="amount>0">
<small> <h6>
Total amount for this transaction: Total amount for this transaction:
</small> </h6>
<div class="totalAmount"> <div class="totalAmount">
<b>{{amount + defaultFee |noFractionNumber}}</b> {{$root.unitName}} <b>{{amount + defaultFee |noFractionNumber}}</b> {{$root.unitName}}
<small> <small>
@ -85,35 +93,15 @@
Including fee of {{defaultFee|noFractionNumber}} {{$root.unitName}} Including fee of {{defaultFee|noFractionNumber}} {{$root.unitName}}
</small> </small>
</div> </div>
</div> <div>
<button type="submit" class="button secondary expand text-center m0" ng-disabled="sendForm.$invalid || loading" loading="Sending">
<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>
</div>
</div>
<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 Send
</button> </button>
</div> </div>
</div> </div>
</form> </form>
</div>
<div class="large-6 medium-8 columns large-centered medium-centered line-dashed-h"> </div> <div class="large-12 columns line-dashed">
<div class="medium-8 medium-centered large-6 large-centered columns">
<h3>Address Book</h3> <h3>Address Book</h3>
<p class="text-gray" ng-hide="showAddressBook()">Empty. Create an alias for your addresses</p> <p class="text-gray" ng-hide="showAddressBook()">Empty. Create an alias for your addresses</p>
<table ng-show="showAddressBook()"> <table ng-show="showAddressBook()">