مكون تحميل دوار مخصص

[meghna (Meghna Jalan)]

أثناء عملي على موضوع Grogu، قمت بتطبيق أيقونة تحميل مخصصة لهذا الموضوع، وفكرت أنه سيكون رائعًا وجود مكون مستقل لتخصيص أيقونة مؤشر التحميل الدوار.

يتيح هذا المكون للموظفين تخصيص أيقونة الدوران الافتراضية. تتوفر ثلاث خيارات للتخصيص عبر إعدادات الموضوع:

• اسم الأيقونة
• حجم الأيقونة
• لون الأيقونة

يقبل المكون فقط أسماء أيقونات FontAwesome، وأوصي باختيار واحدة من هذه الأيقونات للحصول على تأثير دوران رائع.

استمتع، ولا تتردد في إخباري بكيفية تحسين هذا المكون أكثر.

	معاينة	معاينة على منشئ الموضوع
	مستودع Github	discourse-custom-loading-spinner
	دليل التثبيت	كيفية تثبيت موضوع أو مكون موضوع

[ondrej]

مرحبًا، لقد قمت للتو بتثبيت هذا! تحسين يمكنكم إضافته هو إضافة لون آخر للوضع المظلم، حيث أن اللون الذي تختارونه للوضع الفاتح مثل #000000 لن يكون مرئيًا في الوضع المظلم.

[meghna (Meghna Jalan)]

لهذا السبب بالضبط، يمكن تخصيص اللون عبر إعدادات السمة custom icon color.

[ondrej]

لا، ما أعنيه هو أن لون الأيقونة يجب أن ينقلب تلقائيًا اعتمادًا على ما إذا كنت تستخدم سمة فاتحة أو سمة داكنة.

خلفية السمة الفاتحة لدي هي #F0F0F0، وخلفية السمة الداكنة هي #000000.

لذلك، من الصعب العثور على لون يتباين بشكل جيد. أريد أن تكون الأيقونة بيضاء في السمة الداكنة وسوداء في السمة الفاتحة.
شكرًا لك

[meghna (Meghna Jalan)]

@ondrej

أريد أن يكون الأيقونة باللون الأبيض في الوضع الداكن وباللون الأسود في الوضع الفاتح.

لتبديل لون الأيقونة تلقائيًا بناءً على ألوان السمة، لا تحدد أي قيمة في إعداد السمة “custom icon color”.

لقد جعلت هذا السلوك افتراضيًا الآن عبر:

Do not specify icon colour by default.

[ondrej]

رائع! شكرًا لك @meghna

[MrDavis97 (Miles Davis)]

أحب هذا المكون الخاص بالموضوع، ويعمل بشكل رائع في الصفحة الرئيسية. ومع ذلك، في بعض مناطق مثيل Discourse الخاص بي، يظهر مؤشر التحميل الافتراضي. على سبيل المثال، كلما كنت في لوحة الإدارة أو إعدادات المستخدم. @meghna هل هناك أي طريقة لإصلاح ذلك؟

[kynic]

يرجى التحديث، لم يعد يعمل مع 3.2.0.beta2-dev.

يظهر خطأ في وحدة تحكم Chrome @meghna

[simon]

الاختبار باستخدام Ubuntu مع أحدث متصفح Chrome، أحصل على الخطأ التالي على موقع التطوير المحلي الخاص بي:

component-templates.js:54 [discourse/theme-10/discourse/templates/components/conditional-loading-spinner] تم تأليف conditional-loading-spinner باستخدام gjs ولا يمكن تجاوز القالب الخاص به. تجاهل التجاوز.

على موقع الإنتاج الخاص بي، والذي تم اختباره أيضًا باستخدام أحدث متصفح Chrome على Ubuntu، لا أحصل على أخطاء، ولكني لا أرى أيضًا مؤشر تحميل.

أعتقد أنه تم إجراء بعض التغييرات على كيفية تجاوز القوالب في السمات منذ إصدار مكون السمة هذا: (not recommended) Overriding Discourse templates from a Theme or Plugin. أعتقد أن الطريقة التي يطبق بها Discourse مؤشر التحميل قد تغيرت أيضًا منذ ذلك الحين.

[kynic]

@meghna هل سيتم إصلاح هذا أم أنه معطل الآن؟

[simon]

انتظر قليلاً. كان الفريق بعيدًا في اجتماعهم السنوي وقد تكون لديهم أولويات أخرى عندما يبدأون في العودة إلى العمل هذا الأسبوع.

[meghna (Meghna Jalan)]

يتطلب الإصلاح بعض التغييرات في النواة. نحن نعمل على ذلك وسنقوم بإصلاحه قريبًا.

[kynic]

شكرا على العمل الشاق

[meghna (Meghna Jalan)]

تم تحديث مكون السمة هذا ليعمل على أحدث إصدار من Discourse (بفضل @cvx).

[kynic]

ما زال، لا يعمل معي.

تعديل؛ يعمل الآن بعد تحديث discourse اليوم.

[sunjam (james.network)]

أتساءل عن استخدام أيقونة SVG بدلاً من FontAwesome. شكرًا على أي حال.

Replace Discourse's default SVG icons with custom icons in a theme

You can replace a Discourse’s default SVG icons individually or as a whole with your own custom SVG and override them within a theme or theme component. Step 1 - Create an SVG Spritesheet To get started, you must create an SVG Spritesheet. This can contain anything from a single additional custom SVG icon up to an entire replacement set of hundreds. The spritesheet should be saved as an SVG file. In principle, you are nesting the <svg> tag contents from the original SVG icon file into <symbol> …

[kynic]

توقف عن العمل مع أحدث إصدار. 3.2.0.beta4-dev

(24532653e6)

[Arkshine]

يبدو هذا جيدًا بالنسبة لي مع أحدث إصدار

[kynic]

نعم، إنه يعمل في بعض الأماكن، ولكنه لا يعمل في المنشورات، عندما تنقر على منشور آخر لرؤيته. إنه لا يعمل الآن.