From 012b1f7344311c9b34cb55fb9d58999df15877f3 Mon Sep 17 00:00:00 2001
From: Bernhard Rohloff <rohloff.bernhard@gmail.com>
Date: Wed, 1 Dec 2021 15:15:19 +0100
Subject: [PATCH 1/3] moved user links under a drop down menu

---
 app/helpers/application_helper.rb     |  2 +-
 app/views/layouts/_user_menu.html.erb | 20 ++++++
 app/views/layouts/base.html.erb       | 12 +++-
 config/locales/en.yml                 |  1 +
 lib/redmine/preparation.rb            |  8 ++-
 public/stylesheets/application.css    | 96 ++++++++++++++++++++++-----
 public/stylesheets/responsive.css     |  4 ++
 7 files changed, 122 insertions(+), 21 deletions(-)
 create mode 100644 app/views/layouts/_user_menu.html.erb

diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index a798261bc..87b18ccc8 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -570,7 +570,7 @@ module ApplicationHelper
     end
     text ||= l(:label_jump_to_a_project)
     url = autocomplete_projects_path(:format => 'js', :jump => current_menu_item)
-    trigger = content_tag('span', text, :class => 'drdn-trigger')
+    trigger = content_tag('span', text, :class => 'drdn-trigger arrow')
     q = text_field_tag('q', '', :id => 'projects-quick-search',
                        :class => 'autocomplete',
                        :data => {:automcomplete_url => url},
diff --git a/app/views/layouts/_user_menu.html.erb b/app/views/layouts/_user_menu.html.erb
new file mode 100644
index 000000000..4f065c3a0
--- /dev/null
+++ b/app/views/layouts/_user_menu.html.erb
@@ -0,0 +1,20 @@
+<% if User.current.logged? %>
+  <div id="user-menu" class="drdn">
+    <div class="drdn-trigger arrow">
+      <% if Setting.gravatar_enabled? %>
+        <%= avatar(User.current, :size => "20") %>
+      <%else%>
+        <%= content_tag('span', User.current, :format => :username) %>
+      <% end %>
+    </div>
+    <div class="drdn-content">
+      <div class="drdn-items info">
+        <%= content_tag('span', "#{User.current.firstname} #{User.current.lastname}", :class => 'user-name') %>
+        <%= content_tag('span', User.current.login, :class => 'login' ) %>
+    </div>
+      <div class="drdn-items menu">
+        <%= render_menu :user_menu -%>
+      </div>
+    </div>
+  </div>
+<% end %>
diff --git a/app/views/layouts/base.html.erb b/app/views/layouts/base.html.erb
index 5b7f23f79..2f55230d1 100644
--- a/app/views/layouts/base.html.erb
+++ b/app/views/layouts/base.html.erb
@@ -60,11 +60,17 @@
 
 
 <div id="top-menu">
+  <div id="top-menu-left">
+    <nav id="global-nav">
+    <%= render_menu :top_menu if User.current.logged? || !Setting.login_required? -%>
+  </nav>
+  </div>
+  <div id="top-menu-right">
     <div id="account">
-        <%= render_menu :account_menu -%>
+        <%= render_menu :account_menu if !User.current.logged? -%>
     </div>
-    <%= content_tag('div', "#{l(:label_logged_as)} #{link_to_user(User.current, :format => :username)}".html_safe, :id => 'loggedas') if User.current.logged? %>
-    <%= render_menu :top_menu if User.current.logged? || !Setting.login_required? -%>
+    <%= render :partial => 'layouts/user_menu' %>
+  </div>
 </div>
 
 <div id="header">
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 2eb4af0e1..af786b283 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -658,6 +658,7 @@ en:
   label_password_lost: Lost password
   label_password_required: Confirm your password to continue
   label_home: Home
+  label_profile: Profile
   label_my_page: My page
   label_my_account: My account
   label_my_projects: My projects
diff --git a/lib/redmine/preparation.rb b/lib/redmine/preparation.rb
index 7223f2797..78db0411a 100644
--- a/lib/redmine/preparation.rb
+++ b/lib/redmine/preparation.rb
@@ -161,8 +161,6 @@ module Redmine
 
       MenuManager.map :top_menu do |menu|
         menu.push :home, :home_path
-        menu.push :my_page, {:controller => 'my', :action => 'page'},
-                  :if => Proc.new {User.current.logged?}
         menu.push :projects, {:controller => 'projects', :action => 'index'},
                   :caption => :label_project_plural
         menu.push :administration, {:controller => 'admin', :action => 'index'},
@@ -174,6 +172,12 @@ module Redmine
         menu.push :login, :signin_path, :if => Proc.new {!User.current.logged?}
         menu.push :register, :register_path,
                   :if => Proc.new {!User.current.logged? && Setting.self_registration?}
+      end
+
+      MenuManager.map :user_menu do |menu|
+        menu.push :profile, {:controller => 'users', :action => 'show', :id => 'current' }
+        menu.push :my_page, {:controller => 'my', :action => 'page'},
+                  :if => Proc.new {User.current.logged?}
         menu.push :my_account, {:controller => 'my', :action => 'account'},
                   :if => Proc.new {User.current.logged?}
         menu.push :logout, :signout_path, :html => {:method => 'post'},
diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css
index 78be5865e..1df55b635 100644
--- a/public/stylesheets/application.css
+++ b/public/stylesheets/application.css
@@ -24,7 +24,28 @@ pre, code {font-family: Consolas, Menlo, "Liberation Mono", Courier, monospace;}
   flex-direction: column;
 }
 
