إعادة بناء سمة Meta المرقمة: أيقونات جديدة، صفحة رئيسية مخصصة، ونظرة أولى على Blocks API

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

19 إعجابًا

هذا اختيار جيد. لفتت هذه المجموعة انتباهي عندما كنت أبحث عن مجموعات الأيقونات المتاحة لـ Discourse. إنها راقية وأنيقة.

كان غياب الأيقونات المملوءة تمامًا يتسبب في بعض المشكلات، على سبيل المثال، كان مؤشر غير المقروء يظهر كدائرة ملونة بالكاد مرئية، أو أن زر التبديل بين الوضع الداكن/الفاتح سيكون من الصعب عرضه بشكل صحيح بدون جزء مملوء.

لاحظت أنك حللت هذه المشكلات في السمة المخصصة لـ meta. هل أضفت أيقونات مخصصة لهذا الغرض؟


بالمناسبة، شعار Discourse في الزاوية العلوية اليسرى غير قابل للنقر في السمة المخصصة لـ meta (أعتقد أن هذه الحالة مستمرة منذ أشهر) :grimacing:

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

لا، لم نقم ببساطة برسم خرائط لبعض الأيقونات مثل circle و square إلى إصدار Lucide. أو بالأحرى، قمنا برسم خرائط فقط لإصدار الخط (stroke version) من Fontawesome لهذه الأيقونات (far-circle، إلخ). قد تكون هناك حالات أخرى نحتاج فيها إلى مواصلة تحسين عملية الرسم الخرائطي.

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

لا يمكنني إعادة إنتاج هذه المشكلة، هل لديك تفاصيل أكثر؟

3 إعجابات

أنا متحمس، ما الفرق الذي تجلبه Blocks والذي لا توفره Plugin Outlets؟

إعجابَين (2)

تم اختبارها فقط على Chrome و Edge، وتحدث هذه المشكلة فقط على سطح المكتب:

يغطي قسم تبديل الشريط الجانبي الشعار، مما يجعله غير قابل للنقر.

(ونعم، يبدو القلب المحدد المفضل سيئًا :broken_heart: )

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

لا أحب على الإطلاق الأيقونة الحالية لـ “تم الرد عليه”:

أفترض أنها مؤقتة نظرًا لعدم وجود بديل مناسب لـ FA في مكتبة Lucide؟


الأيقونات في قائمة المواضيع صغيرة جدًا، جدًا:

تعديل: الأمر نفسه ينطبق على السمات الأخرى.


تبدو أيقونات التصنيفات أصغر من أيقونات الوسوم، وهذا غريب. أشعر أن حجم أيقونات التصنيفات المختار كان مقيدًا بشكل عام بأسلوب التصنيفات المضمنة، مما يترك مساحة أقل… :thinking:

3 إعجابات

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

يبدو أنه لا يوجد حشوة للجسم في الرسائل الخاصة:

إعجابَين (2)

أتفق!

وأوافق على ما سبق، فالقلب المجوف ليس جيدًا.

إعجابَين (2)

همم… شيء واحد أشعر أنه يمكن تغييره هو أيقونة الدردشة من message-square-text إلى message-square؟ الخطوط تبدو مشتتة قليلاً.

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

شكرًا لك على جميع التعليقات حول الأيقونات! لقد أضفت موضوعًا مخصصًا للمجموعة: أيقونات Lucide في Discourse.

نأمل أن نتمكن من جمع المزيد من التعليقات هناك ومواصلة تحسين المجموعة تدريجيًا.

أتفق أن الأيقونات غير مقروءة تقريبًا عند الحجم الحالي .74em. إنها تحتاج إلى حوالي 1em.

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

هل هو خيالي أم أن الحشو العمودي داخل قائمة المواضيع زاد اليوم؟ إما أن الكثافة أقل، أو أنني أكثر كثافة.

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

لاحظت هذا أيضًا، وحاولت التراجع عنه يدويًا (لأنني أفضل كثافة المعلومات على المظهر) لكن دون جدوى :frowning:

الفرق الرئيسي من منظور التصميم هو أن “منفذ الإضافة” (PluginOutlet) هو نقطة إدراج. تقوم بحقن مكونك مباشرةً في قالب أساسي. كل تخصيص في الواقع يغير هيكل التطبيق.

أما “منفذ الكتلة” (BlockOutlet) فهو إطار تخطيط. تقوم بتسجيل مكون واحد أو أكثر مع هذا الإطار. ثم تحدث التخصيصات داخل هذا الإطار بدلاً من قوالب التطبيق. لذا نحصل على تخطيطات أكثر قابلية للتنبؤ وثباتًا.

الفرق الكبير الآخر هو أن واجهة برمجة تطبيقات الكتل (Blocks API) يمكنها التعامل مع الطيف الكامل لمنطق العرض الشرطي. لا تحتاج إلى إضافته إلى مكونك. يمكن لمكون الكتلة أن يركز حصريًا على المحتوى والقالب، ولدينا منطق متكرر أقل بكثير.

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

إذا كان أي شخص يرغب في الحصول على قائمة مواضيع أكثر إحكاما، فهذا ما نجح معي:

.topic-list .topic-list-data {
  padding: 8px 0px;
  line-height: 0px;
}

يحتوي السمة الجديدة التي تحمل علامة Meta التجارية على مسافات زائدة عن اللذوق على الجوال.

  • مسافة قدرها 1s بين حافة الشاشة وحاوية المحتوى.
  • مسافة ثانية بين حاوية الصفحة والمحتوى الفعلي.

لا تحتوي السمات الأخرى على هذه الفجوة الأولى بين حافة الشاشة وحاوية المحتوى.

هذا يجعل المحتوى يبدو «مضغوطًا» أفقيًا بعض الشيء؛ فهناك مساحة ضئيلة جدًا. ويظهر ذلك بوضوح في صفحة «منشوري» مقارنة بـ Horizon:

تتيح سمة Horizon عرض محتوى أكثر بكثير دون فقدان قابلية القراءة.

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

انتقادات أخرى صغيرة:

الأيقونة في الزاوية العلوية اليسرى ليست دائرية تمامًا؛ فهي مسطحة قليلاً.
image image

تسمح نافذة منبثقة للفئة/الوسم بتسرب منطقة النص قليلاً (لا أعتقد أن هذا مرتبط بهذه السمة):

. سيكون من الأفضل لو غطتها تمامًا.

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