Merge pull request #186 from cmgustavo/feature/01-spinners-buttons

Feature/01 spinners buttons

css/main.css

@@ -248,6 +248,10 @@ button.secondary { background-color: #FAE448 !important; }
 button.primary:hover { background-color: #333;}
 button.secondary:hover { background-color: #FFDF00 !important;}
 
+[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
+  display: none !important;
+}
+.dn {display: none;}
 .text-gray { color: #999 !important;}
 .pr {position: relative;}
 .m0 {margin: 0;}

index.html

@@ -93,7 +93,7 @@
 
   </div>
 
-  <div class="row">
+  <div class="row" ng-cloak class="ng-cloak">
     <div class="large-12 columns" ng-view></div>
   </div>
 
@@ -110,7 +110,7 @@
                 <h3>Create a New Wallet</h3>
               </div>
               <div class="large-3 columns">
-                <button class="button secondary expand round" ng-click="create()">Create</button>
+                <button class="button secondary expand round" ng-click="create()" ng-disabled="loading" loading="Creating">Create</button>
               </div>
             </div>
             <hr>
@@ -125,7 +125,7 @@
               </div>
               <div class="large-3 columns">
                 <button class="button secondary expand round" type="button"
-                   ng-click="open(selectedWalletId)">Open</button>
+                   ng-click="open(selectedWalletId)" ng-disabled="loading" loading="Opening">Open</button>
               </div>
             </div>
             <hr>
@@ -139,7 +139,7 @@
               </div>
               <div class="large-3 columns">
                 <button class="button primary expand round"
-                  ng-click="join(connectionId)">Join</button>
+                  ng-click="join(connectionId)" ng-disabled="loading" loading="Joining">Join</button>
               </div>
             </div>
             <hr>
@@ -148,7 +148,7 @@
           <div class="row">
             <div class="large-12 columns">
               <div ng-show="wallets.length">
-                <a ng-click="create()">Create a new wallet</a>
+                <a ng-click="create()" ng-disabled="loading" loading="Creating">Create a new wallet</a>
               </div>
               <a class="right" ng-click="import()">Import from file</a>
             </div>
@@ -253,7 +253,7 @@
           </div>
           <div class="large-3 columns text-center">
             <p> Create a New <strong> Address </strong> </p>
-            <button class="secondary round expand" ng-click="newAddr()"> Create </button>
+            <button class="secondary round expand" ng-click="newAddr()" ng-disabled="loading" loading="Creating"> Create </button>
           </div>
         </div> 
         </div> 
@@ -324,10 +324,10 @@
                       <i class="fi-check size-40"></i> Signed by you already
                     </div>
                     <div ng-show="!tx.signedByUs && !tx.rejectedByUs  && !tx.finallyRejected && tx.missingSignatures"> 
-                      <button class="secondary round"  ng-click="sign(tx.ntxid)">
+                      <button class="secondary round"  ng-click="sign(tx.ntxid)" ng-disabled="loading" loading="Signing">
                         <i class="fi-check"></i> Sign
                       </button>
-                      <button class="primary round" ng-click="reject(tx.ntxid)">
+                      <button class="primary round" ng-click="reject(tx.ntxid)" ng-disabled="loading" loading>
                         <i class="fi-x" ></i> Reject 
                       </button>
                     </div>
@@ -339,7 +339,7 @@
  
                     <span ng-show="!tx.missingSignatures && !tx.sentTs">
                       Transaction ready.
-                      <button class="secondary round"  ng-click="send(tx.ntxid)">
+                      <button class="secondary round"  ng-click="send(tx.ntxid)" ng-disabled="loading" loading="Broadcasting">
                         Broadcast Transaction
                       </button>
                     </span>
@@ -451,8 +451,8 @@
                 </div>
               </div>
               <div class="row">
-                <div class="large-4 columns">
+                <div class="large-5 columns">
-                  <button type="submit" class="button secondary round text-center" ng-disabled="sendForm.$invalid">
+                  <button type="submit" class="button secondary round text-center" ng-disabled="sendForm.$invalid || loading" loading="Sending">
                     Send
                   </button>                 
                 </div>

js/controllers/addresses.js

@@ -16,12 +16,14 @@ angular.module('copay.addresses').controller('AddressesController',
           $scope.isMain = isMain;
           $scope.addrs =  Object.keys(balanceByAddr);
           $scope.selectedAddr = $scope.addrs[0];
+          $scope.loading = false;
           $rootScope.$digest();
         }
       });
     };
 
     $scope.newAddr = function() {
+      $scope.loading = true;
       w.generateAddress();
       _updateBalance();
     };

js/controllers/send.js

@@ -3,6 +3,7 @@
 angular.module('copay.send').controller('SendController',
   function($scope, $rootScope, $location) {
     $scope.title = 'Send';
+    $scope.loading = false;
 
     $scope.unitIds = ['BTC','mBTC'];
     $scope.selectedUnit = $scope.unitIds[0];
@@ -13,20 +14,24 @@ angular.module('copay.send').controller('SendController',
         return;
       }
 
+      $scope.loading = true;
+
       var address = form.address.$modelValue;
       var amount = (form.amount.$modelValue * 100000000).toString(); // satoshi to string
 
       var w = $rootScope.wallet;
       w.createTx( address, amount,function() {
 
-        // reset fields
+        $scope.loading = false;
-        $scope.address = null;
-        $scope.amount = null;
-        form.address.$pristine = true;
-        form.amount.$pristine = true;
         $rootScope.flashMessage = { message: 'The transaction proposal has been created', type: 'success'};
         $rootScope.$digest();
       });
-     
+
-		};
+      // reset fields
+      $scope.address = null;
+      $scope.amount = null;
+      form.address.$pristine = true;
+      form.amount.$pristine = true;
+
+    };
   });

