Comment personnaliser le CSS de ChatMessageInfo / auteur du chat (il n'y a pas de widget ?)

Dev
1

Plus tôt aujourd’hui, j’ai créé un petit plugin qui me permet de personnaliser la ligne d’auteur de chaque message de forum avec du CSS basé sur une logique spécifique au site. Exemple :

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

	// Détournement des icônes de publication pour y glisser du CSS pour les messages de forum
	api.addPosterIcons((cfs, attrs) => {
		// (Une vraie icône pourrait être spécifiée en remplissant le champ icon.
		// J'ai supprimé l'icône car elle devenait un peu encombrée.
		// Pour l'instant, sans icône spécifiée, c'est juste pour la mise en surbrillance CSS du nom.)	
		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' };
	});

Ensuite, je veux faire des personnalisations similaires pour le chat en temps réel – mais il n’y a pas d’équivalent à api.addPosterIcons pour les messages de chat en temps réel. Peut-être que je pourrais utiliser api.decorateWidget, mais le composant correspondant pour le chat est ChatMessageInfo qui est un composant, pas un widget.

Désolé si c’est évident, mais quelle serait une bonne stratégie pour personnaliser ChatMessageInfo à partir d’un plugin ?

(Il est intentionnel que je ne m’appuie pas sur le groupe principal de l’utilisateur car il y a une logique spéciale pour déterminer lequel doit avoir la priorité et je ne veux pas avoir à m’appuyer sur l’utilisateur/l’administrateur pour le définir correctement manuellement.)

Merci !

2

Salut,

Je pense que ce ne sera pas facile. Il n’y a pas de PluginOutlet disponible dans cette zone (n’hésitez pas à le demander !)

Si vous voulez seulement ajouter des classnames, vous devriez pouvoir le faire de cette façon :

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

        // Ajouter des classes supplémentaires
        classes += " developer";

        return classes;
      }
    }
)

cela écrase ce code :

3

Merci pour votre réponse ! J’avais en fait trouvé une autre solution, mais j’apprécie que vous proposiez la vôtre car elle semble un peu plus propre (dans la mienne, je dois accéder au nom de la classe et ma méthode semble un peu bancale). Voici la stratégie que j’ai utilisée :

// Coloriser également les noms dans le chat en temps réel
api.decorateChatMessage(function (messageContainer, chatChannel) 
{
	let colorized_groups = this.args?.message?.user?.colorized_groups;

	if (colorized_groups == null)
		return; // pas de groupes, rien à faire

	const nameClass = "chat-message-info__username__name";						
	
	let elements = messageContainer.getElementsByClassName(nameClass);
	if (elements.length == 0) // normal : il pourrait s'agir d'un deuxième message qui n'a pas l'en-tête du nom d'utilisateur
		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");
});

Je suppose qu’avec votre méthode, elle passe toujours this.args.message.user ?

4

Bon travail pour avoir trouvé une solution ! Ce n’est pas si artisanal. :smile:
Mais oui, écraser le getter est direct et plus propre.

C’est exact. :slight_smile: