F NAV – Onglets de navigation mobile

Don · Décembre 13, 2024, 1:12


	Résumé	F NAV - Onglets de navigation mobile
	Aperçu	Theme Creator
	Dépôt	GitHub - VaperinaDEV/f-nav-for-mobile: F NAV - Mobile Navigation Tabs · GitHub
	Vous l’avez trouvé utile ?	> ./support --coffee
	Guide d’installation	Comment installer un thème ou un composant de thème
	Nouveau aux thèmes Discourse ?	Guide du débutant pour utiliser les thèmes Discourse

Installer ce composant de thème

Bonjour

Auparavant, j’avais créé un sujet Development ici pour ce projet en tant que concept de composant de thème, et maintenant il est prêt à devenir un Customization > Theme component.

Veuillez absolument le tester avant de l’utiliser en production.

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

À propos du composant de thème. J’ai lu tellement de posts disant 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 le faire et bien plus encore…

En-tête

Il masque le menu 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 Déconnexion.
Il comporte trois champs où vous pouvez facilement ajouter des éléments personnalisés.

Il y a quelques paramètres pour afficher/masquer les icônes d’en-tête par défaut, ce qui est utile si 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 incluent :

Fonctions

home

change l’icône de l’onglet d’accueil en flèche vers la gauche sur les routes de sujet, ajoutant une fonction de retour en arrière
ajoute un point indicateur de nouveau ou non lu

hamburger (ouvre le menu hamburger)

multi

onglet multi

L’onglet multi passe automatiquement à 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.

Déplié

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

Déplié

Notification unique

message

ajoute un bouton de message avec les notifications et un clic dessus 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 l’heure de fin du NPD apparaîtra
redirige vers la page des notifications du profil en contournant le menu de 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 à examiner, 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 l’heure de fin du NPD apparaîtra
ouvre le menu de 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 contiendra quatre champs.

name (nom) : C’est juste pour identifier plus facilement l’onglet dans les paramètres.
icon (icône) : Ajoute une icône à l’onglet. Note : Si vous sélectionnez une fonction, il y a peut-être des icônes qui ne peuvent pas être remplacées par ce paramètre.
destination (destination) : Ajoute une destination pour votre onglet personnalisé. Note : Si vous sélectionnez une fonction, celle-ci gérera la destination, vous pouvez donc laisser ce champ vide. Le composant convertit automatiquement les destinations /my/... en /u/username/... afin que l’état actif des onglets puisse être ajouté correctement.
function (fonction) : 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

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

Crédits : Discourse Tab Bar for Mobile et merci à tous pour les retours dans le sujet F NAV - Theme component concept.

Canapin · Décembre 13, 2024, 1:31

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 .

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.

ozkn · Décembre 13, 2024, 1:42

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

Monikas · Décembre 14, 2024, 6:18

Ce devrait être un bug

Don · Décembre 14, 2024, 6:21

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

Don · Décembre 14, 2024, 8:17

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

ozkn · Décembre 14, 2024, 5:20

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.

Don · Décembre 15, 2024, 11:30

Bonjour 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.

ozkn · Décembre 15, 2024, 1:09

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

Jagster · Décembre 15, 2024, 1:53

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 ). 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 )

Don · Décembre 15, 2024, 4:06

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.

Jagster · Décembre 15, 2024, 4:39

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.

Don · Décembre 15, 2024, 5:26

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.

Heliosurge · Décembre 21, 2024, 7:08

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 !

MihirR · Janvier 6, 2025, 5:46

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

Don · Janvier 6, 2025, 5:54

CAX.DO · Janvier 18, 2025, 12:10

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.

Don · Janvier 18, 2025, 1:52

Salut Max

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.

CAX.DO · Janvier 18, 2025, 2:58

Salut Don
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.

Don · Janvier 18, 2025, 3:15

Merci pour la clarification

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

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

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

Sujet		Réponses	Vues
F NAV - Theme component concept Development	22	719	Décembre 13, 2024
Discourse Tab Bar for Mobile Theme component	79	23022	Juillet 28, 2026
Quick access to bookmarks and messages on user menu Feature	55	7153	Novembre 3, 2020
Left side hamburger menu on mobile Theme component mobile	50	4345	Juillet 29, 2026
Header Submenus Theme component official , header-submenus	87	39219	Février 18, 2026

F NAV – Onglets de navigation mobile

En-tête

Paramètres

Onglets

Fonctions

Paramètres

Sujets connexes