payment intents style fixes

css/src/animation.css

@@ -20,56 +20,6 @@
 	transition: height 250ms ease-in;
 }
 
-.w-popup-menu li {
-	-webkit-transition: all 300ms linear;
-  -moz-transition: all 300ms linear;
-  -o-transition: all 300ms linear;
-  -ms-transition: all 300ms linear;
-  transition: all 300ms linear;
-}
-
-.w-popup-icon {
-	-webkit-transition: all 200ms linear;
-  -moz-transition: all 200ms linear;
-  -o-transition: all 200ms linear;
-  -ms-transition: all 200ms linear;
-  transition: all 200ms linear;
-}
-
-.w-popup-main {
-	-webkit-transition: all 200ms linear;
-  -moz-transition: all 200ms linear;
-  -o-transition: all 200ms linear;
-  -ms-transition: all 200ms linear;
-  transition: all 200ms linear;
-}
-
-.w-popup-sub {
-	-webkit-transition: all 200ms linear;
-  -moz-transition: all 200ms linear;
-  -o-transition: all 200ms linear;
-  -ms-transition: all 200ms linear;
-  transition: all 200ms linear;
-}
-
-.w-popup-menu li:hover .w-popup-icon {
-	-webkit-animation: moveFromTop 400ms ease;
-  -moz-animation: moveFromTop 400ms ease;
-  -ms-animation: moveFromTop 400ms ease;
-}
-
-.w-popup-menu li:hover .w-popup-main {
-	-webkit-animation: moveFromTop 300ms ease;
-  -moz-animation: moveFromTop 300ms ease;
-  -ms-animation: moveFromTop 300ms ease;
-}
-
-.w-popup-menu li:hover .w-popup-sub {
-	-webkit-animation: moveFromBottom 500ms ease;
-  -moz-animation: moveFromBottom 500ms ease;
-  -ms-animation: moveFromBottom 500ms ease;
-}
-
 .icon-rotate {
   animation-name: rotateThis;
   animation-duration: 2s;
@@ -1326,4 +1276,4 @@ stretchRight
   0%{transform:rotate(0deg) scale(1);}
   50%{transform:rotate(360deg) scale(1.3);}
   100%{transform:rotate(720deg) scale(1);}
-}
+}

css/src/main.css

@@ -268,7 +268,9 @@ input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill, inpu
   color: #FFF;
 }
 
