مفهوم مكون السمة في F NAV

مرحباً :waving_hand:

أعمل على مكون سمة جديد يعتمد على شريط علامات التبويب Discourse للجوال.

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

  • قائمة هامبرغر: تفتح علامة التبويب قائمة هامبرغر
  • الإشعارات: تضيف الإشعارات إلى علامة التبويب
  • البحث: يفتح البحث السياقي /search

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


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


هذا هو العرض التوضيحي: https://discourse.theme-creator.io/theme/Don/f-nav

هذا كل شيء في الوقت الحالي…

ما رأيك؟ شكراً :slightly_smiling_face:

14 إعجابًا

أحببته. عمل رائع مرة أخرى.

أين سيكون زر الدردشة؟

4 إعجابات

هذا يبدو رائعًا حقًا! :clap:

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

حول الروابط داخل القائمة:

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

لست متأكدًا من اللوحة السفلية. :thinking:
أعتقد أنني لست معتادًا على النظر إلى الأسفل.

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

تفتح قائمة الهامبرغر بتأثير وميض قصير.

آمل أن يساعد هذا التعليق. :+1:

3 إعجابات

شكراً على الملاحظات :hugs:

حسنًا، أود إنشاء علامات تبويب متعددة في قائمة التنقل الأمامية (F NAV) تحتوي على الرسائل والدردشة. شيء يشبه مجلدات تطبيقات الهاتف المحمول. لذلك سترى ما بداخلها ويمكنك فتحها في قائمة DMenu على سبيل المثال. تعرض بشكل منفصل شارات غير مقروءة عند فتحها، وإلا سترى مؤشرًا مجمعًا للمحتوى غير المقروء. يجب أن تحظى الرسائل بالأولوية كما ذكر Arkshine، لذلك سيتم فتحها في نافذة منبثقة لعرض الرسائل.


أفكار رائعة! أعتقد أن الرسائل يجب أن تكون في قائمة التنقل الأمامية (F NAV) كما ذكرت أعلاه، ولكن أعتقد أنها ستكون قابلة للتخصيص. :thinking:


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

تعديل: لقد أضفتها. الآن تعيد التوجيه إلى /u/username/notifications?filter=unread إذا كان هناك إشعار غير مقروء.


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

شكرا :slightly_smiling_face:

4 إعجابات

عمل رائع شكراً على المكون سأجربه.

لقد اكتسب مظهراً أبسط خاصة في قسم الرأس على الهاتف المحمول. أحببته هكذا، لقد اختفى الازدحام هناك وأصبح مظهراً أبسط. معظم التطبيقات المعروفة تستخدمه الآن بهذه الطريقة، على سبيل المثال: x.com. الميزات التي أرى أنه يمكن إضافتها:

  • يمكن إضافة زر موضوع جديد إلى الأداة (widget).
  • عندما أنقر على منشور وأدخله، بدلاً من زر الصفحة الرئيسية، يمكن أن يكون هناك أيقونة “رجوع”. عندما ينقر المستخدم على هذه الأيقونة، يمكنه العودة إلى آخر مكان تركه.
  • عندما أنقر على منشور، يمكن أن يتغير زر الصفحة الرئيسية المحدد النشط. يمكن أن يكون شفافاً.
  • يمكن أن يكون هناك عدد الرسائل غير المقروءة على أيقونة الصفحة الرئيسية. لست متأكداً من هذا، قد يجعله يبدو مزدحماً أكثر أو كبديل:

@Don

إعجابَين (2)

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

شكراً على الملاحظات @ozkn :slight_smile:
لقد أضفت تغيير أيقونة المنزل على مسارات الموضوع ومؤشر النقطة الجديد أو المحدث للموضوع. ربما ستكون فكرة جيدة إضافة مكون سمة الموضوع الجديد أو المحدث اللاصق… لقد قمت أيضًا بتغيير موضع وحجم شارة الإشعار (جعلتها أصغر والرقم أكثر جرأة).

4 إعجابات

عمل رائع @Don. مكون سمة رائع حقًا. لقد اكتشفت بعض المشكلات على نظام Android حيث لا تعمل الإيماءات بشكل جيد، خاصة في PWA. قد يكون الأمر خاصًا بالهواتف وليس بـ Discourse ولكنه موجود على الرغم من ذلك، لذا يسد هذا الفجوة، خاصة بالنسبة لنظام iOS. يبدو أن هناك مجالًا لعنصر تنقل آخر مع المساحة المتاحة في شريط التنقل F.

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

