¿Cómo personalizar CSS de ChatMessageInfo / chat del autor (no hay widget?)

Desarrollador
1

Hoy, creé un pequeño plugin que me permite personalizar la línea del autor de cada publicación del foro con CSS basado en una lógica especial específica del sitio. Ejemplo:

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

	// Secuestrando los iconos de las publicaciones para colar CSS para las publicaciones del foro
	api.addPosterIcons((cfs, attrs) => {
		// (Se podría especificar un icono real rellenando el campo icon.
		// Lo eliminé porque estaba un poco abarrotado.
		// Por ahora, sin especificar un icono, es solo para resaltar el nombre con CSS.)	
		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' };
	});

A continuación, quiero hacer algunas personalizaciones similares para el chat en tiempo real, pero no hay un equivalente a api.addPosterIcons para los mensajes de chat en tiempo real. Quizás podría usar api.decorateWidget, pero el componente correspondiente para el chat es ChatMessageInfo, que es un componente, no un widget.

Disculpen si es obvio, pero ¿cuál sería una buena estrategia para personalizar ChatMessageInfo desde un plugin?

(Es intencional que no dependa del grupo principal del usuario, ya que hay una lógica especial para determinar cuál debe tener prioridad y no quiero tener que depender de que el usuario/administrador lo configure manualmente correctamente).

¡Gracias!

2

Hola,

Creo que no será fácil. No hay ningún PluginOutlet disponible en esta área (¡no dudes en solicitarlo!).

Si solo quieres añadir nombres de clase, deberías poder hacerlo de esta manera:

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

        // Añadir clases adicionales
        classes += " developer";

        return classes;
      }
    }
)

esto sobrescribe este código:

1 me gusta
3

¡Gracias por la respuesta! En realidad, lo resolví con otra solución, pero aprecio que ofrezcas la tuya, ya que parece un poco más limpia (en la mía tengo que acceder al nombre de la clase y mi método se siente un poco improvisado). Aquí está la estrategia que usé:

// También colorea los nombres en el chat en tiempo real
api.decorateChatMessage(function (messageContainer, chatChannel) 
{
	let colorized_groups = this.args?.message?.user?.colorized_groups;

	if (colorized_groups == null)
		return; // sin grupos, nada que hacer

	const nameClass = "chat-message-info__username__name";					
	
	let elements = messageContainer.getElementsByClassName(nameClass);
	if (elements.length == 0) // normal: este podría ser un segundo mensaje que no tiene el encabezado del nombre de usuario
		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");
});

Supongo que con tu método, ¿también sigue pasando this.args.message.user?

1 me gusta
4

¡Buen trabajo encontrando una manera! No es tan improvisado. :smile:
Pero sí, sobrescribir el getter es directo y más limpio.

Eso es correcto. :slight_smile:

1 me gusta
5

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