From e5c6e5a2d258a1d358081ccc151cc2f2d83ceff3 Mon Sep 17 00:00:00 2001
From: Andy Phillipson <andy@bitpay.com>
Date: Thu, 8 Jun 2017 17:43:06 -0400
Subject: [PATCH] Implement proper send search design.

---
 src/js/controllers/tab-send.js | 10 +++++++
 src/sass/views/tab-send.scss   | 54 +++++++++++++++++++++++++++++++++-
 www/views/tab-send.html        | 16 ++++++----
 3 files changed, 73 insertions(+), 7 deletions(-)

diff --git a/src/js/controllers/tab-send.js b/src/js/controllers/tab-send.js
index 96694847f..5c2f576ec 100644
--- a/src/js/controllers/tab-send.js
+++ b/src/js/controllers/tab-send.js
@@ -128,6 +128,16 @@ angular.module('copayApp.controllers').controller('tabSendController', function(
     updateWalletsList();
   };
 
+  $scope.searchInFocus = function() {
+    $scope.searchFocus = true;
+  };
+
+  $scope.searchBlurred = function() {
+    if ($scope.formData.search == null) {
+      $scope.searchFocus = false;
+    }
+  };
+
   $scope.findContact = function(search) {
 
     if (incomingData.redir(search)) {
diff --git a/src/sass/views/tab-send.scss b/src/sass/views/tab-send.scss
index dbda43f2e..cf6da856a 100644
--- a/src/sass/views/tab-send.scss
+++ b/src/sass/views/tab-send.scss
@@ -35,8 +35,60 @@
   .send-heading {
     font-size: 14px;
     font-weight: bold;
-    padding-bottom: 0;
+    padding: 0 0 16px 0;
+    border: none;
   }
+
+
+
+  .send-header-wrapper {
+    padding: 10px;
+    background-color: white;
+    box-shadow: 0px 5px 10px 0px #cccccc;
+  }
+  .search-wrapper {
+    background-color: #f2f2f2;
+    border-radius: 3px;
+    border: none;
+    .svg#Bitcoin_Symbol {
+      width: 14px;
+      .st0 {
+        fill: #cccccc;
+      }
+    }
+    &.focus {
+      background: none;
+      .svg#Bitcoin_Symbol {
+        display: none;
+      }
+      .search-input {
+        padding-left: 0;
+        &:focus::-webkit-input-placeholder {
+          opacity: 0;
+        }
+      }
+    }
+  }
+
+
+  .abs-v-center {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+   }
+  .search-input {
+    background-color: transparent;
+    padding-left: 30px;
+  }
+  .separator-left {
+    border-left: 1px solid #d9d9df;
+    padding-left: 10px;
+    height: 70%;
+  }
+
+
+
+
   .bitcoin-address {
     border-top: none;
     padding-bottom: .5rem;
diff --git a/www/views/tab-send.html b/www/views/tab-send.html
index b64ed93ef..6cd42454c 100644
--- a/www/views/tab-send.html
+++ b/www/views/tab-send.html
@@ -1,15 +1,19 @@
-<ion-view id="tab-send">
+c<ion-view id="tab-send">
   <ion-nav-bar class="bar-royal">
     <ion-nav-title>{{'Send' | translate}}</ion-nav-title>
   </ion-nav-bar>
   <ion-content>
 
     <div ng-if="hasFunds">
-      <div class="item item-heading send-heading" translate>Recipient</div>
-      <div class="item item-icon-left item-icon-right input">
-        <i class="icon icon-svg left"><img src="img/icon-bitcoin-symbol.svg"></i>
-        <input type="text" placeholder="{{'Search or enter bitcoin address' | translate}}" ng-model="formData.search" ng-change="findContact(formData.search)" ng-model-onblur>
-        <i class="icon icon-svg qr" on-tap="openScanner()"><img src="img/scan-ico.svg"/></i>
+      <div class="send-header-wrapper">
+        <div class="item item-heading send-heading" translate><span>Recipient</span></div>
+        <div class="item input search-wrapper" ng-class="{'focus': searchFocus}">
+          <i class="icon icon-svg abs-v-center"><img class="svg" src="img/icon-bitcoin-symbol.svg"></i>
+          <div class="item-icon-right">
+            <input type="text" class="search-input" placeholder="{{'Search or enter bitcoin address' | translate}}" ng-model="formData.search" ng-change="findContact(formData.search)" ng-model-onblur ng-focus="searchInFocus()" ng-blur="searchBlurred()">
+            <i class="icon icon-svg qr abs-v-center separator-left" on-tap="openScanner()"><img src="img/scan-ico.svg"></i>
+          </div>
+        </div>
       </div>
     </div>