[ticket/12608] Improve notifications drop-down menu styling in header

PHPBB3-12608

phpBB/language/en/common.php

@@ -440,29 +440,32 @@ $lang = array_merge($lang, array(
 	// A, B, C and 2 others replied...
 	// A, B, C and others replied...
 	'NOTIFICATION_BOOKMARK'				=> array(
-		1	=> '%1$s replied to the topic “%2$s” you have bookmarked.',
+		1	=> '<strong>Reply</strong> from %1$s in bookmarked topic:',
 	),
-	'NOTIFICATION_GROUP_REQUEST'		=> '%1$s is requesting to join the group %2$s.',
+	'NOTIFICATION_FORUM'				=> 'Forum: "%1$s"',
-	'NOTIFICATION_GROUP_REQUEST_APPROVED'	=> 'Your request to join the group %1$s has been approved.',
+	'NOTIFICATION_GROUP_REQUEST'		=> '<strong>Group request</strong> from %1$s to join the group %2$s.',
-	'NOTIFICATION_PM'					=> '%1$s sent you a Private Message "%2$s".',
+	'NOTIFICATION_GROUP_REQUEST_APPROVED'	=> '<strong>Group request approved</strong> to join the group %1$s.',
+	'NOTIFICATION_PM'					=> '<strong>Private Message</strong> from %1$s:',
 	'NOTIFICATION_POST'					=> array(
-		1	=> '%1$s replied to the topic “%2$s”.',
+		1	=> '<strong>Reply</strong> from %1$s in topic:',
 	),
-	'NOTIFICATION_POST_APPROVED'		=> 'Your post was approved "%2$s".',
+	'NOTIFICATION_POST_APPROVED'		=> '<strong>Post approved</strong>:',
-	'NOTIFICATION_POST_DISAPPROVED'		=> 'Your post "%1$s" was disapproved for reason: "%2$s".',
+	'NOTIFICATION_POST_DISAPPROVED'		=> '<strong>Post disapproved</strong>:',
-	'NOTIFICATION_POST_IN_QUEUE'		=> 'A new post titled "%2$s" was posted by %1$s and needs approval.',
+	'NOTIFICATION_POST_IN_QUEUE'		=> '<strong>Post approval</strong> request by %1$s:',
 	'NOTIFICATION_QUOTE'				=> array(
-		1	=> '%1$s quoted you in the post “%2$s”.',
+		1	=> '<strong>Quoted</strong> by %1$s in:',
 	),
-	'NOTIFICATION_REPORT_PM'			=> '%1$s reported a Private Message "%2$s" for reason: "%3$s".',
+	'NOTIFICATION_REFERENCE'			=> '"%1$s"',
-	'NOTIFICATION_REPORT_POST'			=> '%1$s reported a post "%2$s" for reason: "%3$s".',
+	'NOTIFICATION_REASON'				=> 'Reason: "%1$s".',
-	'NOTIFICATION_REPORT_CLOSED'   		=> '%1$s closed the report you made for "%2$s".',
+	'NOTIFICATION_REPORT_PM'			=> '<strong>Private Message reported</strong> by %1$s:',
-	'NOTIFICATION_TOPIC'				=> '%1$s posted a new topic "%2$s" in the forum "%3$s".',
+	'NOTIFICATION_REPORT_POST'			=> '<strong>Post reported</strong> by %1$s:',
-	'NOTIFICATION_TOPIC_APPROVED'		=> 'Your topic "%2$s" in the forum "%3$s" was approved.',
+	'NOTIFICATION_REPORT_CLOSED'   		=> '<strong>Report closed</strong> by %1$s for:',
-	'NOTIFICATION_TOPIC_DISAPPROVED'	=> 'Your topic "%1$s" was disapproved for reason: "%2$s".',
+	'NOTIFICATION_TOPIC'				=> '<strong>New topic</strong> by %1$s:',
-	'NOTIFICATION_TOPIC_IN_QUEUE'		=> 'A new topic titled "%2$s" was posted by %1$s and needs approval.',
+	'NOTIFICATION_TOPIC_APPROVED'		=> '<strong>Topic approved</strong>:',
+	'NOTIFICATION_TOPIC_DISAPPROVED'	=> '<strong>Topic disapproved</strong>:',
+	'NOTIFICATION_TOPIC_IN_QUEUE'		=> '<strong>Topic approval</strong> request by %1$s:',
 	'NOTIFICATION_TYPE_NOT_EXIST'		=> 'The notification type "%s" is missing from the file system.',
-	'NOTIFICATION_ADMIN_ACTIVATE_USER'	=> 'The user “%1$s” is newly registered and requires activation.',
+	'NOTIFICATION_ADMIN_ACTIVATE_USER'	=> '<strong>Activation required</strong> for newly registered user: “%1$s”',
 	// Used in conjuction with NOTIFICATION_BOOKMARK and NOTIFICATION_POST.
 	'NOTIFICATION_MANY_OTHERS'			=> 'others',
 	'NOTIFICATION_X_OTHERS'				=> array(

phpBB/phpbb/notification/type/base.php

@@ -312,6 +312,12 @@ abstract class base implements \phpbb\notification\type\type_interface
 			'AVATAR'			=> $this->get_avatar(),
 
 			'FORMATTED_TITLE'	=> $this->get_title(),
+			
+			'REFERENCE'			=> $this->get_reference(),
+			
+			'FORUM'				=> $this->get_forum(),
+			
+			'REASON'			=> $this->get_reason(),
 
 			'URL'				=> $this->get_url(),
 			'TIME'	   			=> $this->user->format_date($this->notification_time),
@@ -346,6 +352,36 @@ abstract class base implements \phpbb\notification\type\type_interface
 		return '';
 	}
 
+	/**
+	* Get the reference of the notifcation (fall back)
+	*
+	* @return string
+	*/
+	public function get_reference()
+	{
+		return '';
+	}
+
+	/**
+	* Get the forum of the notification reference (fall back)
+	*
+	* @return string
+	*/
+	public function get_forum()
+	{
+		return '';
+	}
+
+	/**
+	* Get the reason for the notifcation (fall back)
+	*
+	* @return string
+	*/
+	public function get_reason()
+	{
+		return '';
+	}
+
 	/**
 	* Get the special items to load (fall back)
 	*

phpBB/phpbb/notification/type/disapprove_post.php

@@ -62,10 +62,32 @@ class disapprove_post extends \phpbb\notification\type\approve_post
 	* @return string
 	*/
 	public function get_title()
+	{
+		return $this->user->lang($this->language_key);
+	}
+
+	/**
+	* Get the HTML formatted reference of the notification
+	*
+	* @return string
+	*/
+	public function get_reference()
 	{
 		return $this->user->lang(
-			$this->language_key,
+			'NOTIFICATION_REFERENCE',
-			censor_text($this->get_data('topic_title')),
+			censor_text($this->get_data('topic_title'))
+		);
+	}
+
+	/**
+	* Get the reason for the disapproval notification
+	*
+	* @return string
+	*/
+	public function get_reason()
+	{
+		return $this->user->lang(
+			'NOTIFICATION_REASON',
 			$this->get_data('disapprove_reason')
 		);
 	}

phpBB/phpbb/notification/type/disapprove_topic.php

@@ -62,10 +62,32 @@ class disapprove_topic extends \phpbb\notification\type\approve_topic
 	* @return string
 	*/
 	public function get_title()
+	{
+		return $this->user->lang($this->language_key);
+	}
+
+	/**
+	* Get the HTML formatted reference of the notification
+	*
+	* @return string
+	*/
+	public function get_reference()
 	{
 		return $this->user->lang(
-			$this->language_key,
+			'NOTIFICATION_REFERENCE',
-			censor_text($this->get_data('topic_title')),
+			censor_text($this->get_data('topic_title'))
+		);
+	}
+
+	/**
+	* Get the reason for the disapproval notification
+	*
+	* @return string
+	*/
+	public function get_reason()
+	{
+		return $this->user->lang(
+			'NOTIFICATION_REASON',
 			$this->get_data('disapprove_reason')
 		);
 	}

phpBB/phpbb/notification/type/pm.php

@@ -111,7 +111,20 @@ class pm extends \phpbb\notification\type\base
 	{
 		$username = $this->user_loader->get_username($this->get_data('from_user_id'), 'no_profile');
 
-		return $this->user->lang('NOTIFICATION_PM', $username, $this->get_data('message_subject'));
+		return $this->user->lang('NOTIFICATION_PM', $username);
+	}
+
+	/**
+	* Get the HTML formatted reference of the notification
+	*
+	* @return string
+	*/
+	public function get_reference()
+	{
+		return $this->user->lang(
+			'NOTIFICATION_REFERENCE',
+			$this->get_data('message_subject')
+		);
 	}
 
 	/**

phpBB/phpbb/notification/type/post.php

@@ -225,11 +225,23 @@ class post extends \phpbb\notification\type\base
 		return $this->user->lang(
 			$this->language_key,
 			phpbb_generate_string_list($usernames, $this->user),
-			censor_text($this->get_data('topic_title')),
 			$responders_cnt
 		);
 	}
 
+	/**
+	* Get the HTML formatted reference of the notification
+	*
+	* @return string
+	*/
+	public function get_reference()
+	{
+		return $this->user->lang(
+			'NOTIFICATION_REFERENCE',
+			censor_text($this->get_data('topic_title'))
+		);
+	}
+
 	/**
 	* Get email template
 	*

phpBB/phpbb/notification/type/report_pm.php

@@ -159,12 +159,36 @@ class report_pm extends \phpbb\notification\type\pm
 
 		$username = $this->user_loader->get_username($this->get_data('reporter_id'), 'no_profile');
 
+		return $this->user->lang(
+			$this->language_key,
+			$username
+		);
+	}
+
+	/**
+	* Get the HTML formatted reference of the notification
+	*
+	* @return string
+	*/
+	public function get_reference()
+	{
+		return $this->user->lang(
+			'NOTIFICATION_REFERENCE',
+			censor_text($this->get_data('message_subject'))
+		);
+	}
+
+	/**
+	* Get the reason for the notification
+	*
+	* @return string
+	*/
+	public function get_reason()
+	{
 		if ($this->get_data('report_text'))
 		{
 			return $this->user->lang(
-				$this->language_key,
+				'NOTIFICATION_REASON',
-				$username,
-				censor_text($this->get_data('message_subject')),
 				$this->get_data('report_text')
 			);
 		}
@@ -172,17 +196,13 @@ class report_pm extends \phpbb\notification\type\pm
 		if (isset($this->user->lang[$this->get_data('reason_title')]))
 		{
 			return $this->user->lang(
-				$this->language_key,
+				'NOTIFICATION_REASON',
-				$username,
-				censor_text($this->get_data('message_subject')),
 				$this->user->lang[$this->get_data('reason_title')]
 			);
 		}
 
 		return $this->user->lang(
-			$this->language_key,
+			'NOTIFICATION_REASON',
-			$username,
-			censor_text($this->get_data('message_subject')),
 			$this->get_data('reason_description')
 		);
 	}

phpBB/phpbb/notification/type/report_pm_closed.php

@@ -107,7 +107,19 @@ class report_pm_closed extends \phpbb\notification\type\pm
 
 		return $this->user->lang(
 			$this->language_key,
-			$username,
+			$username
+		);
+	}
+
+	/**
+	* Get the HTML formatted reference of the notification
+	*
+	* @return string
+	*/
+	public function get_reference()
+	{
+		return $this->user->lang(
+			'NOTIFICATION_REFERENCE',
 			censor_text($this->get_data('message_subject'))
 		);
 	}

phpBB/phpbb/notification/type/report_post.php

@@ -132,12 +132,36 @@ class report_post extends \phpbb\notification\type\post_in_queue
 
 		$username = $this->user_loader->get_username($this->get_data('reporter_id'), 'no_profile');
 
+		return $this->user->lang(
+			$this->language_key,
+			$username
+		);
+	}
+
+	/**
+	* Get the HTML formatted reference of the notification
+	*
+	* @return string
+	*/
+	public function get_reference()
+	{
+		return $this->user->lang(
+			'NOTIFICATION_REFERENCE',
+			censor_text($this->get_data('post_subject'))
+		);
+	}
+
+	/**
+	* Get the reason for the notification
+	*
+	* @return string
+	*/
+	public function get_reason()
+	{
 		if ($this->get_data('report_text'))
 		{
 			return $this->user->lang(
-				$this->language_key,
+				'NOTIFICATION_REASON',
-				$username,
-				censor_text($this->get_data('post_subject')),
 				$this->get_data('report_text')
 			);
 		}
@@ -145,17 +169,13 @@ class report_post extends \phpbb\notification\type\post_in_queue
 		if (isset($this->user->lang[$this->get_data('reason_title')]))
 		{
 			return $this->user->lang(
-				$this->language_key,
+				'NOTIFICATION_REASON',
-				$username,
-				censor_text($this->get_data('post_subject')),
 				$this->user->lang[$this->get_data('reason_title')]
 			);
 		}
 
 		return $this->user->lang(
-			$this->language_key,
+			'NOTIFICATION_REASON',
-			$username,
-			censor_text($this->get_data('post_subject')),
 			$this->get_data('reason_description')
 		);
 	}

