اسحب للدردشة

مرحباً :waving_hand:

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

7 إعجابات

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

6 إعجابات

تعد إيماءات السحب إلى اليسار/اليمين معقدة لأنها تتداخل مع إيماءات الرجوع/التقدم في المتصفح على أجهزة مختلفة.

إعجابَين (2)

أعتقد أن النهج الذي اتبعه دون في Topic Preview Modal كان جيدًا؛ فهو لا يتعارض مع السلوك الافتراضي، وقد وجدته مفيدًا جدًا.

3 إعجابات

لقد أنشأت سكربت لخاصية السحب (Swipe) لإظهار الشريط الجانبي عند السحب من اليسار إلى اليمين، وكذلك في الدردشة لإظهار قائمة المحادثات عندما تكون داخل محادثة. الهدف هو تحسين تجربة المستخدم. يجب نسخ السكربت في مكوّن مرتبط بثيمتك داخل المسار common\head. بعد ذلك، أعتقد أن هناك دائمًا إمكانية للتحسين

<script>
  (function() {
    if (window.innerWidth > 768) return;

    let startX = 0;
    let startY = 0;

    // استخدام 'window' للتأكد من التقاط الحركة قبل الدردشة
    window.addEventListener("touchstart", function(e) {
      if (e.touches.length === 1) {
        startX = e.touches[0].clientX;
        startY = e.touches[0].clientY;
      }
    }, { passive: true, capture: true });

    window.addEventListener("touchend", function(e) {
      if (!startX) return;

      const touch = e.changedTouches[0];
      const deltaX = touch.clientX - startX;
      const deltaY = touch.clientY - startY;

      if (startX >= 10 && startX <= 120 && deltaX > 50 && Math.abs(deltaY) < 50) {
        
        // 1. هل نحن داخل قناة دردشة؟
        // نتحقق مما إذا كانت المسار (URL) يحتوي على الكلمات المفتاحية النموذجية لقناة دردشة في Discourse
        const currentUrl = window.location.pathname;
        const isInChatChannel = currentUrl.includes('/chat/c/') || currentUrl.includes('/chat/channel/');
        
        if (isInChatChannel) {
          // نحاول أولاً النقر على زر الرجوع إذا كان قياسي
          const chatBackBtn = document.querySelector('.chat-channel-header a, a[href="/chat"]');
          if (chatBackBtn) {
            chatBackBtn.click();
          } else {
            // طريقة لا تفشل أبدًا: نطلب من المتصفح الرجوع صفحة واحدة
            window.history.back();
          }
          startX = 0;
          return; // نوقف السكربت هنا
        }

        // 2. إذا كنا في مكان آخر على المنتدى (فتح القائمة)
        const sidebarSelectors = [
          ".btn-sidebar-toggle",
          ".sidebar-toggle",
          "button.header-dropdown-toggle.hamburger-dropdown",
          "#toggle-hamburger-menu"
        ];

        for (const selector of sidebarSelectors) {
          const btn = document.querySelector(selector);
          if (btn && btn.getBoundingClientRect().width > 0) {
            btn.click();
            break; 
          }
        }
      }

      startX = 0;
      startY = 0;
    }, { passive: true, capture: true });
  })();
</script>