Menu des liens rapides du profil

[Don]

	Résumé	Menu des liens de profil rapides
	Aperçu	Theme Creator
	Dépôt	GitHub - VaperinaDEV/quick-profile-links-menu · 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 de débutant pour l’utilisation des thèmes Discourse

Installer ce composant de thème

Bonjour

La navigation dans les préférences utilisateur peut être un peu difficile par moments, surtout pour les nouveaux utilisateurs. Ce composant de thème permet d’ajouter plusieurs liens de paramètres importants sur les pages utilisateur et d’ajouter un onglet de profil personnalisé au menu utilisateur…

Liens du menu des pages utilisateur

Ce bouton de menu est placé dans la section des boutons de contrôle du profil utilisateur.

---

En cliquant sur l’élément du menu, il redirige vers le champ souhaité. Pour y parvenir, j’ai ajouté un attribut id pour chaque champ, ayant la même valeur que l’attribut [data-setting-name]. Nous pouvons donc maintenant l’utiliser comme ancre. Par exemple : /u/username/preferences/profile#user-bio

Vous pouvez les inspecter en faisant un clic droit sur le titre du paramètre et en vérifiant l’id. Dans ce cas, la valeur setting doit être user-username. Ce paramètre est un champ facultatif, donc le laisser vide redirigera vers la page, et non vers le paramètre.

---

Paramètres des liens du menu des pages utilisateur

Avec le paramètre profile links, vous pouvez ajouter ces liens rapides.

1. icône (icône fontawesome) requis
2. libellé (le libellé du lien) requis
3. page (vers quelle page souhaitez-vous être redirigé)
   • account
   • security
   • profile
   • emails
   • notifications
   • tracking
   • users
   • interface
4. setting (vers quel champ de paramètre souhaitez-vous être redirigé) facultatif

Voici quelques champs de paramètres à utiliser.

• account

  • user-username
  • user-avatar
  • user-email
  • user-associated-accounts
  • user-name
  • user-title
  • user-flair
  • user-data-export

• profile

  • user-bio
  • user-timezone
  • user-location
  • user-website
  • user-profile-bg
  • user-card-bg
  • user-featured-topic

• interface

  • user-theme
  • user-color-scheme
  • user-text-size
  • user-locale
  • user-home
  • user-other-settings

---

Onglet de profil personnalisé du menu utilisateur

Avec le paramètre enabled user menu tab, vous pouvez activer cet onglet de profil personnalisé. Cet onglet est une recréation de l’onglet Profil par défaut.

Que fait-il ?

• masque l’onglet profil par défaut dans le menu utilisateur
• ajoute un onglet de profil personnalisé en haut du menu utilisateur
  • l’icône de l’onglet est modifiable avec le paramètre user menu tab icon
• ajoute des éléments personnalisés sous le bouton préférences
  • ces éléments sont modifiables avec le paramètre profile menu preference items
• ajoute des éléments supplémentaires personnalisés avant le bouton de déconnexion
  • ces éléments sont modifiables avec le paramètre profile menu extra items

Paramètres de l’onglet de profil personnalisé

Pour les éléments de préférences (qui se trouvent sous le bouton Préférences), avec profile_menu_preference_items, vous pouvez ajouter/supprimer…

1. icône (icône fontawesome) facultatif
2. libellé (le libellé du lien) requis
3. page (vers quelle page souhaitez-vous être redirigé)
   • account
   • security
   • profile
   • emails
   • notifications
   • tracking
   • users
   • interface
4. setting (vers quel champ de paramètre souhaitez-vous être redirigé) facultatif

Voici quelques champs de paramètres à utiliser.

• account

  • user-username
  • user-avatar
  • user-email
  • user-associated-accounts
  • user-name
  • user-title
  • user-flair
  • user-data-export

• profile

  • user-bio
  • user-timezone
  • user-location
  • user-website
  • user-profile-bg
  • user-card-bg
  • user-featured-topic

• interface

  • user-theme
  • user-color-scheme
  • user-text-size
  • user-locale
  • user-home
  • user-other-settings

---

Les éléments supplémentaires peuvent être placés au-dessus du bouton de déconnexion avec le paramètre profile menu extra items.

