Addressbook

public/views/modals/addressbook.html

@@ -1,130 +1,96 @@
-<ion-modal-view ng-controller="addressbookController">
+<ion-modal-view>
-  <div ng-init="wallets[0] ? setSelectedWalletsOpt(true) : etSelectedWalletsOpt(false); checkClipboard()">
+  <ion-header-bar align-title="center" class="bar-stable">
-    <ion-header-bar align-title="center" class="tab-bar" ng-style="{'background-color':color}">
+    <button class="button button-clear button-positive"
-      <div class="left-small">
+            ng-click="closeAddressbookModal()">
-        <a ng-show="!editAddressbook && !addAddressbookEntry" ng-click="cancelAddress()" class="p10">
+      Close
-          <span class="text-close" translate>Close</span>
+    </button>
-        </a>
+    <div class="h1 title">
-      </div>
+      <span ng-show="!addAddressbookEntry" translate>Addressbook</span>
-      <h1 class="title ellipsis">{{walletName}}</h1>
+      <span ng-show="addAddressbookEntry" translate>Add entry</span>
-      <div class="right-small" ng-show="!selectedWalletsOpt && !isEmptyList" ng-click="toggleEditAddressbook()">
-        <a ng-show="!editAddressbook && !addAddressbookEntry" href class="p10">
-          <span class="text-close" translate>Edit</span>
-        </a>
-        <a ng-show="editAddressbook && !addAddressbookEntry" href class="p10">
-          <span class="text-close" translate>Done</span>
-        </a>
     </div>
+    <button class="button button-clear button-positive"
+            ng-click="toggleAddAddressbookEntry()">
+      <i ng-show="!addAddressbookEntry" class="icon ion-ios-plus-empty"></i>
+      <span ng-show="addAddressbookEntry">Cancel</span>
+    </button>
   </ion-header-bar>
 
-    <ion-content ng-style="{'background-color': '#f6f7f9'}">
+  <ion-content>
-      <div class="modal-content p20b">
+
-        <div class="create-tab small-only-text-center" ng-show="!editAddressbook && !addAddressbookEntry">
+    <div class="bar bar-header item-input-inset" ng-show="!addAddressbookEntry && !isEmptyList">
-          <div class="row">
+      <label class="item-input-wrapper">
-            <div class="tab-container small-6 medium-6 large-6"
+        <i class="icon ion-ios-search placeholder-icon"></i>
-              ng-class="{'selected':selectedWalletsOpt}"
+        <input type="search"
-              ng-style="{'border-color':selectedWalletsOpt ? color : 'inherit'}"
+               placeholder="Search"
-              ng-click="setSelectedWalletsOpt(true)">
+               ng-model="search"
-              <a href ng-style="{'color':selectedWalletsOpt ? color : 'inherit'}" translate> My wallets</a>
+               ng-change="findContact(search, {onlyContacts: true})" ng-model-onblur>
-            </div>
+      </label>
-            <div class="tab-container small-6 medium-6 large-6"
-              ng-class="{'selected':!selectedWalletsOpt}"
-              ng-style="{'border-color':!selectedWalletsOpt ? color : 'inherit'}"
-              ng-click="setSelectedWalletsOpt(false)">
-              <a href ng-style="{'color':!selectedWalletsOpt ? color : 'inherit'}" translate>My contacts</a>
-            </div>
-          </div>
-        </div>
-        <div ng-show="selectedWalletsOpt">
-          <div class="onGoingProcess" ng-if="gettingAddress">
-            <div class="onGoingProcess-content" ng-style="{'background-color':'#222'}">
-              <ion-spinner class="spinner-stable" icon="lines"></ion-spinner>
-              <span translate> Getting address for wallet {{selectedWalletName}} ...</span>
-            </div>
     </div>
 
