JS ya no funciona para el componente de tema

Desarrollador
1

Continuando la discusión de ¿Una pequeña ayuda con un selector CSS?:

Hola,

Hace poco creé este tema y el JavaScript para crear selectores CSS para los niveles de confianza funcionaba. Ya no funciona. Este es el JS…


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

export default apiInitializer((api) => {
  const allowedGroups = ["trust_level_4"]; // Añade los grupos a los que quieres dirigirte
  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;
      }
    };
  });
})

Y este es el CSS que estaba usando…

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

¿Alguna idea sobre cómo puedo arreglar esto?

Específicamente, ¿hay alguna actualización de Discourse que deba conocer o tiene que ver con que tl4 no sea un grupo principal o algo así?

¡Gracias!

2

Solo importa el decorador service y debería funcionar:

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

Una vez que se agregue eso, tu @service currentUser se cargará correctamente de nuevo.

3 Me gusta
3

Editar: Lo puse en el script pero todavía no funciona.

4

¿Podrías compartir algún error en la consola del navegador? Eso podría ayudar.

5

¿Podrías intentar añadir el siguiente CSS después de eliminar el actual?

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