https://www.redmine.org/https://www.redmine.org/favicon.ico?16793021292019-05-13T04:54:26ZRedmineRedmine - Feature #31353: Replace user related links in the top menu bar with a proper user menu.https://www.redmine.org/issues/31353?journal_id=917172019-05-13T04:54:26ZBernhard Rohloff
<ul></ul><p><a class="user active" href="https://www.redmine.org/users/27597">Marius Ionescu</a> 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?</p> Redmine - Feature #31353: Replace user related links in the top menu bar with a proper user menu.https://www.redmine.org/issues/31353?journal_id=917192019-05-13T05:35:09ZGo MAEDA
<ul><li><strong>Related to</strong> <i><a class="issue tracker-2 status-1 priority-4 priority-default" href="/issues/31348">Feature #31348</a>: Add tabs to switch between Profile and My account page</i> added</li></ul> Redmine - Feature #31353: Replace user related links in the top menu bar with a proper user menu.https://www.redmine.org/issues/31353?journal_id=917252019-05-13T06:42:17ZMarius BĂLTEANU
<ul></ul><p>Indeed, I've a working patch, I'll try to post it today (at least for testing purposes).</p> Redmine - Feature #31353: Replace user related links in the top menu bar with a proper user menu.https://www.redmine.org/issues/31353?journal_id=935632019-09-06T13:14:09ZBernhard Rohloff
<ul></ul><p><a class="user active" href="https://www.redmine.org/users/27597">Marius Ionescu</a> have you had time to make any progress on this issue in last time?<br />If yes, I would love to test it. :-)</p> Redmine - Feature #31353: Replace user related links in the top menu bar with a proper user menu.https://www.redmine.org/issues/31353?journal_id=935652019-09-06T14:07:54ZAnonymous
<ul></ul><p><a class="user active" href="https://www.redmine.org/users/27597">Marius Ionescu</a> I would also like to test it, and if it's not ready, we could atleast disassemble it and take a look.</p> Redmine - Feature #31353: Replace user related links in the top menu bar with a proper user menu.https://www.redmine.org/issues/31353?journal_id=936132019-09-09T19:41:27ZMarius BĂLTEANU
<ul><li><strong>File</strong> <a href="/attachments/23819">0001-move-user-accounts-menu-links-under-a-dropdown-wip.patch</a> <a class="icon-only icon-download" title="Download" href="/attachments/download/23819/0001-move-user-accounts-menu-links-under-a-dropdown-wip.patch">0001-move-user-accounts-menu-links-under-a-dropdown-wip.patch</a> added</li></ul><p>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.</p> Redmine - Feature #31353: Replace user related links in the top menu bar with a proper user menu.https://www.redmine.org/issues/31353?journal_id=938582019-09-22T22:03:22ZAnonymous
<ul></ul><p>Marius BALTEANU wrote:</p>
<blockquote>
<p>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.</p>
</blockquote>
<p>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.</p> Redmine - Feature #31353: Replace user related links in the top menu bar with a proper user menu.https://www.redmine.org/issues/31353?journal_id=940292019-09-28T21:08:05ZMarius BĂLTEANU
<ul><li><strong>File</strong> <a href="/attachments/23997">user_dropdown.png</a> <a class="icon-only icon-download" title="Download" href="/attachments/download/23997/user_dropdown.png">user_dropdown.png</a> added</li><li><strong>File</strong> <a href="/attachments/23998">search_and_jump_box_in_top_menu.png</a> <a class="icon-only icon-download" title="Download" href="/attachments/download/23998/search_and_jump_box_in_top_menu.png">search_and_jump_box_in_top_menu.png</a> added</li></ul><p>I made some progress and I would like to share two screenshots:</p>
<p>1. Move only user related links under a user dropdown:<br /><img src="https://www.redmine.org/attachments/download/23997/user_dropdown.png" alt="" /></p>
<p>2. Move search and project jump box to top menu:<br /><img src="https://www.redmine.org/attachments/download/23998/search_and_jump_box_in_top_menu.png" alt="" /></p> Redmine - Feature #31353: Replace user related links in the top menu bar with a proper user menu.https://www.redmine.org/issues/31353?journal_id=940332019-09-29T02:35:27ZAnonymous
<ul></ul><p>Edit: <em>deleted, because dupe</em></p> Redmine - Feature #31353: Replace user related links in the top menu bar with a proper user menu.https://www.redmine.org/issues/31353?journal_id=940342019-09-29T02:35:54ZAnonymous
<ul></ul><p>Marius BALTEANU wrote:</p>
<blockquote>
<p>I made some progress and I would like to share two screenshots</p>
</blockquote>
<p>I am all for the second implementation, so we could close <a class="issue tracker-3 status-1 priority-4 priority-default" title="Patch: Move search bar and project selector to the top bar (New)" href="https://www.redmine.org/issues/32115">#32115</a> but couple of cents from me:<br />- 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 <a class="issue tracker-3 status-1 priority-4 priority-default" title="Patch: Move search bar and project selector to the top bar (New)" href="https://www.redmine.org/issues/32115">#32115</a> where I made links to be a bit bigger.<br />- 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>
<p>P.S. please add <a class="issue tracker-3 status-1 priority-4 priority-default" title="Patch: Move search bar and project selector to the top bar (New)" href="https://www.redmine.org/issues/32115">#32115</a> as related, because now it is :D</p> Redmine - Feature #31353: Replace user related links in the top menu bar with a proper user menu.https://www.redmine.org/issues/31353?journal_id=940352019-09-29T07:01:02ZBernhard Rohloff
<ul></ul><p>Version 2 FTW! This search bar in the header annoys me as hell.<br />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. ;-)</p> Redmine - Feature #31353: Replace user related links in the top menu bar with a proper user menu.https://www.redmine.org/issues/31353?journal_id=940362019-09-29T12:54:57ZMarius BĂLTEANU
<ul><li><strong>File</strong> <a href="/attachments/24004">0001-wip.patch</a> <a class="icon-only icon-download" title="Download" href="/attachments/download/24004/0001-wip.patch">0001-wip.patch</a> added</li></ul><p>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.</p>
<p>All 3 proposals were been included.</p>
<p>Feel free to review it.</p> Redmine - Feature #31353: Replace user related links in the top menu bar with a proper user menu.https://www.redmine.org/issues/31353?journal_id=940402019-09-29T14:05:44ZAnonymous
<ul><li><strong>File</strong> <a href="/attachments/24009">0001-wip-antonio-edition.patch</a> <a class="icon-only icon-download" title="Download" href="/attachments/download/24009/0001-wip-antonio-edition.patch">0001-wip-antonio-edition.patch</a> added</li><li><strong>File</strong> <a href="/attachments/24008">0001-wip-antonio-edition-0.9em-topbar-fontsize.patch</a> <a class="icon-only icon-download" title="Download" href="/attachments/download/24008/0001-wip-antonio-edition-0.9em-topbar-fontsize.patch">0001-wip-antonio-edition-0.9em-topbar-fontsize.patch</a> added</li></ul><p>Marius BALTEANU wrote:</p>
<blockquote>
<p>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.<br />All 3 proposals were been included.<br />Feel free to review it.</p>
</blockquote>
<p>I am happy :)<br />I took an in-depth look though, and noticed:</p>
<pre>
#top-menu .profile-menu li.avatar-menu .drdn-content {
padding-top: 5px;
padding-bottom: 5px;
}
</pre><br />I don't think this should exist at all, those paddings make the menu look different from the project jump, maybe not <em>padding-top: 5px;</em> but <em>padding-bottom: 5px;</em> absolutely.
<pre>
#top-menu {
background: #3E5B76;
padding: 2px 6px 0px 6px;
display: flex;
}
</pre>
<p>I think <em>padding: 2px 6px 0px 6px;</em> should be changed to <em>padding: 0px 6px 0px 6px;</em> to remove 2 unnecessary pixels of padding from up top. This makes things centered even more, and saves us 2 pixels. :D</p>
<p>I also noticed:<br /><pre>
#top-menu ul.nav-list li.nav-item > a {
font-size: 0.9em;
color: #fff;
}
</pre></p>
<p>Here if you remove/disable <em>font-size: 0.9em;</em> 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.</p>
<p>Things seem to work just fine and the same in IE11 too.</p>
<p>I'm attaching 2 versions which I think would be perfect, just in case.</p> Redmine - Feature #31353: Replace user related links in the top menu bar with a proper user menu.https://www.redmine.org/issues/31353?journal_id=940452019-09-30T01:49:09ZGo MAEDA
<ul><li><strong>File</strong> <a href="/attachments/24010">profile-and-my-page@2x.png</a> <a class="icon-only icon-download" title="Download" href="/attachments/download/24010/profile-and-my-page@2x.png">profile-and-my-page@2x.png</a> added</li></ul><p>Thank you for writing the patch. I have some requests:</p>
<ul>
<li>Change the link text name to "Profile" (<code>label_profile</code>). The name of page /users/999 is "Profile". I think the correct name should be shown in the menu.</li>
<li>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.</li>
</ul>
<p><img src="https://www.redmine.org/attachments/download/24010/profile-and-my-page@2x.png" srcset="https://www.redmine.org/attachments/download/24010/profile-and-my-page@2x.png 2x" style="width: 490px;border: 1px solid #ccc;" alt="" /></p> Redmine - Feature #31353: Replace user related links in the top menu bar with a proper user menu.https://www.redmine.org/issues/31353?journal_id=940462019-09-30T02:05:45ZGo MAEDA
<ul><li><strong>File</strong> <a href="/attachments/24011">planio@2x.png</a> <a class="icon-only icon-download" title="Download" href="/attachments/download/24011/planio@2x.png">planio@2x.png</a> added</li></ul><p>Perhaps we can study from Planio, a Redmine based online service. Planio already has account drop-down.</p>
<p><img src="https://www.redmine.org/attachments/download/24011/planio@2x.png" srcset="https://www.redmine.org/attachments/download/24011/planio@2x.png 2x" style="width: 429px;border: 1px solid #ccc;" alt="" /></p>
<p>They offer a freemium plan (Bronze plan, 1 project, 2 users, 1GB), so trying Planio is easy.</p> Redmine - Feature #31353: Replace user related links in the top menu bar with a proper user menu.https://www.redmine.org/issues/31353?journal_id=940542019-09-30T11:24:44ZAnonymous
<ul></ul><p>Go MAEDA wrote:</p>
<blockquote>
<p>Perhaps we can study from Planio, a Redmine based online service. Planio already has account drop-down.</p>
</blockquote>
<p>I like the idea, of moving more links inside user menu :D</p> Redmine - Feature #31353: Replace user related links in the top menu bar with a proper user menu.https://www.redmine.org/issues/31353?journal_id=940602019-09-30T16:13:44ZBernhard Rohloff
<ul><li><strong>File</strong> <a href="/attachments/24015">usermenu_github.png</a> <a class="icon-only icon-download" title="Download" href="/attachments/download/24015/usermenu_github.png">usermenu_github.png</a> added</li></ul><p>Go MAEDA wrote:</p>
<blockquote>
<p>Thank you for writing the patch. I have some requests:</p>
<ul>
<li>Change the link text name to "Profile" (<code>label_profile</code>). The name of page /users/999 is "Profile". I think the correct name should be shown in the menu.</li>
<li>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.</li>
</ul>
</blockquote>
<p>I'm also in favor of moving user related links inside the user menu. This makes thinks very easy for new users.<br />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</p>
<p><img src="https://www.redmine.org/attachments/download/24015/usermenu_github.png" alt="" /></p> Redmine - Feature #31353: Replace user related links in the top menu bar with a proper user menu.https://www.redmine.org/issues/31353?journal_id=940612019-09-30T16:18:12ZBernhard Rohloff
<ul></ul><p>By the way...<br />... <strong>display:block;</strong> and <strong>padding:0;</strong> on the avatar link aligns it vertically with the rest. ;-)</p>
<pre>
<code class="css syntaxhl"><span class="nf">#top-menu</span> <span class="nt">ul</span><span class="nc">.nav-list</span> <span class="nt">li</span><span class="nc">.nav-item</span> <span class="o">></span> <span class="nt">a</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">0.9em</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#fff</span><span class="p">;</span>
<span class="nl">display</span><span class="p">:</span> <span class="nb">block</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="p">}</span></code><br /></pre> Redmine - Feature #31353: Replace user related links in the top menu bar with a proper user menu.https://www.redmine.org/issues/31353?journal_id=954442019-12-28T03:32:45ZMarius BĂLTEANU
<ul><li><strong>Assignee</strong> set to <i>Marius BĂLTEANU</i></li></ul> Redmine - Feature #31353: Replace user related links in the top menu bar with a proper user menu.https://www.redmine.org/issues/31353?journal_id=1007992021-02-02T13:08:00ZMischa The Evil
<ul><li><strong>Related to</strong> <i><a class="issue tracker-3 status-1 priority-4 priority-default" href="/issues/32115">Patch #32115</a>: Move search bar and project selector to the top bar</i> added</li></ul> Redmine - Feature #31353: Replace user related links in the top menu bar with a proper user menu.https://www.redmine.org/issues/31353?journal_id=1047872021-12-06T16:59:40ZBernhard Rohloff
<ul><li><strong>File</strong> <a href="/attachments/28505">user_menu_gravatar.png</a> <a class="icon-only icon-download" title="Download" href="/attachments/download/28505/user_menu_gravatar.png">user_menu_gravatar.png</a> added</li><li><strong>File</strong> <a href="/attachments/28506">user_menu_no_gravatar.png</a> <a class="icon-only icon-download" title="Download" href="/attachments/download/28506/user_menu_no_gravatar.png">user_menu_no_gravatar.png</a> added</li><li><strong>File</strong> <a href="/attachments/28507">0003-added-hook-to-right-section-of-the-top-menu.patch</a> <a class="icon-only icon-download" title="Download" href="/attachments/download/28507/0003-added-hook-to-right-section-of-the-top-menu.patch">0003-added-hook-to-right-section-of-the-top-menu.patch</a> added</li><li><strong>File</strong> <a href="/attachments/28509">0002-changed-and-added-tests.patch</a> <a class="icon-only icon-download" title="Download" href="/attachments/download/28509/0002-changed-and-added-tests.patch">0002-changed-and-added-tests.patch</a> added</li><li><strong>File</strong> <a href="/attachments/28508">0001-moved-user-links-under-a-drop-down-menu.patch</a> <a class="icon-only icon-download" title="Download" href="/attachments/download/28508/0001-moved-user-links-under-a-drop-down-menu.patch">0001-moved-user-links-under-a-drop-down-menu.patch</a> added</li></ul><p>I've made new patches for this feature which apply on the latest trunk.<br />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.</p>
<p><img src="https://www.redmine.org/attachments/download/28505/user_menu_gravatar.png" style="width: 500px;" alt="" /> <img src="https://www.redmine.org/attachments/download/28506/user_menu_no_gravatar.png" style="width: 500px;" alt="" /></p>