holm/egroupware
1
1
Fork 0
forked from extern/egroupware
Code Issues Pull Requests 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>';
echo '
<div id="egwpopup" style="display: none; z-index: 999;">
<div id="egwpopup_header">'.lang('Notification'). '<span style="float:right;">'.
Api\Html::submit_button('egwpopup_close_button', 'X', '', true, 'id="egwpopup_close_button"', 'close') .
'</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 id="egwpopup_header">'.lang('Notifications').'<span class="egwpopup_toggle"></span></div>
<div id="egwpopup_list"></div>
</div>
';
unset($notification_config);

118
notifications/js/notificationajaxpopup.js
View File

@ -25,7 +25,7 @@
var popup_poll_interval = notification_script && notification_script.getAttribute('data-poll-interval');
this.setTimeout(popup_poll_interval || 60);
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));
// query notifictions now
this.get_notifications();
@ -39,7 +39,7 @@
egw.json(
"notifications.notifications_ajax.get_notifications",
this.check_browser_notify()
).sendRequest();
).sendRequest(true);
};
/**
@ -65,45 +65,39 @@
* Display notifications window
*/
notifications.prototype.display = function() {
var egwpopup;
var egwpopup_message;
var Browserwidth;
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'];
var $egwpopup,$egwpopup_list,
egwpopup_ok_button, $message,
$close;
// Activate links
jQuery('div[data-id],div[data-url]', egwpopup_message).on('click',
function() {
if(this.dataset.id)
{
egw.open(this.dataset.id,this.dataset.app);
$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
jQuery('div[data-id],div[data-url]', $message).on('click',
function() {
if(this.dataset.id)
{
egw.open(this.dataset.id,this.dataset.app);
}
else
{
egw.open_link(this.dataset.url,'_blank',this.dataset.popup);
}
}
else
{
egw.open_link(this.dataset.url,'_blank',this.dataset.popup);
}
}
).addClass('et2_link');
var num = 0;
for(var id in notifymessages) ++num;
if(num-1 > 0 ) {
egwpopup_ok_button.value = "OK (" + (num-1) + ")";
} else {
egwpopup_ok_button.value = "OK";
).addClass('et2_link');
$egwpopup_list.append($message);
}
this.counterUpdate();
if(window.webkitNotifications && window.webkitNotifications.checkPermission() != EGW_BROWSER_NOTIFY_ALLOWED &&
jQuery('#desktop_perms').length == 0)
{
@ -163,19 +157,15 @@
/**
* Callback for close button: close and mark all as read
*/
notifications.prototype.button_close = function() {
var ids = new Array();
for(var id in notifymessages) {
ids.push(id);
}
var request = egw.json("notifications.notifications_ajax.confirm_message", [ids]);
notifications.prototype.button_close = function(_event) {
var egwpopup_message = _event.target.parentNode;
var id = egwpopup_message.id.replace(/egwpopup_message_/ig,'');
var request = egw.json("notifications.notifications_ajax.confirm_message", [id]);
request.sendRequest();
notifymessages = {};
var egwpopup = document.getElementById("egwpopup");
var egwpopup_message = document.getElementById("egwpopup_message");
egwpopup.style.display = "none";
egwpopup_message.innerHTML = "";
delete (notifymessages[id]);
egwpopup_message.style.display = 'none';
this.bell("inactive");
this.counterUpdate();
};
/**
@ -254,10 +244,40 @@
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 self = notifications;
lab.wait(function(){
if (typeof window.app == 'undefined') window.app = {};
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$
*/
#egwpopup {
background-color: #fafafa;
-webkit-border-radius: 3px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius: 3px;
-moz-border-radius-topright: 20px;
border-radius: 3px;
border-top-right-radius: 20px;
border-width: 9px 0px 0px 0px;
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);
top: 43px !important;
right: 0px !important;
left: auto !important;
height: calc(100% - 85px);
width: 300px !important;
position: absolute;
background: white;
box-shadow: -2px 1px 18px 1px silver;
padding: 1em;
overflow-y: auto;
/*Button*/
}
#egwpopup input#egwpopup_ok_button,
@ -3527,6 +3523,96 @@ td.lettersearch {
#egwpopup button#desktop_perms:active {
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*/
div#egwpopup_message {
background-color: .color_gray_0;

112
pixelegg/css/pixelegg.css
View File

@ -3466,20 +3466,16 @@ td.lettersearch {
* @version $Id$
*/
#egwpopup {
background-color: #fafafa;
-webkit-border-radius: 3px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius: 3px;
-moz-border-radius-topright: 20px;
border-radius: 3px;
border-top-right-radius: 20px;
border-width: 9px 0px 0px 0px;
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);
top: 43px !important;
right: 0px !important;
left: auto !important;
height: calc(100% - 85px);
width: 300px !important;
position: absolute;
background: white;
box-shadow: -2px 1px 18px 1px silver;
padding: 1em;
overflow-y: auto;
/*Button*/
}
#egwpopup input#egwpopup_ok_button,
@ -3516,6 +3512,96 @@ td.lettersearch {
#egwpopup button#desktop_perms:active {
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*/
div#egwpopup_message {
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_info_items">{topmenu_info_items}</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>
<div id="egw_fw_sidebar">

131
pixelegg/less/layout_messages.less
View File

@ -17,30 +17,119 @@
#egwpopup{
.background_color_5_gray;
.border_radius_button_righttop;
border-width: 9px 0px 0px 0px;
border-style: solid;
border-color: @gray_30;
.box_shadow_message;
padding: 1em;
/*Button*/
input#egwpopup_ok_button,
button#desktop_perms{
.Complete_Button_normal;
.dimension_height_m;
padding: 0 5px;
&:hover {.Complete_Button_hover;}
&:active {background-color: @color_positive_action_active !important;}
}
top: 43px !important;
right:0px !important;
left: auto !important;
height: ~"calc(100% - 85px)";
width: 300px !important;
position: absolute;
background: white;
box-shadow: -2px 1px 18px 1px silver;
padding: 1em;
overflow-y: auto;
/*Button*/
input#egwpopup_ok_button,
button#desktop_perms{
.Complete_Button_normal;
.dimension_height_m;
padding: 0 5px;
&:hover {.Complete_Button_hover;}
&: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*/
div#egwpopup_message {

112
pixelegg/mobile/fw_mobile.css
View File

@ -3488,20 +3488,16 @@ td.lettersearch {
* @version $Id$
*/
#egwpopup {
background-color: #fafafa;
-webkit-border-radius: 3px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius: 3px;
-moz-border-radius-topright: 20px;
border-radius: 3px;
border-top-right-radius: 20px;
border-width: 9px 0px 0px 0px;
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);
top: 43px !important;
right: 0px !important;
left: auto !important;
height: calc(100% - 85px);
width: 300px !important;
position: absolute;
background: white;
box-shadow: -2px 1px 18px 1px silver;
padding: 1em;
overflow-y: auto;
/*Button*/
}
#egwpopup input#egwpopup_ok_button,
@ -3538,6 +3534,96 @@ td.lettersearch {
#egwpopup button#desktop_perms:active {
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*/
div#egwpopup_message {
background-color: .color_gray_0;