Uma pequena ajuda com um seletor CSS?

[Turtle]

Olá,
Como não há um ícone de escudo ou qualquer indicação de que um usuário é da equipe para as mensagens no chat, eu queria colorir levemente seus nomes de usuário. Encontrei o seletor, mas tive problemas para descobrir uma maneira de selecionar os usuários da equipe. Aqui está o que tenho no momento:

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

Existe alguma maneira de fazer isso funcionar e, se sim, como? Obrigado!

[Arkshine]

Você pode usar:

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

[Turtle]

Obrigado! Bem, não acredito que perdi isso.

[Turtle]

Ah, mais uma pergunta. O que seria para usuários com nível de confiança quatro?
Para esclarecer, eu também gostaria de fazer algo semelhante para usuários com nível de confiança quatro. Não consegui encontrar um seletor para isso.

[Arkshine]

Pelo que vejo no código, você pode esperar ver os seguintes nomes de classe:

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

Você poderia criar um grupo e defini-lo como o grupo principal.
Você também pode usar algum código para adicionar os nomes de classe ausentes.

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

export default apiInitializer((api) => {
  // Adicione os grupos que você deseja adicionar
  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;
      }
    };
  });
});

Em seguida, você pode direcionar o CSS com .group--trust_level_4.

Exemplo:

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

Para o nome de usuário, você não precisa do código acima:

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

[Turtle]

@Arkshine

group--trust_level_4

Posso selecionar um nome de usuário específico em vez do nível de confiança quatro? Muito obrigado, por sinal, esta é uma resposta muito bem escrita.

Desculpe pelas perguntas, não sou bom com código.

[Arkshine]

Eu atualizei o código acima.
Ele incluirá o nome de usuário com .user--username.
Observe que você pode usar o ID se preferir.

[Turtle]

Pode me dar um exemplo com meu nome de usuário, por exemplo, mudando de cor?

[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, não funcionará para um usuário chamado Kat_Mac?

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

Eu tenho o JS atualizado.

[Arkshine]

Se o nome de usuário for “Kat_Mac”, então o CSS deve ser user--Kat_Mac.

[Turtle]

Hm, ainda não consigo fazer funcionar. Tudo o que preciso incluir na parte JS é o nome de usuário Kat_Mac, correto?

[Arkshine]

Não, não altere o JS. Se você se refere a includeUsersField, isso significa se você quer mostrar por “username” (ex: Kat_Mac) ou por “id” (ex: como 4). Se você deseja mostrar o nome de usuário, deixe como está.

[Turtle]

De qualquer forma, ainda não vai funcionar. Obrigado pela ajuda.

[Arkshine]

Funciona para mim:

Certifique-se de que você está usando o código JS mais recente e que atualizou o CSS corretamente!

---

@Turtle Ignore meu código, na verdade eu não vi um atributo com o nome de usuário que você pode usar.

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

[Turtle]

É tudo o que tenho.

Não sei qual pode ser o problema.

[Arkshine]

Use 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;
    }
}

Funcionou, obrigado!