Animación de clic en elemento de lista de temas

Componente temático
1
:information_source: Resumen Animación de clic en elemento de lista de temas
:eyeglasses: Vista previa Theme Creator
: hammer_and_wrench: Repositorio GitHub - VaperinaDEV/topic-list-item-click-animation: This theme component adds a nice animation when you hover or click the topic list item.
: question: Guía de instalación Cómo instalar un tema o componente de tema
: open_book: ¿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

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

Este componente de tema añade una bonita animación al pasar el ratón o hacer clic en el elemento de la lista de temas.

topic-list-item
topic-list-item1228×706 78.6 KB

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

Hola :wave:

:warning: El componente requiere un cargador deslizante.

Este componente hace que toda la fila sea clicable y añade una animación de clic al elemento de la lista de temas. Puedes elegir entre algunas animaciones.

  1. push (predeterminado en dispositivos táctiles): al hacer clic, se presiona y añade un efecto de fondo.

  2. background (predeterminado en dispositivos no táctiles): al hacer clic, añade un fondo…

  3. slider: al hacer clic, añade un cargador deslizante debajo del elemento de la lista de temas y oculta el cargador principal superior.


  4. blur: al hacer clic, difumina los otros temas de la lista.

Configuración del tema

Puedes seleccionar animaciones por separado en dispositivos no táctiles y táctiles.

Screenshot 2023-07-20 at 23.31.55
Screenshot 2023-07-20 at 23.31.55619×289 12.2 KB

23 Me gusta
2

Se sintió y se vio tan natural que no pude ver qué había cambiado cuando previsualicé el componente. :smile:

¿Sería posible tener la animación de empuje al hacer clic en el escritorio, durante la carga, o hay algo que lo impida de alguna manera?

6 Me gusta
3

La idea detrás de esto es hacer un toque natural similar al de una aplicación en dispositivos táctiles. Por lo tanto, la animación de pulsación también funciona en la vista de escritorio si es un dispositivo táctil.

Pero sí, creo que también puede funcionar fácilmente en dispositivos no táctiles. Probablemente valga la pena una configuración adicional. :slightly_smiling_face:

4 Me gusta
4

Hola :wave:

Empujé una actualización al componente. DEV: Refactored how the component works and add a new slider animation by VaperinaDEV · Pull Request #1 · VaperinaDEV/topic-list-item-click-animation · GitHub

2 Me gusta
5

Esto está muy bien hecho. Gran trabajo como siempre, Don. :slight_smile:

2 Me gusta
6

Hola :wave:
Nueva animación (blur) :tada:

2 Me gusta
7

Inteligente. Me gusta :heart_eyes:

3 Me gusta
8

¡Muy bien hecho, Don! Probé esto con Topic List Thumbnails y funciona en gran medida sin problemas. Push y Blur funcionan como se esperaba, pero Slider aparece en la parte superior de todas las miniaturas en lugar de seguir a la miniatura, y background no hace nada (lo cual tiene sentido). ¿Hay alguna posibilidad de que le dediques un poco más de atención? ¡Me encantaría tener el slider en el escritorio, o alguna otra idea brillante que seguro se te ocurrirá!

1 me gusta
9

Hola David :wave:

Fusioné una actualización Move topic slider loader from template to pseudo element by VaperinaDEV · Pull Request #5 · VaperinaDEV/topic-list-item-click-animation · GitHub
Usé el outlet del plugin after-topic-list-item template para mostrar el slider, pero el componente Topic List Thumbnails añade un diseño de cuadrícula a la lista de temas, lo que significa que maneja el outlet del plugin como un elemento de la lista de temas y los empuja uno al lado del otro. Ahora he movido el cargador de la plantilla a un pseudo elemento, lo que aumentará la compatibilidad. :slightly_smiling_face:

Olvidé añadir un z-index, que es necesario para mostrarlo con Topic List Thumbnail. Por favor, actualiza el componente. :slightly_smiling_face:

