F NAV – Onglets de navigation mobile

Après la nouvelle mise à jour, cela ne fonctionne plus. @Don, as-tu apporté des changements pertinents ou quelque chose comme ça ?

Bonjour :waving_hand: Non, je ne pense pas. Le dernier changement remonte à 2 mois. Merge pull request #6 from VaperinaDEV/show-label · VaperinaDEV/f-nav-for-mobile@085e07f · GitHub

Oui, tout fonctionne à nouveau. Certains autres composants du thème étaient à l’origine du problème.

1 « J'aime »

Bonjour :waving_hand: Hmm je n’arrive pas à reproduire cela… quel appareil et quel navigateur utilisez-vous ?

Salut Don, merci pour ta réponse.
C’est très étrange. Voici plusieurs navigateurs que j’ai testés, et le même phénomène s’est produit. :sweat_smile:

Navigateur Edge sur PC


Application iPhone Discourse Hub

iPhone Safari

Andriod Edge

J’ai utilisé le CSS suivant pour ajuster la position, et cela fonctionne très bien.

/* Utiliser Flexbox pour centrer chat-channel-unread-indicator__number */
.chat-channel-unread-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; /* Assurer que le conteneur a un contexte de positionnement */
}

/* Assurer que les styles de l'élément nombre n'interfèrent pas avec le centrage */
.chat-channel-unread-indicator__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
2 « J'aime »

Ça a l’air cool. Ce serait bien de le montrer aussi aux utilisateurs non connectés

@Don acceptes-tu les PRs ? J’ai ajouté une fonctionnalité pour ajouter des fonctions supplémentaires afin d’ouvrir un menu modal où vous pouvez ajouter des éléments supplémentaires.

Dans notre cas d’utilisation, nous voulons créer un sous-menu pour avoir plusieurs variations lors de la création d’un nouveau sujet (par exemple, soumettre un rapport de bug, soumettre une demande de support, soumettre une idée, créer un nouveau journal ou créer un nouveau sujet normal).

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

4 « J'aime »

Mise à jour rapide concernant mon Fork de « F-NAV pour Mobile » avec bouton Retour, sous-menu personnalisé et contrôles de visibilité

Pourquoi ce fork ?

  • Fournir un bouton « Retour » dans l’en-tête des pages de sujets qui reflète l’UX courante des applications mobiles
  • Offrir un type d’onglet « customMenu » qui ouvre un sous-menu configurable (idéal pour lier plusieurs destinations ; nous l’utilisons pour ajouter des liens « Nouveau Sujet » pré-remplis personnalisés)
  • Ajouter une visibilité basée sur les groupes aux onglets et aux éléments de menu, afin que vous puissiez afficher certains éléments uniquement au personnel, etc.
  • Petites corrections pour certaines dépréciations et polissage des styles/accessibilité
Résumé des nouvelles fonctionnalités ajoutées
  • Icône Retour dans l’en-tête (optionnel)
    • Remplace le logo d’accueil de l’en-tête par une flèche de retour sur les pages de sujets
    • Comportement : revenir en arrière s’il y a un historique, sinon rediriger vers « / »
    • Activer/désactiver avec le paramètre : header_back_icon_enabled
  • Type d’onglet Sous-menu personnalisé
    • Nouvelle fonction f_nav_tabs : customMenu
    • Nouveau paramètre : f_nav_submenu_items
      • Configurer les éléments du menu avec un libellé et une URL (icône optionnelle)
      • Idéal pour un accès rapide à plusieurs pages depuis un seul onglet
  • Contrôles de visibilité basés sur les groupes
    • Les onglets, les éléments de sous-menu et les profile_extra_items peuvent être limités à des groupes sélectionnés
    • Comportement :
      • Groupes vides => visibles par tous
      • Si des groupes sont définis => seuls les membres d’au moins un groupe sélectionné peuvent voir
      • Les utilisateurs anonymes ne peuvent pas voir les éléments restreints
  • Optionnel : masquer la barre de navigation sur les pages de sujets
    • Activer/désactiver avec le paramètre : hide_nav_in_topic
  • Artefacts « build » zippés et documentation de test
    • Artefacts de build pratiques (v1–v5) sous builds/
    • TESTING_GUIDE.md et TEST_RESULTS.md documentant la validation manuelle

Améliorations des fonctionnalités existantes

  • Éléments et onglets F‑NAV
    • Ajoute le getter visibleTabs pour respecter la visibilité des groupes
    • Intègre le nouveau composant CustomSubmenu dans le flux FNavItem
  • Avatar/menu de profil dans l’en-tête
    • La détection de la vue mobile a été déplacée dans le composant, améliorant le comportement et résolvant les avertissements
    • Les éléments de profil supplémentaires prennent désormais en charge la visibilité basée sur les groupes
  • Style et accessibilité
    • Nouveau SCSS pour le sous-menu personnalisé et l’icône de retour
    • États cohérents de survol/actif/focus-visible
    • Rayon de bordure cohérent avec les variables de base ; remplissage/espacement affinés (par exemple, remplissage du bouton de retour défini à 0)

