extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-11-25 09:23:28 +01:00
Code Issues Packages Projects Releases Wiki Activity

WIP of Notifications system

Browse Source
This commit is contained in:
Hadi Nategh 2017-05-15 17:34:27 +02:00
parent c6c4cf89f2
commit 3d164b0624
7 changed files with 479 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
notifications/inc/hook_after_navbar.inc.php
View File

@ -24,13 +24,8 @@ if ($GLOBALS['egw_info']['user']['apps']['notifications'])
filemtime(EGW_SERVER_ROOT.'/notifications/js/notificationajaxpopup.js'). '" type="text/javascript" id="notifications_script_id" data-poll-interval="'.$popup_poll_interval.'"></script>'; filemtime(EGW_SERVER_ROOT.'/notifications/js/notificationajaxpopup.js'). '" type="text/javascript" id="notifications_script_id" data-poll-interval="'.$popup_poll_interval.'"></script>';
echo ' echo '
<div id="egwpopup" style="display: none; z-index: 999;"> <div id="egwpopup" style="display: none; z-index: 999;">
<div id="egwpopup_header">'.lang('Notification'). '<span style="float:right;">'. <div id="egwpopup_header">'.lang('Notifications').'<span class="egwpopup_toggle"></span></div>
Api\Html::submit_button('egwpopup_close_button', 'X', '', true, 'id="egwpopup_close_button"', 'close') . <div id="egwpopup_list"></div>
'</span></div>
<div id="egwpopup_message"></div>
<div id="egwpopup_footer">
<input id="egwpopup_ok_button" class="et2_button et2_button_text" type="button" value="'. lang('ok'). '">
</div>
</div> </div>
'; ';
unset($notification_config); unset($notification_config);

96
notifications/js/notificationajaxpopup.js
View File