-.side-nav.wallets .avatar-wallet{
+.side-nav.wallets .avatar-wallet, 
+.wallet-selection.wallets .avatar-wallet
+{
   background-color: #7A8C9E;
   color: #213140;
   padding: 0.35rem 0.5rem;
@@ -1168,6 +1170,28 @@ button.gray:focus,
   text-transform: uppercase;
 }
 
+.wallet-selection.wallets {
+  background-color: #213140 ;
+}
+
+ul.wallet-selection.wallets {
+  margin: 0;
+  overflow: hidden;
+}
+
+.wallet-selection.wallets li {
+  overflow: hidden;
+  padding: 1rem;
+}
+
+.wallet-selection.wallets li a {
+  display: block;
+}
+
+.wallet-selection.wallets li:hover {
+  background-color: #3C4E60;
+}
+
 .side-nav.wallets li {
   margin: 1.2rem 0;
   padding: 0.3rem 0.1rem;
@@ -1188,12 +1212,15 @@ button.gray:focus,
   height: 100%;
 }
 
+.wallet-selection.wallets a.wallet-item, 
+.wallet-selection.wallets a.wallet-item:hover, 
 .side-nav.wallets a.wallet-item, 
 .side-nav.wallets a.wallet-item:hover {
   color: #7A8C9E;
   line-height: 20px;
 }
 
+.wallet-selection.wallets .type-wallet,
 .side-nav.wallets .type-wallet {
   color: #AAB1B9;
 }

js/controllers/walletForPayment.js

@@ -2,50 +2,47 @@ var bitcore = require('bitcore');
 
 angular.module('copayApp.controllers').controller('walletForPaymentController', function($rootScope, $scope, $modal, identityService, go) {
 
-  $scope.selectWallet = function(cb) {
-    var ModalInstanceCtrl = function($scope, $modalInstance, identityService) {
-      $scope.loading = true;
-      preconditions.checkState($rootScope.iden);
+  // INIT: (not it a function, since there is no associated html)
 
-      var iden = $rootScope.iden;
-      iden.on('newWallet', function() {
-        $scope.setWallets();
-      });
+  var ModalInstanceCtrl = function($scope, $modalInstance, identityService) {
+    $scope.loading = true;
+    preconditions.checkState($rootScope.iden);
 
-      $scope.setWallets = function() {
-        $scope.wallets = $rootScope.iden.listWallets();
-      };
+    var iden = $rootScope.iden;
+    iden.on('newWallet', function() {
+      $scope.setWallets();
+    });
 
-      $scope.ok = function(w) {
-        $modalInstance.close();
-        return cb(w);
-      };
-
-      $scope.cancel = function() {
-        $modalInstance.close();
-        return cb();
-      };
+    $scope.setWallets = function() {
+      $scope.wallets = $rootScope.iden.listWallets();
     };
 
-    $modal.open({
-      templateUrl: 'views/modals/walletSelection.html',
-      windowClass: 'tiny',
-      controller: ModalInstanceCtrl,
-    });
+    $scope.ok = function(w) {
+      $modalInstance.close(w);
+    };
+
+    $scope.cancel = function() {
+      $rootScope.pendingPayment = null;
+      $modalInstance.close();
+    };
   };
 
+  var modalInstance = $modal.open({
+    templateUrl: 'views/modals/walletSelection.html',
+    windowClass: 'tiny',
+    controller: ModalInstanceCtrl,
+  });
 
-  // INIT: (not it a function, since there is no associated html)
-  if (!$rootScope.pendingPayment) {
+  modalInstance.result.then(function(w) {
+    if (w) {
+      identityService.setFocusedWallet(w);
+      $rootScope.walletForPaymentSet = true;
+    } else {
+      $rootScope.pendingPayment = null;
+    }
     go.walletHome();
-  } else {
-    $scope.selectWallet(function(w) {
-      if (w) {
-        identityService.setFocusedWallet(w);
-        go.send();
-      } else {
-        go.walletHome();
-      }
-    });
-  };
+  }, function() {
+    $rootScope.pendingPayment = null;
+    go.walletHome();
+  });
 });

js/services/go.js

@@ -65,7 +65,11 @@ angular.module('copayApp.services').factory('go', function($window, $rootScope,
       root.path('copayers');
     } else {
       if ($rootScope.pendingPayment) {
-        root.path('selectWalletForPayment');
+        if ($rootScope.walletForPaymentSet) {
+          root.path('send');
+        } else {
+          root.path('selectWalletForPayment');
+        }
       } else {
         root.path('homeWallet');
       }

views/includes/walletbar-mobile.html

@@ -6,12 +6,12 @@
     <li 
       ng-repeat="item in wallets track by $index"
       ng-class="{'selected': item.id == $root.wallet.id}"
-      class="nav-item">
+      class="nav-item" ng-click="switchWallet(item.id)" >
     <div class="col1">
       <div class="avatar-wallet">{{(item.name || item.id) | limitTo: 1}}</div>
     </div>
     <div class="col2">
-      <a ng-click="switchWallet(item.id)" class="size-12 wallet-item">
+      <a class="size-12 wallet-item">
         <div class="oh">
           <div class="right size-10 type-wallet">
             [ {{item.requiredCopayers}} of {{item.totalCopayers}} ]</div> 

views/modals/walletSelection.html

@@ -1,29 +1,29 @@
- <a class="close-reveal-modal" ng-click="cancel()">&#215;</a>
+<div ng-init="setWallets()">
 
-<h3 ng-init="setWallets()">Select a wallet to make the payment</h3>
-<span ng-show="!wallets[0]">Loading...</span>
-<ul class="w-popup-menu" ng-show="wallets[0]" ng-class="{'large':wallets.length > 4, 'medium':wallets.length > 2 && wallets.length < 5}">
-  <li data-ng-repeat="item in wallets track by $index" class="nav-item" ng-click="ok(item)" ng-show="+item.balanceInfo.totalBalanceBTC > 0">
-    <div class="w-popup-icon">
-      <div class="avatar-wallet">{{(item.name || item.id) | limitTo: 1}}</div>
-    </div>
-    <div class="w-popup-content">
-      <div class="">
+  <a class="close-reveal-modal" ng-click="cancel()">&#215;</a>
+
+  <h1 class="line-b"> Select a wallet to make the payment</h1>
+
+  <div class="m20v" ng-show="!wallets[0]">Loading...</div>
+  <ul class="wallet-selection wallets" ng-show="wallets[0]">
+    <li ng-repeat="item in wallets track by $index" class="nav-item" ng-show="+item.balanceInfo.totalBalanceBTC > 0"  ng-click="ok(item)">
+      <div class="col1">
+        <div class="avatar-wallet">{{item.getName() | limitTo: 1}}</div>
+      </div>
+      <div class="col2">
         <a class="size-12 wallet-item">
-          <div class="">
-            <div class="w-popup-main">[ {{item.requiredCopayers}} of {{item.totalCopayers}} ]</div>
-            <div class="w-popup-sub size-18">{{item.name || item.id}}</div>
+          <div class="oh">
+            <div class="right size-10 type-wallet">
+              [ {{item.requiredCopayers}} of {{item.totalCopayers}} ]</div>
+            <div class="ellipsis name-wallet">{{item.getName()}}</div>
           </div>
-          <div class="w-popup-sub">
-            <span ng-if="item.balanceInfo.updatingBalance"><i class="fi-bitcoin-circle icon-rotate spinner"></i></span>
-            <div ng-if="!item.balanceInfo.updatingBalance" data-options="disable_for_touch:true">
-              <b class="m5r size-12">{{item.balanceInfo.totalBalance || 0}} {{item.settings.unitName}}</b>
-              <span class="alt-currency size-10">{{item.balanceInfo.totalBalanceAlternative}} {{item.balanceInfo.alternativeIsoCode}}</span>
-            </div>
+          <div class="oh">
+            <b class="m5r size-12">{{item.balanceInfo.totalBalance || 0}} {{item.settings.unitName}}</b>
+            <span class="alt-currency size-10">{{item.balanceInfo.totalBalanceAlternative}} {{item.balanceInfo.alternativeIsoCode}}</span>
           </div>
         </a>
       </div>
-    </div>
-  </li>
-</ul>
+    </li>
+  </ul>
 
+</div>