ux and ui modifications

public/views/walletHome.html

@@ -72,7 +72,7 @@
     -->
 
     <div id="walletHome" class="walletHome tab-view tab-in">
-      <div class="oh pr">
+      <div class="oh pr" ng-show="!index.isSearching">
         <div class="amount" ng-style="{'background-color':index.backgroundColor}">
           <div ng-if="!index.anyOnGoingProcess && !index.notAuthorized">
             <div class="m15t" ng-show="index.updateError" ng-click='index.updateAll({triggerTxUpdate: true})'>
@@ -134,7 +134,7 @@
         </div>
       </div>
 
-      <div class="oh pr" ng-if="index.txps[0]" ng-show="!home.isSearching">
+      <div class="oh pr" ng-if="index.txps[0]" ng-show="!index.isSearching">
         <h4 ng-show="index.requiresMultipleSignatures" class="title m0" translate>Payment Proposals</h4>
         <h4 ng-show="!index.requiresMultipleSignatures" class="title m0" translate>Unsent transactions</h4>
         <div class="last-transactions pr" ng-repeat="tx in index.txps">
@@ -160,11 +160,9 @@
 
       <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="index.isSearching = true;" ng-show="!index.isSearching" >
             <h4 class="title m0" translate>Activity
-              <span class="left-inner-addon2">
+              <i class="fi-magnifying-glass"></i>
-                <i class="fi-magnifying-glass"></i>
-              </span>
             </h4>
           </li>
         </ul>
@@ -201,35 +199,22 @@
           </div>
         </div>
 
-        <div id="searchLabel" ng-show="home.isSearching">
+        <div ng-show="index.isSearching" class="row searchBar">
-          <ul class="no-bullet m0">
+          <div class="small-11 columns">
-            <li class="left-inner-addon1">
+            <div class="searchLabel">
-                <i ng-click="home.cancelSearch()" class="icon-close-circle size-14"></i>
-            </li>
-            <li class="left-inner-addon1">
               <i class="fi-magnifying-glass size-14"></i>
               <form ng-submit="index.filter(search)">
-              <input name="search"
+                <input name="search"
-                type="text"
+                  type="search"
-                placeholder="{{'Search transactions' | translate}}"
+                  placeholder="{{'Search transactions' | translate}}"
-                ng-model="search"></input>
+                  ng-model="search">
+                </input>
               </form>
-            </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 class="small-1 columns">
+            <a ng-click="index.isSearching = false">Cancel</a>
+          </div>
         </div>
         <div ng-repeat="btx in index.txHistoryToShow() track by btx.txid"
           ng-click="home.openTxModal(btx)"
@@ -280,7 +265,7 @@
           </div>
         </div>
 
-        <div class="row m20t text-center" ng-show="index.historyRendering && !home.isSearching">
+        <div class="row m20t text-center" ng-show="index.historyRendering && !index.isSearching">
           <div class="columns large-12 medium-12 small-12">
             <div class="spinner">
               <div class="rect1"></div>

src/css/main.css

@@ -784,26 +784,48 @@ table tbody tr:last-child td {
 
 /*////////////////////////////   SEARCH INPUT  ////////////////////////////*/
 
-.left-inner-addon1 {
+.searchBar {
-    position: relative;
+   display: table;
 }
-.left-inner-addon1 input{
+.searchBar .columns {
-    padding-left: 40px;
+   display: table-cell;
-    margin-bottom: auto;
+   vertical-align: middle;
-    border: 0px solid;
-}
-.left-inner-addon1 i{
-    padding: 6px;
-    padding-left: 20px;
-}
-.left-inner-addon2 i{
-    padding: 2px;
-    padding-left: 5px;
-}
-.fi-magnifying-glass {
-    position: absolute;
 }
 
+.searchBar .columns,
+.searchBar [class*="column"] + [class*="column"]:last-child {
+   float: none;
+}
+
+.searchBar form{
+  margin-left: 20px;
+}
+
+.searchBar input{
+  margin-bottom: auto;
+  border-bottom: 0px solid #E9EDF0;
+}
+.searchBar i{
+  position: absolute;
+  padding: 8px;
+}
+
+.searchBar .small-11{
+  padding-right: 5px;
+  padding-left: 5px;
+}
+
+.searchBar .small-1{
+  padding-left: 2px;
+  padding-right: 8px;
+}
+
+.searchLabel {
+  margin-top: 10px;
+  margin-bottom: 10px;
+  background-color: rgba(0, 0, 0, 0.02);
+  border-radius: 10px;
+}
 /*////////////////////////////  BUTTON OUTLINE  ////////////////////////////*/
 
 .button.outline,
@@ -1498,8 +1520,8 @@ input.ng-invalid-match, input.ng-invalid-match:focus {
 
 #history .spinner > div,
 #receive .spinner > div,
-.copayers .spinner > div, 
+.copayers .spinner > div,
-.preferences-fee .spinner > div 
+.preferences-fee .spinner > div
 {
   background-color: #7A8C9E;
 }

src/js/controllers/index.js

@@ -30,7 +30,6 @@ 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)));
@@ -940,24 +939,16 @@ angular.module('copayApp.controllers').controller('indexController', function($r
     }, 100);
   };
 
-  self.hideHistory = function() {
-    if (!self.historyShowShowAll) {
-      self.txHistory = self.txHistory.slice(0, 10);
-      self.historyShowShowAll = true;
-    }
-  };
-
   self.txHistoryToShow = function() {
      if (!self.isSearching) {
        self.result = [];
        return self.txHistory;
-    } else return self.result;
+     } else return self.result;
    }
 
   self.filter = function(search) {
-    self.showOptions = true;
     self.result = [];
-    
+
     function formatDate(date) {
       var day = ('0' + date.getDate()).slice(-2).toString();
       var month = ('0' + (date.getMonth() + 1)).slice(-2).toString();
@@ -976,7 +967,6 @@ angular.module('copayApp.controllers').controller('indexController', function($r
     });
     if (isCordova)
       window.plugins.toast.showShortBottom(gettextCatalog.getString('Matches: ' + self.result.length));
-    self.showOptions = (self.result.length == 0) ? true : false;
   };
 
   self.getTxsFromServer = function(client, skip, endingTxid, limit, cb) {
@@ -1236,10 +1226,7 @@ angular.module('copayApp.controllers').controller('indexController', function($r
   });
 
   $rootScope.$on('Local/Searching', function(event, val) {
-    if (val) self.showAllHistory();
-    else self.hideHistory();
     self.isSearching = val;
-    self.showOptions = true;
   });
 
   // UX event handlers

src/js/controllers/walletHome.js

@@ -51,10 +51,13 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
   var disableFocusListener = $rootScope.$on('Local/NewFocusedWallet', function() {
     self.addr = null;
     self.resetForm();
+    $rootScope.$emit('Local/Searching', false);
+
     if (profileService.focusedClient) {
       self.setAddress();
       self.setSendFormInputs();
     }
+
     $log.debug('Cleaning WalletHome Instance');
     lodash.each(self, function(v, k) {
       if (lodash.isFunction(v)) return;