@ -25,7 +25,7 @@
var popup_poll_interval = notification_script && notification_script.getAttribute('data-poll-interval'); var popup_poll_interval = notification_script && notification_script.getAttribute('data-poll-interval');
this.setTimeout(popup_poll_interval || 60); this.setTimeout(popup_poll_interval || 60);
jQuery('#egwpopup_ok_button').click(jQuery.proxy(this.button_ok, this)); jQuery('#egwpopup_ok_button').click(jQuery.proxy(this.button_ok, this));
jQuery('#egwpopup_close_button').click(jQuery.proxy(this.button_close, this));
jQuery('#notificationbell').click(jQuery.proxy(this.display, this)); jQuery('#notificationbell').click(jQuery.proxy(this.display, this));
// query notifictions now // query notifictions now
this.get_notifications(); this.get_notifications();
@ -39,7 +39,7 @@
egw.json( egw.json(
"notifications.notifications_ajax.get_notifications", "notifications.notifications_ajax.get_notifications",
this.check_browser_notify() this.check_browser_notify()
).sendRequest(); ).sendRequest(true);
}; };
/** /**
@ -65,27 +65,25 @@
* Display notifications window * Display notifications window
*/ */
notifications.prototype.display = function() { notifications.prototype.display = function() {
var egwpopup; var $egwpopup,$egwpopup_list,
var egwpopup_message; egwpopup_ok_button, $message,
var Browserwidth; $close;
var Browserheight;
var egwpopup_ok_button;
egwpopup = document.getElementById("egwpopup");
egwpopup_message = document.getElementById("egwpopup_message");
egwpopup_ok_button = document.getElementById("egwpopup_ok_button");
egwpopup.style.display = "block";
egwpopup.style.position = "absolute";
egwpopup.style.width = "500px";
Browserwidth = (window.innerWidth || document.body.clientWidth || 640);
Browserheight = (window.innerHeight || document.body.clientHeight || 480);
egwpopup.style.left = (Browserwidth/2 - 250) + "px";
egwpopup.style.top = (Browserheight/4) + "px";
egwpopup_message.style.maxHeight = (Browserheight/2) + "px";
for(var show in notifymessages) break;
egwpopup_message.innerHTML = notifymessages[show]['message'];
$egwpopup = jQuery(document.getElementById("egwpopup"));
$egwpopup_list = jQuery(document.getElementById("egwpopup_list"));
egwpopup_ok_button = document.getElementById("egwpopup_ok_button");
for(var show in notifymessages)
{
$message = jQuery(document.createElement('div'))
.addClass('egwpopup_message')
.attr('id', 'egwpopup_message_'+show);
$message[0].innerHTML = notifymessages[show]['message'];
$close = jQuery(document.createElement('span'))
.addClass('egwpopup_close')
.click(jQuery.proxy(this.button_close, this))
.prependTo($message);
// Activate links // Activate links
jQuery('div[data-id],div[data-url]', egwpopup_message).on('click', jQuery('div[data-id],div[data-url]', $message).on('click',
function() { function() {
if(this.dataset.id) if(this.dataset.id)
{ {
@ -97,13 +95,9 @@
} }
} }
).addClass('et2_link'); ).addClass('et2_link');
var num = 0; $egwpopup_list.append($message);
for(var id in notifymessages) ++num;
if(num-1 > 0 ) {
egwpopup_ok_button.value = "OK (" + (num-1) + ")";
} else {
egwpopup_ok_button.value = "OK";
} }
this.counterUpdate();
if(window.webkitNotifications && window.webkitNotifications.checkPermission() != EGW_BROWSER_NOTIFY_ALLOWED && if(window.webkitNotifications && window.webkitNotifications.checkPermission() != EGW_BROWSER_NOTIFY_ALLOWED &&
jQuery('#desktop_perms').length == 0) jQuery('#desktop_perms').length == 0)
{ {
@ -163,19 +157,15 @@
/** /**
* Callback for close button: close and mark all as read * Callback for close button: close and mark all as read
*/ */
notifications.prototype.button_close = function() { notifications.prototype.button_close = function(_event) {
var ids = new Array(); var egwpopup_message = _event.target.parentNode;
for(var id in notifymessages) { var id = egwpopup_message.id.replace(/egwpopup_message_/ig,'');
ids.push(id); var request = egw.json("notifications.notifications_ajax.confirm_message", [id]);
}
var request = egw.json("notifications.notifications_ajax.confirm_message", [ids]);
request.sendRequest(); request.sendRequest();
notifymessages = {}; delete (notifymessages[id]);
var egwpopup = document.getElementById("egwpopup"); egwpopup_message.style.display = 'none';
var egwpopup_message = document.getElementById("egwpopup_message");
egwpopup.style.display = "none";
egwpopup_message.innerHTML = "";
this.bell("inactive"); this.bell("inactive");
this.counterUpdate();
}; };
/** /**
@ -254,10 +244,40 @@
return typeof data == 'object'? data: {}; return typeof data == 'object'? data: {};
}; };
/**
* toggle notifications container
*/
notifications.prototype.toggle = function ()
{
var $egwpopup = jQuery('#egwpopup');
if ($egwpopup.length>0) $egwpopup.slideToggle('fast');
};
/**
* Set new state of notifications counter
*/
notifications.prototype.counterUpdate = function ()
{
var $egwpopup_fw_notifications = jQuery('#egwpopup_fw_notifications');
if (Object.entries(notifymessages))
{
$egwpopup_fw_notifications.addClass('egwpopup_notify');
$egwpopup_fw_notifications.text(Object.entries(notifymessages).length);
}
else
{
$egwpopup_fw_notifications.text(0);
$egwpopup_fw_notifications.removeClass('egwpopup_notify');
}
};
var lab = egw_LAB || $LAB; var lab = egw_LAB || $LAB;
var self = notifications; var self = notifications;
lab.wait(function(){ lab.wait(function(){
if (typeof window.app == 'undefined') window.app = {}; if (typeof window.app == 'undefined') window.app = {};
window.app.notifications = new self(); window.app.notifications = new self();
// toggle notifications bar
jQuery('.egwpopup_toggle').click(function(){window.app.notifications.toggle();});
jQuery('#egwpopup_fw_notifications').click(function(){window.app.notifications.toggle();});
}); });
})(); })();

