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

W.I.P. of notifications popup handler

Browse Source
This commit is contained in:
Hadi Nategh 2017-09-15 17:10:11 +02:00
parent 70302bbd04
commit 9563049f41
5 changed files with 283 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
notifications/js/notificationajaxpopup.js
View File

@ -63,7 +63,10 @@
* Display notifications window * Display notifications window
*/ */
notifications.prototype.display = function() { 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"); $egwpopup_list = jQuery("#egwpopup_list");
for(var show in notifymessages) for(var show in notifymessages)
@ -74,24 +77,57 @@
this.update_message_status(show, notifymessages[show]['status']); this.update_message_status(show, notifymessages[show]['status']);
continue; continue;
} }
// message container
$message = jQuery(document.createElement('div')) $message = jQuery(document.createElement('div'))
.addClass('egwpopup_message') .addClass('egwpopup_message')
.attr('id', message_id); .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')) $delete = jQuery(document.createElement('span'))
.addClass('egwpopup_delete') .addClass('egwpopup_delete')
.attr('title',egw.lang('delete this message')) .attr('title',egw.lang('delete this message'))
.click(jQuery.proxy(this.button_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')) $mark = jQuery(document.createElement('span'))
.addClass('egwpopup_mark') .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') if (notifymessages[show]['status'] != 'SEEN')
{ {
$mark.click(jQuery.proxy(this.message_seen, this,[$message])) $mark.click(jQuery.proxy(this.message_seen, this,[$message]))
.attr('title',egw.lang('mark as read')); .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() {
@ -118,11 +154,12 @@
.click(jQuery.proxy(func,this)) .click(jQuery.proxy(func,this))
.prependTo($actions_container); .prependTo($actions_container);
} }
$actions_container.prependTo($message); $actions_container.appendTo($message);
} }
$top_toolbar.prependTo($message);
$egwpopup_list.append($message); $egwpopup_list.append($message);
// bind click handler after the message container is attached // 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.update_message_status(show, notifymessages[show]['status']);
} }
this.counterUpdate(); this.counterUpdate();
@ -141,11 +178,16 @@
desktop_button.appendTo(jQuery(egwpopup_ok_button).parent()); desktop_button.appendTo(jQuery(egwpopup_ok_button).parent());
} }
}; };
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(); _event.stopPropagation();
this.message_seen(_node, _event); this.message_seen(_node, _event);
if (_node[0][0] !=_event.target) return;
var egwpopup_message = _node[0]; var egwpopup_message = _node[0];
var id = egwpopup_message[0].id.replace(/egwpopup_message_/ig,''); var id = egwpopup_message[0].id.replace(/egwpopup_message_/ig,'');
if (notifymessages[id]['data']) 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 * Display or hide notifcation-bell
* *
@ -368,9 +439,9 @@
jQuery(".egwpopup_deleteall", '#egwpopup').click(function(){ jQuery(".egwpopup_deleteall", '#egwpopup').click(function(){
et2_dialog.show_dialog( function(_button){ et2_dialog.show_dialog( function(_button){
if (_button == 2) window.app.notifications.delete_all(); if (_button == 2) window.app.notifications.delete_all();
}, },
egw.lang('Are you sure you want to delete all notifications?'), egw.lang('Are you sure you want to delete all notifications?'),
egw.lang('Delete notifications'), egw.lang('Delete notifications'),
null, et2_dialog.BUTTON_YES_NO, et2_dialog.WARNING_MESSAGE, undefined, egw null, et2_dialog.BUTTON_YES_NO, et2_dialog.WARNING_MESSAGE, undefined, egw
); );
}); });

64
pixelegg/css/mobile.css
View File