-#top-menu {background: #3E5B76; color: #fff; height:1.8em; font-size: 0.8em; padding: 2px 10px 0px 12px;}
+#top-menu {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 16px;
+  background: #3E5B76;
+  color: #fff;
+  height:3.2em;
+  font-size: 0.9em;
+}
+
+#top-menu-left {
+  display: flex;
+  align-items: center;
+}
+
+#top-menu-right {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
 #top-menu ul {margin: 0;  padding: 0;}
 #top-menu li {
   float:left;
@@ -33,17 +54,20 @@ pre, code {font-family: Consolas, Menlo, "Liberation Mono", Courier, monospace;}
   padding: 0px 0px 0px 0px;
   white-space:nowrap;
 }
-#top-menu a {color: #fff; margin-right: 8px; font-weight: bold;}
-#top-menu #loggedas { float: right; margin-right: 0.5em; color: #fff; }
+#global-nav a,
+#account a {color: #fff; margin-right: 8px; font-weight: bold;}
+
 
-#account {float:right;}
+#user-menu a { color: 333; }
 
 #header {min-height:5.3em;margin:0;background-color:#628DB6;color:#f8f8f8; padding: 4px 16px 20px 16px; position:relative;}
-#header a {color:#f8f8f8;}
 #header h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
 #header h1 .breadcrumbs { display:block; font-size: .5em; font-weight: normal; }
+#header h1 .breadcrumbs { display:block; font-size: .5em; font-weight: normal; }
+#header h1 .breadcrumbs a {color:#f8f8f8;}
 
 #quick-search {float:right;}
+#quick-search label a {color:#f8f8f8;}
 #quick-search #q {width:130px; height:24px; box-sizing:border-box; vertical-align:middle; border:1px solid #ccc; border-radius:3px;}
 
 #main-menu {position: absolute;  bottom: 0px;  left: 10px; margin-right: -500px; width: 100%;}
@@ -164,6 +188,7 @@ a#toggle-completed-versions {color:#999;}
 
 /***** Dropdown *****/
 .drdn {position:relative;}
+
 .drdn-trigger {
   box-sizing:border-box;
   overflow:hidden;
@@ -173,7 +198,21 @@ a#toggle-completed-versions {color:#999;}
   user-select:none;
   -moz-user-select:none;
   -webkit-user-select:none;
+  padding:3px 16px 3px 6px;
+  border-radius:4px;
 }
+
+.drdn-trigger.arrow::after {
+  position: absolute;
+  content: '';
+  background: url(../images/arrow_down.png) no-repeat;
+  right: 3px;
+  top: calc(50% - 5px);
+  width: 10px;
+  height: 10px;
+  z-index: 90;
+}
+
 .drdn-content {
   display:none;
   position:absolute;
@@ -186,12 +225,12 @@ a#toggle-completed-versions {color:#999;}
   color:#555;
   z-index:99;
 }
