[ticket/11103] Restyle the notification list

Very rough (lots of inline CSS, very ugly)

PHPBB3-11103

phpBB/includes/functions.php

@@ -5096,7 +5096,7 @@ function page_header($page_title = '', $display_online_list = true, $item_id = 0
 	$phpbb_notifications = $phpbb_container->get('notifications');
 	foreach ($phpbb_notifications->load_notifications() as $notification)
 	{
-		$notification->display();
+		$template->assign_block_vars('notifications', $notification->prepare_for_display());
 	}
 
 	// application/xhtml+xml not used because of IE

phpBB/includes/functions_display.php

@@ -1319,10 +1319,11 @@ function get_user_rank($user_rank, $user_posts, &$rank_title, &$rank_img, &$rank
 * @param string $avatar_height Height of users avatar
 * @param string $alt Optional language string for alt tag within image, can be a language key or text
 * @param bool $ignore_config Ignores the config-setting, to be still able to view the avatar in the UCP
+* @param string $custom_css Custom CSS class to apply to the image
 *
 * @return string Avatar image
 */
-function get_user_avatar($avatar, $avatar_type, $avatar_width, $avatar_height, $alt = 'USER_AVATAR', $ignore_config = false)
+function get_user_avatar($avatar, $avatar_type, $avatar_width, $avatar_height, $alt = 'USER_AVATAR', $ignore_config = false, $custom_css = '')
 {
 	global $user, $config, $phpbb_root_path, $phpEx;
 	global $phpbb_dispatcher;
@@ -1343,7 +1344,7 @@ function get_user_avatar($avatar, $avatar_type, $avatar_width, $avatar_height, $
 	* @var	string	overwrite_avatar	If set, this string will be the avatar
 	* @since 3.1-A1
 	*/
-	$vars = array('avatar', 'avatar_type', 'avatar_width', 'avatar_height', 'alt', 'ignore_config', 'overwrite_avatar');
+	$vars = array('avatar', 'avatar_type', 'avatar_width', 'avatar_height', 'alt', 'ignore_config', 'overwrite_avatar', 'custom_css');
 	extract($phpbb_dispatcher->trigger_event('core.user_get_avatar', compact($vars)));
 
 	if ($overwrite_avatar)
@@ -1385,7 +1386,7 @@ function get_user_avatar($avatar, $avatar_type, $avatar_width, $avatar_height, $
 	}
 
 	$avatar_img .= $avatar;
-	return '<img src="' . (str_replace(' ', '%20', $avatar_img)) . '" width="' . $avatar_width . '" height="' . $avatar_height . '" alt="' . ((!empty($user->lang[$alt])) ? $user->lang[$alt] : $alt) . '" />';
+	return '<img src="' . (str_replace(' ', '%20', $avatar_img)) . '" width="' . $avatar_width . '" height="' . $avatar_height . '" alt="' . ((!empty($user->lang[$alt])) ? $user->lang[$alt] : $alt) . '" ' . ($custom_css ? 'class="' . $custom_css . '"' : '') . '/>';
 }
 
 /**

phpBB/includes/mcp/mcp_queue.php

@@ -451,7 +451,7 @@ function approve_post($post_id_list, $id, $mode)
 {
 	global $db, $template, $user, $config;
 	global $phpEx, $phpbb_root_path;
-	global $request;
+	global $request, $phpbb_container;
 
 	if (!check_ids($post_id_list, POSTS_TABLE, 'post_id', array('m_approve')))
 	{
@@ -634,6 +634,8 @@ function approve_post($post_id_list, $id, $mode)
 		// Send out normal user notifications
 		$email_sig = str_replace('<br />', "\n", "-- \n" . $config['board_email_sig']);
 
+		$notifications = $phpbb_container->get('notifications');
+
 		foreach ($post_info as $post_id => $post_data)
 		{
 			if ($post_id == $post_data['topic_first_post_id'] && $post_id == $post_data['topic_last_post_id'])

phpBB/includes/notifications/service.php

@@ -210,6 +210,20 @@ class phpbb_notifications_service
 		$this->db->sql_query($sql);
 	}
 
+	public function add_subscription($item_type, $item_id, $method = '')
+	{
+		$this->get_item_type_class_name($item_type);
+
+		$sql = 'INSERT INTO ' . USER_NOTIFICATIONS_TABLE . ' ' .
+			$this->db->sql_build_array('INSERT', array(
+				'item_type'		=> $item_type,
+				'item_id'		=> (int) $item_id,
+				'user_id'		=> $this->phpbb_container->get('user')->data['user_id'],
+				'method'		=> $method,
+			));
+		$this->db->sql_query($sql);
+	}
+
 	/**
 	* Load user helper
 	*

phpBB/includes/notifications/type/base.php

@@ -104,28 +104,23 @@ abstract class phpbb_notifications_type_base implements phpbb_notifications_type
 	}
 
 	/**
-	* Output the notification to the template
+	* Prepare to output the notification to the template
-	*
-	* @param array $options Array of options
-	* 				template_block		Template block name to output to (Default: notifications)
 	*/
-	public function display($options = array())
+	public function prepare_for_display()
 	{
-		$template = $this->phpbb_container->get('template');
 		$user = $this->phpbb_container->get('user');
 
-		// Merge default options
+		return array(
-		$options = array_merge(array(
+			'AVATAR'			=> $this->get_avatar(),
-			'template_block'		=> 'notifications',
-		), $options);
 
-		$template->assign_block_vars($options['template_block'], array(
+			'FORMATTED_TITLE'	=> $this->get_formatted_title(),
-			'TITLE'		=> $this->get_formatted_title(),
+			'TITLE'				=> $this->get_title(),
-			'URL'		=> $this->get_url(),
-			'TIME'		=> $user->format_date($this->time),
 
-			'UNREAD'	=> $this->unread,
+			'URL'				=> $this->get_url(),
-		));
+			'TIME'	   			=> $user->format_date($this->time),
+
+			'UNREAD'			=> $this->unread,
+		);
 	}
 
 	/**
@@ -206,6 +201,13 @@ abstract class phpbb_notifications_type_base implements phpbb_notifications_type
 		return $rowset;
 	}
 
+	protected function _get_avatar($user_id)
+	{
+		$user = $this->service->get_user($user_id);
+
+		return get_user_avatar($user['user_avatar'], $user['user_avatar_type'], $user['user_avatar_width'], $user['user_avatar_height'], $user['username'], false, 'notifications-avatar');
+	}
+
 	/**
 	* Get the formatted title of this notification (fall-back)
 	*
@@ -217,7 +219,7 @@ abstract class phpbb_notifications_type_base implements phpbb_notifications_type
 	}
 
 	/**
-	* URL to unsubscribe to this notification
+	* URL to unsubscribe to this notification (fall-back)
 	*
 	* @param string|bool $method Method name to unsubscribe from (email|jabber|etc), False to unsubscribe from all notifications for this item
 	*/
@@ -225,4 +227,12 @@ abstract class phpbb_notifications_type_base implements phpbb_notifications_type
 	{
 		return false;
 	}
+
+	/**
+	* Get the user's avatar (fall-back)
+	*/
+	public function get_avatar()
+	{
+		return '';
+	}
 }

phpBB/includes/notifications/type/pm.php

@@ -90,6 +90,14 @@ class phpbb_notifications_type_pm extends phpbb_notifications_type_base
 		return $notify_users;
 	}
 
+	/**
+	* Get the user's avatar
+	*/
+	public function get_avatar()
+	{
+		return $this->_get_avatar($this->get_data('from_user_id'));
+	}
+
 	/**
 	* Get the HTML formatted title of this notification
 	*

phpBB/includes/notifications/type/post.php

@@ -78,6 +78,14 @@ class phpbb_notifications_type_post extends phpbb_notifications_type_base
 		return $notify_users;
 	}
 
+	/**
+	* Get the user's avatar
+	*/
+	public function get_avatar()
+	{
+		return $this->_get_avatar($this->get_data('poster_id'));
+	}
+
 	/**
 	* Get the HTML formatted title of this notification
 	*

phpBB/includes/notifications/type/topic.php

@@ -78,6 +78,14 @@ class phpbb_notifications_type_topic extends phpbb_notifications_type_base
 		return $notify_users;
 	}
 
+	/**
+	* Get the user's avatar
+	*/
+	public function get_avatar()
+	{
+		return $this->_get_avatar($this->get_data('poster_id'));
+	}
+
 	/**
 	* Get the HTML formatted title of this notification
 	*

phpBB/styles/prosilver/template/overall_header.html

@@ -132,6 +132,22 @@
 			<ul class="linklist leftside">
 				<li class="icon-ucp">
 					<a href="{U_PROFILE}" title="{L_PROFILE}" accesskey="e">{L_PROFILE}</a>
+					<a href="#" title="{L_NOTIFICATIONS}" onClick="$('#notification_list').toggle();">{L_NOTIFICATIONS}</a>
+					<div id="notification_list" style="display: block; position: absolute; width: 330px; background-color: #FFFFFF; z-index: 1;">
+						<ul style="list-style-type: none;">
+						<!-- BEGIN notifications -->
+							<li style="margin: 10px;">
+								<a href="{notifications.URL}" style="text-decoration: none;">
+									{notifications.AVATAR}
+									<div>
+										{notifications.FORMATTED_TITLE}<br />
+										{notifications.TIME}
+									</div>
+								</a>
+							</li>
+				   			<!-- END notifications -->
+						</ul>
+					</div>
 						<!-- IF S_DISPLAY_PM --> (<a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}<!-- IF PRIVATE_MESSAGE_INFO_UNREAD -->, {PRIVATE_MESSAGE_INFO_UNREAD}<!-- ENDIF --></a>)<!-- ENDIF -->
 					<!-- IF S_DISPLAY_SEARCH --> &bull;
 					<a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>
@@ -166,10 +182,3 @@
 			</div>
 		</div>
 		<!-- ENDIF -->
-
-<!-- BEGIN notifications -->
-	<p>
-		<a href="{notifications.URL}">{notifications.TITLE}</a><br />
-		{notifications.TIME}
-	</p>
-<!-- END notifications -->

phpBB/styles/prosilver/theme/common.css

@@ -665,3 +665,11 @@ p.rules a {
 .smilies {
 	vertical-align: text-bottom;
 }
+
+.notifications-avatar {
+	float: left;
+	padding: 0 10px 10px 0;
+
+	max-width: 50px;
+	max-height: 50px;
+}