Feature #31353

Replace user related links in the top menu bar with a proper user menu.

Added by Bernhard Rohloff over 2 years ago. Updated about 1 month ago.

Status:NewStart date:
Priority:NormalDue date:
Assignee:Marius BALTEANU% Done:

0%

Category:UI
Target version:-
Resolution:

Description

At the moment the top menu bar offers several user related links which make the top bar look cluttered and which are often confusing for users.
It would be better to have a proper user menu instead of these links. It's a concept users know from many other websites like GitHub, GitLab and Wordpress etc.

Here for example the user menu in wordpress:

wp_user_menu_top.png (27.6 KB) Bernhard Rohloff, 2019-05-13 06:50

0001-move-user-accounts-menu-links-under-a-dropdown-wip.patch Magnifier (14.5 KB) Marius BALTEANU, 2019-09-09 21:41

user_dropdown.png (256 KB) Marius BALTEANU, 2019-09-28 23:04

search_and_jump_box_in_top_menu.png (251 KB) Marius BALTEANU, 2019-09-28 23:06

0001-wip.patch Magnifier (12.9 KB) Marius BALTEANU, 2019-09-29 14:51

0001-wip-antonio-edition-0.9em-topbar-fontsize.patch Magnifier (12.4 KB) Anonymous, 2019-09-29 16:01

0001-wip-antonio-edition.patch Magnifier (12.4 KB) Anonymous, 2019-09-29 16:01

profile-and-my-page@2x.png (92.3 KB) Go MAEDA, 2019-09-30 03:46

planio@2x.png (26.3 KB) Go MAEDA, 2019-09-30 04:03

usermenu_github.png (13.3 KB) Bernhard Rohloff, 2019-09-30 18:11

user_menu_gravatar.png (51.6 KB) Bernhard Rohloff, 2021-12-06 17:56

user_menu_no_gravatar.png (48.3 KB) Bernhard Rohloff, 2021-12-06 17:56

0003-added-hook-to-right-section-of-the-top-menu.patch Magnifier (908 Bytes) Bernhard Rohloff, 2021-12-06 17:58

0001-moved-user-links-under-a-drop-down-menu.patch Magnifier (10.9 KB) Bernhard Rohloff, 2021-12-06 17:58

0002-changed-and-added-tests.patch Magnifier (2.95 KB) Bernhard Rohloff, 2021-12-06 17:58


Related issues

Related to Redmine - Feature #31348: Add tabs to switch between Profile and My account page New
Related to Redmine - Patch #32115: Move search bar and project selector to the top bar New

History

#1 Updated by Bernhard Rohloff over 2 years ago

@Marius BALTEANU I've added you to the watchers list because I think to remember you already worked on something like this in the past, didn't you?

#2 Updated by Go MAEDA over 2 years ago

  • Related to Feature #31348: Add tabs to switch between Profile and My account page added

#3 Updated by Marius BALTEANU over 2 years ago

Indeed, I've a working patch, I'll try to post it today (at least for testing purposes).

#4 Updated by Bernhard Rohloff over 2 years ago

@Marius have you had time to make any progress on this issue in last time?
If yes, I would love to test it. :-)

#5 Updated by Anonymous over 2 years ago

@Marius I would also like to test it, and if it's not ready, we could atleast disassemble it and take a look.

#6 Updated by Marius BALTEANU over 2 years ago

You can test the attached patch, I'm not very happy with the implementation, but for a first round of feedback, it should be good enough.

#7 Updated by Anonymous over 2 years ago

Marius BALTEANU wrote:

You can test the attached patch, I'm not very happy with the implementation, but for a first round of feedback, it should be good enough.

I don't know why you re not very happy with current implementation, but I really quite liked it already. I think even if it's not that super perfect it could be fixed up even more later on.

#8 Updated by Marius BALTEANU over 2 years ago

I made some progress and I would like to share two screenshots:

1. Move only user related links under a user dropdown:

2. Move search and project jump box to top menu:

#9 Updated by Anonymous over 2 years ago

Edit: deleted, because dupe

#10 Updated by Anonymous over 2 years ago

Marius BALTEANU wrote:

I made some progress and I would like to share two screenshots

I am all for the second implementation, so we could close #32115 but couple of cents from me:
- It feels like links on the left side are too small for the available space, I think they should be at least the size of text in the white fields on the right side. Please see #32115 where I made links to be a bit bigger.
- Avatar on the fly-out is circle now, while it's not a circle everywhere else, it feels like a super minor, but an inconsistency.