112
pixelegg/css/mobile.css
View File

@ -3477,20 +3477,16 @@ td.lettersearch {
* @version $Id$ * @version $Id$
*/ */
#egwpopup { #egwpopup {
background-color: #fafafa; top: 43px !important;
-webkit-border-radius: 3px; right: 0px !important;
-webkit-border-top-right-radius: 20px; left: auto !important;
-moz-border-radius: 3px; height: calc(100% - 85px);
-moz-border-radius-topright: 20px; width: 300px !important;
border-radius: 3px; position: absolute;
border-top-right-radius: 20px; background: white;
border-width: 9px 0px 0px 0px; box-shadow: -2px 1px 18px 1px silver;
border-style: solid;
border-color: #B4B4B4;
-webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5);
box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5);
padding: 1em; padding: 1em;
overflow-y: auto;
/*Button*/ /*Button*/
} }
#egwpopup input#egwpopup_ok_button, #egwpopup input#egwpopup_ok_button,
@ -3527,6 +3523,96 @@ td.lettersearch {
#egwpopup button#desktop_perms:active { #egwpopup button#desktop_perms:active {
background-color: #1aa200 !important; background-color: #1aa200 !important;
} }
#egwpopup #egwpopup_list span.egwpopup_close {
display: block;
float: right;
width: 24px;
height: 24px;
background-image: url(../images/close.png);
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
}
#egwpopup #egwpopup_list .egwpopup_message {
padding: 10px;
background-color: #fafafa;
border-radius: 3px;
margin-bottom: 10px;
}
#egwpopup #egwpopup_list .egwpopup_message:hover {
background-color: rgba(103, 159, 210, 0.2);
}
#egwpopup div#egwpopup_header {
font-size: 16px;
color: silver;
text-align: center;
padding: 15px;
}
#egwpopup div#egwpopup_header .egwpopup_toggle {
height: 32px;
width: 32px;
cursor: pointer;
position: relative;
margin-top: -2px;
margin-left: -20px;
float: left;
}
#egwpopup div#egwpopup_header .egwpopup_toggle:after {
content: "";
position: absolute;
left: 13px;
top: 5px;
width: 10px;
height: 2px;
background-color: silver;
backface-visibility: hidden;
border-radius: 6px;
transform: rotate(145deg) translate(8px, -1px);
-ms-transform: rotate(145deg) translate(8px, -1px);
-moz-transform: rotate(145deg) translate(8px, -1px);
-webkit-transform: rotate(145deg) translate(8px, -1px);
}
#egwpopup div#egwpopup_header .egwpopup_toggle:before {
content: "";
position: absolute;
left: 0px;
top: 0px;
width: 10px;
height: 2px;
background-color: silver;
backface-visibility: hidden;
border-radius: 6px;
transform: rotate(45deg) translate(8px, -2px);
-ms-transform: rotate(45deg) translate(8px, -2px);
-moz-transform: rotate(45deg) translate(8px, -2px);
-webkit-transform: rotate(45deg) translate(8px, -2px);
}
#egwpopup div#egwpopup_header .egwpopup_toggle:hover:before,
#egwpopup div#egwpopup_header .egwpopup_toggle:hover:after {
background-color: gray;
}
#egwpopup_fw_notifications {
cursor: pointer;
display: inline-block;
float: right;
margin-right: 1em;
margin-top: 0px;
z-index: 200;
width: 26px;
height: 16px;
top: 9px;
position: fixed;
right: 109px;
border: 2px solid #656565;
border-radius: 3px;
text-align: center;
color: #646464;
font-weight: bold;
}
#egwpopup_fw_notifications.egwpopup_notify {
color: white;
background: #b9436c;
}
/*popup Messsage*/ /*popup Messsage*/
div#egwpopup_message { div#egwpopup_message {
background-color: .color_gray_0; background-color: .color_gray_0;

