F NAV - Onglets de Navigation Mobiles

:information_source: Résumé F NAV - Onglets de navigation mobile
: eyeglasses: Aperçu Theme Creator
:hammer_and_wrench: Dépôt GitHub - VaperinaDEV/f-nav-for-mobile: F NAV - Mobile Navigation Tabs
:question: Guide d’installation Comment installer un thème ou un composant de thème
:open_book: Nouveau sur les thèmes Discourse ? Guide du débutant pour l’utilisation des thèmes Discourse

Installer ce composant de thème

Bonjour :wave:

Auparavant, j’ai créé un sujet Dev sujet pour cela en tant que concept de composant de thème et maintenant il est dans un état pour être un Theme component.

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

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


À propos du composant de thème. J’ai lu tellement de publications à ce sujet 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 plus encore…

En-tête

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

Paramètres

Il contient également un paramètre où vous pouvez ajouter des éléments personnalisés avant l’élément Déconnexion.
Il contient 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 afin qu’il soit 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 changements comprennent :

Fonctions

home

  • transforme l’icône de l’onglet d’accueil sur les routes de sujets en une flèche gauche qui ajoute une fonction de retour arrière
    Screenshot 2024-12-13 at 12.29.33
  • ajoute un point indicateur de sujet nouveau ou non lu
    Screenshot 2024-12-13 at 12.30.52

hamburger (ouvre le menu hamburger)


multi

Onglet multi

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

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

Les notifications urgentes de l’onglet Multi sont vertes et ressemblent à ceci. :arrow_down_small:


Développé

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

Développé

Notification unique


message

  • ajoute un bouton de message avec notifications et le cliquer 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 changera en icône de cloche barrée et le temps jusqu’au dnd apparaîtra
    Screenshot 2024-12-13 at 13.02.35

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

  • si il y a une notification, redirige vers /notifications?filter=unread

  • s’il n’y a pas de notification, redirige vers /notifications

  • s’il y a un contenu à réviser, un drapeau rouge apparaîtra et redirigera vers /review


notificationMenu

  • si le mode ne pas déranger est actif, l’icône de cloche changera en icône de cloche barrée et le temps jusqu’au dnd apparaîtra
    Screenshot 2024-12-13 at 13.02.35

  • ouvre le menu de notification


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.
Ils contiendront quatre champs.

  • name : Ceci est juste pour identifier plus facilement l’onglet dans les paramètres.
  • icon : Ajoute une icône à l’onglet. Remarque : Si vous sélectionnez une fonction, il peut y avoir des icônes qui ne peuvent 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 la laisser vide. Le composant gère les destinations /my/... en les convertissant automatiquement en /u/username/... afin que le statut actif des onglets puisse être ajouté correctement.
  • function : Choisissez une fonction pour l’onglet.

Les administrateurs peuvent simplement créer/supprimer/modifier des onglets et choisir parmi 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 ressemblera simplement à ceci.


Screenshot 2024-12-12 at 18.55.50


Crédit : Barre d’onglets Discourse pour mobile et merci à tous pour vos commentaires dans le sujet F NAV - Concept de composant de thème. :heart:

21 « 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 »