Wie man ChatMessageInfo / Chat-Autor CSS anpasst (es gibt kein Widget?)

Entwickler
1

Vorhin habe ich ein kleines Plugin erstellt, mit dem ich die Autorenzeile jedes Forum-Posts mit etwas CSS basierend auf spezieller, seitenspezifischer Logik anpassen kann. Beispiel:

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

	// Hijacking post icons to sneak in CSS for forum posts
	api.addPosterIcons((cfs, attrs) => {
		// (A real icon could be specified by filling in the icon field.
		// I removed the icon though since it was getting a bit cluttered.
		// For now, with no icon specified, it's just for CSS highlighting of name.)	
		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' };
	});

Als Nächstes möchte ich ähnliche Anpassungen für den Echtzeit-Chat vornehmen – aber es gibt kein Äquivalent zu api.addPosterIcons für Echtzeit-Chat-Nachrichten. Vielleicht könnte ich api.decorateWidget verwenden, aber die entsprechende Komponente für Chat ist ChatMessageInfo, die eine Komponente und kein Widget ist.

Entschuldigen Sie, wenn es offensichtlich ist, aber was wäre eine gute Strategie, um ChatMessageInfo aus einem Plugin anzupassen?

(Es ist beabsichtigt, dass ich mich nicht auf die primäre Benutzergruppe verlasse, da es eine spezielle Logik dafür gibt, welche den Vorrang haben sollte, und ich mich nicht darauf verlassen möchte, dass der Benutzer/Administrator dies manuell richtig einstellt.)

Vielen Dank!

2

Hallo,

Ich glaube nicht, dass das einfach sein wird. In diesem Bereich gibt es kein verfügbares PluginOutlet (zögern Sie nicht, es anzufordern!)

Wenn Sie nur Klassennamen hinzufügen möchten, sollten Sie dies auf diese Weise tun können:

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

        // Zusätzliche Klassen hinzufügen
        classes += " developer";

        return classes;
      }
    }
);

Dies überschreibt diesen Code:

1 „Gefällt mir“
3

Danke für die Antwort! Ich habe es tatsächlich mit einer anderen Lösung gelöst, aber ich schätze dein Angebot, da es etwas sauberer erscheint (bei meiner muss ich auf den Klassennamen zugreifen und meine Methode fühlt sich etwas hackelig an). Hier ist die Strategie, die ich verwendet habe:

// Auch Namen im Echtzeit-Chat einfärben
api.decorateChatMessage(function (messageContainer, chatChannel) 
{
	let colorized_groups = this.args?.message?.user?.colorized_groups;

	if (colorized_groups == null)
		return; // keine Gruppen, nichts zu tun

	const nameClass = "chat-message-info__username__name";					
	
	let elements = messageContainer.getElementsByClassName(nameClass);
	if (elements.length == 0) // normal: dies könnte eine zweite Nachricht sein, die nicht den Benutzernamen-Header hat
		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");
});

Ich nehme an, mit deiner Methode wird auch immer noch this.args.message.user übergeben?

1 „Gefällt mir“
4

Gute Arbeit, dass du einen Weg gefunden hast! Das ist nicht so hacky. :smile:
Aber ja, das Überschreiben des Getters ist direkt und sauberer.

Das ist richtig. :slight_smile:

1 „Gefällt mir“
5

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