Merge pull request #4808 from hanakin/ticket/15192

[ticket/15192] Fix dropdown-extended & notification code

phpBB/styles/prosilver/template/ajax.js

@@ -100,7 +100,7 @@ phpbb.addAjaxCallback('mark_topics_read', function(res, updateTopicLinks) {
 // This callback will mark all notifications read
 phpbb.addAjaxCallback('notification.mark_all_read', function(res) {
 	if (typeof res.success !== 'undefined') {
-		phpbb.markNotifications($('#notification_list li.bg2'), 0);
+		phpbb.markNotifications($('[data-notification-unread="true"]'), 0);
 		phpbb.closeDarkenWrapper(3000);
 	}
 });
@@ -108,8 +108,8 @@ phpbb.addAjaxCallback('notification.mark_all_read', function(res) {
 // This callback will mark a notification read
 phpbb.addAjaxCallback('notification.mark_read', function(res) {
 	if (typeof res.success !== 'undefined') {
-		var unreadCount = Number($('#notification_list_button strong').html()) - 1;
+		var unreadCount = Number($('#notification-button strong').html()) - 1;
-		phpbb.markNotifications($(this).parent('li.bg2'), unreadCount);
+		phpbb.markNotifications($(this).parent('[data-notification-unread="true"]'), unreadCount);
 	}
 });
 
@@ -131,11 +131,11 @@ phpbb.markNotifications = function($popup, unreadCount) {
 	});
 
 	// Update the unread count.
-	$('strong', '#notification_list_button').html(unreadCount);
+	$('strong', '#notification-button').html(unreadCount);
 	// Remove the Mark all read link and hide notification count if there are no unread notifications.
 	if (!unreadCount) {
 		$('#mark_all_notifications').remove();
-		$('#notification_list_button > strong').addClass('hidden');
+		$('#notification-button > strong').addClass('hidden');
 	}
 
 	// Update page title

phpBB/styles/prosilver/template/navbar_header.html

@@ -151,7 +151,7 @@
 		<!-- ENDIF -->
 		<!-- IF S_NOTIFICATIONS_DISPLAY -->
 			<li class="dropdown-container dropdown-{S_CONTENT_FLOW_END} rightside" data-skip-responsive="true">
-				<a href="{U_VIEW_ALL_NOTIFICATIONS}" id="notification_list_button" class="dropdown-trigger">
+				<a href="{U_VIEW_ALL_NOTIFICATIONS}" id="notification-button" class="dropdown-trigger">
 					<i class="icon fa-bell fa-fw" aria-hidden="true"></i><span>{L_NOTIFICATIONS} </span><strong class="badge<!-- IF not NOTIFICATIONS_COUNT --> hidden<!-- ENDIF -->">{NOTIFICATIONS_COUNT}</strong>
 				</a>
 				<!-- INCLUDE notification_dropdown.html -->

phpBB/styles/prosilver/template/notification_dropdown.html

@@ -1,9 +1,9 @@
-<div id="notification_list" class="dropdown dropdown-extended notification_list">
+<div id="notification-menu" class="dropdown dropdown-extended notification-menu">
-	<div class="pointer"><div class="pointer-inner"></div></div>
+	<div class="pointer dropdown-extended-pointer"><div class="pointer-inner"></div></div>
 	<div class="dropdown-contents">
 		<div class="header">
 			{L_NOTIFICATIONS}
-			<span class="header_settings">
+			<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>
@@ -11,19 +11,19 @@
 			</span>
 		</div>
 
-		<ul>
+		<ul class="dropdown-extended-list notification-list">
 			<!-- IF not .notifications -->
-				<li class="no_notifications">
+				<li class="dropdown-extended-item no-notifications">
 					{L_NO_NOTIFICATIONS}
 				</li>
 			<!-- ENDIF -->
 			<!-- BEGIN notifications -->
-				<li class="<!-- IF notifications.UNREAD --> bg2<!-- ENDIF --><!-- IF notifications.STYLING --> {notifications.STYLING}<!-- ENDIF --><!-- IF not notifications.URL --> no-url<!-- ENDIF -->">
+				<li class="dropdown-extended-item notification-item<!-- IF notifications.UNREAD --> bg2<!-- ENDIF --><!-- IF notifications.STYLING --> {notifications.STYLING}<!-- ENDIF --><!-- IF not notifications.URL --> no-url<!-- ENDIF -->" <!-- IF notifications.UNREAD -->data-notification-unread="true"<!-- ENDIF -->>
 					<!-- IF notifications.URL -->
 						<a class="notification-block" 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 -->
+						<!-- IF notifications.AVATAR -->{notifications.AVATAR}<!-- ELSE --><img class="notification-avatar" src="{T_THEME_PATH}/images/no_avatar.gif" alt="" /><!-- ENDIF -->
-						<div class="notification_text">
+						<div class="notification-text">
 							<p class="notification-title">{notifications.FORMATTED_TITLE}</p>
 							<!-- IF notifications.REFERENCE --><p class="notification-reference">{notifications.REFERENCE}</p><!-- ENDIF -->
 							<!-- IF notifications.FORUM --><p class="notification-forum">{notifications.FORUM}</p><!-- ENDIF -->

phpBB/styles/prosilver/theme/bidi.css

@@ -126,7 +126,7 @@
 	text-align: right;
 }
 
-.rtl .dropdown-extended .header .header_settings,
+.rtl .dropdown-extended .header .header-settings,
 .rtl .dropdown-container-right {
 	float: left;
 }
@@ -138,23 +138,23 @@
 
 /* Notifications
 ----------------------------------------- */
-.rtl .notification_list ul li img {
+.rtl .notification-avatar {
 	float: right;
 	margin-right: 0;
 	margin-left: 5px;
 }
 
-.rtl .notification_list div.notifications {
+.rtl .notification-menu .notifications {
 	margin-right: 50px;
 	margin-left: 0;
 }
 
-.rtl .notification_text {
+.rtl .notification-text {
 	margin-right: 58px;
 	margin-left: 0;
 }
 
-.rtl .notification_list p.notification-time {
+.rtl .notification-time {
 	text-align: left;
 }
 

phpBB/styles/prosilver/theme/colours.css

@@ -54,11 +54,6 @@ th a:hover {
 	color: #a8d8ff;
 }
 
-/* notification mark read link */
-.dropdown-extended a.mark_read {
-	background-color: #ffffff;
-}
-
 /* post body links */
 .postlink {
 	border-bottom-color: #368ad2;
@@ -1107,15 +1102,19 @@ input.disabled {
 	}
 }
 
-.dropdown-extended ul li {
+.dropdown-extended .dropdown-extended-item {
 	border-top-color: #b9b9b9;
 }
 
-.dropdown-extended ul li:hover {
+.dropdown-extended .dropdown-extended-item:hover {
 	background-color: #cfe1f6;
 	color: #000000;
 }
 
+.dropdown-extended a.mark_read {
+	background-color: #ffffff;
+}
+
 .dropdown-extended .header,
 .dropdown-extended .footer {
 	border-color: #b9b9b9;
@@ -1140,7 +1139,7 @@ input.disabled {
 	border-color: #ffffff transparent;
 }
 
-.dropdown-extended .pointer-inner {
+.dropdown-extended-pointer .pointer-inner {
 	border-color: #f1f8ff transparent;
 }
 
@@ -1165,12 +1164,12 @@ input.disabled {
 
 /* notifications */
 
-.notification_list p.notification-time {
+.notification-time {
 	color: #4c5d77;
 }
 
-li.notification-reported strong,
+.notification-reported strong,
-li.notification-disapproved strong {
+.notification-disapproved strong {
 	color: #d31141;
 }
 

phpBB/styles/prosilver/theme/common.css

@@ -1160,7 +1160,7 @@ form > p.post-notice strong {
 .inner:after,
 ul.linklist:after,
 .action-bar:after,
-.notification_text:after,
+.notification-text:after,
 .tabs-container:after,
 .tabs > ul:after,
 .minitabs > ul:after,
@@ -1200,14 +1200,14 @@ ul.linklist:after,
 	display: none;
 }
 
-.dropdown-extended ul {
+.dropdown-extended .dropdown-extended-list {
 	clear: both;
 	overflow-x: hidden;
 	overflow-y: auto;
 	max-height: 350px;
 }
 
-.dropdown-extended ul li {
+.dropdown-extended .dropdown-extended-item {
 	font-size: 0.95em;
 	border-top: 1px solid;
 	position: relative;
@@ -1218,11 +1218,11 @@ ul.linklist:after,
 	list-style-type: none;
 }
 
-.dropdown-extended ul li:first-child {
+.dropdown-extended .dropdown-extended-item:first-child {
 	border-top: none;
 }
 
-.dropdown-extended ul li.no_notifications {
+.dropdown-extended .dropdown-extended-item.no-notifications {
 	padding: 10px;
 }
 
@@ -1249,13 +1249,13 @@ ul.linklist:after,
 	padding: 0 10px;
 }
 
-.dropdown-extended .header .header_settings {
+.dropdown-extended .header .header-settings {
 	font-weight: normal;
 	text-transform: none;
 	float: right;
 }
 
-.dropdown-extended .header .header_settings a {
+.dropdown-extended .header .header-settings a {
 	display: inline-block;
 	padding: 0 5px;
 }
@@ -1271,8 +1271,8 @@ ul.linklist:after,
 	text-align: center;
 }
 
-.dropdown-extended ul li a,
+.dropdown-extended .notification-block,
-.dropdown-extended ul li.no-url {
+.dropdown-extended .dropdown-extended-item.no-url {
 	padding: 8px;
 }
 
@@ -1280,14 +1280,14 @@ ul.linklist:after,
 	padding: 5px 0;
 }
 
-.dropdown-extended ul li a,
+.dropdown-extended .dropdown-extended-item a,
-.notification_list dt > a,
+.notification-menu dt > a,
 .dropdown-extended .footer > a {
 	text-decoration: none;
 	display: block;
 }
 
-.notification_list ul li img {
+.notification-avatar {
 	float: left;
 	width: auto !important;
 	max-width: 50px;
@@ -1296,48 +1296,48 @@ ul.linklist:after,
 	margin-right: 5px;
 }
 
-.notification_list ul li p {
+.notification-item p {
 	font-size: 1em;
 	margin-bottom: 4px;
 }
 
-.notification_list p.notification-reference,
+.notification-reference,
-.notification_list p.notification-location,
+.notification-location,
-.notification_list li a p.notification-reason {
+.notification-reason {
 	white-space: nowrap;
 	text-overflow: ellipsis;
 	overflow: hidden;
 }
 
-.notification_list p.notification-time {
+.notification-time {
 	font-size: 0.9em;
 	text-align: right;
 	margin: 0;
 }
 
-.notification_list div.notifications {
+.notification-menu .notifications {
 	margin-left: 50px;
 	padding: 5px;
 }
 
-.notification_list div.notifications a {
+.notification-menu .notifications a {
 	display: block;
 }
 
-.notification_list p.notifications_title {
+.notifications-title {
 	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
 	font-size: 1.2em !important;
 }
 
-.notification_list p.notifications_title strong {
+.notifications-title strong {
 	font-weight: bold;
 }
 
-.notification_list p.notifications_time {
+.notifications-time {
 	font-size: 0.9em !important;
 }
 
-.notification_text {
+.notification-text {
 	margin-left: 58px;
 }
 

tests/functional/notification_test.php

@@ -77,12 +77,12 @@ class phpbb_functional_notification_test extends phpbb_functional_test_case
 		$crawler = self::request('GET', 'ucp.php?i=ucp_notifications');
 
 		// At least one notification should exist
-		$this->assertGreaterThan(0, $crawler->filter('#notification_list_button strong')->text());
+		$this->assertGreaterThan(0, $crawler->filter('#notification-button strong')->text());
 
 		// Get form token
 		$link = $crawler->selectLink($this->lang('NOTIFICATIONS_MARK_ALL_READ'))->link()->getUri();
 		$crawler = self::request('GET', substr($link, strpos($link, 'ucp.')));
-		$this->assertCount(1, $crawler->filter('#notification_list_button strong.badge.hidden'));
+		$this->assertCount(1, $crawler->filter('#notification-button strong.badge.hidden'));
-		$this->assertEquals("0", $crawler->filter('#notification_list_button strong.badge.hidden')->text());
+		$this->assertEquals("0", $crawler->filter('#notification-button strong.badge.hidden')->text());
 	}
 }