extern/egroupware
1
0
Fork 1
mirror of https://github.com/EGroupware/egroupware.git synced 2025-06-26 21:01:30 +02:00
Code Issues Packages Projects Releases Wiki Activity

WIP of Notifications System:

Browse Source 
- Some styling enhancements
- Add delete and mark as read actions on each message box
This commit is contained in:
Hadi Nategh 2017-05-17 14:04:31 +02:00
parent a3b8cd339d
commit 0ff91fd96c
6 changed files with 177 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -25,8 +25,8 @@ if ($GLOBALS['egw_info']['user']['apps']['notifications'])
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('Notifications'). <div id="egwpopup_header">'.lang('Notifications').
'<span class="egwpopup_toggle"></span><span class="egwpopup_seenall" title='. lang('mark all as seen').'></span>'. '<span class="egwpopup_toggle"></span><span class="egwpopup_seenall" title="'. lang('mark all as read').'"></span>'.
'<span class="egwpopup_deleteall" title='.lang('delete all messages').'></span></div> '<span class="egwpopup_deleteall" title="'.lang('delete all messages').'"></span></div>
<div id="egwpopup_list"></div> <div id="egwpopup_list"></div>
</div> </div>
'; ';

37
notifications/js/notificationajaxpopup.js
View File

@ -63,7 +63,7 @@
* Display notifications window * Display notifications window
*/ */
notifications.prototype.display = function() { notifications.prototype.display = function() {
var $egwpopup,$egwpopup_list, $message, $close, $delete_all, $mark_all; var $egwpopup,$egwpopup_list,$message,$mark,$delete,$delete_all,$mark_all;
$egwpopup = jQuery("#egwpopup"); $egwpopup = jQuery("#egwpopup");
$egwpopup_list = jQuery("#egwpopup_list"); $egwpopup_list = jQuery("#egwpopup_list");
@ -77,14 +77,22 @@
} }
$message = jQuery(document.createElement('div')) $message = jQuery(document.createElement('div'))
.addClass('egwpopup_message') .addClass('egwpopup_message')
.click(jQuery.proxy(this.message_seen, this))
.attr('id', message_id); .attr('id', message_id);
$message[0].innerHTML = notifymessages[show]['message']; $message[0].innerHTML = notifymessages[show]['message'];
$close = jQuery(document.createElement('span')) $delete = jQuery(document.createElement('span'))
.addClass('egwpopup_close') .addClass('egwpopup_delete')
.attr('title',egw.lang('delete message')) .attr('title',egw.lang('delete this message'))
.click(jQuery.proxy(this.button_close, this)) .click(jQuery.proxy(this.button_delete, this,[$message]))
.prependTo($message); .prependTo($message);
$mark = jQuery(document.createElement('span'))
.addClass('egwpopup_mark')
.prependTo($message);
if (notifymessages[show]['status'] != 'SEEN')
{
$mark.click(jQuery.proxy(this.message_seen, this,[$message]))
.attr('title',egw.lang('mark as read'));
}
// Activate links // Activate links
jQuery('div[data-id],div[data-url]', $message).on('click', jQuery('div[data-id],div[data-url]', $message).on('click',
function() { function() {
@ -99,6 +107,8 @@
} }
).addClass('et2_link'); ).addClass('et2_link');
$egwpopup_list.append($message); $egwpopup_list.append($message);
// bind click handler after the message container is attached
$message.click(jQuery.proxy(this.message_seen, this,[$message]));
this.update_message_status(show, notifymessages[show]['status']); this.update_message_status(show, notifymessages[show]['status']);
} }
this.counterUpdate(); this.counterUpdate();
@ -136,9 +146,10 @@
/** /**
* Callback for OK button: confirms message on server and hides display * Callback for OK button: confirms message on server and hides display
*/ */
notifications.prototype.message_seen = function(_event) { notifications.prototype.message_seen = function(_node, _event) {
var egwpopup_message = _event.target; _event.stopPropagation();
var id = egwpopup_message.id.replace(/egwpopup_message_/ig,''); var egwpopup_message = _node[0];
var id = egwpopup_message[0].id.replace(/egwpopup_message_/ig,'');
var request = egw.json("notifications.notifications_ajax.update_status", [id, "SEEN"]); var request = egw.json("notifications.notifications_ajax.update_status", [id, "SEEN"]);
request.sendRequest(true); request.sendRequest(true);
this.update_message_status(id, "SEEN"); this.update_message_status(id, "SEEN");
@ -185,14 +196,14 @@
/** /**
* 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(_event) { notifications.prototype.button_delete = function(_node, _event) {
_event.stopPropagation(); _event.stopPropagation();
var egwpopup_message = _event.target.parentNode; var egwpopup_message = _node[0];
var id = egwpopup_message.id.replace(/egwpopup_message_/ig,''); var id = egwpopup_message[0].id.replace(/egwpopup_message_/ig,'');
var request = egw.json("notifications.notifications_ajax.delete_message", [id]); var request = egw.json("notifications.notifications_ajax.delete_message", [id]);
request.sendRequest(true); request.sendRequest(true);
delete (notifymessages[id]); delete (notifymessages[id]);
egwpopup_message.style.display = 'none'; egwpopup_message.hide();
this.bell("inactive"); this.bell("inactive");
this.counterUpdate(); this.counterUpdate();
}; };

46
pixelegg/css/mobile.css
View File

@ -3480,13 +3480,12 @@ td.lettersearch {
top: 43px !important; top: 43px !important;
right: 0px !important; right: 0px !important;
left: auto !important; left: auto !important;
height: calc(100% - 85px); height: calc(100% - 115px);
width: 300px !important; width: 300px !important;
position: absolute; position: absolute;
background: white; background: white;
box-shadow: -2px 1px 18px 1px silver; box-shadow: -2px 1px 18px 1px silver;
padding: 1em; padding: 1em;
overflow-y: auto;
/*Button*/ /*Button*/
} }
#egwpopup input#egwpopup_ok_button, #egwpopup input#egwpopup_ok_button,
@ -3523,27 +3522,55 @@ 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 { #egwpopup #egwpopup_list::-webkit-scrollbar-track {
display: block; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #fafafa;
}
#egwpopup #egwpopup_list::-webkit-scrollbar {
width: 4px;
background-color: #fafafa;
}
#egwpopup #egwpopup_list::-webkit-scrollbar-thumb {
background-color: #6a6f71;
}
#egwpopup #egwpopup_list {
overflow-y: auto;
height: calc(100% - 52px);
}
#egwpopup #egwpopup_list span.egwpopup_delete {
display: inline-block;
float: right; float: right;
width: 24px; width: 24px;
height: 24px; height: 24px;
background-image: url(../images/close.png); background-image: url(../images/delete.png);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: 12px;
cursor: pointer;
}
#egwpopup #egwpopup_list .egwpopup_mark {
display: inline-block;
float: right;
width: 10px;
height: 10px;
border: 1px solid #666c6e;
border-radius: 50%;
margin: 7px;
background: #b9436c;
cursor: pointer; cursor: pointer;
} }
#egwpopup #egwpopup_list .egwpopup_message { #egwpopup #egwpopup_list .egwpopup_message {
padding: 10px; padding: 10px;
background-color: #d9d9d9; background-color: #fafafa;
border-radius: 3px; border-radius: 3px;
margin-bottom: 10px; margin-bottom: 10px;
} }
#egwpopup #egwpopup_list .egwpopup_message:hover { #egwpopup #egwpopup_list .egwpopup_message:hover {
background-color: rgba(103, 159, 210, 0.2); background-color: rgba(103, 159, 210, 0.2);
} }
#egwpopup #egwpopup_list .egwpopup_message_seen { #egwpopup #egwpopup_list .egwpopup_message_seen .egwpopup_mark {
background-color: #fafafa; cursor: auto;
background: none;
} }
#egwpopup div#egwpopup_header { #egwpopup div#egwpopup_header {
font-size: 16px; font-size: 16px;
@ -3636,7 +3663,7 @@ td.lettersearch {
top: 9px; top: 9px;
position: fixed; position: fixed;
right: 109px; right: 109px;
border: 2px solid #656565; border: 1px solid #656565;
border-radius: 3px; border-radius: 3px;
text-align: center; text-align: center;
color: #646464; color: #646464;
@ -3645,6 +3672,7 @@ td.lettersearch {
#egwpopup_fw_notifications.egwpopup_notify { #egwpopup_fw_notifications.egwpopup_notify {
color: white; color: white;
background: #b9436c; background: #b9436c;
border-color: #b9436c;
} }
/*popup Messsage*/ /*popup Messsage*/
div#egwpopup_message { div#egwpopup_message {