@ -3564,8 +3564,8 @@ td.lettersearch {
cursor: pointer; cursor: pointer;
} }
#egwpopup #egwpopup_list .egwpopup_message { #egwpopup #egwpopup_list .egwpopup_message {
height: 140px; height: 130px;
overflow: scroll; overflow: hidden;
padding: 10px; padding: 10px;
background-color: #fafafa; background-color: #fafafa;
border-radius: 3px; border-radius: 3px;
@ -3574,6 +3574,31 @@ td.lettersearch {
#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 .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 { #egwpopup #egwpopup_list .egwpopup_message .egwpopup_actions_container {
border-bottom: 1px solid silver; border-bottom: 1px solid silver;
padding-bottom: 5px; padding-bottom: 5px;
@ -3589,32 +3614,41 @@ td.lettersearch {
background-repeat: no-repeat; background-repeat: no-repeat;
padding-left: 26px; padding-left: 26px;
} }
#egwpopup #egwpopup_list .egwpopup_message .notification_expanded { #egwpopup #egwpopup_list .egwpopup_message.egwpopup_expanded {
position: fixed; position: fixed;
top: 5vh; top: 4vh;
height: 90vh; height: 90vh;
left: 20vw; left: 20vw;
width: 60vw; width: 60vw;
box-shadow: 0 0 40px #666; 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; 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 { #egwpopup #egwpopup_list .egwpopup_message_seen .egwpopup_mark {
cursor: auto; cursor: auto;
background: none; background: none;
border-color: #666c6e; border-color: #666c6e;
} }
#egwpopup #egwpopup_list .egwpopup_expand { #egwpopup #egwpopup_list .egwpopup_message_clone {
display: inline-block; border: 2px dashed silver;
float: right; opacity: 0.3;
width: 24px;
height: 24px;
background-image: url(../images/search.png);
background-repeat: no-repeat;
background-position: center;
background-size: 12px;
cursor: pointer;
} }
#egwpopup div#egwpopup_header { #egwpopup div#egwpopup_header {
font-size: 16px; font-size: 16px;

64
pixelegg/css/pixelegg.css
View File

@ -3553,8 +3553,8 @@ td.lettersearch {
cursor: pointer; cursor: pointer;
} }
#egwpopup #egwpopup_list .egwpopup_message { #egwpopup #egwpopup_list .egwpopup_message {
height: 140px; height: 130px;
overflow: scroll; overflow: hidden;
padding: 10px; padding: 10px;
background-color: #fafafa; background-color: #fafafa;
border-radius: 3px; border-radius: 3px;
@ -3563,6 +3563,31 @@ td.lettersearch {
#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 .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 { #egwpopup #egwpopup_list .egwpopup_message .egwpopup_actions_container {
border-bottom: 1px solid silver; border-bottom: 1px solid silver;
padding-bottom: 5px; padding-bottom: 5px;
@ -3578,32 +3603,41 @@ td.lettersearch {
background-repeat: no-repeat; background-repeat: no-repeat;
padding-left: 26px; padding-left: 26px;
} }
#egwpopup #egwpopup_list .egwpopup_message .notification_expanded { #egwpopup #egwpopup_list .egwpopup_message.egwpopup_expanded {
position: fixed; position: fixed;
top: 5vh; top: 4vh;
height: 90vh; height: 90vh;
left: 20vw; left: 20vw;
width: 60vw; width: 60vw;
box-shadow: 0 0 40px #666; 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; 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 { #egwpopup #egwpopup_list .egwpopup_message_seen .egwpopup_mark {
cursor: auto; cursor: auto;
background: none; background: none;
border-color: #666c6e; border-color: #666c6e;
} }
#egwpopup #egwpopup_list .egwpopup_expand { #egwpopup #egwpopup_list .egwpopup_message_clone {
display: inline-block; border: 2px dashed silver;
float: right; opacity: 0.3;
width: 24px;
height: 24px;
background-image: url(../images/search.png);
background-repeat: no-repeat;
background-position: center;
background-size: 12px;
cursor: pointer;
} }
#egwpopup div#egwpopup_header { #egwpopup div#egwpopup_header {
font-size: 16px; font-size: 16px;

