Barra lateral del chat

Componente temático
1
:information_source: Resumen Se abre automáticamente y muestra el chat como una barra lateral, siempre que haya espacio, y aprovecha la altura
:hammer_and_wrench: Repositorio GitHub - Arkshine/discourse-chat-sidebar
:question: Guía de instalación Cómo instalar un tema o componente de tema
:open_book: ¿Nuevo en los temas de Discourse? Guía para principiantes sobre el uso de temas de Discourse

Instalar este componente de tema

Créditos: @Alon1 (solicitud patrocinada)[1]

Este componente de tema tiene como objetivo abrirse automáticamente y mostrar el chat como una barra lateral, siempre que haya espacio, y aprovechar la altura.

  • Soporte de redimensionamiento de ventanas
  • Soporte de composer
  • Se puede fijar al contenido o a la ventana en ambos lados
  • El usuario puede elegir la posición (guardada en el almacenamiento local del navegador)
  • Se puede revertir al estado original del chat si se abrió previamente
  • Las preferencias originales del usuario del chat no se ven afectadas
  • Soporte parcial de temas (la mayoría de los populares)

Esto debería funcionar en la mayoría de los temas.
¡Avísame si faltan opciones o algo no funciona en algún tema! :smile:

Configuración

Nombre Predeterminado Descripción
breakpoint auto Punto de interrupción en px para que aparezca la barra lateral del chat.
Establecer en auto para usar el ancho predeterminado de la barra lateral y el contenido como punto de interrupción natural (recomendado).
width 400px Ancho de la barra lateral del chat.
position [2] right Posición de la barra lateral del chat.

left: Fijar al lado izquierdo del contenido
right: Fijar al lado derecho del contenido
outside-left: Fijar al lado izquierdo de la ventana
outside-right: Fijar al lado derecho de la ventana
theme_style Cuando sea posible, usar el estilo del tema actual en estas posiciones de la barra lateral del chat.
Disponible solo para la mayoría de los temas populares.
Esta no es una configuración confiable (el nombre del tema puede cambiarse).
Desactivar para usar el estilo de tema predeterminado.
allow_user_preference[3] Permitir a los usuarios establecer sus preferencias de barra lateral de chat.
Nota: esto se guarda en el almacenamiento local del navegador del usuario.

Valores disponibles:
position: Permitir a los usuarios establecer la posición de la barra lateral del chat

Por hacer

  • Pruebas
  • Transiciones más suaves
  • ¿Más preferencias del usuario?

Notas de desarrollo

Inicialmente, intenté insertar el componente <ChatDrawer /> en otro outlet para que fuera más fácil de manipular y mantener en el flujo. Desafortunadamente, el componente original no se puede suprimir por completo (pienso en los eventos). Al menos, no pude encontrar una manera de sobrescribirlo.

Esto no me deja más remedio que seguir el camino difícil de JS a costa de un poco más de uso intensivo de CPU pero menos intrusivo (aunque el redimensionamiento manual solo ocurre a veces).

  1. Si estás interesado, el caso de uso de Alon aquí. ↩︎

  2. Asegúrate de actualizar la página. ↩︎

  3. Importante: esta configuración utiliza la última API para mostrar el icono en la cabecera y requiere la última versión de Discourse. ↩︎

24 Me gusta
2

¡Bien hecho! :clap: :slight_smile:

3

¿Es compatible con Discourse Bars 🍻 🍸 (a sidebar framework), porque sería bueno combinarlo con otros widgets de la barra lateral?

7 Me gusta
4

Lamentablemente, no puede admitir las Barras de Discourse en este momento.

El componente utiliza el cajón de chat original y el posicionamiento se realiza manualmente. A menos que podamos usar/mover el componente original <ChatDrawer /> donde queramos, sería difícil, creo. Sin embargo, estoy de acuerdo; ¡eso sería genial! :slight_smile:

Al menos se puede mostrar junto a la barra lateral de la Barra

Mi componente utiliza el elemento #main-outlet-wrapper como referencia, por lo que cualquier cosa dentro funcionará bien.

image
image1997×897 88.9 KB

4 Me gusta
5

¡OMG, esto es genial!

3 Me gusta
6

¿Esto solo funciona si el panel lateral está contraído? Me doy cuenta de que si no contraigo mi panel lateral, la barra lateral de chat no se muestra.

1 me gusta
7

En la versión actual, no se fuerza la reducción del contenido principal si no hay suficiente espacio para colocar la barra lateral del chat. Es por diseño.

Quizás haya situaciones en las que esto pueda ser útil. No me importa añadir una opción para que el usuario lo permita. :thinking:

1 me gusta
8

Entendido, gracias por el componente, funciona muy bien.

1 me gusta
9

¿Creo que este componente ya no funciona a partir de 3.6.0.beta2-latest? No importa lo que elija, siempre está a la derecha como la experiencia de stock… ¿Le funciona a alguien?

¡Este componente ahora funciona como se esperaba! La mayor parte del tiempo estuve probando en la pantalla de usuario de mi macbook y cuando el componente no tiene suficiente espacio, simplemente no muestra nada, que es probablemente la razón por la que me confundí. Esto ahora funciona perfectamente.

2 Me gusta
10

Todavía no he probado, ¡pero gracias por informar, lo revisaré pronto!

2 Me gusta
11

super componente :+1: es una muy buena idea

12

Hice un PR para corregir las deprecaciones conocidas. :+1:

¡Gracias a @DevTeVe por probarlo!

4 Me gusta
13

¡Muchas gracias por ir más allá para ayudarme :heart:!

Así que, estuve hablando offline con @Arkshine y, como tenía algunas sugerencias, ¡decidimos que este era un mejor lugar para dejarlas!

  1. Ventana de chat redimensionable (ancho y alto)
  2. Permitir que siga flotando incluso si cubre el texto en la pantalla.
  3. Sería genial si el ancho también fuera automático; de esa manera, siempre encontraría una manera de encajar, incluso si parece pequeño, y en la configuración (no por defecto), tendríamos algo como “px mínimo” y una advertencia que dice: “Si se establece, el chat volverá a ser el predeterminado si no tiene al menos el valor xxx”.
2 Me gusta