كيفية تخصيص ChatMessageInfo / chat author CSS (لا يوجد widget؟)

مطور
1

في وقت سابق اليوم، قمت بإنشاء إضافة صغيرة تسمح لي بتخصيص سطر المؤلف لكل مشاركة في المنتدى باستخدام بعض CSS بناءً على منطق خاص بالموقع. مثال:

function initColorize(api)
{
	api.includePostAttributes('colorized_groups');

	// اختطاف أيقونات المشاركات لإدخال CSS لمشاركات المنتدى
	api.addPosterIcons((cfs, attrs) => {
		// (يمكن تحديد أيقونة حقيقية عن طريق ملء حقل الأيقونة.
		// لقد أزلت الأيقونة على الرغم من أنها كانت مزدحمة بعض الشيء.
		// في الوقت الحالي، مع عدم تحديد أيقونة، فهي فقط للتمييز بـ CSS للاسم.)	
		if (attrs.colorized_groups.indexOf("developer") > -1)
			return { icon: '', className: 'developer', title: 'Developer' };
		else if (attrs.colorized_groups.indexOf("wip_researcher") > -1)
			return { icon: '', className: 'wip_researcher', title: 'WIP Researcher' };
		else if (attrs.colorized_groups.indexOf("researcher") > -1)
			return { icon: '', className: 'researcher', title: 'Researcher' };
	});

بعد ذلك، أريد إجراء بعض التخصيصات المماثلة للمحادثة في الوقت الفعلي - ولكن لا يوجد ما يعادل api.addPosterIcons لرسائل الدردشة في الوقت الفعلي. ربما يمكنني استخدام api.decorateWidget، ولكن المكون المقابل للدردشة هو ChatMessageInfo وهو مكون، وليس أداة.

عذرًا إذا كان الأمر واضحًا، ولكن ما هي الاستراتيجية الجيدة لتخصيص ChatMessageInfo من إضافة؟

(من المتعمد أنني لا أعتمد على المجموعة الأساسية للمستخدم نظرًا لوجود بعض المنطق الخاص لتحديد أي منها يجب أن تكون له الأولوية ولا أريد الاعتماد على المستخدم/المسؤول لضبطه بشكل صحيح يدويًا.)

شكرا لك!

2

أهلاً،

أعتقد أن هذا لن يكون سهلاً. لا يوجد PluginOutlet متاح في هذه المنطقة (لا تتردد في طلبه!)

إذا كنت ترغب في إضافة أسماء فئات فقط، فيجب أن تكون قادرًا على القيام بذلك بهذه الطريقة:

api.modifyClass(
  "component:chat/message/info",
  (Superclass) =>
    class extends Superclass {
      get usernameClasses() {
        let classes = super.usernameClasses;

        // Add extra classes
        classes += " developer";

        return classes;
      }
    }
)

يقوم هذا بالكتابة فوق هذا الرمز:

إعجاب واحد (1)
3

شكراً على الرد! في الواقع، لقد استخدمت حلاً آخر، لكنني أقدر عرضك لحلك لأنه يبدو أنظف قليلاً (في حلي، عليّ الوصول إلى اسم الفئة وطريقتي تبدو مخترقة قليلاً). إليك الاستراتيجية التي استخدمتها:

// تلوين الأسماء أيضاً في الدردشة في الوقت الفعلي
api.decorateChatMessage(function (messageContainer, chatChannel) 
{
	let colorized_groups = this.args?.message?.user?.colorized_groups;

	if (colorized_groups == null)
		return; // لا توجد مجموعات، لا شيء للقيام به

	const nameClass = "chat-message-info__username__name";					
	
	let elements = messageContainer.getElementsByClassName(nameClass);
	if (elements.length == 0) // عادي: قد تكون هذه رسالة ثانية لا تحتوي على رأس اسم المستخدم
		return; 

	let nameDiv = elements[0];

	if (colorized_groups.indexOf("developer") > -1)
		nameDiv.classList.add("developer");
	else if (colorized_groups.indexOf("wip_researcher") > -1)
		nameDiv.classList.add("wip_researcher");
	else if (colorized_groups.indexOf("researcher") > -1)
		nameDiv.classList.add("researcher");
});

أفترض أنه مع طريقتك، لا يزال يمر this.args.message.user؟

إعجاب واحد (1)
4

عمل جيد لإيجاد طريقة! ليست مخترقة للغاية. :smile:
ولكن نعم، الكتابة فوق getter مباشرة وأنظف.

هذا صحيح. :slight_smile:

إعجاب واحد (1)
5

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.