Как настроить CSS для ChatMessageInfo / автора чата (нет виджета?)

Разработка
1

Ранее сегодня я создал небольшой плагин, который позволяет мне настраивать строку автора каждого сообщения на форуме с помощью CSS, основываясь на специальной логике, специфичной для сайта. Пример:

function initColorize(api)
{
	api.includePostAttributes('colorized_groups');

	// Перехват иконок постов, чтобы незаметно внедрить CSS для сообщений форума
	api.addPosterIcons((cfs, attrs) => {
		// (Настоящую иконку можно было бы указать, заполнив поле icon.
		// Однако я убрал иконку, так как это начинало выглядеть немного загроможденно.
		// Пока что, без указанной иконки, это просто для CSS-подсветки имени.)	
		if (attrs.colorized_groups.indexOf("developer") > -1)
			return { icon: '', className: 'developer', title: 'Разработчик' };
		else if (attrs.colorized_groups.indexOf("wip_researcher") > -1)
			return { icon: '', className: 'wip_researcher', title: 'Исследователь (WIP)' };
		else if (attrs.colorized_groups.indexOf("researcher") > -1)
			return { icon: '', className: 'researcher', title: 'Исследователь' };
	});

Далее я хочу сделать аналогичные настройки для чата в реальном времени, но для сообщений чата в реальном времени нет эквивалента api.addPosterIcons. Возможно, я мог бы использовать api.decorateWidget, но соответствующий компонент для чата — это ChatMessageInfo, который является компонентом, а не виджетом.

Извините, если это очевидно, но какая будет хорошая стратегия для настройки ChatMessageInfo из плагина?

(Это намеренно, что я не полагаюсь на основную группу пользователя, так как есть специальная логика определения приоритета, и я не хочу зависеть от того, чтобы пользователь или администратор правильно настраивали это вручную.)

Спасибо!

2

Привет,

Думаю, это будет непросто. В этом месте нет доступного PluginOutlet (не стесняйтесь запросить его!).

Если вы хотите добавить только классы, вы можете сделать это следующим образом:

api.modifyClass(
  "component:chat/message/info",
  (Superclass) =>
    class extends Superclass {
      get usernameClasses() {
        let classes = super.usernameClasses;

        // Добавить дополнительные классы
        classes += " developer";

        return classes;
      }
    }
)

Это переопределит этот код:

3

Спасибо за ответ! На самом деле я уже решил задачу другим способом, но я ценю ваше предложение, так как оно выглядит более чистым (в моём варианте мне приходится обращаться к имени класса, и мой метод кажется немного неуклюжим). Вот стратегия, которую я использовал:

// Также раскрасить имена в чате реального времени
api.decorateChatMessage(function (messageContainer, chatChannel) 
{
	let colorized_groups = this.args?.message?.user?.colorized_groups;

	if (colorized_groups == null)
		return; // групп нет, делать нечего

	const nameClass = "chat-message-info__username__name";						

	let elements = messageContainer.getElementsByClassName(nameClass);
	if (elements.length == 0) // нормально: это может быть второе сообщение без заголовка с именем пользователя
		return; 

	let nameDiv = elements[0];

	if (colorized_groups.indexOf("developer") > -1)
		nameDiv.classList.add("developer");
	else if (colorized_groups.indexOf("wip_researcher") > -1)
		nameDiv.classList.add("wip_researcher");
	else if (colorized_groups.indexOf("researcher") > -1)
		nameDiv.classList.add("researcher");
});

Я предполагаю, что при вашем методе также передаётся this.args.message.user?

4

Отличная работа, что нашли решение! Это не так уж и «костыльно». :smile:
Но да, переопределение геттера — это более прямой и чистый подход.

Верно. :slight_smile: