1
0
mirror of https://github.com/phpbb/phpbb.git synced 2025-08-11 11:13:59 +02:00

[ticket/12034] AJAXify notifications popup.

PHPBB3-12034
This commit is contained in:
Cesar G
2013-11-23 20:11:49 -08:00
parent be67124dc7
commit f4b832a27d
11 changed files with 141 additions and 24 deletions

View File

@@ -106,6 +106,50 @@ phpbb.addAjaxCallback('mark_topics_read', function(res, update_topic_links) {
phpbb.closeDarkenWrapper(3000);
});
// This callback will mark all notifications read
phpbb.addAjaxCallback('notification.mark_all_read', function(res) {
if (typeof res.success !== 'undefined') {
var unreadRows = $('#notification_list li.bg2');
// Remove the unread status.
unreadRows.removeClass('bg2');
unreadRows.find('a.mark_read').remove();
// Update the notification link to the real URL.
unreadRows.each(function() {
var link = $(this).find('a');
link.attr('href', link.attr('data-real-url'));
});
// Set the unread count to 0.
$('#notification_list_button strong').html(0);
// Remove the Mark all read link
$('#mark_all_notifications').remove();
phpbb.closeDarkenWrapper(3000);
}
});
// This callback will mark a notification read
phpbb.addAjaxCallback('notification.mark_read', function(res) {
if (typeof res.success !== 'undefined') {
var el = $(this),
unreadCountEl = $('#notification_list_button strong'),
unreadCount = Number(unreadCountEl.html()),
link = el.siblings('a');
// Remove the unread status.
el.parent('li.bg2').removeClass('bg2');
el.remove();
link.attr('href', link.attr('data-real-url'));
// Update the unread count
unreadCountEl.html(--unreadCount);
// Remove the Mark all read link if there are no unread notifications.
if (!unreadCount) {
$('#mark_all_notifications').remove();
}
}
});
// This callback finds the post from the delete link, and removes it.
phpbb.addAjaxCallback('post_delete', function() {
var el = $(this),

View File

@@ -107,7 +107,12 @@
<div class="dropdown-contents">
<div class="header">
{L_NOTIFICATIONS}
<span class="header_settings"><a href="{U_NOTIFICATION_SETTINGS}">{L_SETTINGS}</a></span>
<span class="header_settings">
<a href="{U_NOTIFICATION_SETTINGS}">{L_SETTINGS}</a>
<!-- IF NOTIFICATIONS_COUNT -->
<span id="mark_all_notifications"> &bull; <a href="{U_MARK_ALL_NOTIFICATIONS}" data-ajax="notification.mark_all_read">{L_MARK_ALL_READ}</a></span>
<!-- ENDIF -->
</span>
</div>
<ul>
@@ -118,17 +123,18 @@
<!-- ENDIF -->
<!-- BEGIN notifications -->
<li class="<!-- IF notifications.UNREAD --> bg2<!-- ENDIF -->">
<!-- IF notifications.URL --><a href="<!-- IF notifications.UNREAD -->{notifications.U_MARK_READ}<!-- ELSE -->{notifications.URL}<!-- ENDIF -->"><!-- ENDIF -->
<!-- IF notifications.URL -->
<a href="<!-- IF notifications.UNREAD -->{notifications.U_MARK_READ}" data-real-url="{notifications.URL}<!-- ELSE -->{notifications.URL}<!-- ENDIF -->">
<!-- ENDIF -->
<!-- IF notifications.AVATAR -->{notifications.AVATAR}<!-- ELSE --><img src="{T_THEME_PATH}/images/no_avatar.gif" alt="" /><!-- ENDIF -->
<div class="notification_text">
<p>{notifications.FORMATTED_TITLE}</p>
<p>&raquo; {notifications.TIME}</p>
<!-- IF not notifications.URL and notifications.U_MARK_READ -->
<p><a href="{notifications.U_MARK_READ}">{L_MARK_READ}</a></p>
<!-- ENDIF -->
</div>
<!-- IF notifications.URL --></a><!-- ENDIF -->
<!-- IF notifications.UNREAD -->
<a href="{notifications.U_MARK_READ}" class="mark_read icon-mark" data-ajax="notification.mark_read" title="{L_MARK_READ}"></a>
<!-- ENDIF -->
</li>
<!-- END notifications -->
</ul>

View File

@@ -258,6 +258,11 @@ a:active { color: #368AD2; }
color: #C8E6FF;
}
/* Notification mark read link */
#notification_list a.mark_read {
background-color: #FFFFFF;
}
/* Links for forum/topic lists */
a.forumtitle {
color: #105289;
@@ -716,6 +721,7 @@ a.sendemail {
.icon-notification { background-image: url("./images/icon_notification.gif"); }
.icon-pm { background-image: url("./images/icon_pm.gif"); }
.icon-download { background-image: url("./images/icon_download.gif"); }
.icon-mark { background-image: url("./images/icon_mark.gif"); }
/* Profile & navigation icons */
.email-icon, .email-icon a { background-image: url("./images/icon_contact_email.gif"); }

View File

@@ -1015,6 +1015,7 @@ form > p.post-notice strong {
list-style-type: none;
font-size: 0.95em;
clear: both;
position: relative;
}
#notification_list ul li:before, #notification_list ul li:after {

Binary file not shown.

After

Width:  |  Height:  |  Size: 360 B

View File

@@ -49,6 +49,29 @@ ul.linklist li.small-icon > a, ul.linklist li.breadcrumbs span:first-child > a {
padding-left: 17px;
}
/* Notification mark read link */
#notification_list a.mark_read {
background-position: center center;
background-repeat: no-repeat;
border-radius: 3px 0 0 3px;
display: none;
margin-top: -20px;
position: absolute;
z-index: 2;
right: 0;
top: 50%;
width: 30px;
height: 40px;
}
#notification_list li:hover a.mark_read {
display: block;
}
#notification_list a.mark_read:hover {
width: 40px;
}
/* Links for forum/topic lists */
a.forumtitle {
font-family: "Trebuchet MS", Helvetica, Arial, Sans-serif;