mirror of
https://github.com/EGroupware/egroupware.git
synced 2025-01-27 00:09:40 +01:00
WIP of Notifications System:
- Some styling enhancements - Add delete and mark as read actions on each message box
This commit is contained in:
Hadi Nategh
parent
a3b8cd339d
commit
0ff91fd96c
@ -25,8 +25,8 @@ if ($GLOBALS['egw_info']['user']['apps']['notifications'])
|
||||
echo '
|
||||
<div id="egwpopup" style="display: none; z-index: 999;">
|
||||
<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_deleteall" title='.lang('delete all messages').'></span></div>
|
||||
'<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>
|
||||
<div id="egwpopup_list"></div>
|
||||
</div>
|
||||
';
|
||||
|
||||
@ -63,7 +63,7 @@
|
||||
* Display notifications window
|
||||
*/
|
||||
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_list = jQuery("#egwpopup_list");
|
||||
|
||||
@ -77,14 +77,22 @@
|
||||
}
|
||||
$message = jQuery(document.createElement('div'))
|
||||
.addClass('egwpopup_message')
|
||||
.click(jQuery.proxy(this.message_seen, this))
|
||||
.attr('id', message_id);
|
||||
$message[0].innerHTML = notifymessages[show]['message'];
|
||||
$close = jQuery(document.createElement('span'))
|
||||
.addClass('egwpopup_close')
|
||||
.attr('title',egw.lang('delete message'))
|
||||
.click(jQuery.proxy(this.button_close, this))
|
||||
$delete = jQuery(document.createElement('span'))
|
||||
.addClass('egwpopup_delete')
|
||||
.attr('title',egw.lang('delete this message'))
|
||||
.click(jQuery.proxy(this.button_delete, this,[$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
|
||||
jQuery('div[data-id],div[data-url]', $message).on('click',
|
||||
function() {
|
||||
@ -99,6 +107,8 @@
|
||||
}
|
||||
).addClass('et2_link');
|
||||
$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.counterUpdate();
|
||||
@ -136,9 +146,10 @@
|
||||
/**
|
||||
* Callback for OK button: confirms message on server and hides display
|
||||
*/
|
||||
notifications.prototype.message_seen = function(_event) {
|
||||
var egwpopup_message = _event.target;
|
||||
var id = egwpopup_message.id.replace(/egwpopup_message_/ig,'');
|
||||
notifications.prototype.message_seen = function(_node, _event) {
|
||||
_event.stopPropagation();
|
||||
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"]);
|
||||
request.sendRequest(true);
|
||||
this.update_message_status(id, "SEEN");
|
||||
@ -185,14 +196,14 @@
|
||||
/**
|
||||
* 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();
|
||||
var egwpopup_message = _event.target.parentNode;
|
||||
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.delete_message", [id]);
|
||||
request.sendRequest(true);
|
||||
delete (notifymessages[id]);
|
||||
egwpopup_message.style.display = 'none';
|
||||
egwpopup_message.hide();
|
||||
this.bell("inactive");
|
||||
this.counterUpdate();
|
||||
};
|
||||
|
||||
@ -3480,13 +3480,12 @@ td.lettersearch {
|
||||
top: 43px !important;
|
||||
right: 0px !important;
|
||||
left: auto !important;
|
||||
height: calc(100% - 85px);
|
||||
height: calc(100% - 115px);
|
||||
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,
|
||||
@ -3523,27 +3522,55 @@ td.lettersearch {
|
||||
#egwpopup button#desktop_perms:active {
|
||||
background-color: #1aa200 !important;
|
||||
}
|
||||
#egwpopup #egwpopup_list span.egwpopup_close {
|
||||
display: block;
|
||||
#egwpopup #egwpopup_list::-webkit-scrollbar-track {
|
||||
-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;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-image: url(../images/close.png);
|
||||
background-image: url(../images/delete.png);
|
||||
background-repeat: no-repeat;
|
||||
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;
|
||||
}
|
||||
#egwpopup #egwpopup_list .egwpopup_message {
|
||||
padding: 10px;
|
||||
background-color: #d9d9d9;
|
||||
background-color: #fafafa;
|
||||
border-radius: 3px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
#egwpopup #egwpopup_list .egwpopup_message:hover {
|
||||
background-color: rgba(103, 159, 210, 0.2);
|
||||
}
|
||||
#egwpopup #egwpopup_list .egwpopup_message_seen {
|
||||
background-color: #fafafa;
|
||||
#egwpopup #egwpopup_list .egwpopup_message_seen .egwpopup_mark {
|
||||
cursor: auto;
|
||||
background: none;
|
||||
}
|
||||
#egwpopup div#egwpopup_header {
|
||||
font-size: 16px;
|
||||
@ -3636,7 +3663,7 @@ td.lettersearch {
|
||||
top: 9px;
|
||||
position: fixed;
|
||||
right: 109px;
|
||||
border: 2px solid #656565;
|
||||
border: 1px solid #656565;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
color: #646464;
|
||||
@ -3645,6 +3672,7 @@ td.lettersearch {
|
||||
#egwpopup_fw_notifications.egwpopup_notify {
|
||||
color: white;
|
||||
background: #b9436c;
|
||||
border-color: #b9436c;
|
||||
}
|
||||
/*popup Messsage*/
|
||||
div#egwpopup_message {
|
||||
|
||||
@ -3469,13 +3469,12 @@ td.lettersearch {
|
||||
top: 43px !important;
|
||||
right: 0px !important;
|
||||
left: auto !important;
|
||||
height: calc(100% - 85px);
|
||||
height: calc(100% - 115px);
|
||||
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,
|
||||
@ -3512,27 +3511,55 @@ td.lettersearch {
|
||||
#egwpopup button#desktop_perms:active {
|
||||
background-color: #1aa200 !important;
|
||||
}
|
||||
#egwpopup #egwpopup_list span.egwpopup_close {
|
||||
display: block;
|
||||
#egwpopup #egwpopup_list::-webkit-scrollbar-track {
|
||||
-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;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-image: url(../images/close.png);
|
||||
background-image: url(../images/delete.png);
|
||||
background-repeat: no-repeat;
|
||||
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;
|
||||
}
|
||||
#egwpopup #egwpopup_list .egwpopup_message {
|
||||
padding: 10px;
|
||||
background-color: #d9d9d9;
|
||||
background-color: #fafafa;
|
||||
border-radius: 3px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
#egwpopup #egwpopup_list .egwpopup_message:hover {
|
||||
background-color: rgba(103, 159, 210, 0.2);
|
||||
}
|
||||
#egwpopup #egwpopup_list .egwpopup_message_seen {
|
||||
background-color: #fafafa;
|
||||
#egwpopup #egwpopup_list .egwpopup_message_seen .egwpopup_mark {
|
||||
cursor: auto;
|
||||
background: none;
|
||||
}
|
||||
#egwpopup div#egwpopup_header {
|
||||
font-size: 16px;
|
||||
@ -3625,7 +3652,7 @@ td.lettersearch {
|
||||
top: 9px;
|
||||
position: fixed;
|
||||
right: 109px;
|
||||
border: 2px solid #656565;
|
||||
border: 1px solid #656565;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
color: #646464;
|
||||
@ -3634,6 +3661,7 @@ td.lettersearch {
|
||||
#egwpopup_fw_notifications.egwpopup_notify {
|
||||
color: white;
|
||||
background: #b9436c;
|
||||
border-color: #b9436c;
|
||||
}
|
||||
/*popup Messsage*/
|
||||
div#egwpopup_message {
|
||||
|
||||
@ -20,13 +20,13 @@
|
||||
top: 43px !important;
|
||||
right:0px !important;
|
||||
left: auto !important;
|
||||
height: ~"calc(100% - 85px)";
|
||||
height: ~"calc(100% - 115px)";
|
||||
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{
|
||||
@ -36,20 +36,51 @@
|
||||
&:hover {.Complete_Button_hover;}
|
||||
&: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 {
|
||||
span.egwpopup_close {
|
||||
display: block;
|
||||
overflow-y: auto;
|
||||
height: ~"calc(100% - 52px)";
|
||||
|
||||
span.egwpopup_delete {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-image: url(../images/close.png);
|
||||
background-image: url(../images/delete.png);
|
||||
background-repeat: no-repeat;
|
||||
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;
|
||||
}
|
||||
.egwpopup_message {
|
||||
padding: 10px;
|
||||
background-color: #d9d9d9;
|
||||
background-color: #fafafa;
|
||||
border-radius: 3px;
|
||||
margin-bottom: 10px;
|
||||
&:hover {
|
||||
@ -57,7 +88,7 @@
|
||||
}
|
||||
}
|
||||
.egwpopup_message_seen {
|
||||
background-color: #fafafa;
|
||||
.egwpopup_mark {cursor: auto;background:none;}
|
||||
}
|
||||
}
|
||||
div#egwpopup_header {
|
||||
@ -153,7 +184,7 @@
|
||||
top: 9px;
|
||||
position: fixed;
|
||||
right: 109px;
|
||||
border: 2px solid #656565;
|
||||
border: 1px solid #656565;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
color: #646464;
|
||||
@ -162,6 +193,7 @@
|
||||
#egwpopup_fw_notifications.egwpopup_notify {
|
||||
color: white;
|
||||
background: #b9436c;
|
||||
border-color:#b9436c;
|
||||
}
|
||||
/*popup Messsage*/
|
||||
div#egwpopup_message {
|
||||
|
||||
@ -3491,13 +3491,12 @@ td.lettersearch {
|
||||
top: 43px !important;
|
||||
right: 0px !important;
|
||||
left: auto !important;
|
||||
height: calc(100% - 85px);
|
||||
height: calc(100% - 115px);
|
||||
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,
|
||||
@ -3534,27 +3533,55 @@ td.lettersearch {
|
||||
#egwpopup button#desktop_perms:active {
|
||||
background-color: #1aa200 !important;
|
||||
}
|
||||
#egwpopup #egwpopup_list span.egwpopup_close {
|
||||
display: block;
|
||||
#egwpopup #egwpopup_list::-webkit-scrollbar-track {
|
||||
-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;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-image: url(../images/close.png);
|
||||
background-image: url(../images/delete.png);
|
||||
background-repeat: no-repeat;
|
||||
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;
|
||||
}
|
||||
#egwpopup #egwpopup_list .egwpopup_message {
|
||||
padding: 10px;
|
||||
background-color: #d9d9d9;
|
||||
background-color: #fafafa;
|
||||
border-radius: 3px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
#egwpopup #egwpopup_list .egwpopup_message:hover {
|
||||
background-color: rgba(103, 159, 210, 0.2);
|
||||
}
|
||||
#egwpopup #egwpopup_list .egwpopup_message_seen {
|
||||
background-color: #fafafa;
|
||||
#egwpopup #egwpopup_list .egwpopup_message_seen .egwpopup_mark {
|
||||
cursor: auto;
|
||||
background: none;
|
||||
}
|
||||
#egwpopup div#egwpopup_header {
|
||||
font-size: 16px;
|
||||
@ -3647,7 +3674,7 @@ td.lettersearch {
|
||||
top: 9px;
|
||||
position: fixed;
|
||||
right: 109px;
|
||||
border: 2px solid #656565;
|
||||
border: 1px solid #656565;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
color: #646464;
|
||||
@ -3656,6 +3683,7 @@ td.lettersearch {
|
||||
#egwpopup_fw_notifications.egwpopup_notify {
|
||||
color: white;
|
||||
background: #b9436c;
|
||||
border-color: #b9436c;
|
||||
}
|
||||
/*popup Messsage*/
|
||||
div#egwpopup_message {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user