JS ne fonctionne plus pour le composant de thème

Dev
1

Continuant la discussion de Un peu d’aide avec un sélecteur CSS ? :

Salut,

Il y a peu, j’ai créé ce sujet et le JavaScript pour créer des sélecteurs CSS pour les niveaux de confiance fonctionnait. Il ne fonctionne plus. Voici le JS…


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

export default apiInitializer((api) => {
  const allowedGroups = ["trust_level_4"]; // Ajoutez les groupes que vous souhaitez cibler
  const includeUsersField = ["username"]; // Utilisez "id" ou "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;
      }
    };
  });
})

Et voici le CSS que j’utilisais…

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

Des idées sur la façon dont je peux résoudre ce problème ?

Plus précisément, y a-t-il une mise à jour de Discourse dont je devrais être au courant ou cela a-t-il à voir avec le fait que tl4 n’est pas un groupe principal ou quelque chose comme ça ?

Merci !

2

Il suffit d’importer le décorateur de service et cela devrait fonctionner :

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

Une fois cela ajouté, votre @service currentUser se chargera à nouveau correctement.

3 « J'aime »
3

Modification : Je l’ai mis dans le script mais ça ne fonctionne toujours pas.

4

Pourriez-vous partager les erreurs dans la console du navigateur ? Cela pourrait aider.

5

Pourriez-vous essayer d’ajouter le CSS suivant après avoir supprimé le vôtre ?

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