diff --git a/phpBB/assets/javascript/mentions.js b/phpBB/assets/javascript/mentions.js
index 0c34b07b69..578c9795d3 100644
--- a/phpBB/assets/javascript/mentions.js
+++ b/phpBB/assets/javascript/mentions.js
@@ -24,7 +24,6 @@
const mentionNamesLimit = $mentionDataContainer.data('mentionNamesLimit');
const mentionTopicId = $mentionDataContainer.data('topicId');
const mentionUserId = $mentionDataContainer.data('userId');
- const $mentionAvatarTemplate = $('[data-id="mentions-avatar-span"]');
let queryInProgress = null;
const cachedNames = [];
const cachedAll = [];
@@ -38,10 +37,10 @@
*/
function defaultAvatar(type) {
if (type === 'g') {
- return '';
+ return $('[data-id="mention-default-avatar-group"]').html();
}
- return '';
+ return $('[data-id="mention-default-avatar"]').html();
}
/**
@@ -56,21 +55,20 @@
return defaultAvatar(type);
}
- const $avatarSpan = $($mentionAvatarTemplate.html());
-
if (data.html === '') {
- const $avatarImg = $avatarSpan.find('img');
+ const $avatarImg = $($('[data-id="mention-media-avatar-img"]').html());
$avatarImg.attr({
src: data.src,
width: data.width,
height: data.height,
alt: data.title,
});
- } else {
- $avatarSpan.html(data.html);
+ return $avatarImg.get(0).outerHTML;
}
- return $avatarSpan.get(0).outerHTML;
+ const $avatarImg = $(data.html);
+ $avatarImg.addClass('mention-media-avatar');
+ return $avatarImg.get(0).outerHTML;
}
/**
@@ -264,14 +262,20 @@
function menuItemTemplate(data) {
const itemData = data;
const avatar = getAvatar(itemData.avatar, itemData.type);
- const rank = (itemData.rank) ? '' + itemData.rank + '' : '';
+ const rank = (itemData.rank) ? $($('[data-id="mention-rank-span"]').html()).text(itemData.rank).get(0).outerHTML : '';
const $mentionContainer = $('.' + tribute.current.collection.containerClass);
if (typeof $mentionContainer !== 'undefined' && $mentionContainer.children('ul').hasClass('mention-list') === false) {
$mentionContainer.children('ul').addClass('mention-list');
}
- return '' + avatar + '' + itemData.name + rank + '';
+ const $avatarSpan = $($('[data-id="mention-media-span"]').html());
+ $avatarSpan.html(avatar);
+
+ const $nameSpan = $($('[data-id="mention-name-span"]').html());
+ $nameSpan.html(itemData.name + rank);
+
+ return $avatarSpan.get(0).outerHTML + $nameSpan.get(0).outerHTML;
}
this.isEnabled = function() {
diff --git a/phpBB/styles/prosilver/template/mentions_templates.html b/phpBB/styles/prosilver/template/mentions_templates.html
index bf1b2188fd..23015b03e0 100644
--- a/phpBB/styles/prosilver/template/mentions_templates.html
+++ b/phpBB/styles/prosilver/template/mentions_templates.html
@@ -1 +1,6 @@
-![]()
+
+![]()
+
+
+
+