علامة تبويب التنقل المحمول F NAV

:information_source: ملخص F NAV - علامات تبويب التنقل للجوال
:eyeglasses: معاينة Theme Creator
:hammer_and_wrench: المستودع GitHub - VaperinaDEV/f-nav-for-mobile: F NAV - Mobile Navigation Tabs
:question: دليل التثبيت كيفية تثبيت سمة أو مكون سمة
:open_book: جديد في سمات Discourse؟ دليل المبتدئين لاستخدام سمات Discourse

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

مرحباً :wave:

من قبل، قمت بإنشاء Dev موضوع له كمفهوم لمكون سمة، والآن أصبح في حالة ليكون Theme component.

:warning: يرجى التأكد من اختباره قبل الاستخدام المباشر.

بعض المعلومات هنا حول المكون: F NAV - Theme component concept


حول مكون السمة. قرأت الكثير من المشاركات حول أنه سيكون من الرائع جعل شريط علامات تبويب Discourse للجوال أكثر ديناميكية وإضافة القدرة على التعامل مع الإشعارات وما إلى ذلك… يمكن لـ F-NAV القيام بذلك وأكثر…

رأس الصفحة

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

الإعدادات

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

هناك بعض الإعدادات لإظهار/إخفاء أيقونات الرأس الافتراضية وهو أمر مفيد عندما لا ترغب في وضع علامة تبويب محددة في F NAV بحيث تظهر على الرأس.

علامات التبويب

من الممكن ربط وظائف مختلفة بعلامات التبويب. تسمح هذه الوظائف لكل علامة تبويب بالتغيير ديناميكيًا.

Screenshot 2024-12-13 at 13.06.14

تشمل هذه التغييرات:

الوظائف

home


hamburger (يفتح قائمة الهمبرغر)


multi

علامة تبويب متعددة

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

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

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


موسعة

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

موسعة

إشعار فردي


message

  • يضيف زر رسالة مع إشعارات والنقر عليه يفتح نافذة منبثقة للرسائل لإلقاء نظرة سريعة

chat

  • يضيف زر الدردشة مع وظائفه

notificationToRoute

  • إذا كان “عدم الإزعاج” نشطًا، فستتغير أيقونة الجرس إلى أيقونة جرس مع خط مائل وسيظهر وقت “عدم الإزعاج حتى”
    Screenshot 2024-12-13 at 13.02.35

  • يعيد التوجيه إلى صفحة إشعارات الملف الشخصي متجاوزًا قائمة الإشعارات

    • إذا كان هناك إشعار، فإنه يعيد التوجيه إلى /notifications?filter=unread
    • إذا لم يكن هناك إشعار، فإنه يعيد التوجيه إلى /notifications
    • إذا كان هناك محتوى قابل للمراجعة، فسيظهر علم أحمر ويعيد التوجيه إلى /review

notificationMenu

  • إذا كان “عدم الإزعاج” نشطًا، فستتغير أيقونة الجرس إلى أيقونة جرس مع خط مائل وسيظهر وقت “عدم الإزعاج حتى”
    Screenshot 2024-12-13 at 13.02.35

  • يفتح قائمة الإشعارات


search

  • يعيد التوجيه إلى صفحة /search المستندة إلى السياق

الإعدادات

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

  • name: هذا فقط لتحديد علامة التبويب بسهولة في الإعدادات.
  • icon: يضيف أيقونة إلى علامة التبويب. ملاحظة: إذا اخترت وظيفة، فقد تكون هناك أيقونات لا يمكن تجاوزها بهذا الإعداد.
  • destination: يضيف وجهة لعلامة التبويب المخصصة الخاصة بك. ملاحظة: إذا اخترت وظيفة ستتعامل مع الوجهة، يمكنك تركها فارغة. يتعامل المكون مع وجهات /my/... تلقائيًا وتحويلها إلى /u/username/... حتى يمكن إضافة الحالة النشطة لعلامات التبويب بشكل صحيح.
  • function: اختر وظيفة لعلامة التبويب.

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

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


Screenshot 2024-12-12 at 18.55.50


التقدير: شريط علامات تبويب Discourse للجوال وشكرًا لكل من قدم ملاحظات في موضوع مفهوم مكون سمة F NAV. :heart:

21 إعجابًا

