لماذا كل هذه الخيارات في قائمة محرر التروس؟

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

4 إعجابات

أفترض أن هذا يجب أن يكون من ميتا بالنظر إلى لقطة الشاشة. :slight_smile:
على جهاز الكمبيوتر المحمول الخاص بي (Windows/Firefox) هذه هي شريط التنسيق الخاص بي:


هل هناك شيء يتعلق بالجهاز الذي تستخدمه قد يفسر الاختلاف؟

أنا أرى نفس الشيء مثل @JammyDodger، حتى عندما أقوم بتصغير نافذة المتصفح:

مرحباً،

هل هذا جهاز بشاشة لمس؟

4 إعجابات

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

لدي نفس المشكلة.

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

شكرا كريس!!!

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

كيفية القيام بذلك:

  1. انتقل إلى admin\u003ecustomize\u003ethemes ثم انقر فوق new
  2. قم بتسميته شيئًا مثل “Tiles button order”، وحدد “component” من القائمة المنسدلة، وانقر فوق إنشاء
  3. ثم يمكنك النقر فوق Edit CSS/HTML، ونسخ ولصق CSS أعلاه في common \u003e css

الآن تم إنشاء المكون وتحتاج إلى إضافته إلى السمة الحالية الخاصة بك

  1. عد إلى الصفحة السابقة، ثم قم بالتبديل من علامة التبويب المكونات إلى علامة التبويب السمات
  2. حدد السمة النشطة حاليًا (سيكون لها علامة تحقق خضراء)
  3. ضمن إعدادات السمة هنا، يوجد قسم Theme Components، وابحث عن المكون الجديد الخاص بك من القائمة المنسدلة ثم انقر فوق “add”
  4. :tada: الآن عند عودتك إلى الصفحة الرئيسية لمنتدى الخاص بك وتحديثها، يجب أن تكون نشطة.

من Tiles Image Gallery - #66 by awesomerobot
و Tiles Image Gallery - #68 by awesomerobot

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

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

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

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

13 إعجابًا

+1 كبير جدًا لهذا.

5 إعجابات

إعداد المستخدم سيكون أفضل. :slight_smile:

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

3 إعجابات

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

إعجابَين (2)

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

أضف ما يلي إلى قسم Common/Header في مكون جديد.

<script type="text/discourse-plugin" version="0.8">
  const container = Discourse.__container__;
  this.capabilities = container.lookup("capabilities:main");

  if (this.capabilities.touch) {
    api.onToolbarCreate(function(toolbar) {
      toolbar.addButton({
        id: "code",
        group: "insertions",
        preventFocus: true,
        trimLeading: true,
        action: "formatCode",
      });
    });
  }
</script>

أضف هذا إلى قسم Common/CSS. سيؤدي هذا إلى إخفاء زر النص المُنسق مسبقًا من القائمة المنبثقة.

.select-kit.dropdown-select-box.toolbar-popup-menu-options {
  li[data-value="applyFormatCode"] {
    display: none;
  }
}

4 إعجابات

@Don - شكراً جزيلاً لك. يعمل بشكل رائع.

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

سيكون هذا مفيدًا جدًا. لقد لاحظت أن معظم المستخدمين في موقعي ليس لديهم فكرة عن وجود أي خيارات تحت قائمة العجلة/الترس.

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

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

إذن السؤال الكبير ™ ليس ما لدينا أو ما ليس لدينا تحت قائمة الترس، ولكن هل يجب أن نضع كل شيء تحت الترس ونوفر تجربة كتابة أنظف :smirking_face:

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

بعد آخر تحديث لـ Discourse، يبدو أن الحل الذي قدمه @Don لم يعد يعمل، وزر تنسيق الكود مفقود أيضًا من قائمة الترس. تعديل: بإزالة المكون المخصص، يعود الزر للظهور في قائمة الترس. نحتاج الآن إلى حل بديل لإعادة الزر إلى قائمة الرأس على الهاتف المحمول.

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

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

مرحباً @sableraph :wave:

شكراً لك، لقد قمت الآن بإنشاء مكون سمة يعمل لهذا الغرض. GitHub - VaperinaDEV/touch-composer-code-button-to-insertions

إعجابَين (2)

شكراً على ردك!

لست متأكداً من كيفية تثبيت السمة، لكنني تمكنت من تعديل المكون الأصلي الخاص بك على النحو التالي:

<script type="text/discourse-plugin" version="0.8">
  const container = Discourse.__container__;
  this.capabilities = container.lookup("capabilities:main");

  if (this.capabilities.touch) {
    withPluginApi("0.8", api => {
        api.onToolbarCreate(toolbar => {
          toolbar.addButton({
            id: "code",
            group: "insertions",
            icon: "code",
            preventFocus: true,
            trimLeading: true,
            action: "formatCode",
          });
        });
      });
  }
</script>

يبقى تنسيق CSS كما هو.

يبدو أن هذا معطل في آخر تحديث لـ Discourse (v3.3.0-beta2). الزر موجود في شريط الأدوات ولكنه عند تحديده يطلق خطأ حول ‘formatCode’ ليست دالة. الزر المتبقي في ترس التروس يعمل بشكل جيد. ماذا تغير؟

استبدل

action: "formatCode",

بـ

action: () => toolbar.context.send("formatCode")

هذا يجب أن يحل المشكلة :+1:

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