Better searchbox behaviour.

Add a clear icon.

css/app.css

@@ -167,9 +167,17 @@
   #app-content #app-content-wrapper {
     min-height: 95%; }
     #app-content #app-content-wrapper #passman-controls {
+      text-align: center;
       border-bottom: 1px solid #c9c9c9; }
+      #app-content #app-content-wrapper #passman-controls.sidebar-shown {
+        padding-right: 27% !important; }
+        @media screen and (max-width: 765px) {
+          #app-content #app-content-wrapper #passman-controls.sidebar-shown .title {
+            display: none; } }
+        @media screen and (min-width: 769px) and (max-width: 1120px) {
+          #app-content #app-content-wrapper #passman-controls.sidebar-shown .title {
+            display: none; } }
     #app-content #app-content-wrapper .title {
-      width: calc(100% - 500px);
       text-align: center;
       display: inline-block;
       font-weight: bold;
@@ -236,6 +244,16 @@
       float: right; }
       #app-content #app-content-wrapper .searchboxContainer .searchbox {
         display: inline-block; }
+      #app-content #app-content-wrapper .searchboxContainer .searchclear {
+        color: #ccc;
+        cursor: pointer;
+        font-size: 18px;
+        height: 14px;
+        margin: auto;
+        position: absolute !important;
+        right: 10px;
+        top: 12px;
+        z-index: 99999999; }
     #app-content #app-content-wrapper .credential-table {
       width: 100%;
       margin-top: 44px; }

js/app/directives/clearbutton2.js

@@ -0,0 +1,37 @@
+(function () {
+	'use strict';
+	/**
+	 * @ngdoc directive
+	 * @name passmanApp.directive:clearBtn
+	 * @description
+	 * # clearBtn
+	 */
+	angular.module('passmanApp')
+		.directive('clearBtn', ['$parse', function ($parse) {
+            return {
+                link: function (scope, elm, attr) {
+                    elm.wrap("<div style='position: relative'></div>");
+                    var btn = '<span id=' + Math.round(Math.random() * 1000000000) + ' class="searchclear ng-hide fa fa-times-circle-o"></span>';
+                    var angularBtn = angular.element(btn);
+                    elm.after(angularBtn);
+                    //clear the input
+                    angularBtn.on("click", function () {
+                        elm.val('').trigger("change");
+                        $parse(attr.ngModel).assign(scope, '');
+                        scope.$apply();
+                    });
+
+                    // show  clear btn  on focus
+                    elm.bind('focus keyup change paste propertychange', function () {
+                        if (elm.val() && elm.val().length > 0) {
+                            angularBtn.removeClass("ng-hide");
+                        } else {
+                            angularBtn.addClass("ng-hide");
+                        }
+                    });
+                }
+            };
+        }]);
+}());
+
+

js/app/filters/credentialsearch.js

@@ -13,6 +13,9 @@
 			return function (credentials, filter) {
 				var _credentials = [];
 				if (credentials) {
+					if(!filter){
+						return credentials;
+					}
 					if (filter.filterText.trim() === "") {
 						return credentials;
 					}
@@ -36,6 +39,8 @@
 						}
 					}
 					return _credentials;
+				} else {
+					return [];
 				}
 			};
 		});

sass/credentials.scss

@@ -3,10 +3,23 @@
   #app-content-wrapper {
     min-height: 95%;
     #passman-controls {
-      border-bottom: 1px solid #c9c9c9
+      text-align: center;
+      &.sidebar-shown{
+        padding-right: 27% !important;
+        .title{
+          @media screen and (max-width: 765px){
+            display: none;
+          }
+          @media screen and (min-width: 769px) and (max-width: 1120px){
+            display: none;
+          }
+        }
+      }
+      border-bottom: 1px solid #c9c9c9;
+
     }
