From 5921a1f1ae6149c7ef0a20815c5e87f07c070b91 Mon Sep 17 00:00:00 2001
From: Gustavo Maximiliano Cortez <cmgustavo83@gmail.com>
Date: Tue, 22 Jul 2014 11:27:10 -0300
Subject: [PATCH] Fixes transactions and send pages

---
 css/main.css                 |  10 +-
 views/modals/qr-address.html |   2 +-
 views/send.html              |   4 +-
 views/transactions.html      | 298 ++++++++++++++++++-----------------
 4 files changed, 162 insertions(+), 152 deletions(-)

diff --git a/css/main.css b/css/main.css
index 10aebab50..d6051b763 100644
--- a/css/main.css
+++ b/css/main.css
@@ -251,7 +251,7 @@ a:hover {
   margin-bottom: 1rem;
 }
 
-.box-note {
+.send-note {
   font-style: italic;
   color: gray;
   background-color: #EDEDF5;
@@ -259,6 +259,14 @@ a:hover {
   width: 400px;
 }
 
+.box-note {
+  text-align: center;
+  clear: both;
+  font-style: italic;
+  color: gray;
+  margin-bottom: 10px;  
+}
+
 .button-setup a {
   display: block;
   padding: 20px 30px;
diff --git a/views/modals/qr-address.html b/views/modals/qr-address.html
index e7d132cb1..418a88cc9 100644
--- a/views/modals/qr-address.html
+++ b/views/modals/qr-address.html
@@ -1,6 +1,6 @@
 <div class="text-center">
   <qrcode size="160" data="{{address.address}}"></qrcode>
-  <h2>{{address.address}}</h2>
+  <h4>{{address.address}}</h4>
   <div>
     <span ng-if="$root.updatingBalance">
       <i class="fi-bitcoin-circle icon-rotate spinner"></i>
diff --git a/views/send.html b/views/send.html
index c2e285616..f27f87bde 100644
--- a/views/send.html
+++ b/views/send.html
@@ -103,7 +103,7 @@
     </div>
 
     <div class="large-6 columns">
-      <div class="box-note">
+      <div class="send-note">
         <h6>Send to</h6>
         <p class="text-gray" ng-class="{'hidden': sendForm.address.$invalid || !address}">
         {{address}}&nbsp;
@@ -124,7 +124,7 @@
     </div>
 
       <div class="large-12 columns line-dashed">
-        <h3>Address Book</h3>
+        <h2>Address Book</h2>
         <p class="text-gray" ng-hide="showAddressBook()">Empty. Create an alias for your addresses</p>
         <table ng-show="showAddressBook()">
           <thead>
diff --git a/views/transactions.html b/views/transactions.html
index 05a55a77e..7cdeb8ddd 100644
--- a/views/transactions.html
+++ b/views/transactions.html
@@ -1,176 +1,178 @@
 <div class="transactions" data-ng-controller="TransactionsController">
-  <div class="row" ng-show='$root.wallet.isReady()'>
-    <div class="large-12 columns" ng-show="wallet.totalCopayers > 1">
-      <h1> Transaction proposals <small>({{txs.length}})</small></h1>
-
-      <ul class="inline-list">
-        <li> <a class="text-gray size-12" ng-click="show(true)" ng-disabled="loading || onlyPending" loading="Updating" ng-class="{'active' : onlyPending}"> [ Pending ] </a> </li>
-        <li> <a class="text-gray size-12" ng-click="show()" ng-disabled="loading || !onlyPending" loading="Updating" ng-class="{'active' : !onlyPending}"> [ All ] </a> </li>
-      </ul>
-      <div class="last-transactions" ng-repeat="tx in txs | paged">
-        <div class="last-transactions-header row">
-          <div class="large-8 medium-8 small-12 columns">
-            <div class="row" ng-repeat="out in tx.outs">
-              <div class="large-3 medium-3 small-3 columns ellipsis">
-                {{out.value | noFractionNumber}} {{$root.unitName}}</div>
-              <div class="large-1 medium-1 small-2 columns fi-arrow-right size-24"> </div>
-              <div class="large-8 medium-8 small-7 columns ellipsis">
-                <contact address="{{out.address}}" tooltip-popup-delay="500" tooltip tooltip-placement="right"/>
+  <div ng-show='$root.wallet.isReady()'>
+    <h1 ng-show="wallet.totalCopayers > 1"> Transaction proposals <small>({{txs.length}})</small></h1>
+    <div class="row">
+      <div class="large-12 columns" ng-show="wallet.totalCopayers > 1">
+        <ul class="inline-list">
+          <li> <a class="text-gray size-12" ng-click="show(true)" ng-disabled="loading || onlyPending" loading="Updating" ng-class="{'active' : onlyPending}"> [ Pending ] </a> </li>
+          <li> <a class="text-gray size-12" ng-click="show()" ng-disabled="loading || !onlyPending" loading="Updating" ng-class="{'active' : !onlyPending}"> [ All ] </a> </li>
+        </ul>
+        <div class="last-transactions" ng-repeat="tx in txs | paged">
+          <div class="last-transactions-header row">
+            <div class="large-8 medium-8 small-12 columns">
+              <div class="row" ng-repeat="out in tx.outs">
+                <div class="large-3 medium-3 small-3 columns ellipsis">
+                  {{out.value | noFractionNumber}} {{$root.unitName}}</div>
+                <div class="large-1 medium-1 small-2 columns fi-arrow-right size-24"> </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>
-          </div>
-          <div class="large-4 medium-4 small-12 columns text-right">
-            <h6>{{tx.createdTs | amCalendar}}</h6>
-          </div>
-        </div>
-
-        <div class="last-transactions-content">
-          <div class="box-note large-12" ng-show="tx.comment">
-            "{{tx.comment}}" - {{$root.wallet.publicKeyRing.nicknameForCopayer(tx.creator)}}
+            <div class="large-4 medium-4 small-12 columns text-right">
+              <h6>{{tx.createdTs | amCalendar}}</h6>
+            </div>
           </div>
 
-          <div class="box-copayer" ng-repeat="(cId, actions) in tx.peerActions">
+          <div class="last-transactions-content">
+            <div class="box-note large-12" ng-show="tx.comment">
+              "{{tx.comment}}" - {{$root.wallet.publicKeyRing.nicknameForCopayer(tx.creator)}}
+            </div>
+
+            <div class="box-copayer" ng-repeat="(cId, actions) in tx.peerActions">
               <a href="/transactions" class="has-tip" tooltip-popup-delay="1000" tooltip="{{cId === $root.wallet.getMyCopayerId() ? 'You' : $root.wallet.publicKeyRing.nicknameForCopayer(cId)}}">
                 <img class="copayer-ico br100" src="./img/satoshi.gif" alt="{{cId}}">
               </a>
-            <div class="box-status">
-              <span ng-repeat="(action, ts) in actions">
-                <a ng-if="action == 'create'" href="/transactions" tooltip-popup-delay="1000" tooltip="Created {{ts | amTimeAgo}}">
-                  <i class="fi-crown icon-status icon-active"></i>
-                </a>
-                <a ng-if="action == 'seen'" href="/transactions" tooltip-popup-delay="1000" tooltip="Seen {{ts | amTimeAgo}}">
-                  <i class="fi-eye icon-status icon-active"></i>
-                </a>
-                <a ng-if="action == 'sign'" href="/transactions" tooltip-popup-delay="1000" tooltip="Signed {{ts | amTimeAgo}}">
-                  <i class="fi-check icon-status icon-active-check"></i>
-                </a>
-                <a ng-if="action == 'rejected'" href="/transactions" tooltip-popup-delay="1000" tooltip="Rejected {{ts | amTimeAgo}}">
-                  <i class="fi-x icon-status icon-active-x"></i>
-                </a>
-              </span>
+              <div class="box-status">
+                <span ng-repeat="(action, ts) in actions">
+                  <a ng-if="action == 'create'" href="/transactions" tooltip-popup-delay="1000" tooltip="Created {{ts | amTimeAgo}}">
+                    <i class="fi-crown icon-status icon-active"></i>
+                  </a>
+                  <a ng-if="action == 'seen'" href="/transactions" tooltip-popup-delay="1000" tooltip="Seen {{ts | amTimeAgo}}">
+                    <i class="fi-eye icon-status icon-active"></i>
+                  </a>
+                  <a ng-if="action == 'sign'" href="/transactions" tooltip-popup-delay="1000" tooltip="Signed {{ts | amTimeAgo}}">
+                    <i class="fi-check icon-status icon-active-check"></i>
+                  </a>
+                  <a ng-if="action == 'rejected'" href="/transactions" tooltip-popup-delay="1000" tooltip="Rejected {{ts | amTimeAgo}}">
+                    <i class="fi-x icon-status icon-active-x"></i>
+                  </a>
+                </span>
+              </div>
+
+              <div class="text-center">
+                {{$root.wallet.publicKeyRing.nicknameForCopayer(cId)}}
+              </div>
+            </div>
+          </div>
+
+          <div class="row last-transactions-footer">
+            <div class="large-5 medium-5 columns" ng-show="!tx.sentTs">
+              <div ng-show="!tx.signedByUs && !tx.rejectedByUs  && !tx.finallyRejected && tx.missingSignatures">
+                <button class="secondary radius m10r"  ng-click="sign(tx.ntxid)" ng-disabled="loading" loading="Signing">
+                  <i class="fi-check"></i> Sign
+                </button>
+                <button class="warning radius" ng-click="reject(tx.ntxid)" ng-disabled="loading" loading="Rejecting">
+                  <i class="fi-x" ></i> Reject
+                </button>
+              </div>
+              <div ng-show="!tx.missingSignatures && !tx.sentTs">
+                <button class="primary radius"  ng-click="send(tx.ntxid)" ng-disabled="loading" loading="Broadcasting"> <i class=".fi-upload-cloud"></i>
+                  Broadcast Transaction
+                </button>
+              </div>
             </div>
 
-            <div class="text-center">
-              {{$root.wallet.publicKeyRing.nicknameForCopayer(cId)}}
-            </div>
-          </div>
-        </div>
-
-        <div class="row last-transactions-footer">
-          <div class="large-5 medium-5 columns" ng-show="!tx.sentTs">
-            <div ng-show="!tx.signedByUs && !tx.rejectedByUs  && !tx.finallyRejected && tx.missingSignatures">
-              <button class="secondary radius m10r"  ng-click="sign(tx.ntxid)" ng-disabled="loading" loading="Signing">
-                <i class="fi-check"></i> Sign
-              </button>
-              <button class="warning radius" ng-click="reject(tx.ntxid)" ng-disabled="loading" loading="Rejecting">
-                <i class="fi-x" ></i> Reject
-              </button>
-            </div>
-            <div ng-show="!tx.missingSignatures && !tx.sentTs">
-              <button class="primary radius"  ng-click="send(tx.ntxid)" ng-disabled="loading" loading="Broadcasting"> <i class=".fi-upload-cloud"></i>
-                Broadcast Transaction
-              </button>
-            </div>
-          </div>
-
-          <div class="large-7 medium-7 columns text-right">
-            <div ng-show="tx.finallyRejected" class="text-warning m10b">
-              Transaction finally rejected
-            </div>
-            <div ng-show="!tx.missingSignatures && tx.sentTs">
-              <div class="success m10b">
-                <strong>Sent</strong> <span class="text-gray" am-time-ago="tx.sentTs"></span>
-              </div>
-              <div class="ellipsis small">
-                Transaction ID:
-                <a href="http://{{getShortNetworkName()}}.insight.is/tx/{{tx.sentTxid}}" target="blank">
-                  {{tx.sentTxid}}
-                </a>
-              </div>
-            </div>
-            <p class="text-gray m5b" ng-show="!tx.finallyRejected && tx.missingSignatures==1">
-            One signature missing
-            </p>
-            <p class="text-gray m5b" ng-show="!tx.finallyRejected && tx.missingSignatures>1">
-            {{tx.missingSignatures}} signatures missing</p>
-            <div class="ellipsis small text-gray">
-              <strong>Fee:</strong> {{tx.fee|noFractionNumber}} {{$root.unitName}}
-              <strong>Proposal ID:</strong> {{tx.ntxid}}
+            <div class="large-7 medium-7 columns text-right">
+              <div ng-show="tx.finallyRejected" class="text-warning m10b">
+                Transaction finally rejected
+              </div>
+              <div ng-show="!tx.missingSignatures && tx.sentTs">
+                <div class="success m10b">
+                  <strong>Sent</strong> <span class="text-gray" am-time-ago="tx.sentTs"></span>
+                </div>
+                <div class="ellipsis small">
+                  Transaction ID:
+                  <a href="http://{{getShortNetworkName()}}.insight.is/tx/{{tx.sentTxid}}" target="blank">
+                    {{tx.sentTxid}}
+                  </a>
+                </div>
+              </div>
+              <p class="text-gray m5b" ng-show="!tx.finallyRejected && tx.missingSignatures==1">
+              One signature missing
+              </p>
+              <p class="text-gray m5b" ng-show="!tx.finallyRejected && tx.missingSignatures>1">
+              {{tx.missingSignatures}} signatures missing</p>
+              <div class="ellipsis small text-gray">
+                <strong>Fee:</strong> {{tx.fee|noFractionNumber}} {{$root.unitName}}
+                <strong>Proposal ID:</strong> {{tx.ntxid}}
+              </div>
             </div>
           </div>
         </div>
+        <p ng-show="onlyPending && txs.length == 0">No pending transactions proposals.</p>
+        <p ng-show="!onlyPending && txs.length == 0">No transactions proposals yet.</p>
+        <pagination ng-show="!onlyPending && txs.length > txpItemsPerPage" total-items="txs.length" items-per-page="txpItemsPerPage" page="txpCurrentPage" on-select-page="show()" class="pagination-small primary"></pagination>
       </div>
-      <p ng-show="onlyPending && txs.length == 0">No pending transactions proposals.</p>
-      <p ng-show="!onlyPending && txs.length == 0">No transactions proposals yet.</p>
-      <pagination ng-show="!onlyPending && txs.length > txpItemsPerPage" total-items="txs.length" items-per-page="txpItemsPerPage" page="txpCurrentPage" on-select-page="show()" class="pagination-small primary"></pagination>
     </div>
-    
-    <div class="large-12 columns line-dashed-h" ng-hide="wallet.totalCopayers == 1"></div>
-    
-    <div class="large-12 columns">
-      <h1>
-        Last transactions 
-        <small ng-hide="wallet.totalCopayers > 1 || !loading">
-          <i class="fi-bitcoin-circle icon-rotate spinner"></i>
-        </small>   
-      </h1>
-      <div class="m10b size-12" ng-hide="wallet.totalCopayers == 1">
-        <a class="text-gray active" ng-click="toogleLast()" ng-disabled="loading" loading="Loading" ng-hide="lastShowed && !loading">[ Show ]</a>
-        <a class="text-gray" ng-click="toogleLast()" ng-disabled="loading" loading="Loading" ng-show="lastShowed && !loading">[ Hide ]</a>
-      </div>
 
-      <div class="btransactions" ng-if="lastShowed">
-        <div ng-if="!blockchain_txs[0].txid && !loading">
-          No transactions yet.
+    <h1 ng-class="{'line-dashed': wallet.totalCopayers > 1}">
+      Last transactions 
+      <small ng-hide="wallet.totalCopayers > 1 || !loading">
+        <i class="fi-bitcoin-circle icon-rotate spinner"></i>
+      </small>   
+    </h1>
+
+    <div class="row">
+      <div class="large-12 columns">
+        <div class="m10b size-12" ng-hide="wallet.totalCopayers == 1">
+          <a class="text-gray active" ng-click="toogleLast()" ng-disabled="loading" loading="Loading" ng-hide="lastShowed && !loading">[ Show ]</a>
+          <a class="text-gray" ng-click="toogleLast()" ng-disabled="loading" loading="Loading" ng-show="lastShowed && !loading">[ Hide ]</a>
         </div>
-        <div class="last-transactions" ng-repeat="btx in blockchain_txs | orderBy: 'time':true">
-          <div class="last-transactions-header">
-            <div class="row">
-              <div class="large-8 columns">
-                <a class="ellipsis" href="http://{{getShortNetworkName()}}.insight.is/tx/{{btx.txid}}" target="blank">
-                  {{btx.txid}}
-                </a>
-              </div>
-              <div class="large-4 columns text-right">
-                <div data-ng-show="btx.firstSeenTs">
-                  first seen at
-                  <time>{{btx.firstSeenTs * 1000 | amCalendar}}</time>
+
+        <div class="btransactions" ng-if="lastShowed">
+          <div ng-if="!blockchain_txs[0].txid && !loading">
+            No transactions yet.
+          </div>
+          <div class="last-transactions" ng-repeat="btx in blockchain_txs | orderBy: 'time':true">
+            <div class="last-transactions-header">
+              <div class="row">
+                <div class="large-8 columns">
+                  <a class="ellipsis" href="http://{{getShortNetworkName()}}.insight.is/tx/{{btx.txid}}" target="blank">
+                    {{btx.txid}}
+                  </a>
                 </div>
-                <div data-ng-show="btx.time && !btx.firstSeenTs">
-                  mined at
-                  <time>{{btx.time * 1000 | amCalendar}}</time>
+                <div class="large-4 columns text-right">
+                  <div data-ng-show="btx.firstSeenTs">
+                    first seen at
+                    <time>{{btx.firstSeenTs * 1000 | amCalendar}}</time>
+                  </div>
+                  <div data-ng-show="btx.time && !btx.firstSeenTs">
+                    mined at
+                    <time>{{btx.time * 1000 | amCalendar}}</time>
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
-          <div class="last-transactions-content">
-            <div class="row">
-              <div class="large-5 medium-5 small-5 columns">
-                <div ng-repeat="vin in btx.vinSimple">
-                  <small class="right m5t">{{vin.value| noFractionNumber}} {{$root.unitName}}</small>
-                  <p class="ellipsis text-gray size-12">
-                  <contact address="{{vin.addr}}" tooltip-popup-delay="500" tooltip tooltip-placement="right"/>
-                  </p>
+            <div class="last-transactions-content">
+              <div class="row">
+                <div class="large-5 medium-5 small-5 columns">
+                  <div ng-repeat="vin in btx.vinSimple">
+                    <small class="right m5t">{{vin.value| noFractionNumber}} {{$root.unitName}}</small>
+                    <p class="ellipsis text-gray size-12">
+                    <contact address="{{vin.addr}}" tooltip-popup-delay="500" tooltip tooltip-placement="right"/>
+                    </p>
+                  </div>
                 </div>
-              </div>
-              <div class="large-1 medium-1 small-1 columns text-center">
-                <i class="fi-arrow-right"></i>
-              </div>
-              <div class="large-6 medium-6 small-6 columns">
-                <div ng-repeat="vout in btx.voutSimple">
-                  <small class="right m5t">{{vout.value| noFractionNumber}} {{$root.unitName}}</small>
-                  <p class="ellipsis text-gray size-12">
-                  <contact address="{{vout.addr}}" tooltip-popup-delay="500" tooltip tooltip-placement="right"/>
-                  </p>
+                <div class="large-1 medium-1 small-1 columns text-center">
+                  <i class="fi-arrow-right"></i>
+                </div>
+                <div class="large-6 medium-6 small-6 columns">
+                  <div ng-repeat="vout in btx.voutSimple">
+                    <small class="right m5t">{{vout.value| noFractionNumber}} {{$root.unitName}}</small>
+                    <p class="ellipsis text-gray size-12">
+                    <contact address="{{vout.addr}}" tooltip-popup-delay="500" tooltip tooltip-placement="right"/>
+                    </p>
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
-          <div class="last-transactions-footer">
-            <div class="row">
-              <div class="large-4 medium-4 small-4 columns">Fees: {{btx.fees | noFractionNumber}} {{$root.unitName}}</div>
-              <div class="large-4 medium-4 small-4 columns text-center">Confirmations: {{btx.confirmations || 0}}</div>
-              <div class="large-4 medium-4 small-4 columns text-right">Total: {{btx.valueOut| noFractionNumber}} {{$root.unitName}}</div>
+            <div class="last-transactions-footer">
+              <div class="row">
+                <div class="large-4 medium-4 small-4 columns">Fees: {{btx.fees | noFractionNumber}} {{$root.unitName}}</div>
+                <div class="large-4 medium-4 small-4 columns text-center">Confirmations: {{btx.confirmations || 0}}</div>
+                <div class="large-4 medium-4 small-4 columns text-right">Total: {{btx.valueOut| noFractionNumber}} {{$root.unitName}}</div>
+              </div>
             </div>
           </div>
         </div>