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

Después de la nueva actualización, esto ya no funciona. @Don, ¿hiciste algún cambio relevante o algo?

Hola :waving_hand: No, no creo. El último cambio fue hace 2 meses. Merge pull request #6 from VaperinaDEV/show-label · VaperinaDEV/f-nav-for-mobile@085e07f · GitHub

Sí, volvió a funcionar. Algunos otros componentes del tema estaban causando el problema.

1 me gusta

Hola :waving_hand: Hmm, no puedo reproducir esto… ¿qué dispositivo y navegador usas?

Hola Don, gracias por responder.
Es muy extraño. A continuación, se muestran varios navegadores que probé y ocurrió el mismo fenómeno. :sweat_smile:

Navegador Edge en PC


Aplicación Discourse Hub para iPhone

Safari para iPhone

Edge para Android

Usé el siguiente CSS para ajustar la posición, y funciona bastante bien.

/* Usa Flexbox para centrar chat-channel-unread-indicator__number */
.chat-channel-unread-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; /* Asegura que el contenedor tenga un contexto de posicionamiento */
}

/* Asegura que los estilos del elemento numérico no interfieran con el centrado */
.chat-channel-unread-indicator__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
2 Me gusta

Se ve genial. Sería bueno mostrarlo también para usuarios no registrados.

@Don ¿aceptas PRs? Agregué una función para agregar funciones adicionales y abrir un menú modal donde puedes agregar elementos.

En nuestro caso de uso, queremos crear un submenú para tener múltiples variaciones al crear un nuevo tema (por ejemplo, enviar un informe de error, enviar una solicitud de soporte, enviar una idea, crear un nuevo diario o crear un nuevo tema normal).

Ver: GitHub - jrgong420/f-nav-for-mobile: F NAV - Mobile Navigation Tabs

4 Me gusta

Actualización rápida sobre mi Fork de “F-NAV para Móvil” con Botón Atrás, Submenú Personalizado y Controles de Visibilidad

¿Por qué este fork?

  • Proporciona un botón de “Atrás” en la cabecera de las páginas de temas que imita la UX común de las aplicaciones móviles
  • Ofrece un tipo de pestaña “customMenu” que abre un submenú configurable (ideal para enlazar a múltiples destinos; lo usamos para añadir enlaces pre-rellenados personalizados de “Nuevo Tema”)
  • Añade visibilidad basada en grupos a pestañas y elementos de menú, para que puedas mostrar ciertos elementos solo al personal, etc.
  • Pequeñas correcciones con algunas deprecaciones y pulido de estilos/accesibilidad
Resumen de las nuevas características añadidas
  • Icono de Atrás en la Cabecera (opcional)
    • Reemplaza el logo de inicio de la cabecera con una flecha hacia atrás en las páginas de temas
    • Comportamiento: retrocede si hay historial, de lo contrario, navega a “/”
    • Activa/desactiva con la configuración: header_back_icon_enabled
  • Tipo de pestaña Submenú Personalizado
    • Nueva función f_nav_tabs: customMenu
    • Nueva configuración: f_nav_submenu_items
      • Configura elementos de menú con etiqueta y URL (icono opcional)
      • Ideal para acceso rápido a múltiples páginas desde una sola pestaña
  • Controles de visibilidad basados en grupos
    • Las pestañas, los elementos del submenú y los profile_extra_items se pueden limitar a grupos seleccionados
    • Comportamiento:
      • Grupos vacíos => visibles para todos
      • Si se establecen grupos => solo los miembros de al menos un grupo seleccionado pueden ver
      • Los usuarios anónimos no pueden ver los elementos restringidos
  • Opcional: Ocultar la barra de navegación en las páginas de temas
    • Activa/desactiva con la configuración: hide_nav_in_topic
  • Artefactos de “build” comprimidos y documentación de pruebas
    • Artefactos de build de conveniencia (v1–v5) en builds/
    • TESTING_GUIDE.md y TEST_RESULTS.md documentando la validación manual

Mejoras a características existentes

  • Elementos y pestañas de F‑NAV
    • Añade el getter visibleTabs para respetar la visibilidad de grupo
    • Integra el nuevo componente CustomSubmenu en el flujo de FNavItem
  • Avatar/menú de perfil en la cabecera
    • La detección de vista móvil se ha movido al componente, mejorando el comportamiento y resolviendo advertencias
    • Los elementos extra del perfil ahora admiten visibilidad basada en grupos
  • Estilo y accesibilidad
    • Nuevo SCSS para el submenú personalizado y el icono de atrás
    • Estados consistentes de hover/activo/focus-visible
    • Radio de borde consistente con variables principales; relleno/espaciado refinado (por ejemplo, relleno del botón atrás establecido en 0)

Correcciones de errores y mantenimiento

  • Resuelve las advertencias de deprecación de site.mobileView moviendo las comprobaciones de los inicializadores a la renderización del componente
  • Corrige un caso límite de renderización moviendo una función fuera del bloque
  • Pequeño pulido para igualar los comportamientos de la cabecera de Discourse (estados hover/activo, transiciones de opacidad)
  • Pequeñas limpiezas de CSS (por ejemplo, asegurar que el relleno del botón atrás sea cero, evitar cambios accidentales de tamaño)

Comparación de alto nivel (Rama Original vs. Fork)

  • Original (main): pestañas móviles F‑NAV + importación opcional de chat; sin botón de atrás ni submenú personalizado
  • Fork (feat/home-logo-arrow-back):
    • Añade la característica del icono de atrás en la cabecera con fallback de enrutamiento
    • Introduce la función de pestaña “customMenu” con elementos de submenú configurables
    • Añade visibilidad restringida por grupos para pestañas, elementos de submenú y elementos de perfil
    • Opcionalmente oculta el F‑NAV en las páginas de temas
    • Mejora la accesibilidad y la consistencia de los estados de interacción
    • Proporciona documentación de pruebas y builds empaquetados

Notas:

  • Este componente se dirige a versiones recientes de Discourse que admiten el nivel 1.14+ de la API de Plugins de Discourse (como se indica en los inicializadores)
  • Si dependes de la visibilidad basada en grupos, asegúrate de que tus grupos y membresías estén configurados primero

Advertencia: Por favor, prueba con precaución ya que no soy un programador, y el TC fue creado y probado completamente con IA. Funciona mejor con 3.6beta1.

¡Un saludo a Don por este gran componente; es una adición fantástica! :heart:

2 Me gusta