46
pixelegg/css/pixelegg.css
View File

@ -3469,13 +3469,12 @@ td.lettersearch {
top: 43px !important; top: 43px !important;
right: 0px !important; right: 0px !important;
left: auto !important; left: auto !important;
height: calc(100% - 85px); height: calc(100% - 115px);
width: 300px !important; width: 300px !important;
position: absolute; position: absolute;
background: white; background: white;
box-shadow: -2px 1px 18px 1px silver; box-shadow: -2px 1px 18px 1px silver;
padding: 1em; padding: 1em;
overflow-y: auto;
/*Button*/ /*Button*/
} }
#egwpopup input#egwpopup_ok_button, #egwpopup input#egwpopup_ok_button,
@ -3512,27 +3511,55 @@ 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 { #egwpopup #egwpopup_list::-webkit-scrollbar-track {
display: block; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #fafafa;
}
#egwpopup #egwpopup_list::-webkit-scrollbar {
width: 4px;
background-color: #fafafa;
}
#egwpopup #egwpopup_list::-webkit-scrollbar-thumb {
background-color: #6a6f71;
}
#egwpopup #egwpopup_list {
overflow-y: auto;
height: calc(100% - 52px);
}
#egwpopup #egwpopup_list span.egwpopup_delete {
display: inline-block;
float: right; float: right;
width: 24px; width: 24px;
height: 24px; height: 24px;
background-image: url(../images/close.png); background-image: url(../images/delete.png);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: 12px;
cursor: pointer;
}
#egwpopup #egwpopup_list .egwpopup_mark {
display: inline-block;
float: right;
width: 10px;
height: 10px;
border: 1px solid #666c6e;
border-radius: 50%;
margin: 7px;
background: #b9436c;
cursor: pointer; cursor: pointer;
} }
#egwpopup #egwpopup_list .egwpopup_message { #egwpopup #egwpopup_list .egwpopup_message {
padding: 10px; padding: 10px;
background-color: #d9d9d9; background-color: #fafafa;
border-radius: 3px; border-radius: 3px;
margin-bottom: 10px; margin-bottom: 10px;
} }
#egwpopup #egwpopup_list .egwpopup_message:hover { #egwpopup #egwpopup_list .egwpopup_message:hover {
background-color: rgba(103, 159, 210, 0.2); background-color: rgba(103, 159, 210, 0.2);
} }
#egwpopup #egwpopup_list .egwpopup_message_seen { #egwpopup #egwpopup_list .egwpopup_message_seen .egwpopup_mark {
background-color: #fafafa; cursor: auto;
background: none;
} }
#egwpopup div#egwpopup_header { #egwpopup div#egwpopup_header {
font-size: 16px; font-size: 16px;
@ -3625,7 +3652,7 @@ td.lettersearch {
top: 9px; top: 9px;
position: fixed; position: fixed;
right: 109px; right: 109px;
border: 2px solid #656565; border: 1px solid #656565;
border-radius: 3px; border-radius: 3px;
text-align: center; text-align: center;
color: #646464; color: #646464;
@ -3634,6 +3661,7 @@ td.lettersearch {
#egwpopup_fw_notifications.egwpopup_notify { #egwpopup_fw_notifications.egwpopup_notify {
color: white; color: white;
background: #b9436c; background: #b9436c;
border-color: #b9436c;
} }
/*popup Messsage*/ /*popup Messsage*/
div#egwpopup_message { div#egwpopup_message {

