Chat: burbujas de WhatsApp

[chapoi]

El chat todavía está en desarrollo activo, por lo que este componente es probablemente inestable y está en beta por ahora. Se agradecen comentarios e informes de errores.

	Resumen	Una skin inspirada en WhatsApp para el chat (móvil)
	Vista previa	Theme Creator (solo vista móvil)
	Repositorio	GitHub - chapoi/discourse-chat-bubbles: A whatsapp-inspired skin for Discourse chat (mobile)
	Guía de instalación	Cómo instalar un tema o componente de tema
	¿Nuevo en temas de Discourse?	Guía para principiantes sobre el uso de temas de Discourse

← Rellena “repoName” y “repoURL” para el botón de instalación automática →

Instalar este componente de tema

Instrucciones para la vista previa

1. Asegúrate de ver esto en una pantalla pequeña.
2. No olvides añadir ?mobile_view=1 a la URL para obtener la vista correcta.
3. Inicia sesión para acceder al chat.

Descripción

← Describe este tema/componente en una o dos frases →

Un estilo de mensaje de burbuja, aplicado solo en móvil.

← Añade más detalles y explica la configuración (si es aplicable) →

Ajustes

El componente viene con un fondo incrustado que se muestra arriba. Esto se puede cambiar en los ajustes. Se recomienda usar un patrón svg. Este sitio web tiene algunos gratis.

También puedes elegir los colores de las burbujas y el fondo detrás del patrón, o deshabilitar el patrón por completo.

Si dejas vacío el ajuste de color claro u oscuro, las burbujas se establecerán por defecto en secondary y tertiary-low. Si dejas vacío el color de fondo, se establecerá por defecto en primary-high.

Usar una imagen completa como fondo también puede funcionar, pero deberás asegurarte de que tenga un tamaño optimizado para la vista móvil.

Modo Oscuro

Puedes elegir diferentes colores de fondo y burbujas para el modo oscuro.
Para evitar tener que cambiar el patrón de fondo, utiliza una mezcla de fondos en modo oscuro.

Para obtener mejores resultados, elige un patrón de color claro que funcione bien en modo claro, y debería atenuarse automáticamente en modo oscuro (desafortunadamente no en todos los dispositivos – ver abajo).

Problemas conocidos

• Las marcas de tiempo de tus mensajes se colocan de forma diferente a las de los mensajes de otras personas.
• No tiene modo oscuro (todavía)
• El modo oscuro actúa de forma extraña en algunos dispositivos.
• No funciona bien con los hilos habilitados.

[fbpbdmin (deepblue)]

¡Esto es muy bueno!

Una sugerencia,
¿es posible que todos puedan cambiar su propia imagen de fondo?

Y el SVG del circuito predeterminado se representa de manera diferente en el tema oscuro de iPhone y Android.
En iPhone, las líneas se ven más brillantes, no como en el ejemplo de la publicación del documento… no estoy seguro de por qué…

[Jagster (Jakke Lehtonen)]

¿Puedo desactivar el patrón de fondo por completo?

@fbpbdmin

posible que todos puedan cambiar su propia imagen de fondo

Supongo que es realmente difícil y si se puede hacer, necesita un plugin. Pero no recuerdo ningún plugin que ofrezca a los usuarios la opción de ajustar tales cosas. Sería bueno, sin embargo. Pero también podría conducir a una pesadilla de experiencia de usuario cuando las preferencias están aquí, allá y en todas partes.

Un usuario ni siquiera puede ajustar la caja de herramientas del compositor y esa sería una característica importante.

[chapoi]

@fbpbdmin

¿Es posible que todos cambien su propia imagen de fondo?

@Jagster

Supongo que eso es realmente difícil y si se puede hacer, necesitará un plugin.

Sí, desafortunadamente eso es otra liga. Si el interés es lo suficientemente grande para esta apariencia en general, me encantaría ampliar esto, pero por ahora eso no sucederá.

@Jagster

¿Puedo deshabilitar el patrón de fondo por completo?

Oh sí, eso es bastante fácil. Puedo hacer una actualización para eso.

[fbpbdmin (deepblue)]

@chapoi ¿podrías probar el tema oscuro en iPhone? La mayoría de los patrones se renderizan de forma extraña allí.

Por ejemplo, el predeterminado, en iPhone oscuro, los enlaces son blancos, se ve demasiado recargado.

Sin embargo, se ve bien en el tema oscuro de Android…

Gracias.

[chapoi]

