Implement new indicator for topmenu items in fw such as displaying unread messages for notifications

notifications/js/notificationajaxpopup.js

@@ -802,13 +802,12 @@
 		if (counter > 0)
 		{
 			$topmenu_info_notifications.addClass('egwpopup_notify');
-			if (jQuery('#egw_fw_topmenu:visible').length == 0) $topmenu_info_notifications.append($popup_note);
+			framework.topmenu_info_notify('notifications', true, counter,egw.lang('You have %1 unread notifications', counter));
-			$popup_note.text(egw.lang('You have %1 unread notifications', counter));
 			setTimeout(function (){$popup_note.remove();}, 4000);
 		}
 		else
 		{
-			$topmenu_info_notifications.removeClass('egwpopup_notify');
+			framework.topmenu_info_notify('notifications', false);
 		}
 	};
 

pixelegg/css/mobile.css

@@ -5078,6 +5078,21 @@ td.message span.message {
   background-image: url(../images/notification_message.svg);
   border-left: 1px solid #636262;
 }
+#egw_fw_topmenu_info_items #topmenu_info_notifications .egw_fw_topmenu_info_notify {
+  position: absolute;
+  background-color: #c14343;
+  bottom: 0px;
+  height: 17px;
+  white-space: nowrap;
+  line-height: 16px;
+  width: 17px;
+  border-top-right-radius: 50%;
+  margin-left: -3px;
+  color: #fff9fb;
+  border: 2px solid #ffffff;
+  text-align: center;
+  border-radius: 50%;
+}
 #egw_fw_topmenu_info_items #topmenu_info_notifications .popup_note {
   position: absolute;
   width: 280px;

pixelegg/css/monochrome.css

@@ -5067,6 +5067,21 @@ td.message span.message {
   background-image: url(../images/notification_message.svg);
   border-left: 1px solid #636262;
 }
+#egw_fw_topmenu_info_items #topmenu_info_notifications .egw_fw_topmenu_info_notify {
+  position: absolute;
+  background-color: #c14343;
+  bottom: 0px;
+  height: 17px;
+  white-space: nowrap;
+  line-height: 16px;
+  width: 17px;
+  border-top-right-radius: 50%;
+  margin-left: -3px;
+  color: #fff9fb;
+  border: 2px solid #ffffff;
+  text-align: center;
+  border-radius: 50%;
+}
 #egw_fw_topmenu_info_items #topmenu_info_notifications .popup_note {
   position: absolute;
   width: 280px;

pixelegg/css/pixelegg.css

@@ -5078,6 +5078,21 @@ td.message span.message {
   background-image: url(../images/notification_message.svg);
   border-left: 1px solid #636262;
 }
+#egw_fw_topmenu_info_items #topmenu_info_notifications .egw_fw_topmenu_info_notify {
+  position: absolute;
+  background-color: #c14343;
+  bottom: 0px;
+  height: 17px;
+  white-space: nowrap;
+  line-height: 16px;
+  width: 17px;
+  border-top-right-radius: 50%;
+  margin-left: -3px;
+  color: #fff9fb;
+  border: 2px solid #ffffff;
+  text-align: center;
+  border-radius: 50%;
+}
 #egw_fw_topmenu_info_items #topmenu_info_notifications .popup_note {
   position: absolute;
   width: 280px;

pixelegg/js/fw_pixelegg.js

@@ -71,6 +71,40 @@
 		et2_loadingFinished: function() {
 			this._super.apply(this, arguments);
 			setTimeout(function(){jQuery('#egw_fw_firstload').remove();}, 1000);
+		},
+
+		/**
+		 * Set a notification message for topmenu info item
+		 *
+		 * @param {string} _id id of topmenu info item with its prefix
+		 * @param {string} _message message that should be displayed
+		 * @param {string} _tooltip hint text as tooltip
+		 */
+		topmenu_info_notify: function(_id, _switch, _message, _tooltip) {
+			var $items = jQuery('#egw_fw_topmenu_info_items').children();
+			var prefix = "topmenu_info_";
+
+			$items.each(function(i,item){
+				if (item.id == prefix+_id || item.id == _id)
+				{
+					var $notify = jQuery(item).find('.egw_fw_topmenu_info_notify');
+					if (_switch)
+					{
+						if ($notify.length == 0)
+						{
+							$notify = jQuery(document.createElement('div'))
+									.addClass('egw_fw_topmenu_info_notify')
+									.prop('title', _tooltip)
+									.appendTo(item);
+						}
+						$notify.text(_message);
+					}
+					else
+					{
+						$notify.remove();
+					}
+				}
+			});
 		}
 	});
 

pixelegg/less/layout_raster_buttons.less

@@ -119,6 +119,21 @@
 		opacity: 0.4;
 		background-image: url(../images/notification_message.svg);
 		border-left: 1px solid #636262;
+		.egw_fw_topmenu_info_notify {
+			position: absolute;
+			background-color: #c14343;
+			bottom: 0px;
+			height: 17px;
+			white-space: nowrap;
+			line-height: 16px;
+			width: 17px;
+			border-top-right-radius: 50%;
+			margin-left: -3px;
+			color: #fff9fb;
+			border: 2px solid #ffffff;
+			text-align: center;
+			border-radius: 50%;
+		}
 		.popup_note {
 			position: absolute;
 			width: 280px;

pixelegg/mobile/fw_mobile.css

@@ -5089,6 +5089,21 @@ td.message span.message {
   background-image: url(../images/notification_message.svg);
   border-left: 1px solid #636262;
 }
+#egw_fw_topmenu_info_items #topmenu_info_notifications .egw_fw_topmenu_info_notify {
+  position: absolute;
+  background-color: #c14343;
+  bottom: 0px;
+  height: 17px;
+  white-space: nowrap;
+  line-height: 16px;
+  width: 17px;
+  border-top-right-radius: 50%;
+  margin-left: -3px;
+  color: #fff9fb;
+  border: 2px solid #ffffff;
+  text-align: center;
+  border-radius: 50%;
+}
 #egw_fw_topmenu_info_items #topmenu_info_notifications .popup_note {
   position: absolute;
   width: 280px;