1. icône (icône fontawesome) facultatif
2. libellé (le libellé du lien) requis
3. url (vers quelle url souhaitez-vous être redirigé) requis

[nathank (Nathan Kershaw)]

Alléluia !!! Enfin quelqu’un s’est attaqué à ça - à mon avis, c’est l’un des plus gros problèmes pour les nouveaux utilisateurs de Discourse.

Une chose que je remarque, c’est qu’il faut toujours plusieurs clics pour y accéder via l’avatar en haut à droite. C’est l’endroit intuitif où les nouveaux utilisateurs vont.

[Don]

Salut @nathank Je pense que c’est une excellente idée de trouver un chemin plus rapide. Je l’ai ajouté à l’onglet du menu utilisateur.

@Don

Il peut également être placé dans le menu utilisateur.
Que vous pouvez activer avec un paramètre. enabled user menu tab

configuration par défaut

FEATURE: Adds a setting to show quick profile links in user menu tab

[nathank (Nathan Kershaw)]

Impressionnant ! Beau travail !

Mais je pense que nous pourrions aller plus loin, avec le concept de modifier l’objectif principal/standard du menu Avatar de Notifications (avec un profil en pensée secondaire) à Profil + Notifications (ce que je pense que cela devrait être). Nous avons déjà un onglet Profil, mais il n’est pas très visible :

Une façon d’y parvenir :

1. Utiliser l’onglet Profil existant sur le menu Avatar
2. Placer cet onglet en haut (c’est-à-dire là où se trouve actuellement l’icône d’édition pour les liens de profil rapides)
3. Permettre à l’administrateur de personnaliser le menu de l’onglet Profil

Je suppose que la manière la plus simple serait de simplement masquer l’onglet Profil existant et de le recréer en utilisant le TC. Le bouton de déconnexion est le seul point délicat, et pourrait nécessiter un peu de code (il existe un TC existant pour cela). Les notifications en ligne et en pause sont aussi un peu complexes.

Peut-être serait-il plus facile de déplacer l’onglet et d’y ajouter/soustraire des éléments. Qu’en pensez-vous ?

[Lilly (Lillian)]

Bravo, bon travail Don. C’est un excellent ajout. Merci !

[Don]

J’ai un concept pour quelque chose comme ça.
Je pense que ce serait une bonne idée de séparer les paramètres.

1. déplacer le profil en haut
2. masquer les Préférences
3. supprimer la bordure supérieure

4. changer l’icône de l’onglet personnalisé en engrenage par défaut
5. ajouter une bordure inférieure pour séparer des notifications
6. ajouter un bouton voir tous les paramètres en bas (rediriger vers /my/preferences/account)

Qu’en pensez-vous ?

[Jagster (Jakke Flemming)]

Mais les paramètres utilisateur sont moins et rarement utilisés. Je ne suis pas sûr que sa place devrait être la première, quoi qu’il soit sélectionné par défaut.

[Monikas (JustMonika)]

Les composants que vous développez sont un spectacle à voir à chaque fois haha

[Jagster (Jakke Flemming)]

Comment trouver la bonne valeur pour setting ?

[nathank (Nathan Kershaw)]

@Don

J’ai une idée pour quelque chose comme ça.
Je pense que ce serait une bonne idée de séparer les paramètres

C’est une excellente façon de faire le tri ! Ça reste propre et simple.

Cependant, je préférerais (assez fortement) que tout soit regroupé dans un seul onglet Profil, car Résumé et Activité sont aussi des liens fermement liés au Profil - et cela finit par diviser inutilement les liens relatifs à l’utilisateur en deux onglets.

Est-il possible de se connecter à l’onglet Profil ?

[Don]

@Jagster

Comment trouver la bonne valeur pour setting ?

Vous pouvez la trouver dans l’OP et vous pouvez également l’inspecter en faisant un clic droit sur le titre du paramètre et en le vérifiant ici, l’id. Dans ce cas, la valeur de setting devrait être user-username, mais je pense que je vais en faire un champ optionnel afin qu’il soit possible de rediriger vers une page sans ajouter de paramètre.

---

@nathank

