diff --git a/notifications/inc/hook_after_navbar.inc.php b/notifications/inc/hook_after_navbar.inc.php
index 3197238c7e..a344f54bae 100644
--- a/notifications/inc/hook_after_navbar.inc.php
+++ b/notifications/inc/hook_after_navbar.inc.php
@@ -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.'">';
echo '
';
unset($notification_config);
diff --git a/notifications/js/notificationajaxpopup.js b/notifications/js/notificationajaxpopup.js
index 7f13c84ae2..f5cc977ccb 100644
--- a/notifications/js/notificationajaxpopup.js
+++ b/notifications/js/notificationajaxpopup.js
@@ -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();});
});
})();
diff --git a/pixelegg/css/mobile.css b/pixelegg/css/mobile.css
index 8ecff5a7d5..6a8828cd9f 100644
--- a/pixelegg/css/mobile.css
+++ b/pixelegg/css/mobile.css
@@ -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;
diff --git a/pixelegg/css/pixelegg.css b/pixelegg/css/pixelegg.css
index 719b07df21..db322b1efe 100644
--- a/pixelegg/css/pixelegg.css
+++ b/pixelegg/css/pixelegg.css
@@ -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;
diff --git a/pixelegg/head.tpl b/pixelegg/head.tpl
index 5b47ca20e6..e1c7c67aa9 100644
--- a/pixelegg/head.tpl
+++ b/pixelegg/head.tpl
@@ -40,6 +40,7 @@