Menú de enlaces rápidos de perfil

Instalar este componente de tema

Hola :wave:

Navegar por las preferencias del usuario puede ser un poco difícil a veces, especialmente para los usuarios nuevos. Este componente de tema permite agregar varios enlaces de configuración importantes en las páginas de usuario y agregar una pestaña de perfil personalizada en el menú de usuario…

Enlaces del menú de páginas de usuario

Este botón de menú se coloca en la sección de botones de control del perfil de usuario.



Al hacer clic en el elemento del menú, se redirigirá al campo deseado. Para lograr esto, he agregado un atributo id para cada campo que tiene el mismo valor que el atributo [data-setting-name]. Así que ahora podemos usar esto como un ancla. Por ejemplo: /u/username/preferences/profile#user-bio

Puedes inspeccionar esto haciendo clic derecho en el título de la configuración y verificando el id. En este caso, el valor de setting debería ser user-username. Esta configuración es un campo opcional, por lo que dejarlo vacío redirigirá a la página, no a la configuración.


Configuración del menú de páginas de usuario

Con la configuración de profile links puedes agregar estos enlaces rápidos.

  1. icono (icono de fontawesome) requerido
  2. etiqueta (la etiqueta del enlace) requerida
  3. página (¿a qué página quieres que se redirija?)
    • cuenta
    • seguridad
    • perfil
    • correos electrónicos
    • notificaciones
    • seguimiento
    • usuarios
    • interfaz
  4. configuración (¿a qué campo de configuración quieres que se redirija?) opcional
Aquí hay algunos campos de configuración para usar.
  • cuenta

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

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

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

Pestaña de perfil personalizada del menú de usuario

Con la configuración enabled user menu tab puedes habilitar esta pestaña de perfil personalizada. Esta pestaña es una recreación de la pestaña de Perfil predeterminada.

¿Qué hace?

  • oculta la pestaña de perfil predeterminada en el menú de usuario
  • agrega una pestaña de perfil personalizada en el menú de usuario en la parte superior
    • el icono de la pestaña se puede cambiar con la configuración user menu tab icon
  • agrega elementos personalizados debajo del botón de preferencias
    • estos elementos se pueden cambiar con la configuración profile menu preference items
  • agrega elementos adicionales personalizados antes del botón de cierre de sesión
    • estos elementos se pueden cambiar con la configuración profile menu extra items

Configuración de la pestaña de perfil personalizada

Para los elementos de preferencias (que están debajo del botón de Preferencias) con profile_menu_preference_items puedes agregar/eliminar…

  1. icono (icono de fontawesome) opcional
  2. etiqueta (la etiqueta del enlace) requerida
  3. página (¿a qué página quieres que se redirija?)
    • cuenta
    • seguridad
    • perfil
    • correos electrónicos
    • notificaciones
    • seguimiento
    • usuarios
    • interfaz
  4. configuración (¿a qué campo de configuración quieres que se redirija?) opcional
Aquí hay algunos campos de configuración para usar.
  • cuenta

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

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

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

Los elementos adicionales se pueden colocar encima del botón Cerrar sesión con la configuración profile menu extra items.

  1. icono (icono de fontawesome) opcional
  2. etiqueta (la etiqueta del enlace) requerida
  3. url (¿a qué url quieres que se redirija?) requerida
17 Me gusta

¡Aleluya! Finalmente alguien ha abordado esto; en mi opinión, este es uno de los mayores problemas para los nuevos usuarios de Discourse.

Una cosa que noto es que todavía hay varios clics para llegar a él a través del avatar en la parte superior derecha. Este es el lugar intuitivo al que los nuevos usuarios deben ir.

5 Me gusta

Hola @nathank :wave: Creo que es una gran idea encontrar un camino más rápido. Lo he añadido a la pestaña del menú de usuario.

4 Me gusta

¡Guau! ¡Buen trabajo!

Pero creo que podríamos ir más allá, con el concepto de alterar el enfoque principal/estándar del menú del Avatar de Notificaciones (con un perfil como algo secundario) a Perfil + Notificaciones (que creo que debería ser). Ya tenemos una pestaña de Perfil, pero no es muy prominente:

Una forma de lograrlo sería:

  1. Utilizar la pestaña de Perfil existente en el menú del Avatar
  2. Poner esa pestaña en la parte superior (es decir, donde está ahora el icono de edición de los enlaces rápidos del perfil)
  3. Permitir al administrador personalizar el menú de la pestaña de Perfil

Supongo que la forma fácil sería simplemente ocultar la pestaña de Perfil existente y recrearla usando el TC. El botón de Cerrar sesión es la única parte complicada y podría requerir un poco de código (hay un TC existente para eso). La parte de notificaciones en línea y pausa también es un poco elaborada.

Quizás sería más fácil reorganizar la pestaña y añadir/restar de ella. ¿Qué opinas?

4 Me gusta

¡Guau, buen trabajo Don. Es una gran adición. ¡Gracias! :slight_smile: :clap:

2 Me gusta

