manage wallets uses modal

2014-12-09 12:48:03 -03:00 · 2014-12-09 12:48:03 -03:00 · 5873f30262
commit 5873f30262
parent e58b256577
6 changed files with 113 additions and 74 deletions
--- a/css/src/main.css
+++ b/css/src/main.css
@ -964,8 +964,9 @@ table tbody tr:last-child td {
  border-bottom: none; 
 }

-table tr.deleting {
-  background: #FCD5D5;
+table.manage-wallets tr:hover {
+  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 {
--- a/js/controllers/profile.js
+++ b/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;
@ -13,18 +13,7 @@ angular.module('copayApp.controllers').controller('ProfileController', function(
  $scope.viewProfileBackup = function() {
    $scope.backupProfilePlainText = backupService.profileEncrypted($rootScope.iden);
    $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() {
@ -52,30 +41,7 @@ angular.module('copayApp.controllers').controller('ProfileController', function(
    $timeout(function(){
      $scope.$digest();
    })
-  };
-
-  $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) {
@ -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();
+    });
+  };
 });
--- a/js/services/isMobile.js
+++ b/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());
  }
--- a/views/modals/backup-text.html
+++ b/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>
--- a/views/modals/wallet-info.html
+++ b/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>
--- a/views/profile.html
+++ b/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>Approx Size</th>
-            <th class="text-right">Actions</th>
+            <th class="hide-for-small-only">Balance</th>
+            <th class="hide-for-small-only">Approx Size</th>
          </tr>
        </thead>
        <tbody>
          <tr 
              data-ng-repeat="item in wallets | orderBy:'name'" 
-              ng-init="isComplete = item.isComplete();
-              networkName = item.getNetworkName()"
-              ng-class="{'deleting':loading==item.id}">
-            <td>{{item.name || item.id }}</td>
+              ng-init="isComplete = item.isComplete(); networkName = item.getNetworkName()"
+              ng-click="walletInfo(item)">
+            <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>