112
pixelegg/css/pixelegg.css
View File

@ -3466,20 +3466,16 @@ td.lettersearch {
* @version $Id$ * @version $Id$
*/ */
#egwpopup { #egwpopup {
background-color: #fafafa; top: 43px !important;
-webkit-border-radius: 3px; right: 0px !important;
-webkit-border-top-right-radius: 20px; left: auto !important;
-moz-border-radius: 3px; height: calc(100% - 85px);
-moz-border-radius-topright: 20px; width: 300px !important;
border-radius: 3px; position: absolute;
border-top-right-radius: 20px; background: white;
border-width: 9px 0px 0px 0px; box-shadow: -2px 1px 18px 1px silver;
border-style: solid;
border-color: #B4B4B4;
-webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5);
box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5);
padding: 1em; padding: 1em;
overflow-y: auto;
/*Button*/ /*Button*/
} }
#egwpopup input#egwpopup_ok_button, #egwpopup input#egwpopup_ok_button,
@ -3516,6 +3512,96 @@ td.lettersearch {
#egwpopup button#desktop_perms:active { #egwpopup button#desktop_perms:active {
background-color: #1aa200 !important; background-color: #1aa200 !important;
} }
#egwpopup #egwpopup_list span.egwpopup_close {
display: block;
float: right;
width: 24px;
height: 24px;
background-image: url(../images/close.png);
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
}
#egwpopup #egwpopup_list .egwpopup_message {
padding: 10px;
background-color: #fafafa;
border-radius: 3px;
margin-bottom: 10px;
}
#egwpopup #egwpopup_list .egwpopup_message:hover {
background-color: rgba(103, 159, 210, 0.2);
}
#egwpopup div#egwpopup_header {
font-size: 16px;
color: silver;
text-align: center;
padding: 15px;
}
#egwpopup div#egwpopup_header .egwpopup_toggle {
height: 32px;
width: 32px;
cursor: pointer;
position: relative;
margin-top: -2px;
margin-left: -20px;
float: left;
}
#egwpopup div#egwpopup_header .egwpopup_toggle:after {
content: "";
position: absolute;
left: 13px;
top: 5px;
width: 10px;
height: 2px;
background-color: silver;
backface-visibility: hidden;
border-radius: 6px;
transform: rotate(145deg) translate(8px, -1px);
-ms-transform: rotate(145deg) translate(8px, -1px);
-moz-transform: rotate(145deg) translate(8px, -1px);
-webkit-transform: rotate(145deg) translate(8px, -1px);
}
#egwpopup div#egwpopup_header .egwpopup_toggle:before {
content: "";
position: absolute;
left: 0px;
top: 0px;
width: 10px;
height: 2px;
background-color: silver;
backface-visibility: hidden;
border-radius: 6px;
transform: rotate(45deg) translate(8px, -2px);
-ms-transform: rotate(45deg) translate(8px, -2px);
-moz-transform: rotate(45deg) translate(8px, -2px);
-webkit-transform: rotate(45deg) translate(8px, -2px);
}
#egwpopup div#egwpopup_header .egwpopup_toggle:hover:before,
#egwpopup div#egwpopup_header .egwpopup_toggle:hover:after {
background-color: gray;
}
#egwpopup_fw_notifications {
cursor: pointer;
display: inline-block;
float: right;
margin-right: 1em;
margin-top: 0px;
z-index: 200;
width: 26px;
height: 16px;
top: 9px;
position: fixed;
right: 109px;
border: 2px solid #656565;
border-radius: 3px;
text-align: center;
color: #646464;
font-weight: bold;
}
#egwpopup_fw_notifications.egwpopup_notify {
color: white;
background: #b9436c;
}
/*popup Messsage*/ /*popup Messsage*/
div#egwpopup_message { div#egwpopup_message {
background-color: .color_gray_0; background-color: .color_gray_0;

1
pixelegg/head.tpl
View File