¡Oh, guau! Gracias por eso, intentaré echar un vistazo al modo oscuro durante el fin de semana.

[chapoi]

He agregado una configuración para deshabilitar el patrón por completo.

Los problemas del modo oscuro en iPhone se deben a un error en Safari, que impide que la propiedad background-mode-blend funcione cuando se usa background-repeat… Bastante molesto y aún no tengo una solución.

Podría reducirse a dos cargas separadas para el modo oscuro/claro, lo cual no es nada elegante.

De cualquier manera, recomiendo por ahora usarlo sin el patrón, si estás en iPhone y usas tu dispositivo en modo oscuro.

[Falco]

@chapoi

@fbpbdmin

¿es posible que todos puedan cambiar su propia imagen de fondo?

@Jagster

Supongo que eso es realmente difícil y si se puede hacer, necesita un plugin.

Sí, desafortunadamente eso es otra liga. Si el interés es lo suficientemente grande para esta apariencia en general, me encantaría ampliar esto, pero por ahora eso no sucederá.

¿Quizás una opción de usuario para usar su imagen existente de “Fondo de la tarjeta de usuario” como fondo del chat?

[Roi]

@chapoi

Bastante molesto y todavía no tengo una solución.

Sí, lo mismo aquí:

Pero se ve genial en Android:

Sin un patrón se ve aburrido. Lo dejé habilitado por ahora, pero los usuarios de Apple comenzaron a quejarse.

[digitaldominica]

Hola @chapoi, ¿hay alguna forma de cambiar el icono de respuesta del chat por una flecha izquierda real en lugar del icono de compartir que aparece como d-icon-share?

[chapoi]

No específicamente con este componente temático, no.

Podrías seguir algo como esto

Help replacing an icon

I am trying to replace the bars icon for opening/closing the sidebar following these instructions Replace Discourse's default SVG icons with custom icons in a theme but I’m not having much luck. I’ve created a spritesheet with the sidebar icon I want to use (blurred out since it’s a pro fontawesome icon) [image] Created a component and uploaded the spritesheet: [image] And used this code (I only want the change on desktop) [image] But I just get no icon: [image] Any ideas? I’m sure I…

para reemplazar todas las instancias del icono. (No creo que usemos el icono de compartir en ningún otro lugar, así que esto podría funcionar).

Reemplazarlo solo allí implicaría más complejidad, no estoy seguro de qué.

[digitaldominica]

De acuerdo, gracias, lo intentaré. Uso el Tema de la Comunidad Kodular y el mismo icono aparece en los temas a los que respondo. Me pregunto si esto es parte específica del tema. Iré a preguntar al desarrollador ahora.

[digitaldominica]

Gracias por este componente.

He hecho un pequeño ajuste en mobile.scss en las líneas 55-62

.chat-messages-scroll {
  background-color: var(--bubble-bg);
  background-image: url(check-empty($background-pattern, $enable_pattern));
  background-blend-mode: var(--bubble-bg-mode);

}
.chat-messages-container {
  padding: 0;

Anteriormente, el fondo se aplicaba a .chat-messages-container y, al desplazarse, mi fondo se movía con los mensajes, de esta manera permanece en segundo plano.

Noté que había dos instancias de .chat-messages-container en el chat móvil, lo que causaba esta replicación en el fondo.

[chapoi]

Gracias, excelente detección de una tontería pasada por alto. Corregido.

[digitaldominica]

Hola, parece que el fondo del chat ya no es visible en el chat, ya no veo que se agregue el CSS al contenedor del chat. Actualmente estoy usando la versión 3.3.0.beta2

[chapoi]

¡Hola! Gracias por el informe; ha habido muchos cambios en el chat y probablemente necesite actualizar este componente.

¡Intentaré hacerlo pronto!

[eisammy (Sammy)]

Intenté probar este componente temático hace un par de días, si quieres, ¿puedo publicar aquí las capturas de pantalla de los errores porque deseo habilitarlo de nuevo?

[eisammy (Sammy)]

@chapoi Simplesmente maravilhoso… os erros desapareceram aparentemente. planos para implementar isso na versão desktop?

[Earnie_Baird (Earnie)]

Acabo de probar esto. Es genial, pero como otros han informado, no parece que permita cambiar el color o el patrón del fondo.

Con el fondo claro predeterminado, las burbujas blancas se mezclan realmente con el fondo.

[eisammy (Sammy)]

Un nuevo enlace de Instagram con error