Quick Profile Links Menu

:information_source: Summary Quick Profile Links Menu
:eyeglasses: Preview Theme Creator
:hammer_and_wrench: Repository GitHub - VaperinaDEV/quick-profile-links-menu
:question: Install Guide How to install a theme or theme component
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component

Hello :wave:

Navigating the user preferences can be a bit difficult at times, especially for new users. This theme component allows to add several important setting links in the user pages and add custom user menu profile tab…

User pages menu links

This menu button is places in the user profile control buttons section.



Clicking on the menu item it will redirect to the desired field. To achieve this I’ve added an id attribute for each field which is same value as the [data-setting-name] attribute. So now we can use this as an anchor. Like: /u/username/preferences/profile#user-bio

You can inspect these with right click the setting title and check the id. In this case the setting value should be user-username. This setting is and optional field so leave it empty will redirect to page, not setting.


User pages menu links setting

With profile links setting you can add these quick links.

  1. icon (fontawesome icon) required
  2. label (the label of the link) required
  3. page (which page do you want to be redirected to)
    • account
    • security
    • profile
    • emails
    • notifications
    • tracking
    • users
    • interface
  4. setting (which setting field do you want to be redirected to) optional
Here are some setting field to use.
  • 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

User menu Custom Profile tab

With enabled user menu tab setting you can enable this custom profile tab. This tab is a recreation of the default Profile tab.

What does it do?

  • hide default profile tab in user menu
  • adds custom profile tab in user menu to the top
    • the tab icon is changeable with the user menu tab icon setting
  • adds custom items under preferences button
    • these items changeable with the profile menu preference items setting
  • adds custom extra items before log out button
    • these items changeable with the profile menu extra items setting

Custom Profile tab settings

For the preferences items (which is under the Preferences button) with the profile_menu_preference_items you can change add/remove…

  1. icon (fontawesome icon) optional
  2. label (the label of the link) required
  3. page (which page do you want to be redirected to)
    • account
    • security
    • profile
    • emails
    • notifications
    • tracking
    • users
    • interface
  4. setting (which setting field do you want to be redirected to) optional
Here are some setting field to use.
  • 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

The extra items can be placed above the Log Out button with profile menu extra items setting.

  1. icon (fontawesome icon) optional
  2. label (the label of the link) required
  3. url (which url do you want to be redirected to) required
13 Likes

Hallelujah!!! Finally someone has tackled this - in my opinion, this is one of the biggest issues for new users of Discourse.

One thing I notice is that it is still several clicks to get to it via the avatar top right. This is the intuitive place for new users to go.

4 Likes

Hey @nathank :wave: I think it’s a great idea to find a quicker path. I’ve added it to user menu tab.

4 Likes

Wow! Nice work!

But I think we could go further, with the concept of altering the core/standard focus of the Avatar menu from Notifications (with a profile afterthought) to Profile + Notifications (what I think it should be). We do already have a Profile tab, but this isn’t very prominent:

A way this could be achieved:

  1. Utilise the existing Profile tab on the Avatar menu
  2. Put that tab up the top (i.e. where the edit icon for the quick profile links is now)
  3. Allow the admin to customise the Profile tab’s menu

I guess the easy way would be to simply hide the existing Profile tab and recreate it using the TC. The Logout button is the only tricky bit, and might require a bit of code (there is an existing TC for that). The Online and Pause notifications bit are a bit fancy too.

Maybe it would be easier to shuffle the Tab and add / subtract from it though. What do you think?

3 Likes

wow, nice work Don. This is a great addition. Thanks! :slight_smile: :clap:

2 Likes

I have a concept for something like this.
I think it maybe a good idea to separate the settings.

  1. move profile to the top
  2. hide Preferences
  3. remove border top

  1. change the custom tab icon to gear by default
  2. add border bottom to separate from notifications
  3. add view all settings button to bottom (redirect to /my/preferences/account)

What do you think?

4 Likes

But user settings are less and rarely used. I’m not sure if it’s place should be the first, no matter what is selected by default.

2 Likes

The components you develop are a sight to behold every time haha

5 Likes

How do I find right value for setting?

That is a pretty damn good way to sort it! Keeps it clean and simple.

However, I would (quite strongly) prefer it all rolled into the one Profile tab, as Summary and Activity are both firmly Profile links too - and this ends up splitting the links relating to the user into two tabs a bit unnecessarily.

Is it possible to hook into the Profile tab?

2 Likes

You can find in OP and you can also inspect it with right click the setting title and check it here the id. In this case the setting value should be user-username but I think I will make it optional field so that will be possible to redirect to page without adding setting.


Little update here:

I agree with you.

  1. I’ve recreated the profile tab and add quick links to it.
  2. hide the default profile tab
  3. change the custom tab icon to user

This is how it looks like now.


I’ve enabled a preview to this in theme creator: Theme Creator

4 Likes

I like that page-plan, because for that I use. Well, profile picture is another story.

I was afraiding that right click thingy :joy: Just because I work almost totally with words, I haven’t used my laptop since last may, I reckon. But no can do, it’s just and only my choise. I have a console on iPad, though. I just didn’t know what to looking for. Now I know. Thanks!

2 Likes

It will be quite tight, no? Because it looks this now on the real life:

1 Like

I’ve changed the buttons padding, use smaller font size to preferences sub items etc… so the items are less height then before and also I made it scrollable this tab content. I merge this now with some update…

2 Likes

Update :tada:
I’ve updated the OP too.

This update hide the default Profile tab and adds a custom Profile tab in user menu with the ability to adds custom items under Preferences item and also can be adds custom items places before the Log Out button.

Custom Profile tab in user menu

Controlled by enabled_user_menu_tab setting.

  • hide default profile tab in user menu
  • adds custom profile tab in user menu to the top
    • the tab icon is changeable with the user_menu_tab_icon setting
  • adds custom items under preferences button
    • these items changeable with the profile_menu_preference_items setting
  • adds custom extra items before log out button
    • these items changeable with the profile_menu_extra_items setting

Settings

  • profile_menu_preference_items and profile_menu_extra_items the icon field is optional now.
  • profile_links and profile_menu_preference_items the setting field is optional now, which means it can adds links to redirect to page, not setting.


3 Likes

That will be huge UX-issue on mobiles plus every touch screens :man_shrugging:

Hate to say this, but then direction is toward desktop-only.

I was wrong on that concern. Sure, it is full populated now, but it works just fine.

3 Likes

But what should disabling enabled user menu tab do? I thought that previous pencil tab would pop up, but no.

2 Likes

The whole user menu custom profile feature. If you disable it then it won’t do anything with user menu.

2 Likes

Yeah, when enabled. But when disabled it is basically same thing than disabling whole component :thinking:

Nope, if you disabled then only the users page quick links menu will appears.

2 Likes