Tengo un concepto para algo así.
Creo que podría ser una buena idea separar la configuración.

  1. Mover el perfil a la parte superior
  2. Ocultar Preferencias
  3. Eliminar el borde superior

  1. Cambiar el icono de la pestaña personalizada a un engranaje por defecto
  2. Añadir un borde inferior para separar de las notificaciones
  3. Añadir un botón ver todas las configuraciones en la parte inferior (redirigir a /my/preferences/account)

¿Qué opinas?

4 Me gusta

Pero la configuración del usuario se usa menos y con poca frecuencia. No estoy seguro de si su lugar debería ser el primero, sin importar lo que se seleccione por defecto.

2 Me gusta

Los componentes que desarrollas son un espectáculo digno de contemplar cada vez, jaja.

5 Me gusta

¿Cómo encuentro el valor correcto para setting?

¡Esa es una forma bastante buena de organizarlo! Lo mantiene limpio y simple.

Sin embargo, preferiría (bastante firmemente) que todo estuviera agrupado en la pestaña Perfil, ya que Resumen y Actividad también son enlaces firmes de Perfil, y esto termina dividiendo los enlaces relacionados con el usuario en dos pestañas de forma un tanto innecesaria.

¿Es posible conectarse a la pestaña Perfil?

3 Me gusta

Puedes encontrarlo en el OP y también puedes inspeccionarlo haciendo clic derecho en el título de la configuración y comprobándolo aquí, el id. En este caso, el valor de setting debería ser user-username, pero creo que lo haré un campo opcional para que sea posible redirigir a la página sin añadir la configuración.


Pequeña actualización aquí:

Estoy de acuerdo contigo.

  1. He recreado la pestaña de perfil y le he añadido enlaces rápidos.
  2. Ocultar la pestaña de perfil predeterminada
  3. Cambiar el icono de la pestaña personalizada a usuario

Así es como se ve ahora.


He habilitado una vista previa de esto en el creador de temas: https://discourse.theme-creator.io/theme/Don/quick-profile-links-test

4 Me gusta

Me gusta ese plan de página, porque para eso lo uso. Bueno, la foto de perfil es otra historia.

Tenía miedo de esa cosa del clic derecho :joy: Solo porque trabajo casi totalmente con palabras, no he usado mi portátil desde el mayo pasado, creo. Pero no hay remedio, es solo y únicamente mi elección. Tengo una consola en el iPad, sin embargo. Simplemente no sabía qué buscar. Ahora lo sé. ¡Gracias!

2 Me gusta

Será bastante ajustado, ¿no? Porque así es como se ve en la vida real:

1 me gusta

He cambiado el relleno de los botones, he usado un tamaño de fuente más pequeño para los subelementos de preferencias, etc., por lo que los elementos tienen menos altura que antes y también he hecho que el contenido de esta pestaña sea desplazable. Fusiono esto ahora con alguna actualización…

2 Me gusta

Actualización :tada:
También he actualizado el OP.

Esta actualización oculta la pestaña de Perfil predeterminada y agrega una pestaña de Perfil personalizada en el menú de usuario con la capacidad de agregar elementos personalizados bajo el elemento Preferencias y también se pueden agregar elementos personalizados antes del botón Cerrar sesión.

Pestaña de Perfil personalizada en el menú de usuario

Controlado por la configuración enabled_user_menu_tab.

  • ocultar la pestaña de perfil predeterminada en el menú de usuario
  • agrega la pestaña de perfil personalizada en el menú de usuario en la parte superior
    • el icono de la pestaña se puede cambiar con la configuración user_menu_tab_icon
  • agrega elementos personalizados debajo del botón de preferencias
    • estos elementos se pueden cambiar con la configuración profile_menu_preference_items
  • agrega elementos extra personalizados antes del botón de cerrar sesión
    • estos elementos se pueden cambiar con la configuración profile_menu_extra_items

Configuraciones

  • el campo de icono para profile_menu_preference_items y profile_menu_extra_items es ahora opcional.
  • el campo de configuración para profile_links y profile_menu_preference_items es ahora opcional, lo que significa que puede agregar enlaces para redirigir a una página, no a una configuración.


3 Me gusta

Eso sería un gran problema de experiencia de usuario en móviles y en todas las pantallas táctiles :man_shrugging:

Odio decir esto, pero la dirección es solo para escritorio.

Me equivoqué en esa preocupación. Claro, ahora está completamente poblado, pero funciona perfectamente.

3 Me gusta

Pero, ¿qué debería hacer la desactivación de enabled user menu tab? Pensé que aparecería la pestaña de lápiz anterior, pero no.

2 Me gusta

Toda la función de perfil personalizado del menú de usuario. Si lo desactiva, no hará nada con el menú de usuario.

2 Me gusta

Sí, cuando está habilitado. Pero cuando está deshabilitado es básicamente lo mismo que deshabilitar todo el componente :thinking:

No, si los deshabilitaste, solo aparecerá el menú de enlaces rápidos de la página de usuarios.

2 Me gusta