1 me gusta
10

¡Gracias Don! Lo intenté y está funcionando, pero el color del control deslizante no es el correcto, ¿o tal vez es un problema de z-index? El control deslizante en este video debería ser de color dorado pero es gris. Creo que debería ser terciario. Estoy probando esto sin ningún otro CSS, por si lo sabes. Estaba mostrando el color dorado antes de la actualización, por eso estoy pensando en z-index :man_shrugging:t3:

1 me gusta
11

Revisé tu sitio y estás usando la versión anterior que no contiene la corrección de z-index. Por favor, actualiza el componente a la última versión. :slightly_smiling_face:

12

Gracias Don, todo está bien ahora, debí haber actualizado demasiado rápido :cara_loca:

Una sugerencia; ten una opción para desactivar esto por completo para pantallas que no sean táctiles. Ahora que he probado el control deslizante, no estoy seguro de que me guste, ya que elimina el control deslizante predeterminado y hace que la experiencia de usuario no sea coherente.

1 me gusta
13

@Don - ¡Me encanta esto! Preferiría (como en el Componente de tema de tema clickeable) al pasar el cursor, que en todas partes dentro de una fila/elemento, el cursor fuera el puntero…

.topic-list-item:hover,
.latest-topic-list-item:hover {
    cursor: pointer;
}
2 Me gusta
14

@Don - Parece que la configuración del color de fondo para el efecto de pasar el cursor solo surte efecto después de hacer clic o tocar en la fila/elemento, y no al pasar el cursor de forma convencional (como en el Componente de tema de tema enlazable).

Screenshot 2023-07-22 221738
Screenshot 2023-07-22 2217381810×922 73.2 KB

1 me gusta
15

Hola David :wave:

Esta es una gran idea. Fusioné una actualización que agrega una configuración para desactivar la animación (componente) por separado en dispositivos táctiles o no táctiles.

Ahora puedes seleccionar la opción none que desactivará completamente el componente.

3 Me gusta
16

Hola @denvergeeks :waving_hand:

El componente solo hace que el elemento de la lista de temas sea completamente clicable. Por lo tanto, el último elemento de la lista de temas funciona como predeterminado ahora. Es por eso que el puntero del cursor solo aparece en el elemento de la lista de temas en dispositivos que no son táctiles. :slightly_smiling_face:

El componente maneja los dispositivos no táctiles y táctiles por separado. El fondo se activa al pasar el ratón por encima, en dispositivos no táctiles y en dispositivos táctiles después de tocarlo. Pero creo que necesitará alguna actualización porque el efecto de pasar el ratón por encima no funcionará, por ejemplo, en portátiles con pantalla táctil que podrían tener un cursor. Creo que podemos activarlo globalmente en la vista de escritorio y también con el puntero. :thinking:

He fusionado estos cambios.

1 me gusta
17

¿Podrías explicar qué quieres decir con la dependencia de “cargador deslizante”, por favor? ¿Es otro tema, un complemento, una biblioteca de JavaScript o algo más?

3 Me gusta
18

El deslizador es la nueva animación de carga de página. Cuando cargas una página en Discourse, hay una barra de progreso horizontal en la parte superior de la pantalla. Ese es el deslizador.

Ahora está configurado como predeterminado, pero se puede revertir al indicador de carga original a través de la configuración indicador de carga de página.

4 Me gusta
19

Hola Don, ¿no hay forma posible de hacer que esto funcione con el precargador giratorio? Sinceramente, prefiero el giratorio al cargador deslizante para mi foro.

20

Hola :waving_hand:

La razón por la que solo funciona con el deslizador es que cuando haces clic en un tema, el contenido de la página se borra instantáneamente y cambia al indicador de progreso. Por lo tanto, no hay tiempo para hacer una animación. Con el deslizador, nos mantenemos en la página actual mientras se carga la siguiente página, por lo que tenemos tiempo para ejecutar una animación. :slightly_smiling_face: