إيموجي فلف

[Arkshine]

|||
|:discourse2:| ملخص | يضيف تنويعات أو رسوم متحركة اختيارية للرموز التعبيرية.
| | معاينة | معاينة على theme-creator.discourse.org|
| | رابط المستودع | GitHub - Arkshine/discourse-emoji-fluff
| | جديد في سمات Discourse؟ | دليل المبتدئين لاستخدام سمات Discourse

تثبيت مكون السمة هذا

يتطلب مكون السمة هذا أن يكون Discourse محدثًا اعتبارًا من 2024-11-26T23:00:00Z. ^[1]

الوصف

يسمح Emoji Fluff للمستخدمين بوضع رموز تعبيرية معكوسة أو متحركة في منشوراتهم.
يسمح للمستخدمين بنشر أعمال رموز تعبيرية رائعة مثل:

يمكنك اختيار هذه الزخارف من نافذة الإكمال التلقائي للرموز التعبيرية، أو من منتقي الرموز التعبيرية، أو عن طريق إضافة كلمات مفتاحية مباشرة بعد الرمز المختصر للرمز التعبيري:

أمثلة: :bike:f-slide ، :smile:f-bounce

يمكن دمج التقليب الأفقي والرأسي مع زخارف أخرى.

أمثلة:

• :horse:f-slide,flip:
• :spider:f-float,flip_v:

لقطات شاشة

زخارف الرموز التعبيرية المتاحة

كيفية إضافة زخرفة إلى رمز تعبيري

من نافذة الإكمال التلقائي للرموز التعبيرية

من منتقي الرموز التعبيرية

عن طريق كتابة لاحقة الزخرفة يدويًا

الميزات

• رموز تعبيرية معكوسة أفقيًا أو رأسيًا

• رموز تعبيرية متحركة (اهتزاز، دوران، نبض، إلخ)

• إعداد لاختيار زخارف الرموز التعبيرية التي يجب أن تكون متاحة للمستخدمين

• إعداد لاختيار إدراج محدد زخارف في الإكمال التلقائي أو منتقي الرموز التعبيرية.

• السماح للمسؤولين بإنشاء زخارف جديدة

الإعدادات

الإعداد	الوصف
مُمَكَّن	تشغيل أو إيقاف وظائف مكون السمة. true القيمة الافتراضية سيمنع التعطيل تطبيق زخرفة الرمز التعبيري. هذا مفيد إذا كنت ترغب في إيقاف أو تخطط لإزالة المكون ولكن لا تريد رؤية رمز الزخرفة، مثل <code >🙂spin:</code>، في المنشورات. لمزيد من المعلومات، تحقق من إلغاء زخارف الرموز التعبيرية في الموضوع.
السماح بالزخارف	قائمة بالزخارف المسموح بها. flip|flip_v|spin|pulse|bounce|wobble|float|slide|fade|negative|hue|gray القيمة الافتراضية
السماح بالمحدد في	أين يجب أن يكون محدد الزخرفة متاحًا. both القيمة الافتراضية none – تعطيل المحددات. both – تمكين المحدد في الإكمال التلقائي ومنتقي الرموز التعبيرية. autocomplete – تمكين المحدد فقط في الإكمال التلقائي. emoji-picker – تمكين المحدد فقط في منتقي الرموز التعبيرية.

بالإضافة إلى ذلك، يمكن ترجمة سلاسل مكونات السمة من الإعدادات.

إلغاء زخارف الرموز التعبيرية

إذا قمت بتعطيل المكون، تظل هذه اللواحق موجودة، مما يؤدي إلى رموز تعبيرية مثل هذه: f-spin:

نظرًا لقيود تصميم مكونات السمة وخيارات التصميم، نضيف لواحق بسيطة للرموز التعبيرية لإعطائها هذه التأثيرات الزخرفية. تساعد بادئة الزخرفة f- في تحديد هذه الزخارف، مما يسهل إزالتها من خلال البرنامج النصي المتاح أدناه.

يمكنك تنزيل وتشغيل مهمة rake لإزالة لواحق الزخرفة بشكل دائم من المنشورات.

wget -P lib/tasks/ https://raw.githubusercontent.com/Arkshine/discourse-emoji-fluff/refs/heads/main/tasks/fluff.rake
rake fluff:delete_all

لا تنشئ مهمة rake مراجعات للمنشورات افتراضيًا. يمكنك إضافة false كوسيط لتغيير هذا السلوك: rake fluff:delete_all[false]

اقرأ Administrative Bulk Operations للحصول على تعليمات حول كيفية الدخول إلى الحاوية لتشغيل مهمة rake.

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

إنشاء زخارفك

يتطلب إنشاء الزخارف معرفة بـ CSS.

عند إضافة زخرفة إلى رمز تعبيري داخل منشور، يتم تغليف الرمز التعبيري بعلامة <span> مع فئة fluff:

<span class="fluff fluff--bounce">
  <img src="https://your.discourse.com/images/emoji/twitter/kangaroo.png?v=12" title=":kangaroo:" class="emoji" alt=":kangaroo:" loading="lazy" width="20" height="20" style="aspect-ratio: 20 / 20;">