-          <div ng-if="!gettingAddress">
+    <div ng-show="!addAddressbookEntry">
-            <ul class="no-bullet">
+      <ion-list>
-              <li class="line-b" ng-repeat="w in wallets">
+        <ion-item ng-repeat="addrEntry in list" class="item-icon-left" ng-show="!addrEntry.isWallet" ng-click="goToAmount(addrEntry)">
-                <a ng-click="selectWallet(w.id, w.name)" class="db oh">
+          <i class="icon ion-ios-person-outline"></i>
-                  <div class="avatar-wallet"
+          <h2>{{addrEntry.label}}</h2>
-                    ng-style="{'background-color':w.color}">
+          <p>{{addrEntry.address}}</p>
-                    <i class="icon-wallet size-21"></i>
+
-                  </div>
+          <ion-option-button class="button-assertive" ng-click="remove(addrEntry.address)">
-                  <div class="ellipsis name-wallet text-bold">{{w.name || w.id}}
+            <i class="icon ion-minus-circled"></i>
-                    <span class="has-error right text-light size-12" ng-show="errorSelectedWallet[w.id]">
+          </ion-option-button>
-                      <i class="icon-close-circle size-14"></i>
+
-                      <span class="vm">{{errorSelectedWallet[w.id] }}</span>
+        </ion-item>
-                    </span>
+      <ion-list>
-                  </div>
+      <div class="list" ng-show="isEmptyList">
-                  <div class="size-12">{{w.m}} of {{w.n}}
+        <a class="item item-icon-left" ng-click="toggleAddAddressbookEntry()">
-                    <span ng-show="w.network=='testnet'">[Testnet]</span>
+          <i class="icon ion-person-add"></i>
-                  </div>
+          <span translate>Add a new entry</span>
         </a>
-              </li>
-            </ul>
       </div>
     </div>
 
-        <div ng-show="!selectedWalletsOpt" class="m20b">
+    <form name="addressbookForm" ng-show="addAddressbookEntry" no-validate>
-          <ul ng-show="!addAddressbookEntry" class="no-bullet m0" ng-init="contactList()">
-            <li class="p10 line-b" ng-repeat="(addr, label) in list">
-              <a ng-show="selectedAddressbook[addr]" class="removeAddressbook" ng-click="remove(addr)" translate>Remove</a>
-              <a ng-show="editAddressbook" class="selectAddressbook" ng-click="toggleSelectAddressbook(addr)">
-              <i class="fi-trash"></i></a>
-              <div ng-click="selectAddressbook(addr)">
-                <i class="icon-contact left size-42 m10r text-gray"></i>
-                <div class="">
-                  <span>{{label}}</span>
-                  <div class="size-12 text-gray ellipsis">{{addr}}</div>
-                </div>
-              </div>
-            </li>
-            <li class="p10" ng-show="!editAddressbook">
-              <a ng-click="toggleAddAddressbookEntry()" class="p0i">
-                <i class="fi-plus size-24 m20r lh icon"></i>
-                <span class="size-12 tu text-bold" translate>Add a new entry</span>
-              </a>
-            </li>
-          </ul>
 
-          <div ng-show="addAddressbookEntry">
+      <div class="padding-vertical assertive" ng-show="error">{{error|translate}}</div>
-            <h4 translate>Add a new entry</h4>
-            <form name="addressbookForm" class="p10" no-validate>
-              <div class="text-warning size-12 m10b" ng-show="error">{{error|translate}}</div>
-              <span ng-hide="addressbookForm.address.$pristine">
-                <span class="has-error right size-12" ng-show="addressbookForm.address.$invalid && addressbook.address">
-                  <i class="icon-close-circle size-14"></i>
-                  <span class="vm" translate>Not valid</span>
-                </span>
-                <small class="right text-primary" ng-show="!addressbookForm.address.$invalid">
-                  <i class="icon-checkmark-circle size-14"></i>
-                </small>
-              </span>
 
