6 files changed, 86 insertions, 6 deletions
diff --git a/phpBB/styles/prosilver/template/ajax.js b/phpBB/styles/prosilver/template/ajax.js
index 28656d47d3..38f9f80b44 100644
--- a/phpBB/styles/prosilver/template/ajax.js
+++ b/phpBB/styles/prosilver/template/ajax.js
@@ -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),
diff --git a/phpBB/styles/prosilver/template/overall_header.html b/phpBB/styles/prosilver/template/overall_header.html
index e4e1b3443b..529e6625fe 100644
--- a/phpBB/styles/prosilver/template/overall_header.html
+++ b/phpBB/styles/prosilver/template/overall_header.html
@@ -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>
diff --git a/phpBB/styles/prosilver/theme/colours.css b/phpBB/styles/prosilver/theme/colours.css
index 68fbcde4f9..cad740200d 100644
--- a/phpBB/styles/prosilver/theme/colours.css
+++ b/phpBB/styles/prosilver/theme/colours.css
@@ -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"); }
diff --git a/phpBB/styles/prosilver/theme/common.css b/phpBB/styles/prosilver/theme/common.css
index 66ee77f60b..288477f52a 100644
--- a/phpBB/styles/prosilver/theme/common.css
+++ b/phpBB/styles/prosilver/theme/common.css
@@ -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 {
diff --git a/phpBB/styles/prosilver/theme/images/icon_mark.gif b/phpBB/styles/prosilver/theme/images/icon_mark.gif
new file mode 100644
index 0000000000..1a33fc3264
--- /dev/null
+++ b/phpBB/styles/prosilver/theme/images/icon_mark.gif
diff --git a/phpBB/styles/prosilver/theme/links.css b/phpBB/styles/prosilver/theme/links.css
index 7e3dc094f0..d43886256d 100644
--- a/phpBB/styles/prosilver/theme/links.css
+++ b/phpBB/styles/prosilver/theme/links.css
@@ -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;