Un peu d'aide avec un sélecteur CSS ?

[Turtle]

Salut,
Comme il n’y a pas d’icône de bouclier ou d’indication d’un utilisateur du personnel pour les messages dans le chat, j’ai voulu colorer légèrement leurs noms d’utilisateur. J’ai trouvé le sélecteur mais j’ai eu du mal à trouver un moyen de sélectionner les utilisateurs du personnel. Voici ce que j’ai actuellement :

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

Y a-t-il un moyen de faire fonctionner cela, et si oui, comment ? Merci !

[Arkshine]

Vous pouvez utiliser :

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

[Turtle]

Merci ! Eh bien, je n’arrive pas à croire que j’ai manqué ça.

[Turtle]

Oh, une autre question. Qu’est-ce qui serait destiné aux utilisateurs de niveau de confiance quatre ?
Pour clarifier, j’aimerais également faire quelque chose de similaire pour les utilisateurs de niveau de confiance quatre. Je n’ai pas trouvé de sélecteur pour cela.

[Arkshine]

D’après ce que je vois dans le code, vous pouvez vous attendre à voir les noms de classes suivants :

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

Vous pourriez créer un groupe et le définir comme groupe principal.

Vous pouvez également utiliser du code pour ajouter les noms de classes manquants.

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

export default apiInitializer((api) => {
  // Ajoutez les groupes que vous souhaitez ajouter
  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;
      }
    };
  });
});

Ensuite, vous pouvez cibler le CSS avec .group--trust_level_4.

Exemple :

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

Pour le nom d’utilisateur, vous n’avez pas besoin du code ci-dessus :

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

[Turtle]

@Arkshine

group--trust_level_4

Puis-je sélectionner un nom d’utilisateur spécifique au lieu du niveau de confiance quatre ? Merci beaucoup d’ailleurs, c’est une réponse très bien écrite.

Désolé pour les questions, je ne suis pas très doué en code.

[Arkshine]

J’ai mis à jour le code ci-dessus.
Il inclura le nom d’utilisateur avec .user--username.
Notez que vous pouvez utiliser l’ID si vous préférez.

[Turtle]

Pouvez-vous me donner un exemple avec mon nom d’utilisateur, par exemple en changeant de couleur ?

[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, ça ne fonctionnera pas pour un utilisateur nommé Kat_Mac ?

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

J’ai le JS mis à jour.

[Arkshine]

Si le nom d’utilisateur est « Kat_Mac », alors le CSS doit être user--Kat_Mac.

[Turtle]

Hm, je n’arrive toujours pas à le faire fonctionner. Tout ce que je dois inclure dans la partie JS est le nom d’utilisateur Kat_Mac, c’est correct ?

[Arkshine]

Non, ne changez pas le JS. Si vous faites référence à includeUsersField, cela signifie si vous souhaitez afficher par « nom d’utilisateur » (par exemple, Kat_Mac) ou par « id » (par exemple, comme 4). Si vous souhaitez afficher le nom d’utilisateur, laissez-le tel quel.

[Turtle]

De toute façon, ça ne fonctionnera toujours pas. Merci quand même pour votre aide.

[Arkshine]

Ça fonctionne pour moi :

Assurez-vous que vous utilisez le dernier code JS, et que vous avez bien mis à jour le CSS !

---

@Turtle Ignore mon code, en fait je n’avais pas vu qu’il y avait un attribut avec le nom d’utilisateur que vous pouvez utiliser.

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

[Turtle]

C’est tout ce que j’ai.

Je ne sais pas quel pourrait être le problème.

[Arkshine]

Utilisez ce 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;
    }
}

Ça a fonctionné, merci !