Fixes send form

This commit is contained in:
Gustavo Maximiliano Cortez 2014-07-22 10:54:12 -03:00
parent c4041f8292
commit 6c8993fcab
3 changed files with 145 additions and 116 deletions

View File

@ -245,12 +245,18 @@ a:hover {
color: #C0392B; color: #C0392B;
} }
.input-note {
margin-top: -10px;
display: block;
margin-bottom: 1rem;
}
.box-note { .box-note {
text-align: center;
clear: both;
font-style: italic; font-style: italic;
color: gray; color: gray;
margin-bottom: 10px; background-color: #EDEDF5;
padding: 1.5rem;
width: 400px;
} }
.button-setup a { .button-setup a {
@ -321,6 +327,10 @@ a:hover {
.oh {overflow:hidden;} .oh {overflow:hidden;}
.lh {line-height: 0;} .lh {line-height: 0;}
.small {
font-size: 60%;
line-height: inherit;
}
.line-dashed-setup-v { .line-dashed-setup-v {
border-left: 1px dashed #415970; border-left: 1px dashed #415970;
@ -785,11 +795,6 @@ button[disabled].white:focus,
padding: 0.2rem 0.4rem; padding: 0.2rem 0.4rem;
} }
.send-bar {
background-color: #EDEDF5;
padding: 1.5rem;
}
.has-error { .has-error {
color: #C0392A; color: #C0392A;
} }
@ -802,7 +807,7 @@ input.ng-invalid-match, input.ng-invalid-match:focus {
border-color: red; border-color: red;
} }
.copayers h3,h4 { .copayers h3, .copayers h4 {
color: #fff; color: #fff;
font-weight: 100; font-weight: 100;
} }

View File

@ -1,4 +1,4 @@
<h3>Add Address Book Entry</h3> <h2>Add Address Book Entry</h2>
<form name="addressBookForm" ng-submit="submitAddressBook(addressBookForm)" novalidate> <form name="addressBookForm" ng-submit="submitAddressBook(addressBookForm)" novalidate>
<label for="newaddress">Address <label for="newaddress">Address
<small ng-hide="!addressBookForm.newaddress.$pristine || newaddress">required</small> <small ng-hide="!addressBookForm.newaddress.$pristine || newaddress">required</small>

View File

@ -1,27 +1,30 @@
<div class="send" data-ng-controller="SendController"> <div class="send" data-ng-controller="SendController">
<div ng-show='$root.wallet.isReady()'> <div ng-show='$root.wallet.isReady()'>
<h1>{{title}}</h1>
<div class="large-6 columns">
<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">
<h4 class="large-2 medium-3 columns text-right">To address <small class="text-gray">(*)</small> </h4> <div class="large-12 columns">
<div class="large-8 medium-7 small-10 columns pr m15b" for="address"> <div class="row collapse">
<input style="margin:0;" type="text" id="address" name="address" ng-disabled="loading" <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> 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-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>
<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="small-2 columns" ng-hide="showScanner || !isHttp">
<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> <!-- end of to address --> </div>
<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>
@ -39,44 +42,68 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
<div class="row"> <div class="row">
<h4 class="large-2 medium-3 text-right columns">Amount <small class="text-gray">(*)</small></h4> <div class="large-6 medium-6 columns">
<div class="large-8 medium-7 columns m15b"> <div class="row collapse">
<input style="margin:0;" type="number" id="amount" ng-disabled="loading" <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" 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"
> >
<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 && !notEnoughAmount"><i class="fi-x"></i></small>
<a class="small input-note" title="Send all funds" <a class="small input-note" title="Send all funds"
ng-show="$root.availableBalance > 0" ng-show="$root.availableBalance > 0"
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">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> <div class="small-3 columns">
<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>
</div>
</div>
<div class="row" ng-show="wallet.totalCopayers > 1"> <div class="row" ng-show="wallet.totalCopayers > 1">
<h4 class="large-2 medium-3 columns text-right" for="comment">Note <div class="large-12 columns">
</h4> <div class="row collapse">
<div class="large-10 medium-9 columns m15b"> <label for="comment">Note
<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 ng-hide="!sendForm.comment.$pristine">optional</small>
<small class="has-error" ng-show="sendForm.comment.$invalid && !sendForm.comment.$pristine">too long!</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>
</div> <!-- end of note -->
</div> <!-- end of col left -->
<div class="send-bar large-4 columns left"> <div class="row">
<div class="large-5 columns">
<button type="submit" class="button secondary expand text-center" ng-disabled="sendForm.$invalid || loading" loading="Sending">
Send
</button>
</div>
</div>
</form>
</div>
<div class="large-6 columns">
<div class="box-note">
<h6>Send to</h6> <h6>Send to</h6>
<p class="text-gray" ng-class="{'hidden': sendForm.address.$invalid || !address}"> <p class="text-gray" ng-class="{'hidden': sendForm.address.$invalid || !address}">
{{address}}&nbsp; {{address}}&nbsp;
@ -89,15 +116,12 @@
Including fee of {{defaultFee|noFractionNumber}} {{$root.unitName}} Including fee of {{defaultFee|noFractionNumber}} {{$root.unitName}}
</small> </small>
</p> </p>
<div ng-show="wallet.totalCopayers > 1">
<h6>Note</h6> <h6>Note</h6>
<p ng-class="{'hidden': !commentText}">{{commentText}}&nbsp;</p> <p ng-class="{'hidden': !commentText}">{{commentText}}</p>
<div> </div>
<button type="submit" class="button secondary expand text-center m0" ng-disabled="sendForm.$invalid || loading" loading="Sending">
Send
</button>
</div> </div>
</div> </div>
</form>
<div class="large-12 columns line-dashed"> <div class="large-12 columns line-dashed">
<h3>Address Book</h3> <h3>Address Book</h3>
@ -125,7 +149,7 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
<button class="m10t button tiny secondary radius text-center" ng-click="openAddressBookModal()">Add New Entry</button> <button class="button tiny secondary text-center" ng-click="openAddressBookModal()">Add New Entry</button>
</div> </div>
</div> </div>
</div> </div>