ماذا يرمز حرف F؟

أعتقد تذييل؟ :wink:

3 إعجابات

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

إذا تم تمكين الدردشة:

4 إعجابات

جميل. لا أطيق الانتظار لبدء استخدامه.

عندما لا يكون المستخدم مسجلاً دخوله، لا يتغير شيء، صحيح؟

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

مرحباً :wave: بعض التقدم هنا… لقد قمت بإنشاء فقاعات الإشعارات، وأجريت بعض التعديلات على إشعارات الأرقام وغيرها… :slightly_smiling_face:

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

تتغير فقاعة الإشعارات حسب ما إذا كانت عاجلة أم لا.

إشعارات علامة التبويب المتعددة العاجلة خضراء وتبدو هكذا. :arrow_down_small:

موسعة


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

موسعة


إشعار واحد

5 إعجابات

مرحباً :wave:

بعض التحديثات الإضافية هنا… لقد أعدت بناء حالة التبويبات النشطة، وهي تعمل الآن بشكل أفضل مع وجهات التبويبات الديناميكية أيضاً.

لقد أصلحت ذلك… شكراً :slightly_smiling_face:

الآن هذا خيار ويمكن للمسؤولين اختيار ما يفضلونه.
notificationToRoute: يعيد التوجيه إلى صفحة الإشعارات
notificationMenu: يفتح قائمة الإشعارات


لقد أضفت هذه التغييرات إلى منشئ الثيمات، لذا فهي تعمل الآن على هذا النحو.

إعجابَين (2)

عمل رائع يا @Don أعرف أن هذا ليس مكون سمة F NAV الخاص بك ولكنه سيكون رائعًا إذا كان هناك x لإغلاق نافذة البحث عند فتحها. ما لم أكن أفتقدها، وهو أمر ممكن بمجرد النقر فوق أيقونة البحث إذا قررت عدم البحث، فليس من الجيد إغلاق النافذة.

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

مرحباً برايان :wave: لست متأكداً من أنني فهمت. عندما تنقر على أيقونة البحث، سيتم إعادة توجيهك إلى صفحة /search حتى تتمكن من العودة باستخدام التنقل أو الإيماءة في المتصفح/الجوال.


بعض التحديثات مرة أخرى… قررت عدم حذف أيقونات الرأس، فقط إخفاؤها باستخدام CSS. بالأمس، عندما قمت بإصلاح رسوم متحركة لفتح قائمة الهامبرغر، اكتشفت أن هذا سيكون أسهل وأنظف وأكثر أمانًا، أعتقد أنه بهذه الطريقة يمكننا تشغيل النقر الافتراضي على أيقونات الرأس. الآن تعمل قائمة الهامبرغر وقائمة الإشعارات والبحث بهذه الطريقة. أيقونة الدردشة الافتراضية في الرأس مخفية أيضًا بواسطة CSS لأنه في صفحات /chat ستظهر في الرأس.

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

يمكن للمسؤولين ببساطة إنشاء/إزالة/تغيير علامات التبويب واختيار إحدى الوظائف أو إضافة وجهة مخصصة إلى علامة التبويب.
الوظائف :arrow_down_small:

على سبيل المثال، إضافة علامة تبويب لإنشاء موضوع ستبدو ببساطة هكذا.


Screenshot 2024-12-12 at 18.55.50

3 إعجابات

مرحباً @Don بياني غير مترابط إلى حد ما، :confused: تعليقي لا علاقة له بمكونك. أعتقد أنه سيكون من المفيد وجود علامة x لإغلاق واجهة البحث إذا قررت عدم البحث بعد الفتح أو النقر عن طريق الخطأ. غالباً ما أجد نفسي أعود من الصفحة أو Discourse عن طريق الخطأ. :exploding_head:

تبدو رائعة، لا أطيق الانتظار لتجربتها!

إعجابَين (2)

المكون الخاص بالمظهر جاهز :tada:
شكراً للجميع :hugs:

3 إعجابات

نفس المشكلة كما في مشكلة سابقة مشابهة إلى حد ما: استخدام DiscourseHub صعب حقًا. الآن هو فقط للمتصفحات وتطبيقات الويب التقدمية (PWAs).

يعمل بشكل جيد بالنسبة لي في DiscourseHub.