mirror of
https://github.com/EGroupware/egroupware.git
synced 2025-02-02 11:29:58 +01:00
W.I.P. of notifications popup handler
This commit is contained in:
Hadi Nategh
parent
70302bbd04
commit
9563049f41
@ -63,7 +63,10 @@
|
||||
* Display notifications window
|
||||
*/
|
||||
notifications.prototype.display = function() {
|
||||
var $egwpopup,$egwpopup_list,$message,$mark,$delete,$delete_all,$mark_all;
|
||||
var $egwpopup_list, $message, $mark, $delete, $inner_container,
|
||||
$more_info, $top_toolbar, $open_entry, $date, $collapse;
|
||||
|
||||
// list container
|
||||
$egwpopup_list = jQuery("#egwpopup_list");
|
||||
|
||||
for(var show in notifymessages)
|
||||
@ -74,24 +77,57 @@
|
||||
this.update_message_status(show, notifymessages[show]['status']);
|
||||
continue;
|
||||
}
|
||||
// message container
|
||||
$message = jQuery(document.createElement('div'))
|
||||
.addClass('egwpopup_message')
|
||||
.attr('id', message_id);
|
||||
$message[0].innerHTML = notifymessages[show]['message'];
|
||||
// wrapper for message content
|
||||
$inner_container = jQuery(document.createElement('div'))
|
||||
.addClass('egwpopup_message_inner_container')
|
||||
.appendTo($message);
|
||||
$inner_container[0].innerHTML = notifymessages[show]['message'];
|
||||
|
||||
$more_info = jQuery(document.createElement('div'))
|
||||
.addClass('egwpopup_message_more_info')
|
||||
.text(egw.lang('More info')+'...')
|
||||
.appendTo($message);
|
||||
// top toolbar NODE
|
||||
$top_toolbar = jQuery(document.createElement('div'))
|
||||
.addClass('egwpopup_message_top_toolbar');
|
||||
// Date indicator NODE
|
||||
$date = jQuery(document.createElement('span'))
|
||||
.addClass('egwpopup_message_date')
|
||||
.prependTo($top_toolbar)
|
||||
.text(notifymessages[show]['data']['date']);
|
||||
// OPEN entry button
|
||||
$open_entry = jQuery(document.createElement('span'))
|
||||
.addClass('egwpopup_message_open')
|
||||
.attr('title',egw.lang('open notified entry'))
|
||||
.click(jQuery.proxy(this.open_entry, this,[$message]))
|
||||
.prependTo($top_toolbar);
|
||||
// Delete button
|
||||
$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);
|
||||
.prependTo($top_toolbar);
|
||||
// Mark as read button
|
||||
$mark = jQuery(document.createElement('span'))
|
||||
.addClass('egwpopup_mark')
|
||||
.prependTo($message);
|
||||
.prependTo($top_toolbar);
|
||||
// Collapse button (close icon)
|
||||
$collapse = jQuery(document.createElement('span'))
|
||||
.addClass('egwpopup_collapse')
|
||||
.click(jQuery.proxy(this.collapseMessage, this, [$message]))
|
||||
.prependTo($top_toolbar);
|
||||
|
||||
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() {
|
||||
@ -118,11 +154,12 @@
|
||||
.click(jQuery.proxy(func,this))
|
||||
.prependTo($actions_container);
|
||||
}
|
||||
$actions_container.prependTo($message);
|
||||
$actions_container.appendTo($message);
|
||||
}
|
||||
$top_toolbar.prependTo($message);
|
||||
$egwpopup_list.append($message);
|
||||
// bind click handler after the message container is attached
|
||||
$message.click(jQuery.proxy(this.clickOnMessage, this,[$message]));
|
||||
$inner_container.click(jQuery.proxy(this.clickOnMessage, this,[$message]));
|
||||
this.update_message_status(show, notifymessages[show]['status']);
|
||||
}
|
||||
this.counterUpdate();
|
||||
@ -142,10 +179,15 @@
|
||||
}
|
||||
};
|
||||
|
||||
notifications.prototype.clickOnMessage = function (_node, _event){
|
||||
/**
|
||||
* Opens the relavant entry from clicked message
|
||||
*
|
||||
* @param {jquery object} _node
|
||||
* @param {object} _event
|
||||
*/
|
||||
notifications.prototype.open_entry = function (_node, _event){
|
||||
_event.stopPropagation();
|
||||
this.message_seen(_node, _event);
|
||||
if (_node[0][0] !=_event.target) return;
|
||||
var egwpopup_message = _node[0];
|
||||
var id = egwpopup_message[0].id.replace(/egwpopup_message_/ig,'');
|
||||
if (notifymessages[id]['data'])
|
||||
@ -161,6 +203,35 @@
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Reposition the expanded message back in the list & removes the clone node
|
||||
* @param {jquery object} _node
|
||||
*/
|
||||
notifications.prototype.collapseMessage = function (_node){
|
||||
var cloned = _node[0].prev();
|
||||
if (cloned.length > 0 && cloned[0].id == _node[0].attr('id')+'_expanded')
|
||||
cloned.remove();
|
||||
_node[0].removeClass('egwpopup_expanded');
|
||||
};
|
||||
|
||||
/**
|
||||
* Expand a clicked message into bigger view
|
||||
* @param {jquery object} _node
|
||||
* @param {object} _event
|
||||
*/
|
||||
notifications.prototype.clickOnMessage = function (_node, _event){
|
||||
_event.stopPropagation();
|
||||
this.message_seen(_node, _event);
|
||||
var $node = jQuery(_node[0][0].cloneNode());
|
||||
if ($node)
|
||||
{
|
||||
$node.attr('id', _node[0].attr('id')+'_expanded')
|
||||
.addClass('egwpopup_message_clone')
|
||||
.insertBefore(_node[0]);
|
||||
}
|
||||
_node[0].addClass('egwpopup_expanded');
|
||||
};
|
||||
|
||||
/**
|
||||
* Display or hide notifcation-bell
|
||||
*
|
||||
|
||||
@ -3564,8 +3564,8 @@ td.lettersearch {
|
||||
cursor: pointer;
|
||||
}
|
||||
#egwpopup #egwpopup_list .egwpopup_message {
|
||||
height: 140px;
|
||||
overflow: scroll;
|
||||
height: 130px;
|
||||
overflow: hidden;
|
||||
padding: 10px;
|
||||
background-color: #fafafa;
|
||||
border-radius: 3px;
|
||||
@ -3574,6 +3574,31 @@ td.lettersearch {
|
||||
#egwpopup #egwpopup_list .egwpopup_message:hover {
|
||||
background-color: rgba(103, 159, 210, 0.2);
|
||||
}
|
||||
#egwpopup #egwpopup_list .egwpopup_message .egwpopup_message_inner_container {
|
||||
height: 63px;
|
||||
overflow: hidden;
|
||||
}
|
||||
#egwpopup #egwpopup_list .egwpopup_message .egwpopup_message_top_toolbar {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
#egwpopup #egwpopup_list .egwpopup_message .egwpopup_message_top_toolbar .egwpopup_message_date {
|
||||
float: left;
|
||||
}
|
||||
#egwpopup #egwpopup_list .egwpopup_message .egwpopup_message_top_toolbar .egwpopup_message_open {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-image: url(../images/search.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
#egwpopup #egwpopup_list .egwpopup_message .egwpopup_message_top_toolbar .egwpopup_collapse {
|
||||
display: none;
|
||||
}
|
||||
#egwpopup #egwpopup_list .egwpopup_message .egwpopup_actions_container {
|
||||
border-bottom: 1px solid silver;
|
||||
padding-bottom: 5px;
|
||||
@ -3589,32 +3614,41 @@ td.lettersearch {
|
||||
background-repeat: no-repeat;
|
||||
padding-left: 26px;
|
||||
}
|
||||
#egwpopup #egwpopup_list .egwpopup_message .notification_expanded {
|
||||
#egwpopup #egwpopup_list .egwpopup_message.egwpopup_expanded {
|
||||
position: fixed;
|
||||
top: 5vh;
|
||||
top: 4vh;
|
||||
height: 90vh;
|
||||
left: 20vw;
|
||||
width: 60vw;
|
||||
box-shadow: 0 0 40px #666;
|
||||
overflow: auto;
|
||||
}
|
||||
#egwpopup #egwpopup_list .egwpopup_message .notification_expanded:hover {
|
||||
#egwpopup #egwpopup_list .egwpopup_message.egwpopup_expanded:hover {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
#egwpopup #egwpopup_list .egwpopup_message.egwpopup_expanded .egwpopup_message_inner_container {
|
||||
height: auto;
|
||||
overflow: auto;
|
||||
}
|
||||
#egwpopup #egwpopup_list .egwpopup_message.egwpopup_expanded .egwpopup_collapse {
|
||||
float: right;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-image: url(../images/close.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 12px;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
}
|
||||
#egwpopup #egwpopup_list .egwpopup_message_seen .egwpopup_mark {
|
||||
cursor: auto;
|
||||
background: none;
|
||||
border-color: #666c6e;
|
||||
}
|
||||
#egwpopup #egwpopup_list .egwpopup_expand {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-image: url(../images/search.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 12px;
|
||||
cursor: pointer;
|
||||
#egwpopup #egwpopup_list .egwpopup_message_clone {
|
||||
border: 2px dashed silver;
|
||||
opacity: 0.3;
|
||||
}
|
||||
#egwpopup div#egwpopup_header {
|
||||
font-size: 16px;
|
||||
|
||||
@ -3553,8 +3553,8 @@ td.lettersearch {
|
||||
cursor: pointer;
|
||||
}
|
||||
#egwpopup #egwpopup_list .egwpopup_message {
|
||||
height: 140px;
|
||||
overflow: scroll;
|
||||
height: 130px;
|
||||
overflow: hidden;
|
||||
padding: 10px;
|
||||
background-color: #fafafa;
|
||||
border-radius: 3px;
|
||||
@ -3563,6 +3563,31 @@ td.lettersearch {
|
||||
#egwpopup #egwpopup_list .egwpopup_message:hover {
|
||||
background-color: rgba(103, 159, 210, 0.2);
|
||||
}
|
||||
#egwpopup #egwpopup_list .egwpopup_message .egwpopup_message_inner_container {
|
||||
height: 63px;
|
||||
overflow: hidden;
|
||||
}
|
||||
#egwpopup #egwpopup_list .egwpopup_message .egwpopup_message_top_toolbar {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
#egwpopup #egwpopup_list .egwpopup_message .egwpopup_message_top_toolbar .egwpopup_message_date {
|
||||
float: left;
|
||||
}
|
||||
#egwpopup #egwpopup_list .egwpopup_message .egwpopup_message_top_toolbar .egwpopup_message_open {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-image: url(../images/search.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
#egwpopup #egwpopup_list .egwpopup_message .egwpopup_message_top_toolbar .egwpopup_collapse {
|
||||
display: none;
|
||||
}
|
||||
#egwpopup #egwpopup_list .egwpopup_message .egwpopup_actions_container {
|
||||
border-bottom: 1px solid silver;
|
||||
padding-bottom: 5px;
|
||||
@ -3578,32 +3603,41 @@ td.lettersearch {
|
||||
background-repeat: no-repeat;
|
||||
padding-left: 26px;
|
||||
}
|
||||
#egwpopup #egwpopup_list .egwpopup_message .notification_expanded {
|
||||
#egwpopup #egwpopup_list .egwpopup_message.egwpopup_expanded {
|
||||
position: fixed;
|
||||
top: 5vh;
|
||||
top: 4vh;
|
||||
height: 90vh;
|
||||
left: 20vw;
|
||||
width: 60vw;
|
||||
box-shadow: 0 0 40px #666;
|
||||
overflow: auto;
|
||||
}
|
||||
#egwpopup #egwpopup_list .egwpopup_message .notification_expanded:hover {
|
||||
#egwpopup #egwpopup_list .egwpopup_message.egwpopup_expanded:hover {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
#egwpopup #egwpopup_list .egwpopup_message.egwpopup_expanded .egwpopup_message_inner_container {
|
||||
height: auto;
|
||||
overflow: auto;
|
||||
}
|
||||
#egwpopup #egwpopup_list .egwpopup_message.egwpopup_expanded .egwpopup_collapse {
|
||||
float: right;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-image: url(../images/close.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 12px;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
}
|
||||
#egwpopup #egwpopup_list .egwpopup_message_seen .egwpopup_mark {
|
||||
cursor: auto;
|
||||
background: none;
|
||||
border-color: #666c6e;
|
||||
}
|
||||
#egwpopup #egwpopup_list .egwpopup_expand {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-image: url(../images/search.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 12px;
|
||||
cursor: pointer;
|
||||
#egwpopup #egwpopup_list .egwpopup_message_clone {
|
||||
border: 2px dashed silver;
|
||||
opacity: 0.3;
|
||||
}
|
||||
#egwpopup div#egwpopup_header {
|
||||
font-size: 16px;
|
||||
|
||||
@ -75,8 +75,8 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
.egwpopup_message {
|
||||
height: 140px;
|
||||
overflow: scroll;
|
||||
height: 130px;
|
||||
overflow: hidden;
|
||||
padding: 10px;
|
||||
background-color: #fafafa;
|
||||
border-radius: 3px;
|
||||
@ -84,6 +84,29 @@
|
||||
&:hover {
|
||||
background-color: rgba(103, 159, 210, 0.2);
|
||||
}
|
||||
.egwpopup_message_inner_container {
|
||||
height: 63px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.egwpopup_message_top_toolbar {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
.egwpopup_message_date {
|
||||
float: left;
|
||||
}
|
||||
.egwpopup_message_open {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-image: url(../images/search.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.egwpopup_collapse {display: none;}
|
||||
}
|
||||
.egwpopup_actions_container {
|
||||
border-bottom: 1px solid silver;
|
||||
padding-bottom: 5px;
|
||||
@ -99,31 +122,39 @@
|
||||
background-repeat: no-repeat;
|
||||
padding-left: 26px;
|
||||
}
|
||||
.notification_expanded {
|
||||
}
|
||||
.egwpopup_message.egwpopup_expanded {
|
||||
position: fixed;
|
||||
top: 5vh;
|
||||
top: 4vh;
|
||||
height: 90vh;
|
||||
left: 20vw;
|
||||
width: 60vw;
|
||||
box-shadow: 0 0 40px #666;
|
||||
overflow: auto;
|
||||
&:hover {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
.egwpopup_message_inner_container {
|
||||
height: auto;
|
||||
overflow: auto;
|
||||
}
|
||||
.egwpopup_collapse {
|
||||
float: right;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-image: url(../images/close.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 12px;
|
||||
cursor: pointer;display: inline-block
|
||||
}
|
||||
}
|
||||
.egwpopup_message_seen {
|
||||
.egwpopup_mark {cursor: auto;background:none;border-color: #666c6e;}
|
||||
}
|
||||
.egwpopup_expand {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-image: url(../images/search.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 12px;
|
||||
cursor: pointer;
|
||||
.egwpopup_message_clone {
|
||||
border:2px dashed silver;
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
div#egwpopup_header {
|
||||
|
||||
@ -3575,8 +3575,8 @@ td.lettersearch {
|
||||
cursor: pointer;
|
||||
}
|
||||
#egwpopup #egwpopup_list .egwpopup_message {
|
||||
height: 140px;
|
||||
overflow: scroll;
|
||||
height: 130px;
|
||||
overflow: hidden;
|
||||
padding: 10px;
|
||||
background-color: #fafafa;
|
||||
border-radius: 3px;
|
||||
@ -3585,6 +3585,31 @@ td.lettersearch {
|
||||
#egwpopup #egwpopup_list .egwpopup_message:hover {
|
||||
background-color: rgba(103, 159, 210, 0.2);
|
||||
}
|
||||
#egwpopup #egwpopup_list .egwpopup_message .egwpopup_message_inner_container {
|
||||
height: 63px;
|
||||
overflow: hidden;
|
||||
}
|
||||
#egwpopup #egwpopup_list .egwpopup_message .egwpopup_message_top_toolbar {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
#egwpopup #egwpopup_list .egwpopup_message .egwpopup_message_top_toolbar .egwpopup_message_date {
|
||||
float: left;
|
||||
}
|
||||
#egwpopup #egwpopup_list .egwpopup_message .egwpopup_message_top_toolbar .egwpopup_message_open {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-image: url(../images/search.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
#egwpopup #egwpopup_list .egwpopup_message .egwpopup_message_top_toolbar .egwpopup_collapse {
|
||||
display: none;
|
||||
}
|
||||
#egwpopup #egwpopup_list .egwpopup_message .egwpopup_actions_container {
|
||||
border-bottom: 1px solid silver;
|
||||
padding-bottom: 5px;
|
||||
@ -3600,32 +3625,41 @@ td.lettersearch {
|
||||
background-repeat: no-repeat;
|
||||
padding-left: 26px;
|
||||
}
|
||||
#egwpopup #egwpopup_list .egwpopup_message .notification_expanded {
|
||||
#egwpopup #egwpopup_list .egwpopup_message.egwpopup_expanded {
|
||||
position: fixed;
|
||||
top: 5vh;
|
||||
top: 4vh;
|
||||
height: 90vh;
|
||||
left: 20vw;
|
||||
width: 60vw;
|
||||
box-shadow: 0 0 40px #666;
|
||||
overflow: auto;
|
||||
}
|
||||
#egwpopup #egwpopup_list .egwpopup_message .notification_expanded:hover {
|
||||
#egwpopup #egwpopup_list .egwpopup_message.egwpopup_expanded:hover {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
#egwpopup #egwpopup_list .egwpopup_message.egwpopup_expanded .egwpopup_message_inner_container {
|
||||
height: auto;
|
||||
overflow: auto;
|
||||
}
|
||||
#egwpopup #egwpopup_list .egwpopup_message.egwpopup_expanded .egwpopup_collapse {
|
||||
float: right;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-image: url(../images/close.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 12px;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
}
|
||||
#egwpopup #egwpopup_list .egwpopup_message_seen .egwpopup_mark {
|
||||
cursor: auto;
|
||||
background: none;
|
||||
border-color: #666c6e;
|
||||
}
|
||||
#egwpopup #egwpopup_list .egwpopup_expand {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-image: url(../images/search.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 12px;
|
||||
cursor: pointer;
|
||||
#egwpopup #egwpopup_list .egwpopup_message_clone {
|
||||
border: 2px dashed silver;
|
||||
opacity: 0.3;
|
||||
}
|
||||
#egwpopup div#egwpopup_header {
|
||||
font-size: 16px;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user