JS funktioniert nicht mehr für Theme Component

Entwickler
1

Diskussion fortgesetzt von A little help with a CSS selector?:

Hallo,

vor einiger Zeit habe ich dieses Thema erstellt und das JavaScript zum Erstellen von CSS-Selektoren für Vertrauensstufen funktionierte. Es funktioniert nicht mehr. Das ist das JS…


import { apiInitializer } from "discourse/lib/api";

export default apiInitializer((api) => {
  const allowedGroups = ["trust_level_4"]; // Füge die Gruppen hinzu, die du ansprechen möchtest
  const includeUsersField = ["username"]; // Verwende entweder "id" oder "username"

  api.modifyClass("component:chat/message/info", (SuperClass) => {
    return class extends SuperClass {
      @service currentUser;

      get usernameClasses() {
        if (!this.currentUser) {
          return super.usernameClasses;
        }
        const allowedGroupClasses = this.currentUser.groups
          .filter((g) => allowedGroups.includes(g.name))
          .map((g) => `group--${g.name}`);

        const extraClasses = [
          ...allowedGroupClasses,
          ...includeUsersField.map((f) => `user--${this.currentUser[f]}`),
        ]
          .filter(Boolean)
          .join(" ");

        return super.usernameClasses + " " + extraClasses;
      }
    };
  });
})

Und das ist das CSS, das ich verwendet habe…

.chat-message-info__username.group–trust_level_4 {
.chat-message-info__username__name {
color: blue;
}
}

Irgendwelche Ideen, wie ich das beheben kann?

Insbesondere gibt es ein Discourse-Update, über das ich Bescheid wissen sollte, oder hat das etwas damit zu tun, dass tl4 keine primäre Gruppe ist oder so etwas?

Danke!

2

Importieren Sie einfach den Service-Decorator, und es sollte funktionieren:

import { service } from "@ember/service";

Sobald dies hinzugefügt wurde, wird Ihr @service currentUser wieder korrekt geladen.

3 „Gefällt mir“
3

Bearbeiten: Ich habe es in das Skript eingefügt, aber es funktioniert immer noch nicht.

4

Könnten Sie mir bitte Fehler in der Browserkonsole mitteilen? Das könnte helfen.

5

Könnten Sie versuchen, das folgende CSS hinzuzufügen, nachdem Sie Ihr aktuelles entfernt haben?

.chat-message-info__username.group--trust_level_4 .chat-message-info__username__name {
  color: blue !important;
}