[ticket/13713] Implement avatars

PHPBB3-13713

phpBB/assets/javascript/editor.js

@@ -388,6 +388,11 @@ function getCaretPosition(txtarea) {
 	function handle_mentions(txtarea) {
 		$(txtarea).atwho({
 			at: "@",
+			displayTpl: function(data) {
+				var avatar = (data.avatar.src) ? "<img src='" + data.avatar.src + "'>" :
+					"<span class='mention-avatar'><i class='fa fa-" + data.avatar.type + "'></i></span>";
+				return "<li>" + avatar + "<span>" + data.name + "</span></li>";
+			},
 			insertTpl: "[mention ${param}=${id}]${name}[/mention]",
 			callbacks: {
 				remoteFilter: function(query, callback) {

phpBB/config/default/container/services_mention.yml

@@ -20,6 +20,7 @@ services:
         class: phpbb\mention\source\friend
         arguments:
             - '@dbal.conn'
+            - '@user_loader'
             - '@user'
         tags:
             - { name: mention.source }
@@ -28,6 +29,7 @@ services:
         class: phpbb\mention\source\topic
         arguments:
             - '@dbal.conn'
+            - '@user_loader'
         tags:
             - { name: mention.source }
 

phpBB/phpbb/mention/controller/mention.php

@@ -43,10 +43,10 @@ class mention
 
 	public function handle()
 	{
-		if (!$this->request->is_ajax())
-		{
-			redirect(append_sid($this->phpbb_root_path . 'index.' . $this->php_ext));
-		}
+//		if (!$this->request->is_ajax())
+//		{
+//			redirect(append_sid($this->phpbb_root_path . 'index.' . $this->php_ext));
+//		}
 
 		$keyword = $this->request->variable('keyword', '', true);
 		$topic_id = $this->request->variable('topic_id', 0);

phpBB/phpbb/mention/source/friend.php

@@ -21,11 +21,11 @@ class friend extends user
 	/**
 	 * Constructor
 	 */
-	public function __construct(\phpbb\db\driver\driver_interface $db, \phpbb\user $user)
+	public function __construct(\phpbb\db\driver\driver_interface $db, \phpbb\user_loader $user_loader, \phpbb\user $user)
 	{
 		$this->user = $user;
 
-		parent::__construct($db);
+		parent::__construct($db, $user_loader);
 	}
 
 	/**

phpBB/phpbb/mention/source/group.php

@@ -97,6 +97,10 @@ abstract class group implements source_interface
 				'name'		=> $groups[$group_id]['group_name'],
 				'param'		=> 'group_id',
 				'id'		=> $group_id,
+				'avatar'	=> [
+					'type'	=> 'group',
+					'src'	=> phpbb_get_group_avatar($groups[$group_id]),
+				],
 			];
 		}
 

phpBB/phpbb/mention/source/user.php

@@ -18,12 +18,16 @@ abstract class user implements source_interface
 	/** @var \phpbb\db\driver\driver_interface */
 	protected $db;
 
+	/** @var \phpbb\user_loader */
+	protected $user_loader;
+
 	/**
 	 * Constructor
 	 */
-	public function __construct(\phpbb\db\driver\driver_interface $db)
+	public function __construct(\phpbb\db\driver\driver_interface $db, \phpbb\user_loader $user_loader)
 	{
 		$this->db = $db;
+		$this->user_loader = $user_loader;
 	}
 
 	/**
@@ -50,6 +54,10 @@ abstract class user implements source_interface
 				'name'		=> $row['username'],
 				'param'		=> 'user_id',
 				'id'		=> $row['user_id'],
+				'avatar'	=> [
+					'type'	=> 'user',
+					'src'	=> $this->user_loader->get_avatar($row['user_id'], true),
+				],
 			];
 		}
 

phpBB/styles/prosilver/theme/bidi.css

@@ -930,6 +930,17 @@
 	float: left;
 }
 
+/* Mention dropdown */
+.atwho-container .atwho-view ul li {
+	padding-right: 45px;
+	padding-left: 15px;
+}
+
+.mention-avatar {
+	right: 8px;
+	left: auto;
+}
+
 /* Search box
 ---------------------------------------- */
 

phpBB/styles/prosilver/theme/colours.css

@@ -983,6 +983,18 @@ fieldset.fields2 dl:hover dt label {
 	outline-color: rgba(19, 164, 236, 0.5);
 }
 
+.atwho-container .atwho-view ul li:hover,
+.atwho-container .atwho-view ul li.cur {
+	background-color: #0077b3;
+	color: #ffffff;
+}
+
+.mention-avatar {
+	background-color: #0077b3;
+	border-color: #ffffff;
+	color: #ffffff;
+}
+
 /* input field styles */
 .inputbox {
 	background-color: #ffffff;

phpBB/styles/prosilver/theme/forms.css

@@ -284,6 +284,33 @@ fieldset.submit-buttons input {
 	margin: 3px;
 }
 
+/* Mention dropdown */
+.atwho-container .atwho-view {
+	font-size: 12px;
+	min-width: 300px;
+}
+
+.atwho-container .atwho-view ul li {
+	position: relative;
+	padding: 15px 5px 15px 45px;
+}
+
+.mention-avatar {
+	font-size: 14px;
+	line-height: 30px;
+	text-align: center;
+	vertical-align: middle;
+	border: 1px solid transparent;
+	border-radius: 100%;
+	position: absolute;
+	top: 50%;
+	left: 8px;
+	display: inline-block;
+	width: 30px;
+	height: 30px;
+	margin-top: -15px;
+}
+
 /* Input field styles
 ---------------------------------------- */
 .inputbox {