75
pixelegg/less/layout_messages.less
View File

@ -75,8 +75,8 @@
cursor: pointer; cursor: pointer;
} }
.egwpopup_message { .egwpopup_message {
height: 140px; height: 130px;
overflow: scroll; overflow: hidden;
padding: 10px; padding: 10px;
background-color: #fafafa; background-color: #fafafa;
border-radius: 3px; border-radius: 3px;
@ -84,6 +84,29 @@
&:hover { &:hover {
background-color: rgba(103, 159, 210, 0.2); 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 { .egwpopup_actions_container {
border-bottom: 1px solid silver; border-bottom: 1px solid silver;
padding-bottom: 5px; padding-bottom: 5px;
@ -99,31 +122,39 @@
background-repeat: no-repeat; background-repeat: no-repeat;
padding-left: 26px; padding-left: 26px;
} }
.notification_expanded { }
position: fixed; .egwpopup_message.egwpopup_expanded {
top: 5vh; position: fixed;
height: 90vh; top: 4vh;
left: 20vw; height: 90vh;
width: 60vw; left: 20vw;
box-shadow: 0 0 40px #666; width: 60vw;
&:hover { box-shadow: 0 0 40px #666;
background-color: #fafafa; 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_message_seen {
.egwpopup_mark {cursor: auto;background:none;border-color: #666c6e;} .egwpopup_mark {cursor: auto;background:none;border-color: #666c6e;}
} }
.egwpopup_expand { .egwpopup_message_clone {
display: inline-block; border:2px dashed silver;
float: right; opacity: 0.3;
width: 24px;
height: 24px;
background-image: url(../images/search.png);
background-repeat: no-repeat;
background-position: center;
background-size: 12px;
cursor: pointer;
} }
} }
div#egwpopup_header { div#egwpopup_header {

64
pixelegg/mobile/fw_mobile.css
View File

@ -3575,8 +3575,8 @@ td.lettersearch {
cursor: pointer; cursor: pointer;
} }
#egwpopup #egwpopup_list .egwpopup_message { #egwpopup #egwpopup_list .egwpopup_message {
height: 140px; height: 130px;
overflow: scroll; overflow: hidden;
padding: 10px; padding: 10px;
background-color: #fafafa; background-color: #fafafa;
border-radius: 3px; border-radius: 3px;
@ -3585,6 +3585,31 @@ td.lettersearch {
#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 .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 { #egwpopup #egwpopup_list .egwpopup_message .egwpopup_actions_container {
border-bottom: 1px solid silver; border-bottom: 1px solid silver;
padding-bottom: 5px; padding-bottom: 5px;
@ -3600,32 +3625,41 @@ td.lettersearch {
background-repeat: no-repeat; background-repeat: no-repeat;
padding-left: 26px; padding-left: 26px;
} }
#egwpopup #egwpopup_list .egwpopup_message .notification_expanded { #egwpopup #egwpopup_list .egwpopup_message.egwpopup_expanded {
position: fixed; position: fixed;
top: 5vh; top: 4vh;
height: 90vh; height: 90vh;
left: 20vw; left: 20vw;
width: 60vw; width: 60vw;
box-shadow: 0 0 40px #666; 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; 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 { #egwpopup #egwpopup_list .egwpopup_message_seen .egwpopup_mark {
cursor: auto; cursor: auto;
background: none; background: none;
border-color: #666c6e; border-color: #666c6e;
} }
#egwpopup #egwpopup_list .egwpopup_expand { #egwpopup #egwpopup_list .egwpopup_message_clone {
display: inline-block; border: 2px dashed silver;
float: right; opacity: 0.3;
width: 24px;
height: 24px;
background-image: url(../images/search.png);
background-repeat: no-repeat;
background-position: center;
background-size: 12px;
cursor: pointer;
} }
#egwpopup div#egwpopup_header { #egwpopup div#egwpopup_header {
font-size: 16px; font-size: 16px;