manage wallets uses modal

css/src/main.css

@@ -964,8 +964,9 @@ table tbody tr:last-child td {
   border-bottom: none; 
 }
 
-table tr.deleting {
+table.manage-wallets tr:hover {
-  background: #FCD5D5;
+  background-color: #eee;
+  cursor: pointer;
 }
 
 input[type=date], input[type=datetime-local], input[type=datetime], input[type=email], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week], textarea {

js/controllers/profile.js

@@ -1,7 +1,7 @@
 'use strict';
-angular.module('copayApp.controllers').controller('ProfileController', function($scope, $rootScope, $location, $modal, $filter, $timeout, backupService, identityService) {
+angular.module('copayApp.controllers').controller('ProfileController', function($scope, $rootScope, $location, $modal, $filter, $timeout, backupService, identityService, isMobile) {
   $scope.username = $rootScope.iden.getName();
-  $scope.isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
+  $scope.isSafari = isMobile.Safari();
 
   $rootScope.title = 'Profile';
   $scope.hideAdv = true;
@@ -15,17 +15,6 @@ angular.module('copayApp.controllers').controller('ProfileController', function(
     $scope.hideViewProfileBackup = true;
   }; 
 
-  $scope.deleteWallet = function(w) {
-    if (!w) return;
-    identityService.deleteWallet(w, function(err) {
-      $scope.loading = false;
-      if (err) {
-        copay.logger.warn(err);
-      }
-      $scope.setWallets();
-    });
-  };
-
 
   $scope.init = function() {
     if ($rootScope.quotaPerItem) {
@@ -54,29 +43,6 @@ angular.module('copayApp.controllers').controller('ProfileController', function(
     })
   }; 
 
-  $scope.downloadWalletBackup = function(w) {
-    if (!w) return;
-    backupService.walletDownload(w);
-  }
-
-  $scope.viewWalletBackup = function(w) {
-    var ModalInstanceCtrl = function($scope, $modalInstance) {
-
-      if (!w) return;
-      $scope.backupWalletPlainText = backupService.walletEncrypted(w);
-      $scope.hideViewWalletBackup = true;
-      $scope.cancel = function() {
-        $modalInstance.dismiss('cancel');
-      };
-    };
-
-    $modal.open({
-      templateUrl: 'views/modals/backup-text.html',
-      windowClass: 'tiny',
-      controller: ModalInstanceCtrl
-    });
-  };
-
   $scope.deleteProfile = function() {
     identityService.deleteProfile(function(err, res) {
       if (err) {
@@ -90,4 +56,45 @@ angular.module('copayApp.controllers').controller('ProfileController', function(
       }, 1);
     });
   };
+
+  $scope.walletInfo = function(w) {
+    var ModalInstanceCtrl = function($scope, $modalInstance) {
+      if (!w) return;
+      $scope.isSafari = isMobile.Safari();
+      $scope.item = w;
+
+      $scope.deleteWallet = function() {
+        $scope.loading = true;
+        identityService.deleteWallet($scope.item, function(err) {
+          if (err) {
+            copay.logger.warn(err);
+          }
+          $modalInstance.close();
+        });
+      };
+
+      $scope.downloadWalletBackup = function() {
+        backupService.walletDownload($scope.item);
+      };
+
+      $scope.viewWalletBackup = function() {
+        $scope.backupWalletPlainText = backupService.walletEncrypted($scope.item);
+      };
+
+      $scope.close = function() {
+        $modalInstance.dismiss('cancel');
+      };
+    }; 
+
+    var modalInstance = $modal.open({
+      templateUrl: 'views/modals/wallet-info.html',
+      windowClass: 'tiny',
+      controller: ModalInstanceCtrl
+    });
+
+    modalInstance.result.then(function() {
+      $scope.loading = false;
+      $scope.setWallets();
+    });
+  };
 });

js/services/isMobile.js

@@ -17,6 +17,9 @@ var isMobile = {
   Windows: function() {
     return !!navigator.userAgent.match(/IEMobile/i);
   },
+  Safari: function() {
+    return Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
+  },
   any: function() {
     return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
   }

views/modals/backup-text.html

@@ -1,10 +0,0 @@
-<div class="text-center">
-  <h1>Copy backup in a safe place</h1>
-  <textarea class="show-for-large-up" readonly rows="7">{{backupWalletPlainText}}</textarea>
-  <textarea class="hide-for-large-up" rows="12">{{backupWalletPlainText}}</textarea>
-  <div translate class="m10t size-12 text-gray text-right">
-    Copy this text as it is in a safe place (notepad or email)
-  </div>
-</div>
-
-<a class="close-reveal-modal" ng-click="cancel()">&#215;</a>

views/modals/wallet-info.html

@@ -0,0 +1,49 @@
+<div class="text-center" ng-init="isComplete = item.isComplete(); networkName = item.getNetworkName()">
+  <h1>{{item.name || item.id }}</h1>
+  <h3>
+    {{item.requiredCopayers}} of {{item.totalCopayers}} - {{networkName}}
+    , {{isComplete ? 'Complete' : 'Waiting for copayers...'}}
+  </h3>
+  <div class="m10b" ng-if="isComplete">
+    <b>{{item.balanceInfo.totalBalance || 0}} {{item.settings.unitName}}</b>
+  </div>
+  <div class="m20b">
+    Approximate size: {{item.kb}} kB 
+    <span ng-if="item.usage">({{item.usage}}%) </span>
+  </div>
+
+  <div class="row" ng-show="!backupWalletPlainText">
+    <div class="large-6 medium-6 small-6 columns">
+    <button class="primary tiny" ng-click="downloadWalletBackup()" ng-disabled="loading"
+      ng-show="!isSafari"><i class="fi-download"></i> Download backup</button>
+    <button class="primary tiny" ng-click="viewWalletBackup()" ng-disabled="loading"
+      ng-show="isSafari"><i class="fi-eye"></i> View Backup</button> 
+    </div>
+    <div class="large-6 medium-6 small-6 columns">
+    <button class="warning tiny" ng-disabled="loading" 
+      ng-really-message="{{'Are you sure you want to delete the wallet'}} {{(item.name || item.id)}}" 
+      ng-really-click="deleteWallet()">
+      <span ng-show="!loading">
+        <i class="fi-trash"></i> Delete
+      </span>
+      <span ng-show="loading">
+        <i class="fi-bitcoin-circle icon-rotate spinner"></i> Deleting
+      </span>
+    </button>
+    </div>
+  </div>
+
+  <div ng-show="backupWalletPlainText">
+    <h3>Copy backup in a safe place</h3>
+    <div class="input">
+      <textarea class="show-for-large-up" readonly rows="7">{{backupWalletPlainText}}</textarea>
+      <textarea class="hide-for-large-up" rows="12">{{backupWalletPlainText}}</textarea>
+      <i class="icon-compose"></i>
+    </div>
+    <div translate class="m10t size-12 text-gray text-right">
+      Copy this text as it is in a safe place (notepad or email)
+    </div>
+  </div>
+
+  <a class="close-reveal-modal" ng-click="close()">&#215;</a>
+</div>

views/profile.html

@@ -43,54 +43,43 @@
   <div class="row" ng-init="setWallets()">
     <div class="large-12 columns">
       <h2>Manage wallets</h2>
-      <table>
+      <table class="manage-wallets">
         <thead>
           <tr>
             <th>Name</th>
             <th>Type</th>
             <th class="hide-for-small-only">Status</th>
-            <th>Balance</th>
+            <th class="hide-for-small-only">Balance</th>
-            <th>Approx Size</th>
+            <th class="hide-for-small-only">Approx Size</th>
-            <th class="text-right">Actions</th>
           </tr>
         </thead>
         <tbody>
           <tr 
               data-ng-repeat="item in wallets | orderBy:'name'" 
-              ng-init="isComplete = item.isComplete();
+              ng-init="isComplete = item.isComplete(); networkName = item.getNetworkName()"
-              networkName = item.getNetworkName()"
+              ng-click="walletInfo(item)">
-              ng-class="{'deleting':loading==item.id}">
+            <td>
-            <td>{{item.name || item.id }}</td>
+              <span ng-show="loading == item.id"><i class="fi-bitcoin-circle icon-rotate spinner"></i></span>
+              <span ng-show="loading != item.id">
+                {{item.name || item.id }}
+              </span>
+            </td>
             <td>{{item.requiredCopayers}} of {{item.totalCopayers}} - {{networkName}}</td>
             <td class="hide-for-small-only">
               {{isComplete ? 'Complete' : 'Waiting for copayers...'}}
             </td>
-            <td>
+            <td class="hide-for-small-only">
               <span ng-if="!isComplete">-</span>
               <span ng-if="isComplete">
                   {{item.balanceInfo.totalBalance || 0}} {{item.settings.unitName}}
               </span>
             </td>
-          <td>
+            <td class="hide-for-small-only">
               <span>
                   {{item.kb}} kB 
                   <span ng-if="item.usage">({{item.usage}}%) </span>
               </span>
             </td>
-   
-            <td class="text-right">
-              <div ng-show="loading != item.id">
-                <a title="Download Backup" class="text-gray" ng-click="downloadWalletBackup(item)"
-                  ng-show="!isSafari"><i class="fi-download size-18 m10r"></i></a>
-                <a title="View Backup" ng-click="viewWalletBackup(item)"
-                  ng-show="isSafari"><i class="fi-eye"></i></a> 
-                &nbsp; 
-                <a title="Delete Wallet" ng-really-message="{{'Are you sure you want to delete the wallet'}} {{(item.name || item.id)}}" 
-                  ng-really-click="deleteWallet(item)"
-                  ng-show="loading != item.id"><i class="fi-trash text-gray size-18"></i></a>
-              </div>
-              <span ng-show="loading == item.id"><i class="fi-bitcoin-circle icon-rotate spinner"></i></span>
-            </td>
           </tr>
         </tbody>
       </table>