Помощь с селектором CSS?

[Turtle]

Привет,
Поскольку в чате нет значка щита или каких-либо указаний на то, что пользователь является сотрудником, я хотел немного изменить цвет их имен. Я нашел селектор, но у меня возникли трудности с тем, как выбрать именно сотрудников. Вот что у меня есть на данный момент:

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

Есть ли способ заставить это работать, и если да, то как? Спасибо!

[Arkshine]

Вы можете использовать:

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

[Turtle]

Спасибо! Да, не могу поверить, что я это пропустил.

[Turtle]

О, ещё один вопрос. Какое название будет у пользователей с уровнем доверия 4?
Уточню: я тоже хочу сделать что-то подобное для пользователей с уровнем доверия 4. Я не мог найти для них селектор.

[Arkshine]

Судя по коду, вы можете ожидать следующие классы:

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

Вы можете создать группу и установить её как основную.

Также можно использовать код для добавления отсутствующих классов:

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

export default apiInitializer((api) => { 
  // Добавьте нужные группы
  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;
      }
    }
  })
});

Затем вы можете использовать CSS-селектор .group--trust_level_4.

Пример:

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

Для имени пользователя код выше не нужен:

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

[Turtle]

@Arkshine

group--trust_level_4

Могу ли я выбрать конкретное имя пользователя вместо уровня доверия 4? Кстати, огромное спасибо, это очень хорошо написанный ответ.

Извините за вопросы, я не очень хорошо разбираюсь в коде.

[Arkshine]

Я обновил код выше.
Он будет включать имя пользователя с классом .user--username.
Обратите внимание, что при желании вы можете использовать ID.

[Turtle]

Можете привести пример, например, как изменить цвет для моего имени пользователя?

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

Хм, не сработает ли это для пользователя с именем Kat_Mac?

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

У меня обновлённый JS.

[Arkshine]

Если имя пользователя — “Kat_Mac”, то CSS должен быть user--Kat_Mac.

[Turtle]

Хм, у меня всё ещё не получается заставить это работать. Правильно ли я понимаю, что в части JS нужно указать только имя пользователя Kat_Mac?

[Arkshine]

Нет, не меняйте JS. Если вы ссылаетесь на includeUsersField, это означает, хотите ли вы отображать данные по «username» (например, Kat_Mac) или по «id» (например, как 4). Если вы хотите отображать username, оставьте всё как есть.

[Turtle]

В любом случае это всё равно не сработает. Спасибо за помощь.

[Arkshine]

У меня это работает:

Убедитесь, что вы используете актуальный JS-код и правильно обновили CSS!

---

@Turtle Игнорируйте мой код, на самом деле я не заметил там атрибута с именем пользователя, который можно использовать.

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

[Turtle]

Вот всё, что у меня есть.

Не знаю, в чём может быть проблема.

[Arkshine]

Используйте этот 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;
    }
}

Сработало, спасибо!