+
 .drdn.expanded .drdn-content {display:block;}
 
 .drdn-content .quick-search {margin:8px;}
 .drdn-content .autocomplete {box-sizing: border-box; width:100% !important; height:28px;}
 .drdn-content .autocomplete:focus {border-color:#5ad;}
-.drdn-items {max-height:400px; overflow:auto;}
 div + .drdn-items {border-top:1px solid #ccc;}
 .drdn-items>* {
   display:block;
@@ -199,10 +238,11 @@ div + .drdn-items {border-top:1px solid #ccc;}
   overflow:hidden;
   text-overflow: ellipsis;
   white-space:nowrap;
-  padding:4px 8px;
+  padding:1px 5px;
 }
-.drdn-items>a:hover {text-decoration:none;}
-.drdn-items>*:focus {border:1px dotted #bbb;}
+.drdn-items a:hover {background-color:#759FCF; color:#fff;}
+.drdn-items a:hover {text-decoration:none;}
+.drdn-items *:focus {border:1px dotted #bbb;}
 
 .drdn-items.selection>*:before {
   content:' ';
@@ -219,7 +259,6 @@ div + .drdn-items {border-top:1px solid #ccc;}
 .drdn-items.selection:empty {
   border: none;
 }
-.drdn-items>span {color:#999;}
 
 .contextual .drdn-content {top:18px;}
 .contextual .drdn-items {padding:2px; min-width: 160px;}
@@ -227,23 +266,50 @@ div + .drdn-items {border-top:1px solid #ccc;}
 .contextual .drdn-items>a.icon {padding-left: 24px; background-position-x: 4px;}
 .contextual .drdn-items>a:hover {color:#2A5685; border:1px solid #628db6; background-color:#eef5fd; border-radius:3px;}
 
+#user-menu { max-width: 150px;  border-radius: 4px; }
+#user-menu .gravatar { background: #ffffffb2; }
+#user-menu .user-name { font-weight: bold; font-size: 1em;}
+#user-menu .drdn-content {
+  min-width: 120px;
+  max-width: 240px;
+}
+#user-menu .drdn-trigger span {
+  font-weight: bold;
+  padding: 4px;
+  background-color: #00000033;
+  border-radius: 4px;
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+#user-menu .drdn-items ul {
+  display: flex;
+  flex-direction: column;
+}
+
+#user-menu .drdn-items.menu a {
+  display: block;
+  padding: 5px;
+}
+
 #project-jump.drdn {width:200px;display:inline-block;}
 #project-jump .drdn-trigger {
   width:100%;
   height:24px;
   display:inline-block;
-  padding:3px 18px 3px 6px;
   border-radius:3px;
   border:1px solid #ccc;
   margin:0 !important;
   vertical-align:middle;
   color:#555;
-  background:#fff url(../images/arrow_down.png) no-repeat 97% 50%;
+  background-color: #fff;
 }
-#project-jump .drdn.expanded .drdn-trigger {background-image:url(../images/arrow_up.png);}
 #project-jump .drdn-content {width:280px;}
-#project-jump .drdn-items>* {color:#555 !important;}
-#project-jump .drdn-items>a:hover {background-color:#759FCF; color:#fff !important;}
+#project-jump .drdn-items {max-height:400px; overflow:auto;}
+.drdn-items.projects a {
+  padding: 4px 5px;
+}
 
 /***** Tables *****/
 table.list, .table-list { border: 1px solid #e4e4e4; width: 100%; margin-bottom: 4px; border-radius: 3px; border-spacing: 0; overflow: hidden;}
diff --git a/public/stylesheets/responsive.css b/public/stylesheets/responsive.css
index 9899a90c1..aa6cb899a 100644
--- a/public/stylesheets/responsive.css
+++ b/public/stylesheets/responsive.css
@@ -121,6 +121,10 @@
     background: inherit;
   }
 
+  #header #quick-search .drdn-trigger::after {
+    display: none;
+  }
+
   /* styles for combobox within quick-search (#project_quick_jump_box) */
   #project-jump.drdn {
     position: absolute;
-- 
2.25.1