</span>

أضف CSS مخصصًا إلى السمة الخاصة بك أو إلى مكون سمة جديد لإضافة زخارف جديدة.
فيما يلي مثالان لزخارف جديدة:

إمالة رمز تعبيري 90 درجة

.fluff--tilt img {
  transform: rotate(90deg);
}

تأثير دوران ثلاثي الأبعاد

.fluff--spin3d img {
  animation: f-spin3d 2s infinite linear;
}

@keyframes f-spin3d {
  0% {
    transform: perspective(50em) rotateY(0deg);
    filter: brightness(1);
  }
  50% {
    transform: perspective(50em) rotateY(90deg);
    filter: brightness(0.85);
  }
  51% {
    transform: perspective(50em) rotateY(91deg);
    filter: brightness(1.15);
  }
  100% {
    transform: perspective(50em) rotateY(180deg);
    filter: brightness(1);
  }
}

بعد ذلك، تحتاج إلى إضافة لاحقة الزخرفة في الزخارف المسموح بها في Emoji Fluff:

هذا كل شيء؛ يجب أن تكون زخارفك الجديدة متاحة الآن للمستخدمين. استمتع!

شكر وتقدير

• @Canapin: الفكرة الأصلية، المساعدة العامة في إعداد واختبار مكون السمة هذا.

---

1. لتكون دقيقًا، يتطلب TC على الأقل إصدار Discourse بعد 30 أكتوبر، وتحديدًا دعم منتقي الرموز التعبيرية، وهو إصدار حالي اعتبارًا من 2024-11-26T23:00:00Z (شكرًا للفريق على إضافة منفذ إضافي قبل أيام قليلة!) ↩︎

[Lilly (Lillian Louis)]

هاها هذا رائع! جيد جدا!

[Monikas (JustMonika)]

لدي شعور بأن هذا يتعارض مع هذا المكون Omit Emoji component مما يتسبب في عدم ظهور واجهة المستخدم الخاصة بمن يختار الرموز التعبيرية بسحر عصا المكون

[Jagster (Jakke Lehtonen)]

لا أستخدم هذا المكون، ولكني أستخدم جهاز iPad وقد حدث ذلك عدة مرات - أنا أكتب مساعدة للمستخدمين. النشر يصلح ذلك.

[Bas (Bas van Leeuwen)]

هذا مذهل! أحسنت!!

(ملاحظة صغيرة، هل سيكون “سلبي” وصفًا أفضل من “عكس”؟)

[Moin]

@Arkshine

يتطلب هذا المكون أن يكون Discourse محدثًا اعتبارًا من 2024-11-26T23:00:00Z.

هل قمت بتحديث Discourse؟ تتلقى إشعارًا بالتحديث فقط عند إصدار نسخة تجريبية جديدة، ولكن يتم إضافة التزامات جديدة كل يوم.

[Arkshine]

@Bas

هذا مذهل! أحسنت صنعًا!!

(ملاحظة صغيرة، هل سيكون “سلبي” وصفًا أفضل من “عكس”؟)

شكرًا!
لقد تم تغيير الاسم الآن!

DEV: Rename invert -> negative in alllowed_decorations

@Monikas

لدي شعور بأن هذا يتعارض مع هذا المكون مكون حذف الرموز التعبيرية مما يتسبب في عدم عرض واجهة المستخدم للمكون الذي يحدد الرموز التعبيرية لعصا المكون السحرية.

كما ذكر Moin، ستحتاج إلى تحديث Discourse.
لقد نظرت في كود مكون السمة واختبرته؛ بمجرد تحديث Discourse، يجب أن يعملا معًا دون مشاكل!

[joo (slower)]

مرحباً، لم أعد أرى خيار إضافة مكون Emoji Fluff. هل ما زال مدعومًا؟

[Arkshine]

لقد دفعت إصلاحًا جزئيًا لجعله يعمل مع أحدث إصدار من Discourse. ومع ذلك، فإن هذا الإصلاح يعالج فقط ميزة الإكمال التلقائي.

حاليًا، أنا غير قادر على حل مشكلة منتقي الرموز التعبيرية. مؤخرًا، قام الفريق بتوحيد منتقي الرموز التعبيرية مع الدردشة في DEV: unifies emoji picker by jjaffeux · Pull Request #28277 · discourse/discourse · GitHub. للأسف، تم إزالة منفذ المكون الإضافي في تذييل منتقي الرموز التعبيرية، والذي كان يُستخدم سابقًا لإدراج تبديل، في الإصدار الجديد. في هذه اللحظة، ليس لدي حل. آسف للإزعاج!

[merefield (Robert)]

هل أقدم طلب سحب جديد؟ أعتقد أنهم يرحبون بمثل هذه الأشياء؟

[Arkshine]

نعم، سأفعل!

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

قد يكون هذا جيدًا لأيقونة واحدة. لكنني أشعر أن إنشاء منفذ إضافي هنا لا يبدو معقولاً.

[merefield (Robert)]

متعة رائعة!

هدف إضافي:
رسوم متحركة ثلاثية الأبعاد