-              <label translate>Address</label>
+      <div class="list">
-              <div class="input">
+
-                <input type="text" id="address" name="address" ng-model="addressbook.address" valid-address required>
+        <label class="item item-input item-stacked-label">
-                <div class="qr-scanner-input">
+          <span class="input-label">Address</span>
-                  <qr-scanner on-scan="onQrCodeScanned(data, addressbookForm)" before-scan="beforeQrCodeScann()"></qr-scanner>
+          <div class="input-notification">
+            <i class="icon ion-checkmark-circled balanced"
+               ng-show="!addressbookForm.address.$invalid"></i>
+            <i class="icon ion-close-circled assertive"
+               ng-show="addressbookForm.address.$invalid && addressbookEntry.address"></i>
           </div>
+          <div class="qr-scan-icon">
+            <qr-scanner on-scan="onQrCodeScanned(data, addressbookForm)"></qr-scanner>
+            <input type="text"
+                   id="address"
+                   name="address"
+                   ng-model="addressbookEntry.address"
+                   valid-address required>
+          </div>
+        </label>
+
+        <label class="item item-input item-stacked-label">
+          <span class="input-label">Label</span>
+          <input type="text"
+                 id="label"
+                 name="label"
+                 ng-model="addressbookEntry.label"
+                 required>
+        </label>
       </div>
 
-              <label translate>Label</label>
+      <div class="padding">
-              <input type="text" id="label" name="label" ng-model="addressbook.label" required>
+        <button type="submit"
-              <div class="row">
+                class="button button-block button-positive"
-                <div class="columns large-6 medium-6 small-6">
+                ng-click="add(addressbookEntry)"
-                  <input type="button" class="button expand outline dark-gray round" ng-click="toggleAddAddressbookEntry()" value="{{'Cancel'|translate}}">
+                ng-disabled="!addressbookForm.$valid" translate>
-                </div>
+          Save
-                <div class="columns large-6 medium-6 small-6">
+        </button>
-                  <input type="submit" class="button expand round black" ng-click="add(addressbook)" value="{{'Save'|translate}}"
-                  ng-disabled="!addressbookForm.$valid" ng-style="{'background-color':color}">
-                </div>
       </div>
+
     </form>
-          </div>
-        </div>
-      </div>
   </ion-content>
-  </div>
 </ion-modal-view>

public/views/modals/scanner.html

@@ -1,10 +1,8 @@
 <ion-modal-view>
-  <ion-header-bar align-title="center" class="tab-bar">
+  <ion-header-bar align-title="center" class="bar-stable">
-    <div class="left-small">
+    <button ng-click="cancel()" class="button button-clear button-positive" translate>
-      <a ng-click="cancel()" class="p10">
+      Close
-        <span class="text-close" translate>Close</span>
+    </button>
-      </a>
-    </div>
     <h1 class="title ellipsis" translate>QR-Scanner</h1>
   </ion-header-bar>
   <ion-content ng-controller="tabScanController" ng-init="init()">

public/views/tab-home.html

@@ -36,6 +36,7 @@
           </li>
         </ul>
 
+
         <div ng-show="lockedBalanceSat">
           <span translate>Total Locked Balance</span>:
           <b>{{lockedBalanceStr}} </b>
@@ -45,12 +46,13 @@
     </div>
 
     <div class="row">
-      <div class="col col-90">
+      <div class="col col-80">
-        <h3>Wallets </h3>
+        <h2>Wallets </h2>
       </div>
-
+      <div class="col col-20 text-right">
-      <div class="col text-center">
+        <a class="button button-light" href="#/add">
-        <a href="#/add" class="add-icon"><i class="ion-plus size-21 right"></i></a>
+          <i class="size-36 icon ion-ios-plus-outline"></i>
+        </a>
       </div>
     </div>
 

public/views/tab-send.html

@@ -7,25 +7,33 @@
 
 
   <ion-content class="send" ng-controller="tabSendController" ng-init="init()">
-    <h2>Recipient</h2>
 
+    <div class="padding">
+      <h2>Recipient</h2>
 
       <label class="item item-input">
         <i class="icon ion-search placeholder-icon"></i>
-      <input type="text" placeholder="Search" ng-model="search" ng-change="findContact()">
+        <input type="text" placeholder="Search" ng-model="search" ng-model-onblur ng-change="findContact(search)">
       </label>
