add a filter for notification to show new posts only

2 files changed, 29 insertions, 8 deletions

diff --git a/view/js/main.js b/view/js/main.js
index 888934ea8..11a09b647 100644
--- a/view/js/main.js
+++ b/view/js/main.js
@@ -874,6 +874,7 @@ function notify_popup_loader(notifyType) {
 	var notifications_tpl= unescape($("#nav-notifications-template[rel=template]").html());
 	var notifications_all = unescape($('<div>').append( $("#nav-" + notifyType + "-see-all").clone() ).html()); //outerHtml hack
 	var notifications_mark = unescape($('<div>').append( $("#nav-" + notifyType + "-mark-all").clone() ).html()); //outerHtml hack
+	var notifications_tt_only = unescape($('<div>').append( $("#tt-" + notifyType + "-only").clone() ).html()); //outerHtml hack
 	var notifications_empty = unescape($("#nav-" + notifyType + "-menu").html());
 
 	var notify_menu = $("#nav-" + notifyType + "-menu");
@@ -885,14 +886,15 @@ function notify_popup_loader(notifyType) {
 			window.location.href=window.location.href;
 		}
 
-		$("#navbar-" + notifyType + "-menu").html(notifications_all + notifications_mark);
-		$("#nav-" + notifyType + "-menu").html(notifications_all + notifications_mark);
+		$("#navbar-" + notifyType + "-menu").html(notifications_all + notifications_mark + notifications_tt_only);
+		$("#nav-" + notifyType + "-menu").html(notifications_all + notifications_mark + notifications_tt_only);
+
 		$("." + notifyType + "-update").html(data.notify.length);
 
 		$(data.notify).each(function() {
-			html = navbar_notifications_tpl.format(this.notify_link,this.photo,this.name,this.message,this.when,this.hclass,this.b64mid,this.notify_id);
+			html = navbar_notifications_tpl.format(this.notify_link,this.photo,this.name,this.message,this.when,this.hclass,this.b64mid,this.notify_id,this.thread_top);
 			$("#navbar-" + notifyType + "-menu").append(html);
-			html = notifications_tpl.format(this.notify_link,this.photo,this.name,this.message,this.when,this.hclass,this.b64mid,this.notify_id);
+			html = notifications_tpl.format(this.notify_link,this.photo,this.name,this.message,this.when,this.hclass,this.b64mid,this.notify_id,this.thread_top);
 			$("#nav-" + notifyType + "-menu").append(html);
 		});
 
@@ -901,8 +903,12 @@ function notify_popup_loader(notifyType) {
 			$(el).attr('src', $(el).data("src"));
 			$(el).removeAttr("data-src");
 		});
+
+		if($('#tt-' + notifyType + '-only').hasClass('active'))
+			$('#nav-' + notifyType + '-menu [data-thread_top=false]').hide();
 	});
 
+
 	setTimeout(function() {
 		if(notify_menu.hasClass('show')) {
 			console.log('updating ' + notifyType + ' notifications...');
diff --git a/view/tpl/notifications_widget.tpl b/view/tpl/notifications_widget.tpl
index 18f3ef12d..90f03faf0 100644
--- a/view/tpl/notifications_widget.tpl
+++ b/view/tpl/notifications_widget.tpl
@@ -22,7 +22,7 @@
 	});
 
 	{{if $module == 'display' || $module == 'hq'}}
-	$(document).on('click touch', '.notification', function(e) {
+	$(document).on('click', '.notification', function(e) {
 		var b64mid = $(this).data('b64mid');
 		var notify_id = $(this).data('notify_id');
 		var path = $(this)[0].pathname.substr(1,7);
@@ -53,6 +53,16 @@
 	});
 	{{/if}}
 
+	{{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]').toggle();
+		$(this).toggleClass('active');
+	});
+	{{/if}}
+	{{/foreach}}
+
 	function getData(b64mid, notify_id) {
 		$('.thread-wrapper').remove();
 		bParam_mid = b64mid;
@@ -72,7 +82,7 @@
 <div id="notifications_wrapper">
 	<div id="notifications" class="navbar-nav" data-children=".nav-item">
 		<div id="nav-notifications-template" rel="template">
-			<a class="list-group-item clearfix notification {5}" href="{0}" title="{2} {3}" data-b64mid="{6}" data-notify_id="{7}">
+			<a class="list-group-item clearfix notification {5}" href="{0}" title="{2} {3}" data-b64mid="{6}" data-notify_id="{7}" data-thread_top="{8}">
 				<img class="menu-img-3" data-src="{1}">
 				<span class="contactname">{2}</span>
 				<span class="dropdown-sub-text">{3}<br>{4}</span>
@@ -91,9 +101,14 @@
 				</a>
 				{{/if}}
 				{{if $notification.markall}}
-				<a class="list-group-item text-dark" id="nav-{{$notification.type}}-mark-all" href="{{$notification.markall.url}}" onclick="markRead('{{$notification.type}}'); return false;">
+				<div class="list-group-item" id="nav-{{$notification.type}}-mark-all" onclick="markRead('{{$notification.type}}'); return false;">
 					<i class="fa fa-fw fa-check"></i> {{$notification.markall.label}}
-				</a>
+				</div>
+				{{/if}}
+				{{if $notification.filter}}
+				<div class="list-group-item" id="tt-{{$notification.type}}-only">
+					<i class="fa fa-fw fa-filter"></i> {{$notification.filter.label}}
+				</div>
 				{{/if}}
 				{{$loading}}
 			</div>