Como personalizar o CSS do ChatMessageInfo / autor do chat (não há widget?)

Dev
1

Hoje mais cedo, criei um pequeno plugin que me permite personalizar a linha do autor de cada postagem do fórum com algum CSS baseado em uma lógica especial específica do site. Exemplo:

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

	// Assumindo ícones de postagem para inserir CSS para postagens do fórum
	api.addPosterIcons((cfs, attrs) => {
		// (Um ícone real poderia ser especificado preenchendo o campo ícone.
		// Removi o ícone, pois estava ficando um pouco confuso.
		// Por enquanto, sem ícone especificado, é apenas para destaque CSS do nome.)	
		if (attrs.colorized_groups.indexOf("developer") > -1)
			return { icon: '', className: 'developer', title: 'Developer' };
		else if (attrs.colorized_groups.indexOf("wip_researcher") > -1)
			return { icon: '', className: 'wip_researcher', title: 'WIP Researcher' };
		else if (attrs.colorized_groups.indexOf("researcher") > -1)
			return { icon: '', className: 'researcher', title: 'Researcher' };
	});

Em seguida, quero fazer algumas personalizações semelhantes para o chat em tempo real - mas não há um equivalente a api.addPosterIcons para mensagens de chat em tempo real. Talvez eu pudesse usar api.decorateWidget, mas o componente correspondente para chat é ChatMessageInfo, que é um componente, não um widget.

Desculpe se for óbvio, mas qual seria uma boa estratégia para personalizar ChatMessageInfo a partir de um plugin?

(É intencional que eu não dependa do grupo principal do usuário, pois há uma lógica especial para qual deles deve ter prioridade e não quero ter que depender do usuário/administrador configurando corretamente manualmente.)

Obrigado!

2

Olá,

Acho que não será fácil. Não há um PluginOutlet disponível nesta área (não hesite em solicitá-lo!)

Se você quiser adicionar apenas classnames, você deve conseguir fazer desta forma:

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

        // Adiciona classes extras
        classes += " developer";

        return classes;
      }
    }
);

Isso sobrescreve este código:

1 curtida
3

Obrigado pela resposta! Na verdade, eu já tinha resolvido com outra solução, mas aprecio você oferecer a sua, pois parece um pouco mais limpa (na minha, tenho que acessar o nome da classe e meu método parece um pouco improvisado). Aqui está a estratégia que usei:

// Também colorir nomes no chat em tempo real
api.decorateChatMessage(function (messageContainer, chatChannel) 
{
	let colorized_groups = this.args?.message?.user?.colorized_groups;

	if (colorized_groups == null)
		return; // sem grupos, nada a fazer

	const nameClass = "chat-message-info__username__name";						
	
	let elements = messageContainer.getElementsByClassName(nameClass);
	if (elements.length == 0) // normal: esta pode ser uma segunda mensagem que não tem o cabeçalho do nome de usuário
		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");
});

Eu presumo que com o seu método, ele também ainda passa o this.args.message.user?

1 curtida
4

Bom trabalho em encontrar uma solução! Não é tão gambiarra. :smile:
Mas sim, sobrescrever o getter é direto e mais limpo.

Isso está correto. :slight_smile:

1 curtida
5

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.