F NAV - Pestañas de navegación móvil

:information_source: Resumen F NAV - Pestañas de navegación móvil
:eyeglasses: Vista previa Theme Creator
:hammer_and_wrench: Repositorio GitHub - VaperinaDEV/f-nav-for-mobile: F NAV - Mobile Navigation Tabs
: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

Hola :wave:

Antes, he creado un tema Dev tema para ello como concepto de componente de tema y ahora está en un estado para ser un Theme component.

:warning: Asegúrate de probarlo antes de usarlo en producción.

Alguna información aquí sobre el componente: F NAV - Theme component concept


Sobre el componente de tema. He leído muchas publicaciones sobre lo maravilloso que sería hacer la Barra de pestañas de Discourse para móviles más dinámica y añadir la capacidad de manejar, por ejemplo, notificaciones, etc… F-NAV puede hacer esto y más…

Encabezado

Oculta el menú hamburguesa, el menú de usuario, la búsqueda y el chat, y añade un botón de menú de perfil (avatar) que contiene el contenido de la pestaña de perfil del menú de usuario predeterminado.

Configuración

También contiene una configuración donde puedes añadir elementos personalizados antes del elemento “Cerrar sesión”.
Contiene tres campos donde puedes añadir fácilmente elementos personalizados.

Hay algunas configuraciones para mostrar/ocultar los iconos predeterminados del encabezado, lo cual es útil cuando no quieres colocar la pestaña exacta en F NAV, de modo que se mostrará en el encabezado.

Pestañas

Es posible asociar diferentes funciones a las pestañas. Estas funciones permiten que cada pestaña cambie dinámicamente.

Screenshot 2024-12-13 at 13.06.14

Estos cambios incluyen:

Funciones

home

  • cambia el icono de la pestaña de inicio en las rutas de temas a una flecha hacia la izquierda que añade una función de retroceso
    Screenshot 2024-12-13 at 12.29.33
  • añade un punto indicador de temas nuevos o no leídos
    Screenshot 2024-12-13 at 12.30.52

hamburger (abre el menú hamburguesa)


multi

Pestaña multi

La pestaña multi cambia automáticamente a la pestaña de mensajes si el chat no está habilitado o si el usuario lo desactiva en la configuración del usuario.

La burbuja de notificaciones cambia según si es urgente o no.

Las notificaciones urgentes de la pestaña multi son verdes y se ven así. :arrow_down_small:


Expandido

El mensaje personal es siempre verde, pero el chat puede ser azul como originalmente, por ejemplo, una notificación de mensaje de canal no leído.

Expandido

Notificación única


message

  • añade un botón de mensaje con notificaciones y al hacer clic en él se abre un modal de mensajes para una vista rápida

chat

  • añade un botón de chat con sus funciones

notificationToRoute

  • si no molestar está activo, el icono de la campana cambiará a un icono de campana tachada y aparecerá el tiempo de no molestar hasta
    Screenshot 2024-12-13 at 13.02.35

  • redirige a la página de notificaciones del perfil omitiendo el menú de notificaciones

    • si hay una notificación, redirige a /notifications?filter=unread
    • si no hay notificación, redirige a /notifications
    • si hay contenido revisable, aparecerá una señal de advertencia y redirigirá a /review

notificationMenu

  • si no molestar está activo, el icono de la campana cambiará a un icono de campana tachada y aparecerá el tiempo de no molestar hasta
    Screenshot 2024-12-13 at 13.02.35

  • abre el menú de notificaciones


search

  • redirige a la página /search basada en el contexto

Configuración

Intenté que la configuración fuera lo más sencilla posible.
Contendrá cuatro campos.

  • name: Esto es solo para identificar fácilmente la pestaña en la configuración.
  • icon: Añade un icono a la pestaña. Nota: Si seleccionas una función, puede haber iconos que no se puedan sobrescribir con esta configuración.
  • destination: Añade un destino para tu pestaña personalizada. Nota: Si seleccionas una función que maneje el destino, puedes dejarlo vacío. El componente maneja automáticamente las destinos /my/... convirtiéndolos a /u/username/... para que el estado activo de las pestañas se pueda añadir correctamente.
  • function: Elige una función para la pestaña.

Los administradores pueden crear/eliminar/cambiar pestañas fácilmente y seleccionar entre una de las funciones o añadir un destino personalizado a la pestaña.
Funciones :arrow_down_small:

Por ejemplo, añadir una pestaña de creación de temas simplemente se verá así.


Screenshot 2024-12-12 at 18.55.50


Crédito: Barra de pestañas de Discourse para móviles y gracias a todos por los comentarios en el tema Concepto de componente de tema F NAV. :heart:

21 Me gusta

Esto es increíble y legítimamente debería ser el comportamiento predeterminado y me ahorrará el pulgar de tener que alcanzar con demasiada frecuencia la parte superior de la pantalla de mi :mobile_phone:.

No soy fanático del control deslizante “en línea” prominente, ya que creo que la mayoría de las personas no necesitan cambiar esta configuración con frecuencia, supongo que la mayoría de los usuarios optan por no participar en su presencia en línea de una vez por todas, por lo que no estoy seguro de que el recordatorio constante de que esta opción existe.

Aparentemente, ha realizado muchas modificaciones de navegación muy útiles en los componentes temáticos. Me gustaría usar algunos, pero ¿cuánto se ve a sí mismo manteniendo todo esto a largo plazo? Tiendo mucho a usar solo los componentes temáticos #oficiales para garantizar la confiabilidad.

