¿Una pequeña ayuda con un selector CSS?

[Turtle]

Hola,
Dado que no hay un icono de escudo ni ninguna indicación de que un usuario sea del personal en los mensajes del chat, quería colorear ligeramente sus nombres de usuario. Encontré el selector, pero tuve problemas para encontrar una forma de seleccionar a los usuarios del personal. Esto es lo que tengo ahora:

.chat-message-info__username__name {
  color:  #c3e7eb;
}

¿Hay alguna forma de hacer que esto funcione y, en caso afirmativo, cómo? ¡Gracias!

[Arkshine]

Puedes usar:

.chat-message-info__username.is-staff {
  .chat-message-info__username__name {
     color:  #c3e7eb;
  }
}

[Turtle]

¡Gracias! Bueno, no puedo creer que me lo haya perdido.

[Turtle]

Oh, una pregunta más. ¿Qué sería para los usuarios con nivel de confianza cuatro?
Para aclarar, también me gustaría hacer algo similar para los usuarios con nivel de confianza cuatro. No pude encontrar un selector para ello.

[Arkshine]

Según lo que veo en el código, puedes esperar ver las siguientes clases:

• is-staff
• is-admin
• is-moderator
• is-new-user
• group--primary_group_name

Podrías crear un grupo y establecerlo como el grupo principal.
También puedes usar algo de código para agregar las clases que faltan.

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

export default apiInitializer((api) => {
  // Agrega los grupos que quieras agregar
  const allowedGroups = ["trust_level_4"];

  api.modifyClass("components:chat/message/info", () => {
    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}`)
          .join(" ");

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

Luego puedes apuntar con CSS con .group--trust_level_4.

Ejemplo:

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

Para el nombre de usuario, no necesitas el código anterior:

.chat-message-info__username.[data-user-card="username_here"]  {
    .chat-message-info__username__name {
        color: red;
    }
}

[Turtle]

@Arkshine

group--trust_level_4

¿Puedo seleccionar un nombre de usuario específico en lugar del nivel de confianza cuatro? Muchas gracias, por cierto, esta es una respuesta muy bien escrita.

Disculpad las preguntas, no se me da muy bien el código.

[Arkshine]

He actualizado el código anterior.
Incluirá el nombre de usuario con .user--username.
Tenga en cuenta que puede usar el ID si lo prefiere.

[Turtle]

¿Puedes darme un ejemplo con mi nombre de usuario, por ejemplo, cambiando de color?

[Arkshine]

.chat-message-info__username.user--arkshine  {
    .chat-message-info__username__name {
        color: red;
    }
}

[Turtle]

@Arkshine

.chat-message-info__username.user--arkshine  {
    .chat-message-info__username__name {
        color: red;
    }
}

Hm, ¿no funcionará para un usuario llamado Kat_Mac?

.chat-message-info__username.user--kat_mac  {
    .chat-message-info__username__name {
        color: red;
    }
}

Tengo el JS actualizado.

[Arkshine]

Si el nombre de usuario es “Kat_Mac”, entonces el CSS debería ser user--Kat_Mac.

[Turtle]

Hm, todavía no consigo que funcione. Todo lo que tengo que incluir en la parte de JS es el nombre de usuario Kat_Mac, ¿correcto?

[Arkshine]

No, no cambies el JS. Si te refieres a includeUsersField, significa si quieres mostrar por “nombre de usuario” (por ejemplo, Kat_Mac) o por “id” (por ejemplo, como 4). Si deseas mostrar el nombre de usuario, déjalo como está.

[Turtle]

De todos modos, todavía no funcionará. Gracias por tu ayuda.

[Arkshine]

Me funciona:

¡Asegúrate de que estás usando el último código JS y de que actualizaste correctamente el CSS!

---

@Turtle Ignora mi código, en realidad no vi allí un atributo con el nombre de usuario que puedas usar.

.chat-message-info__username[data-user-card="Kat_Mac"] {
    .chat-message-info__username__name {
        color: red;
    }
}

[Turtle]

Esto es todo lo que tengo.

No sé cuál podría ser el problema.

[Arkshine]

Usa este CSS:

.chat-message-info__username[data-user-card="Kat_Mac"] {
    .chat-message-info__username__name {
        color: red;
    }
}

[Turtle]

@Arkshine

.chat-message-info__username[data-user-card="Kat_Mac"] {
    .chat-message-info__username__name {
        color: red;
    }
}

¡Eso funcionó, gracias!