48
pixelegg/less/layout_messages.less
View File

@ -20,13 +20,13 @@
top: 43px !important; top: 43px !important;
right:0px !important; right:0px !important;
left: auto !important; left: auto !important;
height: ~"calc(100% - 85px)"; height: ~"calc(100% - 115px)";
width: 300px !important; width: 300px !important;
position: absolute; position: absolute;
background: white; background: white;
box-shadow: -2px 1px 18px 1px silver; 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{
@ -36,20 +36,51 @@
&: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::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #fafafa;
}
#egwpopup_list::-webkit-scrollbar
{
width: 4px;
background-color: #fafafa;
}
#egwpopup_list::-webkit-scrollbar-thumb
{
background-color: #6a6f71;
}
#egwpopup_list { #egwpopup_list {
span.egwpopup_close { overflow-y: auto;
display: block; height: ~"calc(100% - 52px)";
span.egwpopup_delete {
display: inline-block;
float: right; float: right;
width: 24px; width: 24px;
height: 24px; height: 24px;
background-image: url(../images/close.png); background-image: url(../images/delete.png);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: 12px;
cursor: pointer;
}
.egwpopup_mark {
display: inline-block;
float: right;
width: 10px;
height: 10px;
border: 1px solid #666c6e;
border-radius: 50%;
margin: 7px;
background:#b9436c;
cursor: pointer; cursor: pointer;
} }
.egwpopup_message { .egwpopup_message {
padding: 10px; padding: 10px;
background-color: #d9d9d9; background-color: #fafafa;
border-radius: 3px; border-radius: 3px;
margin-bottom: 10px; margin-bottom: 10px;
&:hover { &:hover {
@ -57,7 +88,7 @@
} }
} }
.egwpopup_message_seen { .egwpopup_message_seen {
background-color: #fafafa; .egwpopup_mark {cursor: auto;background:none;}
} }
} }
div#egwpopup_header { div#egwpopup_header {
@ -153,7 +184,7 @@
top: 9px; top: 9px;
position: fixed; position: fixed;
right: 109px; right: 109px;
border: 2px solid #656565; border: 1px solid #656565;
border-radius: 3px; border-radius: 3px;
text-align: center; text-align: center;
color: #646464; color: #646464;
@ -162,6 +193,7 @@
#egwpopup_fw_notifications.egwpopup_notify { #egwpopup_fw_notifications.egwpopup_notify {
color: white; color: white;
background: #b9436c; background: #b9436c;
border-color:#b9436c;
} }
/*popup Messsage*/ /*popup Messsage*/
div#egwpopup_message { div#egwpopup_message {