No vi el componente temático oficial original de la barra de pestañas, así que lo echaré un vistazo.

7 Me gusta

Gracias por el componente @don, he estado aquí mucho tiempo, realmente estás haciendo un gran trabajo.

3 Me gusta

Esto debería ser un error.

2 Me gusta

Ah, gracias, esto está relacionado con el tema FKB. Actualizaré el tema.

3 Me gusta

Aquí está la solución: Compatibility: Adds support for F NAV theme component by VaperinaDEV · Pull Request #51 · VaperinaDEV/fkb-pro-theme · GitHub
Por favor, actualiza el tema FKB y habilita esta nueva configuración.
Screenshot 2024-12-14 at 9.17.02

3 Me gusta

Hola @don, ¿cómo puedo usar iconos fa-regular como en la imagen? He investigado y no he encontrado información sobre cómo hacerlo después de cambiar a Fontawesome 6.

3 Me gusta

Hola :waving_hand: Debería funcionar con far-bell. Tenía planes de hacerlo de regular a sólido cuando la pestaña esté activa, lo comprobaré pero si mal no recuerdo el icono de la casa solo tiene sólido en la versión gratuita. :thinking:

1 me gusta

Gracias, resolví mi problema. @Don

1 me gusta

El icono de inicio, que cambia a un botón de retroceso cuando se abre un tema. ¿Por qué, podemos usar el deslizamiento para eso (como al volver a la pantalla de inicio del Hub :smirking_face:)? Mis usuarios se han estado quejando bastante de eso, porque ahora tienen que llegar al logo para eso (problema del primer mundo, lo sé :joy:)

2 Me gusta

Creo que podemos añadirlo a una función. Solo estoy pensando dónde colocarlo. Esto puede ser una sola pestaña y puedes añadirla a la navegación que solo se muestra en DiscourseHub.

1 me gusta

En realidad DiscourseHub funciona perfectamente al deslizar hacia abajo. Simplemente no lo sabía.

Esa cuestión del botón de inicio/atrás es más grande porque tengo que explicársela a otros.

3 Me gusta

El botón de atrás solo se activa en los temas para facilitar la navegación hacia atrás entre temas. Es de la función de inicio, que puedes desactivar y entonces esto mantendrá el destino de inicio.

La configuración aún no se puede reordenar y si tienes una selección existente no puedes borrarla, pero añado una nueva función none que tendrá el mismo comportamiento que si dejas el campo de función vacío. De esta manera no tienes que recrear todas las pestañas de navegación.

Así es como debería ser si quieres deshabilitar el botón de atrás y mantener el inicio en todas partes.

3 Me gusta

Fantástico como siempre. Tengo que estar de acuerdo desde la vista previa rápida en el creador de temas. Esto realmente debería incluirse en el núcleo con un interruptor para móvil clásico y móvil mejorado.

Puedo ver que esto abre cosas como un logotipo de sitio de banner más largo. Una opción más limpia para extras en el encabezado como el selector de idioma y más. ¡Muy, muy bien como siempre, Don!

3 Me gusta

El icono del lápiz y los temas de navegación se colapsan con la barra de navegación.

1 me gusta
4 Me gusta

Hola Don. Gracias por tu increíble trabajo. Me gusta.
Tengo una pregunta. Después de hacer clic en la Hamburguesa o en la Notificación, a veces no necesito tomar ninguna acción adicional. En este momento, necesito volver a la lista de artículos. Sin embargo, solo puedo cerrar la Hamburguesa o la Notificación haciendo clic en la página en blanco. Esto puede llevar a hacer clic accidentalmente en el avatar o en responder.

Para dar otro ejemplo simple, cuando estoy en la página de chat y necesito volver a la página de inicio, tengo que hacer clic en el botón de retroceso en la esquina superior izquierda, lo que en realidad no es fácil de usar en dispositivos móviles.

Entonces, ¿es posible mantener la barra de menú siempre en la parte superior?

Espero que mi descripción se pueda entender.

2 Me gusta

Hola Max :wave:

¿Puedes hacer algunas capturas de pantalla / grabaciones de pantalla sobre el problema?

En /chat ocultamos la navegación y usamos el encabezado de chat predeterminado. No estoy seguro de que valga la pena mostrar la navegación en el chat porque eso puede causar problemas en diferentes navegadores, pero lo comprobaré.

1 me gusta

Hola Don :smiley:
Gracias por tu respuesta.
Por favor, consulta las capturas de pantalla a continuación. Las dos primeras capturas de pantalla significan que cuando quiero cerrar la Hamburguesa o la Notificación, solo puedo hacer clic en el área amarilla. El problema es que es fácil hacer clic accidentalmente en el artículo o en el avatar.

La tercera captura de pantalla significa que tengo que hacer clic en el botón de retroceso en la esquina superior izquierda para salir de la interfaz de chat.



1 me gusta

Gracias por la aclaración :blush:

Sí, ya veo. El problema aquí no es el componente, sino un problema central cuando tienes activada la configuración de reducir movimiento en tu dispositivo. ¿Está activada en tu dispositivo?

Cuando se desactiva la reducción de movimiento, el header-cloak (área oscura detrás del menú) bloquea la acción de clic.

Cuando lo activo en mi dispositivo, no bloquea el clic del usuario.

Si este es el caso, también puedes cerrar los menús de forma segura con gestos de deslizamiento.

Creo que tengo un tema sobre este problema en alguna parte :thinking:

Ese es el encabezado de chat predeterminado.

Verificaré si podemos habilitar la navegación allí también.

3 Me gusta