phpBB/phpbb/notification/type/report_post_closed.php

@@ -114,7 +114,19 @@ class report_post_closed extends \phpbb\notification\type\post
 
 		return $this->user->lang(
 			$this->language_key,
-			$username,
+			$username
+		);
+	}
+
+	/**
+	* Get the HTML formatted reference of the notification
+	*
+	* @return string
+	*/
+	public function get_reference()
+	{
+		return $this->user->lang(
+			'NOTIFICATION_REFERENCE',
 			censor_text($this->get_data('post_subject'))
 		);
 	}

phpBB/phpbb/notification/type/topic.php

@@ -151,8 +151,32 @@ class topic extends \phpbb\notification\type\base
 
 		return $this->user->lang(
 			$this->language_key,
-			$username,
+			$username
-			censor_text($this->get_data('topic_title')),
+		);
+	}
+
+	/**
+	* Get the HTML formatted reference of the notification
+	*
+	* @return string
+	*/
+	public function get_reference()
+	{
+		return $this->user->lang(
+			'NOTIFICATION_REFERENCE',
+			censor_text($this->get_data('topic_title'))
+		);
+	}
+
+	/**
+	* Get the forum of the notification reference
+	*
+	* @return string
+	*/
+	public function get_forum()
+	{
+		return $this->user->lang(
+			'NOTIFICATION_FORUM',
 			$this->get_data('forum_name')
 		);
 	}

