From 45db939dd88498d8253f7a0f2e1ff63d2aadef43 Mon Sep 17 00:00:00 2001
From: bechi <bechilandia@gmail.com>
Date: Fri, 18 Jul 2014 18:56:39 -0300
Subject: [PATCH] send page

---
 css/main.css    |  41 +++++++++++
 views/send.html | 190 +++++++++++++++++++++++-------------------------
 2 files changed, 130 insertions(+), 101 deletions(-)

diff --git a/css/main.css b/css/main.css
index a11dc13f0..bbf307aea 100644
--- a/css/main.css
+++ b/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;
 }
diff --git a/views/send.html b/views/send.html
index abf12a60b..60778eb36 100644
--- a/views/send.html
+++ b/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()">