Redmine

Marius Ionescu 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?

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

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

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

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.

Edit: deleted, because dupe

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

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

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

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;
}

Marius BĂLTEANU wrote in #note-22:

I've reworked the patch:

• use nav html tag instead of div
• refactor top menu classes for desktop view based on the flyout menu
• move administration link before user menu as icon only
• added a new dropdown component based on Stimulus JS (dropdown_controller.js) with the CSS in dropdown.css
• apply on hover same style from header links.

Thank you for posting this patch to improve the menu. I think the overall direction is good, and the UI looks more modern.

That said, I feel there is still some room for improvement in the following areas.

• The top menu feels slightly too tall. It might look better if the icon size and padding were reduced a little.
• I found changing "Administration" to an unlabeled gear icon somewhat unclear. Personally, I prefer keeping the "Administration" label to the left of "Help", as it is now.
• Also, since the unlabeled gear icon is placed close to the user icon, some users might mistake it for a user settings menu.

Thanks!

Go MAEDA wrote in #note-25:

Marius BĂLTEANU wrote in #note-22:

I've reworked the patch:

• use nav html tag instead of div
• refactor top menu classes for desktop view based on the flyout menu
• move administration link before user menu as icon only
• added a new dropdown component based on Stimulus JS (dropdown_controller.js) with the CSS in dropdown.css
• apply on hover same style from header links.

Thank you for posting this patch to improve the menu. I think the overall direction is good, and the UI looks more modern.

That said, I feel there is still some room for improvement in the following areas.

• The top menu feels slightly too tall. It might look better if the icon size and padding were reduced a little.

I will try to adjust the size, but the height is push by user avatar size.

• I found changing "Administration" to an unlabeled gear icon somewhat unclear. Personally, I prefer keeping the "Administration" label to the left of "Help", as it is now.
• Also, since the unlabeled gear icon is placed close to the user icon, some users might mistake it for a user settings menu.

In order to not block the implementation, I will move the "Administration" link back and we postopone this discussion for another ticket.

Nice step forward, this looks much better

I’m not sure if the administration link/icon is that relevant in the top menu, since not many users have access to it. I could imagine moving it into the user menu (under the avatar) instead. Nothing critical — keeping it as a text link or updating the icon would also be fine.

• The icon hover state looks slightly vertically off / not perfectly centered
• The avatar might look cleaner with a slightly smaller size (e.g. 22px)
• The icon padding could also be reduced a bit to better match the avatar
  • due to the reduced icon padding, additional gap was introduced on the top-menu__links container to maintain spacing

diffdiff

diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index fa8a2cc59..ce0f2f267 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -80,7 +80,7 @@ nav.top-menu {
   background: #234761; /* no match in Open Color, using hex code */
   color: var(--oc-gray-2);
   font-size: 0.75rem;
-  padding-block: 3px;
+  padding-block: 3px 2px;
   padding-inline: 20px;
   display: flex;
   justify-content: space-between;
@@ -98,6 +98,7 @@ nav.top-menu {
   padding: 0;
   display: flex;
   list-style-type: none;
+  gap: 5px;
 }

 .top-menu__links a, .top-menu__links a:link, .top-menu__links a:visited {
@@ -105,14 +106,16 @@ nav.top-menu {
   margin-inline-end: 0;
   text-decoration: none;
   transition: background-color 0.18s ease, color 0.18s ease;
-  padding: 4px;
+  transform-origin: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px;
 }

 .top-menu__links a:hover {
     color: var(--oc-white);
     background-color: rgba(255, 255, 255, 0.12);
-    transform: scale(1.08);
-    border-radius: 3px;
     text-decoration: none;
 }

diff --git a/app/views/layouts/base.html.erb b/app/views/layouts/base.html.erb
index 9d7d77db4..194da9333 100644
--- a/app/views/layouts/base.html.erb
+++ b/app/views/layouts/base.html.erb
@@ -75,7 +75,7 @@
     <% if User.current.logged? %>
     <div id="account" class="dropdown" data-controller="dropdown">
       <a href="#" class="dropdown-trigger" data-action="click->dropdown#toggle">
-        <%= avatar(User.current, :size => "24") %>
+        <%= avatar(User.current, :size => "22") %>
       </a>
       <div class="dropdown-content hidden" data-dropdown-target="content">
         <div class="user-info">
--