P.S. please add #32115 as related, because now it is :D

#11 Updated by Bernhard Rohloff over 2 years ago

Version 2 FTW! This search bar in the header annoys me as hell.
I've tried your patch and looked nice already. One thing I would like to change is the drop-down trigger. I'm used to trigger the drop-down menu on click rather then on hover, but I guess you have had me in mind on your latest screenshots. ;-)

#12 Updated by Marius BALTEANU over 2 years ago

Bernhard, Antonio, I've reworked the entire patch, you can use the new one for testing. It's more complete, but it still need some work to improve the code and of course, fixes. I've tested only one Chrome.

All 3 proposals were been included.

Feel free to review it.

#13 Updated by Anonymous over 2 years ago

Marius BALTEANU wrote:

Bernhard, Antonio, I've reworked the entire patch, you can use the new one for testing. It's more complete, but it still need some work to improve the code and of course, fixes. I've tested only one Chrome.
All 3 proposals were been included.
Feel free to review it.

I am happy :)
I took an in-depth look though, and noticed:

#top-menu .profile-menu li.avatar-menu .drdn-content {
  padding-top: 5px;
  padding-bottom: 5px;
}

I don't think this should exist at all, those paddings make the menu look different from the project jump, maybe not padding-top: 5px; but padding-bottom: 5px; absolutely.
#top-menu {
    background: #3E5B76;
    padding: 2px 6px 0px 6px;
    display: flex;
}

I think padding: 2px 6px 0px 6px; should be changed to padding: 0px 6px 0px 6px; to remove 2 unnecessary pixels of padding from up top. This makes things centered even more, and saves us 2 pixels. :D

I also noticed:

#top-menu ul.nav-list li.nav-item > a {
    font-size: 0.9em;
    color: #fff;
}

Here if you remove/disable font-size: 0.9em; entirely, the avatar in the top menu gets more centered and inline with the other white bars, not sure why it's like that though.

Things seem to work just fine and the same in IE11 too.

I'm attaching 2 versions which I think would be perfect, just in case.

#14 Updated by Go MAEDA over 2 years ago

Thank you for writing the patch. I have some requests:

  • Change the link text name to "Profile" (label_profile). The name of page /users/999 is "Profile". I think the correct name should be shown in the menu.
  • Add "My page" to the menu. All pages related to the user will be accessible from the menu if "My page" is added. IMHO it would be a nice UX improvement.

#15 Updated by Go MAEDA over 2 years ago

Perhaps we can study from Planio, a Redmine based online service. Planio already has account drop-down.

They offer a freemium plan (Bronze plan, 1 project, 2 users, 1GB), so trying Planio is easy.

#16 Updated by Anonymous over 2 years ago

Go MAEDA wrote:

Perhaps we can study from Planio, a Redmine based online service. Planio already has account drop-down.

I like the idea, of moving more links inside user menu :D

#17 Updated by Bernhard Rohloff over 2 years ago

Go MAEDA wrote:

Thank you for writing the patch. I have some requests:

  • Change the link text name to "Profile" (label_profile). The name of page /users/999 is "Profile". I think the correct name should be shown in the menu.
  • Add "My page" to the menu. All pages related to the user will be accessible from the menu if "My page" is added. IMHO it would be a nice UX improvement.

I'm also in favor of moving user related links inside the user menu. This makes thinks very easy for new users.
Github's user menu is also a nice case study of this practice. I also like the plus menu next to the user menu. <3

#18 Updated by Bernhard Rohloff over 2 years ago

By the way...
... display:block; and padding:0; on the avatar link aligns it vertically with the rest. ;-)

#top-menu ul.nav-list li.nav-item > a {
  font-size: 0.9em;
  color: #fff;
  display: block;
  padding: 0;
}

#19 Updated by Marius BALTEANU about 2 years ago

  • Assignee set to Marius BALTEANU

#20 Updated by Mischa The Evil 12 months ago

  • Related to Patch #32115: Move search bar and project selector to the top bar added

#21 Updated by Bernhard Rohloff about 1 month ago

I've made new patches for this feature which apply on the latest trunk.
The menu is based on the existing drop down menu structures and has two versions for usage with and without gravatars. Additionally we can add a new hook to the top menu to make it more extendable by plugin developers to add more widgets like for example a punch clock or notification menu.

Also available in: Atom PDF