changes in ui and ux

public/views/walletHome.html

@@ -160,9 +160,11 @@
 
       <div class="oh pr" ng-show="index.txHistory[0] || index.txProgress > 5">
         <ul class="no-bullet m0">
-          <li ng-click="home.searchInput()" ng-show="!home.isSearching">
+          <li ng-click="home.searchInput()" ng-show="!home.isSearching" >
             <h4 class="title m0" translate>Activity
-            <a><i class="fi-magnifying-glass"></i></a>
+              <span class="left-inner-addon2">
+                <i class="fi-magnifying-glass"></i>
+              </span>
             </h4>
           </li>
         </ul>
@@ -201,22 +203,33 @@
 
         <div id="searchLabel" ng-show="home.isSearching">
           <ul class="no-bullet m0">
-            <li class="left-inner-addon">
+            <li class="left-inner-addon1">
-              <a ng-click="home.cancelSearch()" translate>Cancel</a>
+                <i ng-click="home.cancelSearch()" class="icon-close-circle size-14"></i>
-              <i class="fi-magnifying-glass"></i>
+            </li>
+            <li class="left-inner-addon1">
+              <i class="fi-magnifying-glass size-14"></i>
               <form ng-submit="index.filter(search)">
               <input name="search"
                 type="text"
-                placeholder="{{'Amount, address, note, mm/dd/yyyy' | translate}}"
+                placeholder="{{'Search transactions' | translate}}"
                 ng-model="search"></input>
               </form>
             </li>
-            <li>
-              <h4 ng-show="index.matches">
-                <span class="vm" translate>{{index.result.length}} matches</span>
-              </h4>
-            </li>
           </ul>
+          <div ng-show="index.showOptions">
+            <div class="text-center">
+              <h4 class="size-14 text-gray"><span translate>Indexes you can use to search transactions: </span></h4>
+            </div>
+             <div class="text-center">
+              <h4 class="size-12 text-gray"><span translate>Transaction amount </span></h4>
+            </div>
+             <div class="text-center">
+              <h4 class="size-12 text-gray"><span translate>Wallet address or address book alias</span></h4>
+            </div>
+             <div class="text-center">
+              <h4 class="size-12 text-gray"><span translate>Date in format mm/dd/yyyy </span></h4>
+            </div>
+          </div>
         </div>
         <div ng-repeat="btx in index.txHistoryToShow() track by btx.txid"
           ng-click="home.openTxModal(btx)"

src/css/main.css

@@ -784,24 +784,24 @@ table tbody tr:last-child td {
 
 /*////////////////////////////   SEARCH INPUT  ////////////////////////////*/
 
-.left-inner-addon {
+.left-inner-addon1 {
     position: relative;
 }
-.left-inner-addon input {
+.left-inner-addon1 input{
     padding-left: 40px;
     margin-bottom: auto;
-    max-width: 85%;
     border: 0px solid;
 }
-.left-inner-addon i {
+.left-inner-addon1 i{
-    position: absolute;
+    padding: 6px;
-    padding: 5px;
     padding-left: 20px;
 }
-.left-inner-addon a {
+.left-inner-addon2 i{
+    padding: 2px;
+    padding-left: 5px;
+}
+.fi-magnifying-glass {
     position: absolute;
-    padding: 5px;
-    right: 0.5px;
 }
 
 /*////////////////////////////  BUTTON OUTLINE  ////////////////////////////*/

src/js/controllers/index.js

@@ -30,6 +30,7 @@ angular.module('copayApp.controllers').controller('indexController', function($r
   self.updatingTxHistory = {};
   self.prevState = 'walletHome';
   self.isSearching = false;
+  self.showOptions = true;
 
   function strip(number) {
     return (parseFloat(number.toPrecision(12)));
@@ -947,14 +948,15 @@ angular.module('copayApp.controllers').controller('indexController', function($r
   };
 
   self.txHistoryToShow = function() {
-    if (!self.isSearching) {
+     if (!self.isSearching) {
-      self.result = [];
+       self.result = [];
-      return self.txHistory;
+       return self.txHistory;
     } else return self.result;
-  }
+   }
 
   self.filter = function(search) {
-    self.matches = false;
+    self.showOptions = true;
+    self.result = [];
     
     function formatDate(date) {
       var day = ('0' + date.getDate()).slice(-2).toString();
@@ -964,6 +966,7 @@ angular.module('copayApp.controllers').controller('indexController', function($r
     };
 
     if (lodash.isEmpty(search)) return;
+
     self.result = lodash.filter(self.txHistory, function(tx) {
       return lodash.includes(tx.amountStr, search) ||
         lodash.includes(tx.message, search) ||
@@ -973,8 +976,7 @@ angular.module('copayApp.controllers').controller('indexController', function($r
     });
     if (isCordova)
       window.plugins.toast.showShortBottom(gettextCatalog.getString('Matches: ' + self.result.length));
-    else
+    self.showOptions = (self.result.length == 0) ? true : false;
-      self.matches = true;
   };
 
   self.getTxsFromServer = function(client, skip, endingTxid, limit, cb) {
@@ -1237,7 +1239,7 @@ angular.module('copayApp.controllers').controller('indexController', function($r
     if (val) self.showAllHistory();
     else self.hideHistory();
     self.isSearching = val;
-    self.matches = false;
+    self.showOptions = true;
   });
 
   // UX event handlers