holm/egroupware
1
1
Fork 0
forked from extern/egroupware
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Hadi Nategh 2019-12-02 14:09:45 +01:00
parent 9e2b72f868
commit 9233c93e4f
7 changed files with 111 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
notifications/js/notificationajaxpopup.js
View File

@ -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);
$popup_note.text(egw.lang('You have %1 unread notifications', counter));
framework.topmenu_info_notify('notifications', true, counter,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);
}
};

15
pixelegg/css/mobile.css
View File

@ -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;

15
pixelegg/css/monochrome.css
View File

@ -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;

15
pixelegg/css/pixelegg.css
View File

@ -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;

34
pixelegg/js/fw_pixelegg.js
View File

@ -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();
}
}
});
}
});

15
pixelegg/less/layout_raster_buttons.less
View File

@ -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;

15
pixelegg/mobile/fw_mobile.css
View File

@ -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;