From 263f14e59fea77e29426a1c10f44ec444ce24f9f Mon Sep 17 00:00:00 2001 From: Hadi Nategh Date: Mon, 29 May 2017 15:07:33 +0200 Subject: [PATCH] WIP Notifications system: - Inform the user about unread notifications by a 5sec popup note --- notifications/js/notificationajaxpopup.js | 8 ++++- pixelegg/css/mobile.css | 37 +++++++++++++++++++++++ pixelegg/css/pixelegg.css | 37 +++++++++++++++++++++++ pixelegg/less/layout_messages.less | 36 ++++++++++++++++++++++ pixelegg/mobile/fw_mobile.css | 37 +++++++++++++++++++++++ 5 files changed, 154 insertions(+), 1 deletion(-) diff --git a/notifications/js/notificationajaxpopup.js b/notifications/js/notificationajaxpopup.js index cf679bf488..634b4436a2 100644 --- a/notifications/js/notificationajaxpopup.js +++ b/notifications/js/notificationajaxpopup.js @@ -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 { diff --git a/pixelegg/css/mobile.css b/pixelegg/css/mobile.css index 2ff0542043..f352c37507 100644 --- a/pixelegg/css/mobile.css +++ b/pixelegg/css/mobile.css @@ -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; diff --git a/pixelegg/css/pixelegg.css b/pixelegg/css/pixelegg.css index bd7129d3eb..7ad5cdf510 100644 --- a/pixelegg/css/pixelegg.css +++ b/pixelegg/css/pixelegg.css @@ -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; diff --git a/pixelegg/less/layout_messages.less b/pixelegg/less/layout_messages.less index 9b77e6fe67..cd9588760c 100755 --- a/pixelegg/less/layout_messages.less +++ b/pixelegg/less/layout_messages.less @@ -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; diff --git a/pixelegg/mobile/fw_mobile.css b/pixelegg/mobile/fw_mobile.css index 4c3ff69261..0cf760862c 100644 --- a/pixelegg/mobile/fw_mobile.css +++ b/pixelegg/mobile/fw_mobile.css @@ -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;