[ticket/13713] Set mention-list class if needed

PHPBB3-13713
This commit is contained in:
Marc Alexander 2021-05-16 10:45:48 +02:00
parent 643bab44ea
commit 6eeb22cdb5
No known key found for this signature in database
GPG key ID: 50E0D2423696F995
3 changed files with 26 additions and 11 deletions

View file

@ -1676,7 +1676,7 @@ fieldset.submit-buttons legend {
font-weight: bold; font-weight: bold;
} }
.mention-container { /* mention-container */ .mention-container {
text-align: left; text-align: left;
background-color: #ffffff; background-color: #ffffff;
border-radius: 2px; border-radius: 2px;
@ -1691,11 +1691,11 @@ fieldset.submit-buttons legend {
transition: all 0.2s ease; transition: all 0.2s ease;
} }
.rtl .mention-container { /* mention-container */ .rtl .mention-container {
text-align: right; text-align: right;
} }
.mention-container ul { /* mention-list */ .mention-list {
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style-type: none; list-style-type: none;

View file

@ -626,6 +626,26 @@ function getCaretPosition(txtarea) {
}); });
} }
/**
* Generate menu item HTML representation. Also ensures that mention-list
* class is set for unordered list in mention container
*
* @param {object} data Item data
* @returns {string} HTML representation of menu item
*/
function menuItemTemplate(data) {
const itemData = data;
const avatar = getAvatar(itemData.avatar, itemData.type);
const rank = (itemData.rank) ? "<span class='mention-rank'>" + itemData.rank + "</span>" : '';
const $mentionContainer = $('.' + tribute.current.collection.containerClass);
if (typeof $mentionContainer !== 'undefined' && $mentionContainer.children('ul').hasClass('mention-list') === false) {
$mentionContainer.children('ul').addClass('mention-list');
}
return "<span class='mention-media'>" + avatar + "</span><span class='mention-name'>" + itemData.name + rank + "</span>";
}
this.isEnabled = function() { this.isEnabled = function() {
return $mentionDataContainer.length; return $mentionDataContainer.length;
}; };
@ -637,12 +657,7 @@ function getCaretPosition(txtarea) {
containerClass: 'mention-container', containerClass: 'mention-container',
selectClass: 'is-active', selectClass: 'is-active',
itemClass: 'mention-item', itemClass: 'mention-item',
menuItemTemplate: function (data) { menuItemTemplate: menuItemTemplate,
const itemData = data;
let avatar = getAvatar(itemData.avatar, itemData.type);
let rank = (itemData.rank) ? "<span class='mention-rank'>" + itemData.rank + "</span>" : '';
return "<span class='mention-media'>" + avatar + "</span><span class='mention-name'>" + itemData.name + rank + "</span>";
},
selectTemplate: function (item) { selectTemplate: function (item) {
return '[mention=' + item.type + ':' + item.id + ']' + item.name + '[/mention]'; return '[mention=' + item.type + ':' + item.id + ']' + item.name + '[/mention]';
}, },

View file

@ -13,7 +13,7 @@
/* Mention dropdown /* Mention dropdown
---------------------------------------- */ ---------------------------------------- */
.mention-container { /* mention-container */ .mention-container {
text-align: left; text-align: left;
border-radius: 2px; border-radius: 2px;
position: absolute; position: absolute;
@ -23,7 +23,7 @@
transition: all 0.2s ease; transition: all 0.2s ease;
} }
.mention-container ul { /* mention-list */ .mention-list {
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style-type: none; list-style-type: none;