extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-12-22 06:30:59 +01:00
Code Issues Packages Projects Releases Wiki Activity

WIP Notifications system:

Browse Source 
- 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
notifications/js/notificationajaxpopup.js
View File

@ -64,7 +64,6 @@
*/ */
notifications.prototype.display = function() { notifications.prototype.display = function() {
var $egwpopup,$egwpopup_list,$message,$mark,$delete,$delete_all,$mark_all; var $egwpopup,$egwpopup_list,$message,$mark,$delete,$delete_all,$mark_all;
$egwpopup = jQuery("#egwpopup");
$egwpopup_list = jQuery("#egwpopup_list"); $egwpopup_list = jQuery("#egwpopup_list");
for(var show in notifymessages) for(var show in notifymessages)
@ -324,6 +323,9 @@
*/ */
notifications.prototype.toggle = function () 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'); var $egwpopup = jQuery('#egwpopup');
if ($egwpopup.length>0) $egwpopup.slideToggle('fast'); if ($egwpopup.length>0) $egwpopup.slideToggle('fast');
}; };
@ -334,6 +336,7 @@
notifications.prototype.counterUpdate = function () notifications.prototype.counterUpdate = function ()
{ {
var $egwpopup_fw_notifications = jQuery('#egwpopup_fw_notifications'); var $egwpopup_fw_notifications = jQuery('#egwpopup_fw_notifications');
var $popup_note = jQuery(document.createElement('div')).addClass('popup_note');
var counter = 0; var counter = 0;
for (var id in notifymessages) for (var id in notifymessages)
{ {
@ -343,6 +346,9 @@
{ {
$egwpopup_fw_notifications.addClass('egwpopup_notify'); $egwpopup_fw_notifications.addClass('egwpopup_notify');
$egwpopup_fw_notifications.text(counter); $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 else
{ {

37
pixelegg/css/mobile.css
View File

@ -3685,6 +3685,43 @@ td.lettersearch {
color: #646464; color: #646464;
font-weight: bold; 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 { #egwpopup_fw_notifications.egwpopup_notify {
color: white; color: white;
background: #b9436c; background: #b9436c;

37
pixelegg/css/pixelegg.css
View File

@ -3674,6 +3674,43 @@ td.lettersearch {
color: #646464; color: #646464;
font-weight: bold; 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 { #egwpopup_fw_notifications.egwpopup_notify {
color: white; color: white;
background: #b9436c; background: #b9436c;

36
pixelegg/less/layout_messages.less
View File

@ -204,6 +204,42 @@
text-align: center; text-align: center;
color: #646464; color: #646464;
font-weight: bold; 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 { #egwpopup_fw_notifications.egwpopup_notify {
color: white; color: white;

37
pixelegg/mobile/fw_mobile.css
View File

@ -3696,6 +3696,43 @@ td.lettersearch {
color: #646464; color: #646464;
font-weight: bold; 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 { #egwpopup_fw_notifications.egwpopup_notify {
color: white; color: white;
background: #b9436c; background: #b9436c;