تعليقات مكون سمة "وضع القارئ"

لقد قمت مؤخرًا بتثبيت مكون سمة هنا في Meta يقدم “وضع القارئ” عند عرض موضوع.

يوجد الزر لتبديل هذه الميزة في الجزء العلوي من عناصر تحكم المخطط الزمني للموضوع:

سيؤدي النقر عليه إلى وضع الموضوع في “وضع القراءة”، مما يغطي معظم واجهة المستخدم بغطاء معتم قليلاً لتقليل التشتيت.

بعض الأشياء الأخرى التي تحدث هي تطبيق مرشح على جميع الصور الرمزية والصور، وتحويلها إلى صورة متدرجة الرمادي.

إليك تسجيل شاشة له أثناء الاستخدام.

وضع القارئ|فيديو


المكون متاح على السمات التالية المثبتة هنا في Meta:

  • سمة الهواء
  • افتراضي
  • افتراضي (عرض كامل)
  • بالكامل
  • سمة Meta ذات العلامة التجارية
  • Redditish
  • سمة سام البسيطة

هذا لا يزال قيد العمل وأقدر أي تقارير عن الأخطاء أو التعليقات يتم نشرها هنا :ابتسامة:

28 إعجابًا

رائع!\n\nلاحظت أن بعض تغييرات التنسيق تسبب “قفزة” في التخطيط عند النقر على الزر. هل تم تعيين بعض العناصر على display: none;؟ أو هل تتغير بعض أحجام الخطوط؟\n\nهل سيكون من الممكن جعل الزر “رماديًا” (أو visibility: hidden;) للعناصر غير الضرورية، دون التسبب في أي تغيير في التخطيط؟

4 إعجابات

نعم، كانت هذه مشكلة واجهتها.

من الناحية المثالية، سيتم إغلاق الشريط الجانبي بشكل متحرك، كما يحدث عند النقر فوق تبديل الشريط الجانبي بشكل طبيعي.

نظرًا لأن المكون الخاص بي يغلق الشريط الجانبي، ولكنه لا يحركه، فقد تبين أن هذا يسبب اهتزازًا.

يمكنني إما:

  • تحريك الشريط الجانبي ليغلق
    • لست متأكدًا من كيفية القيام بذلك، حيث أعتقد أنه يتم عبر JavaScript + CSS؟
  • عدم إغلاق الشريط الجانبي
إعجاب واحد (1)

ماذا عن visibility: hidden;؟ أو opacity: 0;؟ بحيث لا يزال موجودًا ومضمنًا في التخطيط، ولكنه غير مرئي؟ أعتقد أننا سنحتاج إلى شيء لمنع النقرات/التركيز عليه أيضًا؟ أو ربما نجعله مرئيًا مرة أخرى عند التحويم/التركيز عليه؟ :face_with_monocle:

إحدى الطرق الآمنة نسبيًا هي محاكاة تفاعل المستخدم:

if(document.body.classList.contains("has-sidebar-page")){ // الشريط الجانبي مرئي
  document.querySelector(".btn-sidebar-toggle").click()
}
إعجاب واحد (1)

هل تتحدث عن الشريط الجانبي؟

إذا كان الأمر كذلك، فأنا في الواقع أقوم بتبديله مغلقًا باستخدام المكون الخاص بي، لذا فهو يستخدم نفس الطريقة الأساسية مثل هذا:

  @action
  toggleReaderMode() {
    if (this.sidebarIsOpen && !this.isActive) {
      getOwner(this).lookup("controller:application").set("showSidebar", false);
      this.readerModeActive = !this.readerModeActive;
    } else {
      getOwner(this).lookup("controller:application").set("showSidebar", true);
      this.readerModeActive = false;
    }
  }

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

إعجابَين (2)

صحيح، لكن هذا يسبب تحولاً في التخطيط. لذا أفكر في إبقائه مفتوحًا، ولكن جعله غير مرئي؟

4 إعجابات

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

أعتقد أنني افترضت أنه إذا كان مفتاح تبديل شريط التمرير يسبب تحولًا، فإن وضع القارئ الذي يفعل الشيء نفسه لن يهم.

يمكنني محاولة عدم تبديل شريط التمرير ونشر مقطع فيديو هنا لأريك.

إعجابَين (2)

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

5 إعجابات

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

لكن.

DiscourseHub و iPad والموضوع الافتراضي: كل ما يفعله هو توسيع الشريط الجانبي.

تعديل.

حسنًا ، يجب أن أفتح الشريط الجانبي أولاً. بعد ذلك يحدث السحر. باستثناء … أنا لا أستخدم الشريط الجانبي هنا :smirking_face:

إعجابَين (2)

يبدو رائعًا!

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

5 إعجابات

إنها ميزة رائعة جدًا. عمل ممتاز يا جوردان! :+1:

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

ما أعنيه هو نوعًا ما مثل هذا:

chrome_oW7GzSDCWw

3 إعجابات

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

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

إعجابَين (2)

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

3 إعجابات

تم دمج آخر التغييرات للحد من الحركة وتحسين الانتقال في هذا المكون. شكرًا على الملاحظات حتى الآن :smile:

4 إعجابات

أحب هذا كثيراً!

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

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

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

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

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

هذا منطقي بالنسبة لي :+1:

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

اختصار لوحة المفاتيح (CTRL-شيء ما) للتبديل سيكون رائعًا هنا (ويمكننا تعليمه عند التمرير فوق الزر)

لست من محبي تحويل الصور إلى الأبيض والأسود، أشعر أنني أفقد معلومات.

أنا مع إزالة الكثير من العناصر مثل “عدد الإعجابات” وزر الرد، وربما حتى الصور الرمزية.

6 إعجابات

تحسين رائع يا جوردان! إنها تجربة أفضل بكثير ألا ترى أي تحول في الحركة الآن وبعض الرسوم المتحركة لتنعيم الانتقال. :+1:

أتفق مع اقتراحات سام؛ إذا أخفينا المعلومات غير الضرورية، فإن عودة اللون ستكون حلاً وسطًا جيدًا. يمكن أن يكون هذا خيارًا، على الرغم من ذلك. :thinking:

3 إعجابات

نعم، نعم، نعم!!!

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

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

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

أو، انتقل تلقائيًا إلى الموضوع التالي في قائمة الموضوعات الأخيرة التي زرتها!

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