Una piccola aiuto con un selettore CSS?

[Turtle]

Ciao,
Dato che non c’è un’icona a forma di scudo o alcuna indicazione che si tratti di un utente dello staff per i messaggi in chat, volevo colorare leggermente i loro nomi utente. Ho trovato il selettore ma ho avuto problemi a capire come selezionare gli utenti dello staff. Ecco cosa ho al momento:

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

C’è un modo per farlo funzionare e, in tal caso, come? Grazie!

[Arkshine]

Puoi usare:

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

[Turtle]

Grazie! Beh, non posso credere di essermelo perso.

[Turtle]

Oh, un’altra domanda. Cosa sarebbe la cosa per gli utenti di livello di fiducia quattro?
Per chiarire, vorrei anche fare qualcosa di simile per gli utenti con livello di fiducia quattro. Non sono riuscito a trovare un selettore per questo.

[Arkshine]

Da quello che vedo nel codice, puoi aspettarti di vedere le seguenti classi:

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

Potresti creare un gruppo e impostarlo come gruppo primario.
Puoi anche usare del codice per aggiungere le classi mancanti.

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

export default apiInitializer((api) => {
  // Aggiungi i gruppi che vuoi aggiungere
  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;
      }
    };
  });
});

Quindi puoi usare il CSS per puntare con .group--trust_level_4.

Esempio:

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

Per il nome utente, non hai bisogno del codice sopra:

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

[Turtle]

@Arkshine

group--trust_level_4

Posso selezionare un nome utente specifico invece del livello di fiducia quattro? Grazie mille comunque, questa è una risposta scritta molto bene.

Scusa per le domande, non sono un esperto di codice.

[Arkshine]

Ho aggiornato il codice sopra.
Includerà il nome utente con .user--username.
Nota che puoi usare l’ID se preferisci.

[Turtle]

Puoi farmi un esempio con il mio nome utente, ad esempio cambiando colore?

[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, non funzionerà per un utente chiamato Kat_Mac?

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

Ho aggiornato il JS.

[Arkshine]

Se il nome utente è “Kat_Mac”, allora il CSS dovrebbe essere user--Kat_Mac.

[Turtle]

Non riesco ancora a farlo funzionare. Tutto quello che devo includere nella parte JS è il nome utente Kat_Mac, corretto?

[Arkshine]

No, non cambiare il JS. Se fai riferimento a includeUsersField, significa se vuoi mostrare per “username” (ad esempio Kat_Mac) o per “id” (ad esempio come 4). Se desideri mostrare lo username, lascialo così com’è.

[Turtle]

In ogni caso, non funzionerà comunque. Grazie comunque per il tuo aiuto.

[Arkshine]

Funziona per me:

Assicurati di utilizzare il codice JS più recente e di aver aggiornato correttamente il CSS!

---

@Turtle Ignora il mio codice, in realtà non ho visto lì un attributo con il nome utente che puoi usare.

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

[Turtle]

Questo è tutto ciò che ho.

Non so quale possa essere il problema.

[Arkshine]

Usa questo 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;
    }
}

Ha funzionato, grazie!