F NAV - Onglets de navigation mobile

Installer ce composant de thème

Bonjour :wave:

J’avais auparavant créé un sujet Development topic pour en faire un concept de composant de thème, et maintenant il est dans un état prêt à devenir un Customization > Theme component.

:warning: Assurez-vous de le tester avant de l’utiliser en production.

Quelques informations ici sur le composant : F NAV - Theme component concept


À propos du composant de thème. J’ai lu beaucoup de messages indiquant qu’il serait formidable de rendre la Barre d’onglets Discourse pour mobile plus dynamique et d’ajouter la possibilité de gérer, par exemple, les notifications, etc. F-NAV peut faire cela et bien plus encore…

En-tête

Il masque le bouton hamburger, le menu utilisateur, la recherche et le chat, et ajoute un bouton de menu de profil (avatar) qui contient le contenu de l’onglet de profil du menu utilisateur par défaut.

Paramètres

Il contient également un paramètre où vous pouvez ajouter des éléments personnalisés avant l’élément « Se déconnecter ».
Il comporte trois champs où vous pouvez facilement ajouter des éléments personnalisés.

Il existe quelques paramètres pour afficher/masquer les icônes d’en-tête par défaut, ce qui est utile lorsque vous ne souhaitez pas placer l’onglet exact dans F NAV, auquel cas il sera affiché dans l’en-tête.

Onglets

Il est possible d’associer différentes fonctions aux onglets. Ces fonctions permettent à chaque onglet de changer dynamiquement.

Screenshot 2024-12-13 at 13.06.14

Ces modifications incluent :

Fonctions

home (Accueil)

  • change l’icône de l’onglet Accueil sur les routes de sujet en une flèche gauche, ajoutant ainsi une fonction « retour »
    Screenshot 2024-12-13 at 12.29.33
  • ajoute un indicateur de point pour les nouveaux sujets ou les sujets non lus
    Screenshot 2024-12-13 at 12.30.52

hamburger (ouvre le menu hamburger)


multi

multi tab

L’onglet Multi change automatiquement en onglet Messages si le chat n’est pas activé ou si l’utilisateur le désactive dans les paramètres utilisateur.

La bulle de notification change selon qu’elle est urgente ou non.

Les notifications urgentes de l’onglet Multi sont vertes et ont cette apparence. :arrow_down_small:


Développé

Le message personnel est toujours vert, mais le chat peut être bleu comme à l’origine, par exemple pour la notification de message de canal non lu.

Développé

Notification unique


message

  • ajoute un bouton de message avec des notifications et son clic ouvre une modale de messages pour un aperçu rapide

chat

  • ajoute un bouton de chat avec ses fonctions

notificationToRoute

  • si le mode « Ne pas déranger » est actif, l’icône de cloche passera à l’icône cloche barrée et le temps restant jusqu’à la fin du mode NPD s’affichera
    Screenshot 2024-12-13 at 13.02.35

  • redirige vers la page des notifications de profil en contournant le menu des notifications

    • s’il y a des notifications, il redirige vers /notifications?filter=unread
    • s’il n’y a pas de notifications, il redirige vers /notifications
    • s’il y a du contenu à vérifier, un indicateur rouge apparaîtra et il redirigera vers /review

notificationMenu

  • si le mode « Ne pas déranger » est actif, l’icône de cloche passera à l’icône cloche barrée et le temps restant jusqu’à la fin du mode NPD s’affichera
    Screenshot 2024-12-13 at 13.02.35

  • ouvre le menu des notifications


search

  • redirige vers la page /search basée sur le contexte

Paramètres

