F NAV - Onglets de Navigation Mobiles

Composant de thème
63

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

64

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

65

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

1 « J'aime »
67

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

68

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

image
image354×105 5.64 KB

Application iPhone Discourse Hub
image
image354×105 5.64 KB

iPhone Safari
Une simple rangée d'icônes grises et vertes représentant une maison, un menu, des notifications avec un compte de un et une personne est affichée sur un fond blanc. (Légendé par l'IA)
Une simple rangée d'icônes grises et vertes représentant une maison, un menu, des notifications avec un compte de un et une personne est affichée sur un fond blanc. (Légendé par l'IA)1170×197 10.4 KB

Andriod Edge
Une interface minimaliste affiche des icônes de navigation, y compris retour, options, une bulle de dialogue mise en surbrillance et un profil utilisateur, le tout dans un schéma de couleurs monochrome avec un accent vert. (Légendé par l'IA)
Une interface minimaliste affiche des icônes de navigation, y compris retour, options, une bulle de dialogue mise en surbrillance et un profil utilisateur, le tout dans un schéma de couleurs monochrome avec un accent vert. (Légendé par l'IA)954×150 12.5 KB

70

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 »
71

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

72

@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 »
73

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:

2 « J'aime »