phpBB/phpbb/notification/type/type_interface.php

@@ -94,6 +94,20 @@ interface type_interface
 	*/
 	public function get_title();
 
+	/**
+	* Get the HTML formatted reference of the notification
+	*
+	* @return string
+	*/
+	public function get_reference();
+
+	/**
+	* Get the forum of the notification reference
+	*
+	* @return string
+	*/
+	public function get_forum();
+
 	/**
 	* Get the url to this item
 	*

phpBB/styles/prosilver/template/notification_dropdown.html

@@ -20,12 +20,15 @@
 			<!-- BEGIN notifications -->
 				<li class="<!-- IF notifications.UNREAD --> bg2<!-- ENDIF -->">
 					<!-- IF notifications.URL -->
-						<a href="<!-- IF notifications.UNREAD -->{notifications.U_MARK_READ}" data-real-url="{notifications.URL}<!-- ELSE -->{notifications.URL}<!-- ENDIF -->">
+						<a href="<!-- IF notifications.UNREAD -->{notifications.U_MARK_READ}" class="notification-block" 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 class="title">{notifications.FORMATTED_TITLE}</p>
-							<p>&raquo; {notifications.TIME}</p>
+							<!-- IF notifications.REFERENCE --><p class="notification-reference">{notifications.REFERENCE}</p><!-- ENDIF -->
+							<!-- IF notifications.FORUM --><p class="notification-forum">{notifications.FORUM}</p><!-- ENDIF -->
+							<!-- IF notifications.REASON --><p class="notification-reason">{notifications.REASON}</p><!-- ENDIF -->
+							<p class="notification-time">{notifications.TIME}</p>
 						</div>
 					<!-- IF notifications.URL --></a><!-- ENDIF -->
 					<!-- IF notifications.UNREAD -->

phpBB/styles/prosilver/template/ucp_notifications.html

@@ -72,8 +72,10 @@
 										<!-- IF notification_list.AVATAR -->{notification_list.AVATAR}<!-- ELSE --><img src="{T_THEME_PATH}/images/no_avatar.gif" alt="" /><!-- ENDIF -->
 										<div class="notifications">
 											<!-- IF notification_list.URL --><a href="<!-- IF notification_list.UNREAD -->{notification_list.U_MARK_READ}<!-- ELSE -->{notification_list.URL}<!-- ENDIF -->"><!-- ENDIF -->
-											<p class="notifications_title">{notification_list.FORMATTED_TITLE}</p>
+											<p class="notifications_title">{notification_list.FORMATTED_TITLE} <!-- IF notification_list.REFERENCE -->{notification_list.REFERENCE}<!-- ENDIF --></p>
-											<!-- IF notification_list.URL --></a><!-- ENDIF -->
+											<!-- IF notification_list.URL --></a><!-- ENDIF -->				
+											<!-- IF notification_list.FORUM --><p class="notifications_forum">{notification_list.FORUM}</p><!-- ENDIF -->
+											<!-- IF notification_list.REASON --><p class="notifications_reason">{notification_list.REASON}</p><!-- ENDIF -->
 											<p class="notifications_time">{notification_list.TIME}</p>
 											<!-- IF not notification_list.URL and notification_list.U_MARK_READ -->
 												<p><a href="{notification_list.U_MARK_READ}">{L_MARK_READ}</a></p>

phpBB/styles/prosilver/theme/common.css

@@ -1101,7 +1101,7 @@ form > p.post-notice strong {
 	display: none;
 	position: absolute;
 	left: 0;
-	width: 330px;
+	width: 340px;
 	z-index: 1;
 	top: 22px;
 }
@@ -1173,19 +1173,38 @@ form > p.post-notice strong {
 	text-decoration: none;
 }
 
+.notification_list a.notification-block {
+	padding: 8px;
+}
+
 .notification_list ul li img {
 	float: left;
 	max-height: 50px;
+	max-width: 50px;
 	width: auto !important;
 	height: auto !important;
 	margin-right: 5px;
 }
 
 .notification_list ul li p {
-	margin: 0;
+	margin-bottom: 4px;
 	font-size: 1em;
 }
 
+.notification_list p.notification-reference,
+.notification_list p.notification-location,
+.notification_list a.notification-block p.notification-reason {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.notification_list ul li p.notification-time {
+	font-size: 0.9em;
+	margin: 0;
+	text-align: right;
+}
+
 .notification_list div.notifications {
 	padding: 5px;
 }
@@ -1193,6 +1212,9 @@ form > p.post-notice strong {
 .notification_list p.notifications_title {
 	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
 	font-size: 13px !important;
+}
+
+.notification_list p.notifications_title strong {
 	font-weight: bold;
 }
 
@@ -1200,6 +1222,10 @@ form > p.post-notice strong {
 	font-size: 11px !important;
 }
 
+.notification_text {
+	margin-left: 58px;
+}
+
 .notification_text:after {
 	content: '';
 	clear: both;

phpBB/styles/prosilver/theme/links.css

@@ -62,6 +62,9 @@ ul.linklist li.small-icon > a, ul.linklist li.breadcrumbs span:first-child > a {
 	top: 50%;
 	width: 30px;
 	height: 40px;
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
 }
 
 .dropdown-extended li:hover a.mark_read {