+    </div>
 
+    <div class="row">
+      <div class="col col-80">
         <h3>Contacts & Wallets</h3>
+      </div>
+      <div class="col col-20 text-right">
+        <a class="button button-light" ng-click="openAddressbookModal(list)">
+          <i class="size-36 icon ion-person-add"></i>
+        </a>
+      </div>
+    </div>
 
     <div class="list card">
-      <ul class="pr">
+      <a class="item item-icon-left" ng-repeat="item in list" ng-click="goToAmount(item)">
-        <li class="item item-icon-left" ng-repeat="item in list" ng-click="goToAmount(item)">
-
         <i ng-show="item.isWallet" class="icon ion-briefcase size-21" ng-style="{'color':item.color}"></i>
         <i ng-show="!item.isWallet" class="icon ion-ios-person-outline"></i>
         {{item.label}}
-        </li>
+      </a>
-      </ul>
     </div>
   </ion-content>
 </ion-view>

src/js/controllers/modals/addressbook.js

@@ -1,162 +0,0 @@
-'use strict';
-
-angular.module('copayApp.controllers').controller('addressbookController', function($rootScope, $scope, $timeout, lodash, profileService, addressService, addressbookService, bwcError) {
-  var self = $scope.self;
-
-  var fc = profileService.focusedClient;
-  self.lockAddress = false;
-  self._address = null;
-  $scope.editAddressbook = false;
-  $scope.addAddressbookEntry = false;
-  $scope.selectedAddressbook = {};
-  $scope.newAddress = address;
-  $scope.walletName = fc.credentials.walletName;
-  $scope.color = fc.backgroundColor;
-  $scope.addressbook = {
-    'address': ($scope.newAddress || ''),
-    'label': ''
-  };
-
-  $scope.checkClipboard = function() {
-    if (!$scope.newAddress) {
-      getClipboard(function(value) {
-        $scope.newAddress = value;
-      });
-    }
-  };
-
-  $scope.beforeQrCodeScann = function() {
-    $scope.error = null;
-    $scope.addAddressbookEntry = true;
-    $scope.editAddressbook = false;
-  };
-
-  $scope.onQrCodeScanned = function(data, addressbookForm) {
-    $timeout(function() {
-      var form = addressbookForm;
-      if (data && form) {
-        data = data.replace('bitcoin:', '');
-        form.address.$setViewValue(data);
-        form.address.$isValid = true;
-        form.address.$render();
-      }
-      $scope.$digest();
-    }, 100);
-  };
-
-  $scope.toggleEditAddressbook = function() {
-    $scope.editAddressbook = !$scope.editAddressbook;
-    $scope.selectedAddressbook = {};
-    $scope.addAddressbookEntry = false;
-  };
-
-  $scope.selectAddressbook = function(addr) {
-    self.setForm(addr);
-    $scope.cancel();
-  };
-
-  $scope.toggleSelectAddressbook = function(addr) {
-    $scope.selectedAddressbook[addr] = $scope.selectedAddressbook[addr] ? false : true;
-  };
-
-  $scope.toggleAddAddressbookEntry = function() {
-    $scope.error = null;
-    $scope.addressbook = {
-      'address': '',
-      'label': ''
-    };
-    $scope.addAddressbookEntry = !$scope.addAddressbookEntry;
-  };
-
-  $scope.contactList = function() {
-    $scope.error = null;
-    addressbookService.list(function(err, ab) {
-      if (err) {
-        $scope.error = err;
-        return;
-      }
-      $scope.list = ab;
-      $scope.isEmptyList = lodash.isEmpty($scope.list);
-      $timeout(function() {
-        $scope.$digest();
-      });
-    });
-  };
-
-  $scope.setSelectedWalletsOpt = function(val) {
-    $scope.selectedWalletsOpt = val;
-  };
-
-  $scope.add = function(addressbook) {
-    $scope.error = null;
-    $timeout(function() {
-      addressbookService.add(addressbook, function(err, ab) {
-        if (err) {
-          $scope.error = err;
-          return;
-        }
-        $rootScope.$emit('Local/AddressbookUpdated', ab);
-        $scope.list = ab;
-        $scope.isEmptyList = lodash.isEmpty($scope.list);
-        $scope.editAddressbook = true;
-        $scope.toggleEditAddressbook();
-        $scope.$digest();
-      });
-    }, 100);
-  };
-
-  $scope.remove = function(addr) {
-    $scope.error = null;
-    $timeout(function() {
-      addressbookService.remove(addr, function(err, ab) {
-        if (err) {
-          $scope.error = err;
-          return;
-        }
-        $rootScope.$emit('Local/AddressbookUpdated', ab);
-        $scope.list = ab;
-        $scope.isEmptyList = lodash.isEmpty($scope.list);
-        if ($scope.isEmptyList)
-          $scope.editAddressbook = false;
-        $scope.$digest();
-      });
-    }, 100);
-  };
-
-  $scope.selectWallet = function(walletId, walletName) {
-    var client = profileService.getClient(walletId);
-    $scope.errorSelectedWallet = {};
-
-    profileService.isReady(client, function(err) {
-      if (err) $scope.errorSelectedWallet[walletId] = bwcError.msg(err);
-      else {
-        $scope.gettingAddress = true;
-        $scope.selectedWalletName = walletName;
-
-        addressService.getAddress(walletId, false, function(err, addr) {
-          $scope.gettingAddress = false;
-          if (err) {
-            self.error = err;
-            $scope.cancelAddress();
-            return;
-          }
-
-          self.setForm(addr);
-          $scope.cancel();
-        });
-      }
-      $timeout(function() {
-        $scope.$apply();
-      });
-    });
-  };
-
-  $scope.cancelAddress = function() {
-    self.resetForm();
-    $scope.cancel();
-  };
-
-  $scope.cancel = function() {
-    $scope.addressbookModal.hide();
-  };
-});

