Eine kleine Hilfe bei einem CSS-Selector?

[Turtle]

Hallo,

Da es kein Schildsymbol oder irgendeine Anzeige für Staff-Benutzer in Nachrichten im Chat gibt, wollte ich ihre Benutzernamen leicht einfärben. Ich habe den Selektor gefunden, aber ich hatte Schwierigkeiten, eine Möglichkeit zu finden, Staff-Benutzer auszuwählen. Hier ist, was ich im Moment habe:

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

Gibt es eine Möglichkeit, dies zum Laufen zu bringen, und wenn ja, wie? Danke!

[Arkshine]

Sie können verwenden:

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

[Turtle]

Danke! Nun, ich kann nicht glauben, dass ich das verpasst habe.

[Turtle]

Oh, noch eine Frage. Was wäre das für Benutzer mit Vertrauensstufe vier?
Um das klarzustellen, möchte ich auch etwas Ähnliches für Benutzer mit Vertrauensstufe vier tun. Ich konnte keinen Selektor dafür finden.

[Arkshine]

Wie ich im Code sehe, können Sie mit folgenden Klassennamen rechnen:

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

Sie könnten eine Gruppe erstellen und sie als primäre Gruppe festlegen.

Sie können auch etwas Code verwenden, um die fehlenden Klassennamen hinzuzufügen.

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

export default apiInitializer((api) => {
  // Fügen Sie die gewünschten Gruppen hinzu
  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;
      }
    };
  });
});

Dann können Sie mit CSS auf .group--trust_level_4 abzielen.

Beispiel:

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

Für Benutzernamen benötigen Sie den obigen Code nicht:

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

[Turtle]

@Arkshine

group--trust_level_4

Kann ich einen bestimmten Benutzernamen anstelle von Vertrauensstufe vier auswählen? Vielen Dank im Voraus, das ist eine sehr gut geschriebene Antwort.

Entschuldigung für die Fragen, ich bin nicht gut mit Code.

[Arkshine]

Ich habe den obigen Code aktualisiert.
Er wird den Benutzernamen mit .user--username enthalten.
Beachten Sie, dass Sie bei Bedarf die ID verwenden können.

[Turtle]

Kannst du mir ein Beispiel geben, bei dem mein Benutzername zum Beispiel die Farbe ändert?

[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, es funktioniert nicht für einen Benutzer namens Kat_Mac?

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

Ich habe das aktualisierte JS.

[Arkshine]

Wenn der Benutzername „Kat_Mac“ ist, dann sollte das CSS user--Kat_Mac lauten.

[Turtle]

Hm, ich kann es immer noch nicht zum Laufen bringen. Alles, was ich in den JS-Teil einfügen muss, ist der Benutzername Kat_Mac, richtig?

[Arkshine]

Nein, ändern Sie das JS nicht. Wenn Sie sich auf includeUsersField beziehen, bedeutet dies, ob Sie nach „Benutzername“ (z. B. Kat_Mac) oder nach „ID“ (z. B. wie 4) anzeigen möchten. Wenn Sie den Benutzernamen anzeigen möchten, lassen Sie ihn so, wie er ist.

[Turtle]

So funktioniert es trotzdem nicht. Danke für deine Hilfe.

[Arkshine]

Es funktioniert für mich:

Stellen Sie sicher, dass Sie den neuesten JS-Code verwenden und das CSS ordnungsgemäß aktualisiert haben!

---

@Turtle Ignorieren Sie meinen Code, tatsächlich habe ich dort kein Attribut mit dem Benutzernamen gesehen, das Sie verwenden können.

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

[Turtle]

Das ist alles, was ich habe.

Ich weiß nicht, was das Problem sein könnte.

[Arkshine]

Verwenden Sie dieses 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;
    }
}

Das hat funktioniert, danke!