WIP Notifications system:

- Inform the user about unread notifications by a 5sec popup note
This commit is contained in:
Hadi Nategh 2017-05-29 15:07:33 +02:00
parent 94c062c7dd
commit 263f14e59f
5 changed files with 154 additions and 1 deletions

View File

@ -64,7 +64,6 @@
*/
notifications.prototype.display = function() {
var $egwpopup,$egwpopup_list,$message,$mark,$delete,$delete_all,$mark_all;
$egwpopup = jQuery("#egwpopup");
$egwpopup_list = jQuery("#egwpopup_list");
for(var show in notifymessages)
@ -324,6 +323,9 @@
*/
notifications.prototype.toggle = function ()
{
// Remove popup_note as soon as message list is toggled
jQuery('.popup_note', '#egwpopup_fw_notifications').remove();
var $egwpopup = jQuery('#egwpopup');
if ($egwpopup.length>0) $egwpopup.slideToggle('fast');
};
@ -334,6 +336,7 @@
notifications.prototype.counterUpdate = function ()
{
var $egwpopup_fw_notifications = jQuery('#egwpopup_fw_notifications');
var $popup_note = jQuery(document.createElement('div')).addClass('popup_note');
var counter = 0;
for (var id in notifymessages)
{
@ -343,6 +346,9 @@
{
$egwpopup_fw_notifications.addClass('egwpopup_notify');
$egwpopup_fw_notifications.text(counter);
$egwpopup_fw_notifications.append($popup_note);
$popup_note.text(egw.lang('You have '+counter+' unread notifications'));
setTimeout(function (){$popup_note.remove();}, 5000);
}
else
{

View File

@ -3685,6 +3685,43 @@ td.lettersearch {
color: #646464;
font-weight: bold;
}
#egwpopup_fw_notifications .popup_note {
position: absolute;
width: 260px;
height: 30px;
left: -273px;
top: -8px;
border: 1px solid silver;
background: #ffffff;
text-align: center;
font-size: 10pt;
line-height: 22pt;
color: #b9436c;
}
#egwpopup_fw_notifications .popup_note:before {
content: '';
position: absolute;
top: 50%;
left: 100%;
margin-top: -10px;
width: 0;
height: 0;
border-left: 10px solid #C2C2C2;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}
#egwpopup_fw_notifications .popup_note:after {
content: '';
position: absolute;
top: 50%;
left: 100%;
margin-top: -8px;
width: 0;
height: 0;
border-left: 8px solid #FFFFFF;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
#egwpopup_fw_notifications.egwpopup_notify {
color: white;
background: #b9436c;

View File

@ -3674,6 +3674,43 @@ td.lettersearch {
color: #646464;
font-weight: bold;
}
#egwpopup_fw_notifications .popup_note {
position: absolute;
width: 260px;
height: 30px;
left: -273px;
top: -8px;
border: 1px solid silver;
background: #ffffff;
text-align: center;
font-size: 10pt;
line-height: 22pt;
color: #b9436c;
}
#egwpopup_fw_notifications .popup_note:before {
content: '';
position: absolute;
top: 50%;
left: 100%;
margin-top: -10px;
width: 0;
height: 0;
border-left: 10px solid #C2C2C2;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}
#egwpopup_fw_notifications .popup_note:after {
content: '';
position: absolute;
top: 50%;
left: 100%;
margin-top: -8px;
width: 0;
height: 0;
border-left: 8px solid #FFFFFF;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
#egwpopup_fw_notifications.egwpopup_notify {
color: white;
background: #b9436c;

View File

@ -204,6 +204,42 @@
text-align: center;
color: #646464;
font-weight: bold;
.popup_note {
position: absolute;
position: absolute;
width: 260px;
height: 30px;
left: -273px;
top: -8px;
border: 1px solid silver;
background: #ffffff;
text-align: center;
font-size: 10pt;
line-height: 22pt;
color: #b9436c;
&:before {
content: '';
position: absolute;
top: 50%;
left: 100%;
margin-top: -10px;
width: 0; height: 0;
border-left: 10px solid #C2C2C2;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}
&:after {
content: '';
position: absolute;
top: 50%;
left: 100%;
margin-top: -8px;
width: 0; height: 0;
border-left: 8px solid #FFFFFF;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
}
}
#egwpopup_fw_notifications.egwpopup_notify {
color: white;

View File

@ -3696,6 +3696,43 @@ td.lettersearch {
color: #646464;
font-weight: bold;
}
#egwpopup_fw_notifications .popup_note {
position: absolute;
width: 260px;
height: 30px;
left: -273px;
top: -8px;
border: 1px solid silver;
background: #ffffff;
text-align: center;
font-size: 10pt;
line-height: 22pt;
color: #b9436c;
}
#egwpopup_fw_notifications .popup_note:before {
content: '';
position: absolute;
top: 50%;
left: 100%;
margin-top: -10px;
width: 0;
height: 0;
border-left: 10px solid #C2C2C2;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}
#egwpopup_fw_notifications .popup_note:after {
content: '';
position: absolute;
top: 50%;
left: 100%;
margin-top: -8px;
width: 0;
height: 0;
border-left: 8px solid #FFFFFF;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
#egwpopup_fw_notifications.egwpopup_notify {
color: white;
background: #b9436c;