Cependant, je préférerais (assez fortement) que tout soit regroupé dans un seul onglet Profil, car Résumé et Activité sont aussi fermement des liens de Profil - et cela finit par diviser inutilement les liens relatifs à l’utilisateur en deux onglets.

Est-il possible de se connecter à l’onglet Profil ?

Petite mise à jour ici :

Je suis d’accord avec vous.

1. J’ai recréé l’onglet de profil et y ai ajouté des liens rapides.
2. Cacher l’onglet de profil par défaut
3. Changer l’icône de l’onglet personnalisé en utilisateur

Voici à quoi cela ressemble maintenant.

J’ai activé un aperçu de cela dans le créateur de thèmes : https://discourse.theme-creator.io/theme/Don/quick-profile-links-test

[Jagster (Jakke Flemming)]

J’aime ce plan de page, car c’est pour cela que je l’utilise. Bon, la photo de profil est une autre histoire.

J’avais peur de ce truc de clic droit C’est juste que je travaille presque entièrement avec des mots, je n’ai pas utilisé mon ordinateur portable depuis mai dernier, je crois. Mais on ne peut rien y faire, c’est juste et uniquement mon choix. J’ai une console sur iPad, cependant. Je ne savais juste pas quoi chercher. Maintenant, je sais. Merci !

[Jagster (Jakke Flemming)]

@Don

J’ai recréé l’onglet de profil et y ai ajouté des liens rapides

Ce sera assez serré, non ? Parce que ça ressemble à ça maintenant dans la vraie vie :

[Don]

J’ai modifié le padding des boutons, j’ai utilisé une taille de police plus petite pour les sous-éléments des préférences, etc. ainsi les éléments ont moins de hauteur qu’avant et j’ai également rendu le contenu de cet onglet déroulant. Je fusionne cela maintenant avec une mise à jour…

[Don]

Mise à jour
J’ai également mis à jour l’OP.

Cette mise à jour masque l’onglet Profil par défaut et ajoute un onglet Profil personnalisé dans le menu utilisateur avec la possibilité d’ajouter des éléments personnalisés sous l’élément Préférences et également d’ajouter des éléments personnalisés avant le bouton Déconnexion.

Onglet Profil personnalisé dans le menu utilisateur

Contrôlé par le paramètre enabled_user_menu_tab.

• masquer l’onglet profil par défaut dans le menu utilisateur
• ajoute l’onglet profil personnalisé dans le menu utilisateur en haut
  • l’icône de l’onglet est modifiable avec le paramètre user_menu_tab_icon
• ajoute des éléments personnalisés sous le bouton préférences
  • ces éléments sont modifiables avec le paramètre profile_menu_preference_items
• ajoute des éléments supplémentaires personnalisés avant le bouton de déconnexion
  • ces éléments sont modifiables avec le paramètre profile_menu_extra_items

Paramètres

• profile_menu_preference_items et profile_menu_extra_items le champ icône est maintenant facultatif.
• profile_links et profile_menu_preference_items le champ paramètre est maintenant facultatif, ce qui signifie qu’il peut ajouter des liens pour rediriger vers une page, pas un paramètre.

---

FEATURE: Adds custom Profile tab in user menu

[Jagster (Jakke Flemming)]

@Don

les éléments sont moins hauts

Ce serait un énorme problème d’UX sur mobile et sur tous les écrans tactiles

Je déteste dire ça, mais la direction va vers le bureau uniquement.

Je me suis trompé sur cette préoccupation. Bien sûr, il est maintenant entièrement peuplé, mais cela fonctionne très bien.

[Jagster (Jakke Flemming)]

Mais que devrait faire la désactivation de enabled user menu tab ? Je pensais que l’onglet précédent du crayon apparaîtrait, mais non.

[Don]

@Jagster

Mais que devrait faire la désactivation de « onglet du menu utilisateur activé » ?

Toute la fonctionnalité de profil personnalisé du menu utilisateur. Si vous la désactivez, elle n’aura aucun effet sur le menu utilisateur.

[Jagster (Jakke Flemming)]

Oui, quand il est activé. Mais quand il est désactivé, c’est essentiellement la même chose que de désactiver le composant entier

[Don]

Non, si vous avez désactivé alors seul le menu des liens rapides de la page utilisateurs apparaîtra.