@ -40,6 +40,7 @@
<div id="egw_fw_topmenu_addons"> <div id="egw_fw_topmenu_addons">
<div id="egw_fw_topmenu_info_items">{topmenu_info_items}</div> <div id="egw_fw_topmenu_info_items">{topmenu_info_items}</div>
<div id="egw_fw_logout" title="{title_logout}" data-logout-url="{link_logout}"></div> <div id="egw_fw_logout" title="{title_logout}" data-logout-url="{link_logout}"></div>
<div id="egwpopup_fw_notifications" title="">0</div>
<div id="egw_fw_print" title="{title_print}"></div> <div id="egw_fw_print" title="{title_print}"></div>
</div> </div>
<div id="egw_fw_sidebar"> <div id="egw_fw_sidebar">

111
pixelegg/less/layout_messages.less
View File

@ -17,30 +17,119 @@
#egwpopup{ #egwpopup{
top: 43px !important;
.background_color_5_gray; right:0px !important;
.border_radius_button_righttop; left: auto !important;
border-width: 9px 0px 0px 0px; height: ~"calc(100% - 85px)";
border-style: solid; width: 300px !important;
border-color: @gray_30; position: absolute;
background: white;
.box_shadow_message; box-shadow: -2px 1px 18px 1px silver;
padding: 1em; padding: 1em;
overflow-y: auto;
/*Button*/ /*Button*/
input#egwpopup_ok_button, input#egwpopup_ok_button,
button#desktop_perms{ button#desktop_perms{
.Complete_Button_normal; .Complete_Button_normal;
.dimension_height_m; .dimension_height_m;
padding: 0 5px; padding: 0 5px;
&:hover {.Complete_Button_hover;} &:hover {.Complete_Button_hover;}
&:active {background-color: @color_positive_action_active !important;} &:active {background-color: @color_positive_action_active !important;}
}
#egwpopup_list {
span.egwpopup_close {
display: block;
float: right;
width: 24px;
height: 24px;
background-image: url(../images/close.png);
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
}
.egwpopup_message {
padding: 10px;
background-color: #fafafa;
border-radius: 3px;
margin-bottom: 10px;
&:hover {
background-color: rgba(103, 159, 210, 0.2);
}
}
}
div#egwpopup_header {
font-size: 16px;
color: silver;
text-align: center;
padding: 15px;
.egwpopup_toggle {
height: 32px;
width: 32px;
cursor: pointer;
position:relative;
margin-top: -2px;
margin-left: -20px;
float:left;
&:after {
content: "";
position: absolute;
left: 13px;
top: 5px;
width: 10px;
height: 2px;
background-color: silver;
backface-visibility: hidden;
border-radius: 6px;
transform: rotate(145deg) translate(8px, -1px);
-ms-transform: rotate(145deg) translate(8px, -1px);
-moz-transform: rotate(145deg) translate(8px, -1px);
-webkit-transform: rotate(145deg) translate(8px, -1px);
}
&:before {
content: "";
position: absolute;
left: 0px;
top: 0px;
width: 10px;
height: 2px;
background-color: silver;
backface-visibility: hidden;
border-radius: 6px;
transform: rotate(45deg) translate(8px, -2px);
-ms-transform: rotate(45deg) translate(8px, -2px);
-moz-transform: rotate(45deg) translate(8px, -2px);
-webkit-transform: rotate(45deg) translate(8px, -2px);
}
&:hover:before, &:hover:after {
background-color: gray;
}
}
} }
} }
#egwpopup_fw_notifications {
cursor: pointer;
display: inline-block;
float: right;
margin-right: 1em;
margin-top: 0px;
z-index: 200;
width: 26px;
height: 16px;
top: 9px;
position: fixed;
right: 109px;
border: 2px solid #656565;
border-radius: 3px;
text-align: center;
color: #646464;
font-weight: bold;
}
#egwpopup_fw_notifications.egwpopup_notify {
color: white;
background: #b9436c;
}
/*popup Messsage*/ /*popup Messsage*/
div#egwpopup_message { div#egwpopup_message {