js/controllers/signin.js

@@ -7,6 +7,7 @@ angular.module('copay.signin').controller('SigninController',
     $scope.selectedWalletId = $scope.wallets.length ? $scope.wallets[0].id : null;
 
     $scope.create = function() {
+      $scope.loading = true;
       $location.path('setup');
     };
 

js/controllers/transactions.js

@@ -5,6 +5,7 @@ angular.module('copay.transactions').controller('TransactionsController',
     var bitcore = require('bitcore');
 
     $scope.title = 'Transactions';
+    $scope.loading = false;
     var _updateTxs = function() {
       var w   =$rootScope.wallet;
       if (!w) return;
@@ -34,9 +35,11 @@ angular.module('copay.transactions').controller('TransactionsController',
       $scope.txs = txs;
       w.removeListener('txProposalsUpdated',_updateTxs)
       w.once('txProposalsUpdated',_updateTxs);
+      $scope.loading = false;
     };
 
     $scope.send = function (ntxid) {
+      $scope.loading = true;
       var w = $rootScope.wallet;
       w.sendTx(ntxid, function(txid) {
           console.log('[transactions.js.68:txid:] SENTTX CALLBACK',txid); //TODO
@@ -50,6 +53,7 @@ angular.module('copay.transactions').controller('TransactionsController',
     };
 
     $scope.sign = function (ntxid) {
+      $scope.loading = true;
       var w = $rootScope.wallet;
       var ret = w.sign(ntxid);
 
@@ -84,6 +88,7 @@ angular.module('copay.transactions').controller('TransactionsController',
     };
 
     $scope.reject = function (ntxid) {
+      $scope.loading = true;
       var w = $rootScope.wallet;
       w.reject(ntxid);
       $rootScope.flashMessage = {type:'warning', message: 'Transaction rejected by you'};

js/directives.js

@@ -58,5 +58,22 @@ angular.module('copay.directives')
       }
     };
   }])
+  .directive('loading', function () {
+    return {
+      restrict: 'A',
+      link: function (scope, element, attr) {
+        var a = element.html();
+        var text = attr.loading;
+        scope.$watch('loading', function (val) {
+          if (val) {
+            element.html('<img src="img/loading.gif"> ' + text + '...' );
+          }
+          else {
+            element.html(a);
+          }
+        });
+      }
+    }
+  })
 ;
 

js/models/core/PublicKeyRing.js

@@ -214,12 +214,12 @@ PublicKeyRing.prototype.getAddresses = function(onlyMain) {
   var ret = [];
 
   for (var i=0; i<this.addressIndex; i++) {
-    ret.push(this.getAddress(i,false));
+    ret.unshift(this.getAddress(i,false));
   }
 
   if (!onlyMain) {
     for (var i=0; i<this.changeAddressIndex; i++) {
-      ret.push(this.getAddress(i,true));
+      ret.unshift(this.getAddress(i,true));
     }
   }
   return ret;