J’ai essayé de rendre les paramètres aussi simples que possible.
Il comportera quatre champs.

  • name : Cela sert uniquement à identifier plus facilement l’onglet dans les paramètres.
  • icon : Ajoute une icône à l’onglet. Remarque : Si vous sélectionnez une fonction, il se peut que certaines icônes ne puissent pas être remplacées par ce paramètre.
  • destination : Ajoute une destination pour votre onglet personnalisé. Remarque : Si vous sélectionnez une fonction qui gérera la destination, vous pouvez laisser ce champ vide. Le composant convertit automatiquement les destinations /my/... en /u/username/... afin que l’état actif de l’onglet puisse être ajouté correctement.
  • function : Choisissez une fonction pour l’onglet.

Les administrateurs peuvent simplement créer/supprimer/modifier des onglets et sélectionner l’une des fonctions ou ajouter une destination personnalisée à l’onglet.
Fonctions :arrow_down_small:

Par exemple, l’ajout d’un onglet de création de sujet ressemblerait simplement à ceci.


Screenshot 2024-12-12 at 18.55.50


Crédits : Discourse Tab Bar for Mobile et merci à tous pour les retours dans le sujet F NAV - Concept de composant de thème. :heart:

22 « J'aime »

C’est génial et devrait légitimement être le comportement par défaut et cela évitera à mon pouce d’avoir à atteindre trop souvent le haut de l’écran de mon :mobile_phone:.

Je ne suis pas fan du bouton bascule “en ligne” proéminent car je pense que la plupart des gens n’ont pas besoin de changer ce paramètre souvent, je suppose que la plupart des utilisateurs choisissent de se désengager de leur présence en ligne une fois pour toutes, donc je ne suis pas sûr du rappel constant que cette option existe.

Vous avez apparemment apporté de nombreuses modifications de navigation très utiles aux composants thématiques. J’aimerais en utiliser certains, mais dans quelle mesure voyez-vous vous-même maintenir tout cela à long terme ? J’ai tendance à n’utiliser que les composants thématiques #officiels pour garantir la fiabilité.

Je n’ai pas vu le composant thématique officiel de la barre d’onglets d’origine, je vais donc y jeter un coup d’œil.

7 « J'aime »

Merci pour le composant @don, je suis là depuis longtemps, vous faites vraiment un excellent travail.

3 « J'aime »

Ce devrait être un bug

2 « J'aime »

Ah merci, c’est lié au thème FKB. Je vais mettre à jour le thème.

3 « J'aime »

Voici la correction : Compatibility: Adds support for F NAV theme component by VaperinaDEV · Pull Request #51 · VaperinaDEV/fkb-pro-theme · GitHub
Veuillez mettre à jour le thème FKB et activer ce nouveau paramètre.
Screenshot 2024-12-14 at 9.17.02

3 « J'aime »

Bonjour @don, comment puis-je utiliser les icônes fa-regular comme sur l’image ? J’ai fait quelques recherches et je n’ai trouvé aucune information sur la façon de le faire après être passé à Fontawesome 6.

3 « J'aime »

Bonjour :waving_hand: Cela devrait fonctionner avec far-bell. J’avais prévu de le faire passer de régulier à plein lorsque l’onglet est actif, je vais vérifier cela mais si je me souviens bien, l’icône de maison n’a que la version pleine dans la version gratuite. :thinking:

1 « J'aime »

Merci, j’ai résolu mon problème. @Don

1 « J'aime »

L’icône d’accueil, qui se transforme en bouton retour lorsque vous ouvrez un sujet. Pourquoi, nous pouvons utiliser le balayage pour cela (comme lorsque vous revenez à l’écran d’accueil du Hub :smirking_face:). Mes utilisateurs se sont pas mal plaints de cela, car maintenant ils doivent atteindre le logo pour cela (problème du premier monde, je sais :joy:)

2 « J'aime »

Je pense que nous pouvons l’ajouter à une fonction, je réfléchis juste à l’endroit où la placer. Cela peut être un seul onglet et vous pouvez l’ajouter à la navigation qui n’apparaît que dans DiscourseHub.

1 « J'aime »

En fait, DiscourseHub fonctionne très bien en balayant vers le bas. Je ne le savais tout simplement pas.