+
     .title {
-      width: calc(100% - 500px);
       text-align: center;
       display: inline-block;
       font-weight: bold;
@@ -79,6 +92,17 @@
       .searchbox {
         display: inline-block;
       }
+      .searchclear {
+        color: #ccc;
+        cursor: pointer;
+        font-size: 18px;
+        height: 14px;
+        margin: auto;
+        position: absolute!important;
+        right: 10px;
+        top: 12px;
+        z-index: 99999999;
+      }
     }
     .credential-table {
       width: 100%;
@@ -375,7 +399,6 @@
     }
   }
 }
-
 .loaderContainer {
   height: 140px;
   width: 120px;

templates/main.php

@@ -68,6 +68,7 @@ script('passman', 'app/directives/ngenter');
 script('passman', 'app/directives/autoscroll');
 script('passman', 'app/directives/clickselect');
 script('passman', 'app/directives/colorfromstring');
+script('passman', 'app/directives/clearbutton2');
 script('passman', 'importers/import-main');
 script('passman', 'importers/importer-keepasscsv');
 script('passman', 'importers/importer-lastpasscsv');

templates/views/show_vault.html

@@ -1,41 +1,40 @@
-<div id="passman-controls">
+<div off-click="closeSelected()" off-click-filter="'.download-js-link, .sidebar-shown'">
-	<div class="breadcrumb">
+	<div id="passman-controls" ng-class="{ 'sidebar-shown': selectedCredential }">
 		<div class="breadcrumb">
-			<div class="crumb svg ui-droppable" data-dir="/">
+			<div class="breadcrumb">
-				<a><i class="fa fa-home"></i></a>
+				<div class="crumb svg ui-droppable" data-dir="/">
-			</div>
+					<a><i class="fa fa-home"></i></a>
-			<div class="crumb svg last">
+				</div>
-				<a>{{active_vault.name}}</a>
+				<div class="crumb svg last">
+					<a>{{active_vault.name}}</a>
+				</div>
 			</div>
 		</div>
-	</div>
+		<span class="title" ng-if="delete_time">
-	<span class="title" ng-if="delete_time">
 			Showing deleted since:
 			<span ng-if="delete_time == 1">All time</span>
 			<span ng-if="delete_time > 1">{{delete_time | date:'dd-MM-yyyy @ HH:mm:ss'}}</span>
 
 	</span>
-	<div class="actions creatable">
+		<div class="actions creatable">
 		<span ng-click="addCredential()" class="button new">
 			<span >+</span></span>
-	</div>
+		</div>
-	<div class="title" ng-show="filtered_credentials.length > 0">
+		<div class="title" ng-show="filtered_credentials.length > 0">
-		Showing {{filtered_credentials.length}} of {{active_vault.credentials.length - 1}} credentials
+			Showing {{filtered_credentials.length}} of {{active_vault.credentials.length - 1}} credentials
-	</div>
+		</div>
-	<div class="searchboxContainer">
+		<div class="searchboxContainer">
-		<input type="text" ng-model="filterOptions.filterText" class="searchbox"
+			<input type="text" ng-model="filterOptions.filterText" class="searchbox"
-			   placeholder="Search credential..." select-on-click>
+				   placeholder="Search credential..." select-on-click clear-btn>
-	</div>
+		</div>
-	<div class="viewModes">
+		<div class="viewModes">
-		<div class="view-mode" ng-class="{'active': view_mode === 'list' }"
+			<div class="view-mode" ng-class="{'active': view_mode === 'list' }"
-			 ng-click="switchViewMode('list')"><i class="fa fa-list"></i></div>
+				 ng-click="switchViewMode('list')"><i class="fa fa-list"></i></div>
-		<div class="view-mode" ng-class="{'active': view_mode === 'grid' }"
+			<div class="view-mode" ng-class="{'active': view_mode === 'grid' }"
-			 ng-click="switchViewMode('grid')"><i class="fa fa-th-large"></i>
+				 ng-click="switchViewMode('grid')"><i class="fa fa-th-large"></i>
+			</div>
 		</div>
 	</div>
-</div>
-<div off-click="closeSelected()" off-click-filter="'.download-js-link'">
-
 	<div class="loaderContainer" ng-if="show_spinner">
 		<div class="loader" use-theme type="'border-bottom-color'"></div>
 	</div>