From 231312b0aae97ed9a9bfae17e40bc919d23662d4 Mon Sep 17 00:00:00 2001
From: Hadi Nategh <hnategh@gmail.com>
Date: Mon, 27 Jul 2020 14:44:44 +0200
Subject: [PATCH] Implement popup notifications filter based on tab
 notification's indicator

---
 api/js/framework/fw_ui.js                 |  7 +++++++
 notifications/js/notificationajaxpopup.js | 23 ++++++++++++++++++++++-
 pixelegg/css/mobile.css                   |  3 +++
 pixelegg/css/monochrome.css               |  3 +++
 pixelegg/css/pixelegg.css                 |  3 +++
 pixelegg/less/layout_raster_main.less     |  3 +++
 pixelegg/mobile/fw_mobile.css             |  3 +++
 7 files changed, 44 insertions(+), 1 deletion(-)

diff --git a/api/js/framework/fw_ui.js b/api/js/framework/fw_ui.js
index c63023100a..c35592cdf2 100644
--- a/api/js/framework/fw_ui.js
+++ b/api/js/framework/fw_ui.js
@@ -358,8 +358,15 @@ function egw_fw_ui_tab(_parent, _contHeaderDiv, _contDiv, _icon, _callback,
 		});
 
 	this.notificationDiv = document.createElement("div");
+	var self = this;
 	jQuery(this.notificationDiv).addClass('notifyTabDiv')
 			.hide()
+			.click(function(e){
+				if (app.notifications.tabToggle(self.tag.appName))
+				{
+					e.stopImmediatePropagation();
+				}
+			})
 			.appendTo(this.headerDiv);
 	jQuery(this.headerDiv).append(this.closeButton);
 
diff --git a/notifications/js/notificationajaxpopup.js b/notifications/js/notificationajaxpopup.js
index 2cca070f59..f194d09bbb 100644
--- a/notifications/js/notificationajaxpopup.js
+++ b/notifications/js/notificationajaxpopup.js
@@ -90,6 +90,8 @@
 		// query notifictions now
 		this.run_notifications();
 
+		this.filter = '';
+
 	};
 
 	notifications.prototype.run_notifications = function ()
@@ -216,6 +218,7 @@
 		for(var index in indexes)
 		{
 			var id = indexes[index];
+			if (this.filter && notifymessages[id]['data']['app'] != this.filter) continue;
 			var $message, $mark, $delete, $inner_container, $nav_prev, $nav_next,
 				$more_info, $top_toolbar, $open_entry, $date, $collapse;
 			var message_id = 'egwpopup_message_'+id;
@@ -772,6 +775,21 @@
 		return typeof data == 'object'? data: {};
 	};
 
+
+	notifications.prototype.tabToggle = function (_appname)
+	{
+		for (var i in notifymessages)
+		{
+			if (notifymessages[i]['extra_data']['app'] == _appname)
+			{
+				this.filter = _appname;
+				this.toggle();
+				return true;
+			}
+		}
+		return false;
+	};
+
 	/**
 	 * toggle notifications container
 	 * @param boolean _stat true keeps the popup on
@@ -781,7 +799,8 @@
 		var $egwpopup = jQuery('#egwpopup');
 		var $body = jQuery('body');
 		var $counter = jQuery('#topmenu_info_notifications');
-
+		this.display();
+		var self = this;
 		if (!$egwpopup.is(":visible"))
 		{
 			$body.on('click', function(e){
@@ -789,6 +808,7 @@
 						!$egwpopup.is(e.target) && $egwpopup.has(e.target).length == 0)
 				{
 					jQuery(this).off(e);
+					self.filter = '';
 					$egwpopup.toggle('slide');
 					egw.loading_prompt('popup_notifications', false);
 				}
@@ -797,6 +817,7 @@
 		}
 		else
 		{
+			this.filter = '';
 			egw.loading_prompt('popup_notifications', false);
 			if (_stat) return;
 			$body.off('click');
diff --git a/pixelegg/css/mobile.css b/pixelegg/css/mobile.css
index 087791c47e..fce6e4d407 100644
--- a/pixelegg/css/mobile.css
+++ b/pixelegg/css/mobile.css
@@ -4334,6 +4334,9 @@ td.message span.message {
   width: 17px;
   font-weight: bold;
 }
+#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header .notifyTabDiv:hover {
+  background-color: #1E1E1E;
+}
 #egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header:hover {
   background-color: rgba(153, 204, 255, 0.4);
   padding-bottom: 0px;
diff --git a/pixelegg/css/monochrome.css b/pixelegg/css/monochrome.css
index aef350d3eb..9bc795d258 100644
--- a/pixelegg/css/monochrome.css
+++ b/pixelegg/css/monochrome.css
@@ -4323,6 +4323,9 @@ td.message span.message {
   width: 17px;
   font-weight: bold;
 }
+#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header .notifyTabDiv:hover {
+  background-color: #1E1E1E;
+}
 #egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header:hover {
   background-color: rgba(153, 204, 255, 0.4);
   padding-bottom: 0px;
diff --git a/pixelegg/css/pixelegg.css b/pixelegg/css/pixelegg.css
index 28608e8ba6..6aab264e85 100644
--- a/pixelegg/css/pixelegg.css
+++ b/pixelegg/css/pixelegg.css
@@ -4334,6 +4334,9 @@ td.message span.message {
   width: 17px;
   font-weight: bold;
 }
+#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header .notifyTabDiv:hover {
+  background-color: #1E1E1E;
+}
 #egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header:hover {
   background-color: rgba(153, 204, 255, 0.4);
   padding-bottom: 0px;
diff --git a/pixelegg/less/layout_raster_main.less b/pixelegg/less/layout_raster_main.less
index 740610101c..73ab854bde 100644
--- a/pixelegg/less/layout_raster_main.less
+++ b/pixelegg/less/layout_raster_main.less
@@ -101,6 +101,9 @@
 					line-height: 16px;
 					width: 17px;
 					font-weight: bold;
+					&:hover {
+						background-color: @gray_90;
+					}
 				}
 				&:hover {
 					background-color: @color_hover_row;
diff --git a/pixelegg/mobile/fw_mobile.css b/pixelegg/mobile/fw_mobile.css
index 8ad4893334..61b82b13c3 100644
--- a/pixelegg/mobile/fw_mobile.css
+++ b/pixelegg/mobile/fw_mobile.css
@@ -4345,6 +4345,9 @@ td.message span.message {
   width: 17px;
   font-weight: bold;
 }
+#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header .notifyTabDiv:hover {
+  background-color: #1E1E1E;
+}
 #egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header:hover {
   background-color: rgba(153, 204, 255, 0.4);
   padding-bottom: 0px;