Deslizar para el chat

Contribuir Característica
1

Hola :waving_hand:

Pequeña sugerencia para la ergonomía móvil del chat de Discourse: ¿está previsto integrar un gesto de deslizamiento (swipe de izquierda a derecha) desde un canal o un DM para mostrar rápidamente el panel lateral (lista de canales / lista de mensajes directos)? Esto haría que la navegación en pantallas pequeñas sea mucho más fluida. Dado que están trabajando en un nuevo editor para facilitar el uso en el móvil con una sola mano, pensé que lo mismo podría aplicarse al chat :sweat_smile:

7 Me gusta
2

No hay planes actuales al respecto, pero vale la pena debatir más sobre qué tipo de interacciones de deslizamiento podrían facilitar la navegación por un sitio como este.

6 Me gusta
3

el gesto de deslizar a la izquierda/derecha es complicado porque en varios dispositivos corresponde al gesto de retroceder/avanzar del navegador

2 Me gusta
4

Creo que Don adoptó un buen enfoque en Topic Preview Modal; no interfiere con el comportamiento predeterminado y lo encontré muy útil.

3 Me gusta
5

He creado un script para el gesto de deslizamiento (swipe) que permite mostrar la barra lateral deslizando de izquierda a derecha, y de la misma manera en el chat para mostrar la lista de conversaciones cuando se está en una conversación. El objetivo es mejorar la experiencia de usuario. Hay que copiar el script en un componente asignado a tu tema en common\head. Después, creo que siempre hay posibilidad de mejorarlo

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

    let startX = 0;
    let startY = 0;

    // Uso de 'window' para asegurarse de capturar el gesto antes que el chat
    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. ¿ESTAMOS EN UN CANAL DE CHAT?
        // Verificamos si la URL contiene las palabras clave típicas de un canal de chat de Discourse
        const currentUrl = window.location.pathname;
        const isInChatChannel = currentUrl.includes('/chat/c/') || currentUrl.includes('/chat/channel/');
        
        if (isInChatChannel) {
          // Primero intentamos hacer clic en el enlace de regreso si está estandarizado
          const chatBackBtn = document.querySelector('.chat-channel-header a, a[href="/chat"]');
          if (chatBackBtn) {
            chatBackBtn.click();
          } else {
            // Método infalible: le pedimos al navegador que retroceda una página
            window.history.back();
          }
          startX = 0;
          return; // Detenemos el script aquí
        }

        // 2. SI ESTAMOS EN OTRA PARTE DEL FORO (Apertura del menú)
        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>