Cette question du bouton d’accueil/retour est plus importante car je dois l’expliquer à d’autres.

3 « J'aime »

Le bouton de retour n’est activé que dans les sujets pour faciliter la navigation entre les sujets. Il provient de la fonction d’accueil que vous pouvez désactiver et qui conservera alors la destination d’accueil.

Les paramètres ne peuvent pas encore être réorganisés et si vous avez une sélection existante, vous ne pouvez pas la vider, mais j’ai ajouté une nouvelle fonction none qui aura le même comportement que si vous laissiez le champ de fonction vide. De cette façon, vous n’aurez pas à recréer tous les onglets de navigation.

Voici comment cela devrait être si vous souhaitez désactiver le bouton de retour et conserver l’accueil partout.

3 « J'aime »

Fantastique comme toujours. Je dois être d’accord d’après l’aperçu rapide sur le créateur de thèmes. Cela devrait vraiment être inclus dans le cœur avec une option pour le mobile classique et le mobile amélioré.

Je peux voir que cela ouvre des possibilités comme un logo de site plus long. Une option plus propre pour les extras dans l’en-tête comme le sélecteur de langue et plus encore. Très, très bien comme toujours Don !

3 « J'aime »

L’icône du crayon et les sujets de navigation se réduisent avec la barre de navigation.

1 « J'aime »
4 « J'aime »

Salut Don. Merci pour ton excellent travail. J’aime ça.
J’ai une question. Après avoir cliqué sur le Hamburger ou la Notification, je n’ai parfois plus besoin d’entreprendre d’autres actions. À ce moment-là, je dois revenir à la liste des articles. Cependant, je ne peux fermer le Hamburger ou la Notification qu’en cliquant sur la page blanche. Cela peut entraîner des clics accidentels sur l’avatar ou la réponse.

Pour donner un autre exemple simple, lorsque je suis sur la page de chat et que je dois revenir à la page d’accueil, je dois cliquer sur le bouton retour dans le coin supérieur gauche, ce qui n’est pas très convivial sur les appareils mobiles.

Il est donc possible de garder la barre de menu toujours en haut ?

J’espère que ma description sera comprise.

2 « J'aime »

Salut Max :wave:

Peux-tu faire des captures d’écran / enregistrements d’écran concernant le problème ?

Sur /chat, nous masquons la navigation et utilisons l’en-tête de chat par défaut. Je ne suis pas sûr que cela vaille la peine d’afficher la navigation sur le chat car cela pourrait causer des problèmes sur différents navigateurs, mais je vais vérifier cela.

1 « J'aime »

Salut Don :smiley:
Merci pour votre réponse.
Veuillez vous référer aux captures d’écran ci-dessous. Les deux premières captures d’écran signifient que lorsque je veux fermer le Hamburger ou la Notification, je ne peux cliquer que sur la zone jaune. Le problème est qu’il est facile de cliquer accidentellement sur l’article ou l’avatar.

La troisième capture d’écran signifie que je dois cliquer sur le bouton Retour dans le coin supérieur gauche pour quitter l’interface de chat.



1 « J'aime »

Merci pour la clarification :blush:

Oui, je vois. Le problème ici n’est pas le composant, mais un problème fondamental lorsque vous avez activé le paramètre “réduire le mouvement” sur votre appareil. Est-il activé sur votre appareil ?

Lorsque “réduire le mouvement” est désactivé. Le header-cloak (zone sombre derrière le menu) bloque l’action de clic.

Lorsque je l’active sur mon appareil, cela ne bloque pas le clic de l’utilisateur.

Si tel est le cas, vous pouvez également fermer les menus en toute sécurité avec des gestes de balayage.

Je pense avoir un sujet sur ce problème quelque part :thinking:

C’est l’en-tête de chat par défaut.

Je vais vérifier si nous pouvons activer la navigation là aussi.

3 « J'aime »