From 3d164b0624d826ceac3105440052c2c4ce1c04d5 Mon Sep 17 00:00:00 2001 From: Hadi Nategh Date: Mon, 15 May 2017 17:34:27 +0200 Subject: [PATCH] WIP of Notifications system --- notifications/inc/hook_after_navbar.inc.php | 9 +- notifications/js/notificationajaxpopup.js | 118 ++++++++++-------- pixelegg/css/mobile.css | 112 +++++++++++++++-- pixelegg/css/pixelegg.css | 112 +++++++++++++++-- pixelegg/head.tpl | 1 + pixelegg/less/layout_messages.less | 131 ++++++++++++++++---- pixelegg/mobile/fw_mobile.css | 112 +++++++++++++++-- 7 files changed, 479 insertions(+), 116 deletions(-) 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 @@
{topmenu_info_items}
+
0
diff --git a/pixelegg/less/layout_messages.less b/pixelegg/less/layout_messages.less index 15c79e5027..35a90e0d18 100755 --- a/pixelegg/less/layout_messages.less +++ b/pixelegg/less/layout_messages.less @@ -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 { diff --git a/pixelegg/mobile/fw_mobile.css b/pixelegg/mobile/fw_mobile.css index 96a32bb5e8..18f97a313a 100644 --- a/pixelegg/mobile/fw_mobile.css +++ b/pixelegg/mobile/fw_mobile.css @@ -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;