Merge branch 'dev' of https://github.com/redmatrix/hubzilla into xdev_merge

3 files changed, 31 insertions, 11 deletions

diff --git a/view/css/widgets.css b/view/css/widgets.css
index 576445dd6..a32ac045b 100644
--- a/view/css/widgets.css
+++ b/view/css/widgets.css
@@ -178,15 +178,24 @@ a.wikilist {
 	max-height: 70vh;
 	overflow: auto;
 }
+
 .notifications-textinput input {
 	font-family: FontAwesome, sans-serif;
 }
 
-
 .notifications-textinput {
 	padding: .75rem 0.85rem;
 }
 
+.notifications-textinput-clear {
+	padding: .5rem;
+	line-height: 1;
+	position: absolute;
+	top: .75rem;
+	right: 1rem;
+	cursor: pointer;
+}
+
 .notification-content.collapsing {
 	overflow: hidden;
 }
diff --git a/view/js/main.js b/view/js/main.js
index 3811ddc88..034a520e7 100644
--- a/view/js/main.js
+++ b/view/js/main.js
@@ -893,14 +893,14 @@ function notify_popup_loader(notifyType) {
 		if($('#tt-' + notifyType + '-only').hasClass('active'))
 			$('#nav-' + notifyType + '-menu [data-thread_top=false]').hide();
 
-		var filter = $('#cn-' + notifyType + '-input').val();
+		var filter = $('#cn-' + notifyType + '-input').val().toString().toLowerCase();
 		if(filter) {
 			$('#nav-' + notifyType + '-menu .notification').each(function(i, el){
-				var cn = $(el).data('contact_name').toLowerCase();
+				var cn = $(el).data('contact_name').toString().toLowerCase();
 				if(cn.indexOf(filter) === -1)
-					$(this).addClass('d-none');
+					$(el).addClass('d-none');
 				else
-					$(this).removeClass('d-none');
+					$(el).removeClass('d-none');
 			});
 		}
 	});
diff --git a/view/tpl/notifications_widget.tpl b/view/tpl/notifications_widget.tpl
index 9489e850c..6b3f4b15b 100644
--- a/view/tpl/notifications_widget.tpl
+++ b/view/tpl/notifications_widget.tpl
@@ -65,16 +65,26 @@
 		$('#nav-{{$notification.type}}-menu [data-thread_top=false]').toggle();
 		$(this).toggleClass('active sticky-top');
 	});
-	$(document).on('keyup', '#cn-{{$notification.type}}-input', function(e) {
-		var val = $('#cn-{{$notification.type}}-input').val().toLowerCase();
+	$(document).on('click ', '#cn-{{$notification.type}}-input-clear', function(e) {
+		$('#cn-{{$notification.type}}-input').val('');
+		$('#cn-{{$notification.type}}-only').removeClass('active sticky-top');
+		$("#nav-{{$notification.type}}-menu .notification").removeClass('d-none');
+		$('#cn-{{$notification.type}}-input-clear').addClass('d-none');
+	});
+	$(document).on('input', '#cn-{{$notification.type}}-input', function(e) {
+		var val = $('#cn-{{$notification.type}}-input').val().toString().toLowerCase();
 
-		if(val)
+		if(val) {
 			$('#cn-{{$notification.type}}-only').addClass('active sticky-top');
-		else
+			$('#cn-{{$notification.type}}-input-clear').removeClass('d-none');
+		}
+		else {
 			$('#cn-{{$notification.type}}-only').removeClass('active sticky-top');
+			$('#cn-{{$notification.type}}-input-clear').addClass('d-none');
+		}
 
 		$("#nav-{{$notification.type}}-menu .notification").each(function(i, el){
-			var cn = $(el).data('contact_name').toLowerCase();
+			var cn = $(el).data('contact_name').toString().toLowerCase();
 
 			if(cn.indexOf(val) === -1)
 				$(this).addClass('d-none');
@@ -134,8 +144,9 @@
 				<div class="list-group-item cursor-pointer" id="tt-{{$notification.type}}-only">
 					<i class="fa fa-fw fa-filter"></i> {{$notification.filter.label}}
 				</div>
-				<div class="list-group-item notifications-textinput" id="cn-{{$notification.type}}-only">
+				<div class="list-group-item clearfix notifications-textinput" id="cn-{{$notification.type}}-only">
 					<input id="cn-{{$notification.type}}-input" type="text" class="form-control form-control-sm" placeholder="&#xf0b0;  Filter by name">
+					<div id="cn-{{$notification.type}}-input-clear" class="text-muted notifications-textinput-clear d-none"><i class="fa fa-times"></i></div>
 				</div>
 				{{/if}}
 				<div id="nav-{{$notification.type}}-menu" class="" rel="{{$notification.type}}">