Corrections de bugs et maintenance

  • Résoudre les avertissements de dépréciation de site.mobileView en déplaçant les vérifications des initialisateurs vers le rendu des composants
  • Corriger un cas limite de rendu en déplaçant une fonction hors du bloc
  • Petit polissage pour correspondre aux comportements de l’en-tête Discourse (états de survol/actif, transitions d’opacité)
  • Petits nettoyages CSS (par exemple, s’assurer que le remplissage du bouton de retour est nul, éviter les changements de taille accidentels)

Comparaison de haut niveau (Branche originale vs Fork)

  • Original (main) : onglets mobiles F‑NAV + import facultatif du chat ; pas de bouton retour ni de sous-menu personnalisé
  • Fork (feat/home-logo-arrow-back) :
    • Ajoute la fonctionnalité d’icône de retour dans l’en-tête avec repli de routage
    • Introduit la fonction d’onglet « customMenu » avec des éléments de sous-menu configurables
    • Ajoute la visibilité restreinte par groupe pour les onglets, les éléments de sous-menu et les éléments de profil
    • Masque facultativement le F‑NAV sur les pages de sujets
    • Améliore l’accessibilité et la cohérence des états d’interaction
    • Fournit la documentation de test et les builds packagés

Remarques :

  • Ce composant cible les versions récentes de Discourse qui prennent en charge le niveau d’API de plugin Discourse 1.14+ (comme indiqué dans les initialisateurs)
  • Si vous dépendez de la visibilité basée sur les groupes, assurez-vous que vos groupes et vos adhésions sont configurés au préalable

Mot d’avertissement : Veuillez tester avec prudence car je ne suis pas un codeur, et le TC a été créé et testé entièrement avec l’IA. Fonctionne mieux avec la version 3.6beta1.

Mention spéciale à Don pour ce super composant ; c’est un ajout fantastique ! :heart:

3 « J'aime »

Bonjour, votre CSS semble masquer l’utilisateur actuel par défaut sans basculer l’option dans les paramètres, donc la règle CSS display: none est codée en dur. J’apprécierais que ce ne soit pas le cas.

Le menu personnalisé que vous avez créé, y a-t-il un moyen de styliser la couleur des éléments ?

Ce problème d’espace blanc en haut est réapparu sur mobile. J’ai tout mis à jour, mais cela se produit toujours.

Depuis la dernière mise a jour de discourse le composant f-nav fait planter discourse sous android. :sob:

2 « J'aime »

Bonjour :waving_hand:

Merci pour le signalement ! J’ai fusionné une mise à jour pour corriger les problèmes que vous avez rencontrés sur la dernière version de Discourse. Veuillez mettre à jour le composant de thème !

6 « J'aime »
 body.f-nav-hidden .d-header-wrap {
    animation: none !important;
    opacity: 1 !important;
    z-index: 1000 !important;
  }

Je constate ce comportement également avec la chronologie en style flottant sur mobile :

Notez que je teste la barre de navigation avec une hauteur légèrement supérieure (pour laisser de la place aux boutons), mais je pense que le problème général n’est pas lié à cela.

1 « J'aime »

Bonjour :waving_hand:

Merci, j’ai effectué quelques mises à jour ici. UX: Nav bar fixes and nested replies support - Pull Request #9 - VaperinaDEV/f-nav-for-mobile - GitHub

Note : la position est calculée à partir de la variable --f-nav-height, donc si vous modifiez la hauteur, utilisez celle-ci.

Il est possible d’ajouter un bouton avec la destination /new-topic :down_arrow:

1 « J'aime »

Magnifique, merci ! Est-il possible / envisageable que ce bouton réponde dynamiquement dans les sujets ?

Je partage simplement des idées. J’utilise votre composant de thème tel quel, et c’est l’un de mes préférés :ok_hand:

Avec ce bouton dynamique, le composant de thème devrait également pouvoir masquer le bouton de réponse par défaut, comme il le fait déjà pour les boutons hamburger et en haut à droite.

Je pense que cela permettrait d’afficher la navigation en bas des sujets sur une seule ligne et de présenter l’ensemble de manière plus épurée.

Serait-il possible d’annuler l’ouverture des chats IA après avoir accédé au chat, de la même manière que par défaut lorsque l’on clique sur l’icône par défaut en haut ?

Actuellement, lorsque l’on ouvre le chat IA depuis F NAV, il n’y a aucun moyen de revenir à l’écran principal de Discourse.

J’espère que cela sera possible ; j’adore les boutons en bas :slight_smile:

1 « J'aime »

Pouvez-vous fournir quelques captures d’écran pour préciser exactement ce que vous voulez dire ? :blush:

1 « J'aime »

Bien sûr ! Lorsque l’on pointe un bouton F NAV vers `/discourse-ai/ai-bot/conversations` (et en masquant manuellement l’icône en haut à droite pour la discussion avec le bot IA sur mobile), le chemin fonctionne, mais il n’y a aucun moyen de revenir au forum.

Voici le comportement par défaut que F NAV pourrait imiter pour ce bouton spécifique afin de permettre le comportement `retour au forum` :

NOTE : Le paramètre pour activer cette icône est ai_bot_add_to_header

1 « J'aime »