46
pixelegg/mobile/fw_mobile.css
View File

@ -3491,13 +3491,12 @@ td.lettersearch {
top: 43px !important; top: 43px !important;
right: 0px !important; right: 0px !important;
left: auto !important; left: auto !important;
height: calc(100% - 85px); height: calc(100% - 115px);
width: 300px !important; width: 300px !important;
position: absolute; position: absolute;
background: white; background: white;
box-shadow: -2px 1px 18px 1px silver; box-shadow: -2px 1px 18px 1px silver;
padding: 1em; padding: 1em;
overflow-y: auto;
/*Button*/ /*Button*/
} }
#egwpopup input#egwpopup_ok_button, #egwpopup input#egwpopup_ok_button,
@ -3534,27 +3533,55 @@ 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 { #egwpopup #egwpopup_list::-webkit-scrollbar-track {
display: block; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #fafafa;
}
#egwpopup #egwpopup_list::-webkit-scrollbar {
width: 4px;
background-color: #fafafa;
}
#egwpopup #egwpopup_list::-webkit-scrollbar-thumb {
background-color: #6a6f71;
}
#egwpopup #egwpopup_list {
overflow-y: auto;
height: calc(100% - 52px);
}
#egwpopup #egwpopup_list span.egwpopup_delete {
display: inline-block;
float: right; float: right;
width: 24px; width: 24px;
height: 24px; height: 24px;
background-image: url(../images/close.png); background-image: url(../images/delete.png);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: 12px;
cursor: pointer;
}
#egwpopup #egwpopup_list .egwpopup_mark {
display: inline-block;
float: right;
width: 10px;
height: 10px;
border: 1px solid #666c6e;
border-radius: 50%;
margin: 7px;
background: #b9436c;
cursor: pointer; cursor: pointer;
} }
#egwpopup #egwpopup_list .egwpopup_message { #egwpopup #egwpopup_list .egwpopup_message {
padding: 10px; padding: 10px;
background-color: #d9d9d9; background-color: #fafafa;
border-radius: 3px; border-radius: 3px;
margin-bottom: 10px; margin-bottom: 10px;
} }
#egwpopup #egwpopup_list .egwpopup_message:hover { #egwpopup #egwpopup_list .egwpopup_message:hover {
background-color: rgba(103, 159, 210, 0.2); background-color: rgba(103, 159, 210, 0.2);
} }
#egwpopup #egwpopup_list .egwpopup_message_seen { #egwpopup #egwpopup_list .egwpopup_message_seen .egwpopup_mark {
background-color: #fafafa; cursor: auto;
background: none;
} }
#egwpopup div#egwpopup_header { #egwpopup div#egwpopup_header {
font-size: 16px; font-size: 16px;
@ -3647,7 +3674,7 @@ td.lettersearch {
top: 9px; top: 9px;
position: fixed; position: fixed;
right: 109px; right: 109px;
border: 2px solid #656565; border: 1px solid #656565;
border-radius: 3px; border-radius: 3px;
text-align: center; text-align: center;
color: #646464; color: #646464;
@ -3656,6 +3683,7 @@ td.lettersearch {
#egwpopup_fw_notifications.egwpopup_notify { #egwpopup_fw_notifications.egwpopup_notify {
color: white; color: white;
background: #b9436c; background: #b9436c;
border-color: #b9436c;
} }
/*popup Messsage*/ /*popup Messsage*/
div#egwpopup_message { div#egwpopup_message {