JS non funziona più per il componente del tema

Sviluppatore
1

Continuando a discussão de Um pouco de ajuda com um seletor CSS?:

Ciao,

Un po’ di tempo fa ho creato questo argomento e il JavaScript per creare selettori CSS per i livelli di fiducia funzionava. Ora non funziona più. Questo è il JS…


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

export default apiInitializer((api) => {
  const allowedGroups = ["trust_level_4"]; // Aggiungi i gruppi che vuoi selezionare
  const includeUsersField = ["username"]; // Usa "id" o "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;
      }
    };
  });
})

E questo è il CSS che stavo usando…

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

Qualche idea su come posso risolvere questo problema?

In particolare, c’è qualche aggiornamento di Discourse di cui dovrei essere a conoscenza o ha a che fare con il fatto che tl4 non è un gruppo primario o qualcosa del genere?

Grazie!

2

Basta importare il decoratore service e dovrebbe funzionare:

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

Una volta aggiunto, il tuo @service currentUser verrà caricato nuovamente correttamente.

3 Mi Piace
3

Modifica: L’ho inserito nello script ma ancora non funziona.

4

Potresti condividere eventuali errori nella console del browser? Potrebbe aiutare.

5

Potresti provare ad aggiungere il seguente CSS dopo aver rimosso quello attuale?

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