src/js/controllers/tab-scan.js

@@ -180,7 +180,7 @@ angular.module('copayApp.controllers').controller('tabScanController', function(
       };
     }
     localMediaStream = null;
-    video.src = '';
+    if (video && video.src) video.src = '';
   };
 
   qrcode.callback = function(data) {

src/js/controllers/tab-send.js

@@ -2,12 +2,10 @@
 
 angular.module('copayApp.controllers').controller('tabSendController', function($scope, $ionicModal, $log, $timeout, addressbookService, profileService, configService, lodash, $state, walletService) {
 
-
+  var originalList;
-  var originalList = [];
-
-  $scope.search = '';
 
   $scope.init = function() {
+    originalList = [];
 
     var wallets = profileService.getWallets({onlyComplete: true});
 
@@ -17,7 +15,6 @@ angular.module('copayApp.controllers').controller('tabSendController', function(
         label: v.name,
         isWallet: true,
         getAddress: function(cb) {
-          console.log('[tab-send.js.20]  get ADDRESS at wallet!!!', v.name); //TODO
           walletService.getAddress(v, false, cb);
         },
       });
@@ -26,12 +23,15 @@ angular.module('copayApp.controllers').controller('tabSendController', function(
     addressbookService.list(function(err, ab) {
       if (err) $log.error(err);
 
+      $scope.isEmptyList = lodash.isEmpty(ab);
+
       var contacts = [];
       lodash.each(ab, function(v, k) {
         contacts.push({
-          label: k,
+          label: v,
+          address: k,
           getAddress: function(cb) {
-            return cb(null,v);
+            return cb(null,k);
           },
         });
       });
@@ -41,9 +41,10 @@ angular.module('copayApp.controllers').controller('tabSendController', function(
     });
   };
 
-  $scope.findContact = function() {
+  $scope.findContact = function(search, opts) {
+    opts = opts || {};
 
-    if (!$scope.search || $scope.search.length < 2) {
+    if (!search || search.length < 2) {
       $scope.list = originalList;
       $timeout(function() {
         $scope.$apply();
@@ -52,8 +53,9 @@ angular.module('copayApp.controllers').controller('tabSendController', function(
     }
 
     var result = lodash.filter($scope.list, function(item) {
+      if (opts && opts.onlyContacts && item.isWallet) return;
       var val = item.label || item.alias || item.name;
-      return lodash.includes(val.toLowerCase(), $scope.search.toLowerCase());
+      return lodash.includes(val.toLowerCase(), search.toLowerCase());
     });
 
     $scope.list = result;
@@ -69,4 +71,82 @@ angular.module('copayApp.controllers').controller('tabSendController', function(
       return $state.transitionTo('amount', { toAddress: addr, toName: item.label})
     });
   };
+
+  /*
+   * Modal Addressbook
+   */
+
+  $ionicModal.fromTemplateUrl('views/modals/addressbook.html', {
+    scope: $scope
+  }).then(function(modal) {
+    $scope.addressbookModal = modal;
+  });
+
+  $scope.openAddressbookModal = function() {
+    $scope.addressbookModal.show();
+  };
+
+  $scope.closeAddressbookModal = function() {
+    $scope.cleanAddressbookEntry();
+    $scope.addAddressbookEntry = false;
+    $scope.addressbookModal.hide();
+  };
+
+  $scope.onQrCodeScanned = function(data, addressbookForm) {
+    $timeout(function() {
+      var form = addressbookForm;
+      if (data && form) {
+        data = data.replace('bitcoin:', '');
+        form.address.$setViewValue(data);
+        form.address.$isValid = true;
+        form.address.$render();
+      }
+      $scope.$digest();
+    }, 100);
+  };
+
+  $scope.cleanAddressbookEntry = function() {
+    $scope.addressbookEntry = {
+      'address': '',
+      'label': ''
+    };
+  };
+
+  $scope.toggleAddAddressbookEntry = function() {
+    $scope.cleanAddressbookEntry();
+    $scope.addAddressbookEntry = !$scope.addAddressbookEntry;
+  };
+
+  $scope.add = function(addressbook) {
+    $timeout(function() {
+      addressbookService.add(addressbook, function(err, ab) {
+        if (err) {
+          $log.error(err);
+          return;
+        }
+        $scope.init();
+        $scope.toggleAddAddressbookEntry();
+        $scope.$digest();
+      });
+    }, 100);
+  };
+
+  $scope.remove = function(addr) {
+    $timeout(function() {
+      addressbookService.remove(addr, function(err, ab) {
+        if (err) {
+          $scope.error = err;
+          return;
+        }
+        $scope.init();
+        $scope.$digest();
+      });
+    }, 100);
+  };
+
+  $scope.$on('$destroy', function() {
+    $scope.addressbookModal.remove();
+  });
+
+
 });

src/js/directives/qrScanner.js

@@ -11,6 +11,6 @@ angular.module('copayApp.directives')
       },
       controller: 'tabScanController',
       replace: true,
-      template: '<a ng-click="openScanner()"><i class="icon ion-qr-scanner"></i></a>'
+      template: '<a on-tap="openScanner()"><i class="icon ion-qr-scanner"></i></a>'
     }
   });

src/sass/main.scss

@@ -548,6 +548,26 @@ ul.wallet-selection.wallets {
   margin: 0 auto;
 }
 
+// INPUT CAMERA / VALID / INVALID ICONS
+.input-notification {
+  float: right;
+  margin-right: 10px;
+}
+
+.qr-scan-icon {
+  position: relative;
+}
+
+.qr-scan-icon a {
+  display: block;
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 0 10px;
+  font-size: 24px;
+  cursor: pointer;
+}
+
 // General purpose
 .dn {
   display: none;
@@ -948,6 +968,14 @@ input[type=file] {
   line-height: 0px;
 }
 
+.text-right {
+  text-align: right;
+}
+
+.text-left {
+  text-align: left;
+}
+
 /*
  * Calculator
  */