مساعدة صغيرة في محدد 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]

أوه، سؤال آخر. ما الذي سيكون متاحًا للمستخدمين ذوي مستوى الثقة الرابع؟
للتوضيح، أود أيضًا القيام بشيء مماثل للمستخدمين ذوي مستوى الثقة الرابع. لم أتمكن من العثور على محدد لذلك.

[Arkshine]

من ما أراه في الكود، يمكنك توقع رؤية أسماء الفئات التالية:

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

يمكنك إنشاء مجموعة وتعيينها كمجموعة أساسية.
يمكنك أيضًا استخدام بعض الأكواد لإضافة أسماء الفئات المفقودة.

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

export default apiInitializer((api) => {
  // Add the groups you wants to add
  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

هل يمكنني تحديد اسم مستخدم معين بدلاً من مستوى الثقة الرابع؟ شكراً جزيلاً لك مقدماً، هذه استجابة مكتوبة بشكل جيد للغاية.

آسف على الأسئلة، أنا لست جيدًا في البرمجة.

[Arkshine]

لقد قمت بتحديث الكود أعلاه.
سيشمل اسم المستخدم باستخدام .user--username.
لاحظ أنه يمكنك استخدام المعرف إذا كنت تفضل ذلك.

[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]

حسنًا، ما زلت لا أستطيع تشغيله. كل ما علي تضمينه في جزء جافاسكريبت هو اسم المستخدم Kat_Mac، صحيح؟

[Arkshine]

لا، لا تغير جافاسكريبت. إذا كنت تشير إلى includeUsersField، فهذا يعني ما إذا كنت تريد العرض بواسطة “اسم المستخدم” (على سبيل المثال، Kat_Mac) أو بواسطة “المعرف” (على سبيل المثال، مثل 4). إذا كنت ترغب في عرض اسم المستخدم، فاتركه كما هو.

[Turtle]

على أي حال، لن يعمل هذا. شكراً لمساعدتك.

[Arkshine]

يعمل لدي:

تأكد من أنك تستخدم أحدث تعليمات برمجية JavaScript، وأنك قمت بتحديث 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;
    }
}

لقد نجح الأمر، شكرًا!