From a8defa137754c9c786e331154740accbb555aa1b Mon Sep 17 00:00:00 2001
From: Gustavo Maximiliano Cortez <cmgustavo83@gmail.com>
Date: Tue, 30 May 2017 12:58:41 -0300
Subject: [PATCH] Fix UX for address book view

---
 src/js/controllers/addressbookView.js | 21 +++++++++++++--------
 src/sass/views/address-book.scss      |  3 +++
 www/views/addressbook.view.html       | 23 ++++++++++++-----------
 3 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/src/js/controllers/addressbookView.js b/src/js/controllers/addressbookView.js
index 1cf8e9e1e..05007dfe9 100644
--- a/src/js/controllers/addressbookView.js
+++ b/src/js/controllers/addressbookView.js
@@ -1,6 +1,6 @@
 'use strict';
 
-angular.module('copayApp.controllers').controller('addressbookViewController', function($scope, $state, $timeout, $stateParams, lodash, addressbookService, popupService, $ionicHistory, platformInfo) {
+angular.module('copayApp.controllers').controller('addressbookViewController', function($scope, $state, $timeout, $stateParams, lodash, addressbookService, popupService, $ionicHistory, platformInfo, gettextCatalog) {
   $scope.isChromeApp = platformInfo.isChromeApp;
   $scope.addressbookEntry = {};
   $scope.addressbookEntry.name = $stateParams.name;
@@ -20,13 +20,18 @@ angular.module('copayApp.controllers').controller('addressbookViewController', f
   };
 
   $scope.remove = function(addr) {
-    addressbookService.remove(addr, function(err, ab) {
-      if (err) {
-        popupService.showAlert(gettextCatalog.getString('Error'), err);
-        return;
-      }
-      $ionicHistory.goBack();
-    });
+    var title = gettextCatalog.getString('Warning!');
+    var message = gettextCatalog.getString('Are you sure you want to delete this contact?');
+    popupService.showConfirm(title, message, null, null, function(res) {
+      if (!res) return;
+      addressbookService.remove(addr, function(err, ab) {
+        if (err) {
+          popupService.showAlert(gettextCatalog.getString('Error'), err);
+          return;
+        }
+        $ionicHistory.goBack();
+      });
+    }); 
   };
 
 });
diff --git a/src/sass/views/address-book.scss b/src/sass/views/address-book.scss
index 73722149e..c0d0f99a8 100644
--- a/src/sass/views/address-book.scss
+++ b/src/sass/views/address-book.scss
@@ -114,6 +114,9 @@
 }
 
 #address-book-view {
+  .has-click {
+    cursor: pointer;
+  }
   .bar.bar-royal {
     border: 0 transparent;
   }
diff --git a/www/views/addressbook.view.html b/www/views/addressbook.view.html
index 4953d6e58..228dd71b4 100644
--- a/www/views/addressbook.view.html
+++ b/www/views/addressbook.view.html
@@ -5,11 +5,6 @@
     <ion-nav-title>
       <span>{{addressbookEntry.name}}</span>
     </ion-nav-title>
-    <ion-nav-buttons side="secondary">
-      <button class="button back-button" ng-click="remove(addressbookEntry.address)">
-        Remove
-      </button>
-    </ion-nav-buttons>
   </ion-nav-bar>
   <ion-content scroll="false">
     <div class="gravatar-content">
@@ -27,13 +22,19 @@
         <span class="address-book-field-label" translate>Email</span>
         <span>{{addressbookEntry.email}}</span>
       </div>
-      <div class="item item-text-wrap">
-        <span class="address-book-field-label" copy-to-clipboard="addressbookEntry.address" translate>Address</span>
+      <div class="item item-text-wrap" copy-to-clipboard="addressbookEntry.address">
+        <span class="address-book-field-label" translate>Address</span>
         <span>{{addressbookEntry.address}}</span>
       </div>
-    </div>
-    <button class="button button-standard button-primary" ng-click="sendTo()" translate>
-      Send Money
-    </button>
+      <div class="item item-divider"></div>
+      <div class="item item-icon-right has-click" ng-click="sendTo()">
+        <span class="positive" translate>Send Money</span>
+        <i class="icon bp-arrow-right"></i>
+      </div>
+      <div class="item item-divider"></div>
+      <div class="item has-click" ng-click="remove(addressbookEntry.address)">
+        <span class="assertive" translate>Remove</span>
+      </div>
+    </div> 
   </ion-content>
 </ion-view>