هذا رائع ويجب أن يكون السلوك الافتراضي حقًا وسيوفر إبهامي من محاولة الوصول إلى الجزء العلوي البعيد من شاشتي :mobile_phone:.

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

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

لم أر مكون سمة شريط علامات التبويب الأصلي الرسمي، لذا سألقي نظرة عليه.

7 إعجابات

شكرا على المكون @don لقد كنت هنا لفترة طويلة، أنت تقوم بعمل رائع حقًا.

3 إعجابات

يجب أن يكون هذا خطأ

إعجابَين (2)

أه شكرًا، هذا يتعلق بسمة FKB. سأقوم بتحديث السمة.

3 إعجابات

إليك الحل: Compatibility: Adds support for F NAV theme component by VaperinaDEV · Pull Request #51 · VaperinaDEV/fkb-pro-theme · GitHub
يرجى تحديث سمة FKB وتمكين هذا الإعداد الجديد.
Screenshot 2024-12-14 at 9.17.02

3 إعجابات

مرحباً @don، كيف يمكنني استخدام أيقونات fa-regular كما في الصورة؟ لقد أجريت بعض الأبحاث ولم أجد أي معلومات حول كيفية القيام بذلك بعد التبديل إلى Fontawesome 6.

3 إعجابات

مرحباً :waving_hand: يجب أن يعمل مع far-bell. كانت لدي خطط لجعلها منتظمة إلى صلبة عند تنشيط علامة التبويب، سأتحقق من ذلك ولكن إذا كنت أتذكر بشكل صحيح فإن أيقونة المنزل لديها فقط شكل صلب في الإصدار المجاني. :thinking:

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

شكراً، لقد قمت بحل مشكلتي. @Don

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

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

إعجابَين (2)

أعتقد أنه يمكننا إضافته إلى دالة أفكر فقط في مكان وضع هذا. يمكن أن تكون هذه علامة تبويب واحدة ويمكنك إضافتها إلى التنقل الذي يظهر فقط في DiscourseHub.

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

في الواقع، يعمل DiscourseHub بشكل جيد مع السحب لأسفل. لم أكن أعرف ذلك فحسب.

إن مسألة زر الصفحة الرئيسية/الرجوع أكبر لأنني بحاجة لشرحها للآخرين.

3 إعجابات

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

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

هذه هي الطريقة التي يجب أن تكون عليها إذا كنت ترغب في تعطيل زر الرجوع والاحتفاظ بالمنزل في كل مكان.

3 إعجابات

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

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

3 إعجابات

يتم طي أيقونة القلم ومواضيع التنقل مع شريط التنقل.

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

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

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

لذا، هل من الممكن الاحتفاظ بشريط القائمة دائمًا في الأعلى؟

آمل أن يكون وصفي مفهومًا.

إعجابَين (2)

مرحباً ماكس :wave:

هل يمكنك التقاط بعض لقطات الشاشة / تسجيل الشاشة حول المشكلة؟

في /chat، نقوم بإخفاء التنقل ونستخدم رأس الدردشة الافتراضي. لست متأكداً من أن عرض التنقل في الدردشة يستحق العناء لأنه قد يسبب مشاكل في المتصفحات المختلفة ربما، لكنني سأتحقق من ذلك.

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

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

اللقطة الثالثة تعني أنه يجب عليّ النقر على زر الرجوع في الزاوية العلوية اليسرى لمغادرة واجهة الدردشة.



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

شكراً للتوضيح :blush:

نعم، أفهم. المشكلة هنا ليست في المكون ولكنها مشكلة أساسية عندما تكون قد قمت بتمكين إعداد تقليل الحركة على جهازك. هل هذا ممكّن على جهازك؟

عندما يتم إيقاف تشغيل تقليل الحركة. فإن header-cloak (المنطقة المظلمة خلف القائمة) تمنع إجراء النقر.

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

إذا كان هذا هو الحال، يمكنك إغلاق القوائم بأمان باستخدام إيماءات السحب أيضًا.

أعتقد أن لدي موضوعًا حول هذه المشكلة في مكان ما :thinking:

هذا هو رأس الدردشة الافتراضي.

سأتحقق مما إذا كان بإمكاننا تمكين التنقل هناك أيضًا.

3 إعجابات