112
pixelegg/mobile/fw_mobile.css
View File

@ -3488,20 +3488,16 @@ td.lettersearch {
* @version $Id$ * @version $Id$
*/ */
#egwpopup { #egwpopup {
background-color: #fafafa; top: 43px !important;
-webkit-border-radius: 3px; right: 0px !important;
-webkit-border-top-right-radius: 20px; left: auto !important;
-moz-border-radius: 3px; height: calc(100% - 85px);
-moz-border-radius-topright: 20px; width: 300px !important;
border-radius: 3px; position: absolute;
border-top-right-radius: 20px; background: white;
border-width: 9px 0px 0px 0px; box-shadow: -2px 1px 18px 1px silver;
border-style: solid;
border-color: #B4B4B4;
-webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5);
box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5);
padding: 1em; padding: 1em;
overflow-y: auto;
/*Button*/ /*Button*/
} }
#egwpopup input#egwpopup_ok_button, #egwpopup input#egwpopup_ok_button,
@ -3538,6 +3534,96 @@ td.lettersearch {
#egwpopup button#desktop_perms:active { #egwpopup button#desktop_perms:active {
background-color: #1aa200 !important; background-color: #1aa200 !important;
} }
#egwpopup #egwpopup_list span.egwpopup_close {
display: block;
float: right;
width: 24px;
height: 24px;
background-image: url(../images/close.png);
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
}
#egwpopup #egwpopup_list .egwpopup_message {
padding: 10px;
background-color: #fafafa;
border-radius: 3px;
margin-bottom: 10px;
}
#egwpopup #egwpopup_list .egwpopup_message:hover {
background-color: rgba(103, 159, 210, 0.2);
}
#egwpopup div#egwpopup_header {
font-size: 16px;
color: silver;
text-align: center;
padding: 15px;
}
#egwpopup div#egwpopup_header .egwpopup_toggle {
height: 32px;
width: 32px;
cursor: pointer;
position: relative;
margin-top: -2px;
margin-left: -20px;
float: left;
}
#egwpopup div#egwpopup_header .egwpopup_toggle:after {
content: "";
position: absolute;
left: 13px;
top: 5px;
width: 10px;
height: 2px;
background-color: silver;
backface-visibility: hidden;
border-radius: 6px;
transform: rotate(145deg) translate(8px, -1px);
-ms-transform: rotate(145deg) translate(8px, -1px);
-moz-transform: rotate(145deg) translate(8px, -1px);
-webkit-transform: rotate(145deg) translate(8px, -1px);
}
#egwpopup div#egwpopup_header .egwpopup_toggle:before {
content: "";
position: absolute;
left: 0px;
top: 0px;
width: 10px;
height: 2px;
background-color: silver;
backface-visibility: hidden;
border-radius: 6px;
transform: rotate(45deg) translate(8px, -2px);
-ms-transform: rotate(45deg) translate(8px, -2px);
-moz-transform: rotate(45deg) translate(8px, -2px);
-webkit-transform: rotate(45deg) translate(8px, -2px);
}
#egwpopup div#egwpopup_header .egwpopup_toggle:hover:before,
#egwpopup div#egwpopup_header .egwpopup_toggle:hover:after {
background-color: gray;
}
#egwpopup_fw_notifications {
cursor: pointer;
display: inline-block;
float: right;
margin-right: 1em;
margin-top: 0px;
z-index: 200;
width: 26px;
height: 16px;
top: 9px;
position: fixed;
right: 109px;
border: 2px solid #656565;
border-radius: 3px;
text-align: center;
color: #646464;
font-weight: bold;
}
#egwpopup_fw_notifications.egwpopup_notify {
color: white;
background: #b9436c;
}
/*popup Messsage*/ /*popup Messsage*/
div#egwpopup_message { div#egwpopup_message {
background-color: .color_gray_0; background-color: .color_gray_0;