Scorri per la chat

Contribuisci Funzionalità
1

Ciao :waving_hand:

Piccola proposta per l’usabilità mobile della chat Discourse: è previsto l’integrazione di un gesto di scorrimento (swipe da sinistra a destra) da un canale o da un DM per mostrare rapidamente il pannello laterale (elenco dei canali / elenco dei messaggi diretti)? Questo renderebbe molto più fluida la navigazione su schermi piccoli. Dato che state lavorando a un nuovo compositore per facilitare l’uso con una sola mano su mobile, pensavo la stessa cosa per la chat :sweat_smile:

7 Mi Piace
2

Al momento non ci sono piani in merito, ma vale la pena discutere ulteriormente su quali interazioni di scorrimento potrebbero facilitare la navigazione su un sito come questo.

6 Mi Piace
3

Il gesto di scorrimento verso sinistra/destra è complicato perché corrisponde al gesto di navigazione indietro/avanti del browser su diversi dispositivi.

2 Mi Piace
4

Penso che un buon approccio sia stato adottato da Don in Topic Preview Modal; non interferisce con il comportamento predefinito e l’ho trovato molto utile.

3 Mi Piace
5

Ho scritto uno script per il gesto di scorrimento (swipe) per far apparire la barra laterale scorrendo da sinistra a destra, e lo stesso vale per la chat, per far apparire l’elenco quando ci si trova in una conversazione. L’obiettivo è migliorare l’esperienza utente. È necessario copiare lo script in un componente assegnato al tuo tema in common\head. Successivamente, credo che ci siano ancora possibilità di migliorarlo

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

    let startX = 0;
    let startY = 0;

    // Uso di 'window' per essere sicuri di catturare il gesto prima della 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. SIAMO IN UN CANALE DI CHAT?
        // Verifichiamo se l'URL contiene le parole chiave tipiche di un canale di chat Discourse
        const currentUrl = window.location.pathname;
        const isInChatChannel = currentUrl.includes('/chat/c/') || currentUrl.includes('/chat/channel/');
        
        if (isInChatChannel) {
          // Proviamo prima a cliccare sul link di ritorno se è standardizzato
          const chatBackBtn = document.querySelector('.chat-channel-header a, a[href="/chat"]');
          if (chatBackBtn) {
            chatBackBtn.click();
          } else {
            // Metodo infallibile: chiediamo al browser di tornare alla pagina precedente
            window.history.back();
          }
          startX = 0;
          return; // Fermiamo lo script qui
        }

        // 2. SE SIAMO ALTROVE NEL FORUM (Apertura del menu)
        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>