improve functionality of combined notification filters

3 files changed, 20 insertions, 9 deletions

diff --git a/view/css/widgets.css b/view/css/widgets.css
index ca7267189..30e7e6972 100644
--- a/view/css/widgets.css
+++ b/view/css/widgets.css
@@ -225,6 +225,11 @@ a.wikilist {
 	margin-bottom: 1rem;
 }
 
+.tt-filter-active,
+.cn-filter-active {
+	display: none !important;
+}
+
 /* contact block */
 .contact-block-div .oneway-overlay {
 	font-size: 20px;
diff --git a/view/js/main.js b/view/js/main.js
index 5ba4282a6..49c0bed97 100644
--- a/view/js/main.js
+++ b/view/js/main.js
@@ -1807,7 +1807,7 @@ function sse_handleNotificationsItems(notifyType, data, replace, followup) {
 	$("#nav-" + notifyType + "-menu .notifications-autotime").timeago();
 
 	if($('#tt-' + notifyType + '-only').hasClass('active'))
-		$('#nav-' + notifyType + '-menu [data-thread_top=false]').addClass('d-none');
+		$('#nav-' + notifyType + '-menu [data-thread_top=false]').addClass('tt-filter-active');
 
 	if($('#cn-' + notifyType + '-input').length) {
 		var filter = $('#cn-' + notifyType + '-input').val().toString().toLowerCase();
@@ -1818,9 +1818,9 @@ function sse_handleNotificationsItems(notifyType, data, replace, followup) {
 				var cn = $(el).data('contact_name').toString().toLowerCase();
 				var ca = $(el).data('contact_addr').toString().toLowerCase();
 				if(cn.indexOf(filter) === -1 && ca.indexOf(filter) === -1)
-					$(el).addClass('d-none');
+					$(el).addClass('cn-filter-active');
 				else
-					$(el).removeClass('d-none');
+					$(el).removeClass('cn-filter-active');
 			});
 		}
 	}
diff --git a/view/tpl/notifications_widget.tpl b/view/tpl/notifications_widget.tpl
index 146c510f1..001a202af 100644
--- a/view/tpl/notifications_widget.tpl
+++ b/view/tpl/notifications_widget.tpl
@@ -81,14 +81,20 @@
 	{{foreach $notifications as $notification}}
 	{{if $notification.filter}}
 	$(document).on('click', '#tt-{{$notification.type}}-only', function(e) {
-		e.preventDefault();
-		$('#nav-{{$notification.type}}-menu [data-thread_top=false]').toggleClass('d-none');
-		$(this).toggleClass('active sticky-top');
+		if($(this).hasClass('active sticky-top')) {
+			$('#nav-{{$notification.type}}-menu .notification[data-thread_top=false]').removeClass('tt-filter-active');
+			$(this).removeClass('active sticky-top');
+		}
+		else {
+			$('#nav-{{$notification.type}}-menu .notification[data-thread_top=false]').addClass('tt-filter-active');
+			$(this).addClass('active sticky-top');
+		}
+
 	});
 	$(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');
+		$("#nav-{{$notification.type}}-menu .notification").removeClass('cn-filter-active');
 		$('#cn-{{$notification.type}}-input-clear').addClass('d-none');
 	});
 	$(document).on('input', '#cn-{{$notification.type}}-input', function(e) {
@@ -108,9 +114,9 @@
 			var ca = $(el).data('contact_addr').toString().toLowerCase();
 
 			if(cn.indexOf(val) === -1 && ca.indexOf(val) === -1)
-				$(this).addClass('d-none');
+				$(this).addClass('cn-filter-active');
 			else
-				$(this).removeClass('d-none');
+				$(this).removeClass('cn-filter-active');
 		});
 	});
 	{{/if}}