Emojis, would it be prudent for Discourse to Fork Twemoji?

They have stopped, the last update on the repo is 3 years old. The fork is up-to-date with recent official emojis absent from the original Twemoji set. I’m thinking of and that I use in my everyday life, I miss them on Discourse! They currently render as ‍ and ‍↔.

[Arkshine]

@merefield

هل أقدم طلب سحب جديد؟ أعتقد أنهم يرحبون بمثل هذه الأشياء؟

للإجابة على هذا، فعلت هنا:

DEV: Add emoji-picker-filter-container plugin outlet

أحد الأشياء الجيدة في أداة اختيار الرموز التعبيرية الموحدة هو أن Fluff سيعمل مع الدردشة!

نأمل أن يحظى طلب السحب ببعض الاهتمام!

@merefield

رسوم متحركة ثلاثية الأبعاد

لقد توقفوا، آخر تحديث في المستودع هو قبل 3 سنوات. الشوكة محدثة بالرموز التعبيرية الرسمية الحديثة الغائبة عن مجموعة Twemoji الأصلية. أفكر في و ↔ التي أستخدمها في حياتي اليومية، أفتقدها في Discourse! حاليًا يتم عرضها كـ و ↔.

بواسطة الرسوم المتحركة ثلاثية الأبعاد، هل تقصد CSS نقي مع تحويل ثلاثي الأبعاد؟
مثل هذا:

[merefield (Robert)]

لا، كنت أعني تأثيرًا ثلاثي الأبعاد بالكامل لشخص يهز رأسه، وهو أمر ليس سهلاً بالطبع.

ربما يمكن معالجته بشكل أفضل باستخدام الملصقات؟

[Arkshine]

هل تريد المزيد من هذا؟

Animated Emoji

---

تحرير:

أوه، @merefield، أفهم ما تقصده بـ Plugin for animated stickers!

أعتقد أن هذا سيكون خارج نطاق هذه اللجنة الفنية. لن يكون من السهل العثور على النسخة ثلاثية الأبعاد لكل رمز تعبيري.

أنا حقًا أحب فكرة ملصقات falco!

[Arkshine]

تم تحديث TC لجعله متوافقًا تمامًا مع أحدث إصدار من Discourse.

هذا يضيف دعم الدردشة أيضًا!

DEV: Ensure compatibility with core + chat support

[Heliosurge (Dan DeMontmorency)]

إنشاء TC جديد، “Emoji-fluff Extras”، وإضافة تأثيري الـ fluff الجديدين لديك
تمت إضافة spin3d و tilt إلى قائمة الـ emoji fluff المسموح بها. عينة الـ emoji fluff الجديدة لا تعمل. تمت إضافة CSS إلى “common” في الـ TC المخصص. تم التأكد من إضافتها إلى جميع السمات.

[Arkshine]

إذا أضفت، على سبيل المثال، tilt إلى الإعداد، ولم تعمل الميزة الإضافية، فمن المحتمل جدًا أن CSS غير متاح ما لم تكن قد ارتكبت خطأ إملائيًا. هل يمكنك التحقق من CSS الخاص بك مرة أخرى؟

(أردت إلقاء نظرة على منتداك ولكن لا يمكنني تسجيل الدخول. لا أتلقى أي بريد إلكتروني ولا يمكنني حتى تسجيل الدخول باستخدام Steam (لسبب ما، لا يزال يطلب مني التحقق من بريدي الإلكتروني))

[Heliosurge (Dan DeMontmorency)]

تم تنشيط حسابك

سأضطر إلى النظر في إرسال البريد الإلكتروني. ستحتاج إلى حساب قبل أن تتمكن من إضافة تسجيل الدخول عبر Steam.

تم نسخ CSS باستخدام النسخ السريع في كتل التعليمات البرمجية الخاصة بك.

كل ما فعلته مع tilt هو استنساخه مرتين وتغييره إلى “tilt45” و “tilt90”. “spin3d” بدون تغييرات

إعدادات زغب الرموز التعبيرية

محتوى CSS إضافي لزغب الرموز التعبيرية في Common

.fluff--tilt45 img {
  transform: rotate(45deg);
}
.fluff--tilt90 img {
  transform: rotate(90deg);
}
.fluff--spin3d img {
  animation: f-spin3d 2s infinite linear;
}

@keyframes f-spin3d {
  0% {
    transform: perspective(50em) rotateY(0deg);
    filter: brightness(1);
  }
  50% {
    transform: perspective(50em) rotateY(90deg);
    filter: brightness(0.85);
  }
  51% {
    transform: perspective(50em) rotateY(91deg);
    filter: brightness(1.15);
  }
  100% {
    transform: perspective(50em) rotateY(180deg);
    filter: brightness(1);
  }
}

ملاحظة تم تحديد مشكلة إرسال البريد الإلكتروني. لقد تجاوزت الحد الأقصى لـ 300 يوم بأكثر من 109. سأضطر قريبًا إلى الترقية إلى خطة مدفوعة. شكراً على التنبيه.

[Arkshine]

هل قمت بإصلاح مشكلتك؟

إنها تعمل لدي: