اقتراحات شريط أزرار المتعـــارف

[Don]

أهلاً،

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

قائمة السياق تغطي شريط أزرار المحرر.

التحديد وقائمة السياق تغطي قائمة خيارات النافذة المنبثقة.

---

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

سطح المكتب

الجوال

بهذه الطريقة، لن تغطي عناصر التحديد وقائمة السياق الأصلية هذا الجزء.

عام > CSS

.d-editor-textarea-wrapper {
  .d-editor-button-bar {
    display: flex;
    overflow-x: auto;
    background: var(--primary-very-low);
    .btn,
    .select-kit {
      flex: 1;
      color: var(--primary-high);
    }
    // Popup menu
    .select-kit.dropdown-select-box.toolbar-popup-menu-options {
      .select-kit-row {
        .d-icon {
          color: var(--primary-high);
        }
        .texts {
          .name {
            color: var(--primary-high);
          }
        }
      }
    }
  }
}

الجوال > CSS

#reply-control {
  .submit-panel {
    margin-top: 1em;
  }
}

.d-editor-textarea-wrapper {
  flex-direction: column-reverse;
  .d-editor-input {
    // Bigger padding on bottom to prevent the last line selection covers the buttons bar
    padding-bottom: 1.75em;
  }
  .d-editor-button-bar {
    border-top: 1px solid var(--primary-low);
    border-bottom: none;
    // Popup menu
    .select-kit.dropdown-select-box.toolbar-popup-menu-options {
      position: static;
      .select-kit-filter {
        display: none;
      }
      .select-kit-body {
        transform: none !important;
        top: auto !important;
        bottom: 0 !important;
        flex-direction: row;
        justify-content: flex-start;
        max-width: 100%;
        width: 100% !important;
        overflow-x: auto;
        background: var(--primary-very-low);
        border: none;
      }
      .select-kit-row {
        padding: 0.5em 0.65em;
        border: 1px solid transparent;
        border-top: none;
      }
      .select-kit-collection {
        display: contents;
      }
    }
  }
}

[hoangphuctran93 (Hoàng Phúc Trần)]

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

[nathank (Nathan Kershaw)]

نعم، لقد واجهت نفس المشاكل وهذا سيكون تحسينًا ممتازًا.

أشعر أن مكون سمة قادم…

[jidanni (Dan Jacobson)]

يبدو رائعًا. يرجى الاختبار أيضًا على الأجهزة التي لديك فيها ثلاثة أسطر فقط في نافذة الإدخال. ليس حوالي 12 كما في لقطة الشاشة الأولى. Such a tiny window to edit here on a cell phone

[Jagster (Jakke Lehtonen)]

لقد أعجبتني تلك الحلول حقًا، لكنها لم تعد تعمل بشكل جيد مع مساعد الذكاء الاصطناعي

[Heliosurge (Dan DeMontmorency)]

مرحباً دون،
كنت أتساءل عما إذا كان لديك حل للوحة مفاتيح Android للجوال.
على Google Pixel 8 وربما هواتف Android أخرى. عند استخدام محرر الأكواد في Theme و #theme-component، تغطي لوحة المفاتيح المنطقة التي يتم الإدخال فيها إذا كان هناك الكثير من الأكواد والمناطق السفلية. يحدث هذا أيضًا في محرر الأكواد لقوالب النماذج الجديدة.
إذا كنت أفهم بشكل صحيح، يمكن إصلاح هذا على الأرجح عن طريق إضافة حشوة إلى الأسفل؟ بحيث تغطي لوحة المفاتيح المنطقة الفارغة فقط؟

[Don]

أهلاً

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

الهاتف المحمول / CSS

.fk-d-menu {
  &[data-identifier=ai-composer-helper-menu] {
    position: fixed;
    display: block;
    max-width: 730px !important;
    width: 100%;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%);
    animation: none;
    .fk-d-menu__inner-content {
      background-color: transparent;
      border: none;
      box-shadow: none;
    }

    .ai-composer-helper-menu {
      width: 100%;
      .ai-custom-prompt {
        &__input[type=text] {
          width: 100%;
        }
      }
      .ai-helper-loading {
        display: flex;
        justify-content: center;
      }
      .ai-helper-button-group {
        justify-content: center;
      }

      &:not(.is-expanded) {
        position: unset;
        background: none;
        width: 100%;
        right: 0;
        padding: 0;
        ul {
          position: absolute;
          right: 8px;
          button {
            background: var(--secondary);
            border: none;
            border-radius: var(--d-button-border-radius);
            box-shadow: 0 0 0 1px var(--primary-medium);
            width: 4.5em;
            height: 1.7em;
            margin-top: calc(var(--header-offset) + 8px);
            animation: none;
            .d-icon {
              margin-right: 0.45em;
            }
            .d-button-label {
              display: block;
              color: var(--primary-high);
              font-weight: 600;
            }
          }
        }
      }
    }
  }
}

#reply-control.open {
  height: 100%;
}

---

@Heliosurge، لست متأكدًا من هذا ولكن إذا كانت مشكلة شائعة أو مشكلة أساسية، فأعتقد أنه يجدر فتح موضوع UX جديد ببعض لقطات الشاشة / الفيديو…

[Jagster (Jakke Lehtonen)]

إنه يعمل على iPhone، لكن الترس يفتح بشكل غريب. يفتح داخل شريط الأزرار.

[Heliosurge (Dan DeMontmorency)]

حسناً شكراً لك يا دون!

تمت إضافة هذا الرمز لدعم مكون عدد الأحرف.

CSS للجوال

//* ينقل عدد الأحرف فوق شريط المؤلف السفلي
.character-counts {
    bottom: 2.5em !important;
}

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

النتيجة

[Jagster (Jakke Lehtonen)]

واعتقدت أنك نقلت شريط الأدوات لأعلى. ولكن هل يجب أن يظل لأسفل؟ حسنًا ، في iPhone يكون لأعلى ، ولكنه قابل للتمرير.

[Don]

@Jagster

تفتح الترس بشكل غريب. يفتح داخل شريط الأزرار.

أعتقد أن هذا مقصود. انظر إلى آخر فيديو في المنشور الأصلي.

@Jagster

واعتقدت أنك نقلت شريط الأدوات إلى الأعلى. ولكن يجب أن يظل في الأسفل؟

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

[Jagster (Jakke Lehtonen)]

إضافي؟ حسنًا، لقد استبدلت قسم الهاتف المحمول بالكامل

تعديل

لدي شريط الأزرار حيث يجب أن يكون ويعمل كما ينبغي بعد استخدام جميع المقتطفات، من OP والجديد. لكن الآن ليس لدي أيقونة الذكاء الاصطناعي

تعديل2

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

ولا تفعل عجلة iPad أي شيء.

هل يبدو هذا أفضل من تلك الأشياء المجنونة السابقة؟

[Don]

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

@Don

.d-editor-textarea-wrapper {
  flex-direction: column-reverse;

سأبحث عن حل جديد لجعله يعمل وإعادة تصميم الأشياء قليلاً…

[Jagster (Jakke Lehtonen)]

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

[sam (Sam Saffron)]

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

[Jagster (Jakke Lehtonen)]

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

ومع ذلك، أفتقد الخيارات الأخرى التي يقدمها مساعد الذكاء الاصطناعي. ولكن بالتأكيد، حل الترس سهل الاستخدام بالفعل.

[Heliosurge (Dan DeMontmorency)]

مرحباً دون

أعتقد أن الكود قد يحتاج إلى تحديث حيث أن الشريط لم يعد يمرر للعناصر غير المرئية على الشريط.