Change order of user items in header35787-change-order-of-user-related-items-links-in-header-top-bar

5 files changed, 47 insertions, 52 deletions

diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index df847094864..98373af4d95 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -120,6 +120,7 @@ header {
         border-radius: 0;
         right: -10px;
         padding: 6px 10px;
+        position: absolute;
 
         &:hover {
           background-color: $white-normal;
@@ -185,7 +186,7 @@ header {
     justify-content: space-between;
     position: relative;
     min-height: $header-height;
-    padding-left: 30px;
+    padding-left: 25px;
 
     &.menu-expanded {
       @media (max-width: $screen-xs-max) {
@@ -352,22 +353,22 @@ header {
     font-size: 18px;
 
     .navbar-nav {
-      display: table;
-      table-layout: fixed;
-      width: 100%;
       margin: 0;
       text-align: right;
+      display: flex;
+      justify-content: space-between;
     }
 
     .navbar-collapse {
-      padding-left: 5px;
+      padding-right: 16px;
 
       .nav > li:not(.hidden-xs) {
-        display: table-cell !important;
-        width: 25%;
+        display: inline-block;
 
         a {
-          margin-right: 8px;
+          margin-right: 0;
+          margin-left: 0;
+          min-width: 0;
         }
       }
     }
diff --git a/app/assets/stylesheets/new_nav.scss b/app/assets/stylesheets/new_nav.scss
index 781d4cc8833..02c6c014f21 100644
--- a/app/assets/stylesheets/new_nav.scss
+++ b/app/assets/stylesheets/new_nav.scss
@@ -90,7 +90,7 @@ header.navbar-gitlab-new {
 
     @media (max-width: $screen-xs-max) {
       margin-left: -$gl-padding;
-      margin-right: -10px;
+      padding-right: 28px;
     }
 
     .dropdown-bold-header {
@@ -128,7 +128,6 @@ header.navbar-gitlab-new {
     .navbar-nav {
       @media (max-width: $screen-xs-max) {
         display: flex;
-        padding-right: 10px;
       }
 
       li {
@@ -140,11 +139,6 @@ header.navbar-gitlab-new {
     }
 
     .nav > li {
-      &.header-user {
-        @media (max-width: $screen-xs-max) {
-          padding-left: 10px;
-        }
-      }
 
       > a {
         background: none;
diff --git a/app/views/layouts/header/_default.html.haml b/app/views/layouts/header/_default.html.haml
index bc3293fd100..8a40682cec5 100644
--- a/app/views/layouts/header/_default.html.haml
+++ b/app/views/layouts/header/_default.html.haml
@@ -42,25 +42,8 @@
                 = link_to sherlock_transactions_path, title: 'Sherlock Transactions',
                   data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
                   = icon('tachometer fw')
-            %li
-              = link_to assigned_issues_dashboard_path, title: 'Issues', aria: { label: "Issues" }, data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
-                = icon('hashtag fw')
-                - issues_count = assigned_issuables_count(:issues)
-                %span.badge.issues-count{ class: ('hidden' if issues_count.zero?) }
-                  = number_with_delimiter(issues_count)
-            %li
-              = link_to assigned_mrs_dashboard_path, title: 'Merge requests', aria: { label: "Merge requests" }, data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
-                = custom_icon('mr_bold')
-                - merge_requests_count = assigned_issuables_count(:merge_requests)
-                %span.badge.merge-requests-count{ class: ('hidden' if merge_requests_count.zero?) }
-                  = number_with_delimiter(merge_requests_count)
-            %li
-              = link_to dashboard_todos_path, title: 'Todos', aria: { label: "Todos" }, class: 'shortcuts-todos', data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
-                = icon('check-circle fw')
-                %span.badge.todos-count{ class: ('hidden' if todos_pending_count.zero?) }
-                  = todos_count_format(todos_pending_count)
             %li.header-user.dropdown
-              = link_to current_user, class: "header-user-dropdown-toggle", data: { toggle: "dropdown" } do
+              = link_to current_user, class: "header-user-dropdown-toggle has-tooltip", title: "Profile and settings", ref: 'tooltip', aria: { label: "Profile and settings" }, data: { toggle: "dropdown", container: "body" } do
                 = image_tag avatar_icon(current_user, 26), width: 26, height: 26, class: "header-user-avatar"
                 = icon('caret-down')
               .dropdown-menu-nav.dropdown-menu-align-right
@@ -79,6 +62,23 @@
                   %li.divider
                   %li
                     = link_to "Sign out", destroy_user_session_path, method: :delete, class: "sign-out-link"
+            %li
+              = link_to assigned_issues_dashboard_path, title: 'Issues', aria: { label: "Issues" }, data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
+                = icon('hashtag fw')
+                - issues_count = assigned_issuables_count(:issues)
+                %span.badge.issues-count{ class: ('hidden' if issues_count.zero?) }
+                  = number_with_delimiter(issues_count)
+            %li
+              = link_to assigned_mrs_dashboard_path, title: 'Merge requests', aria: { label: "Merge requests" }, data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
+                = custom_icon('mr_bold')
+                - merge_requests_count = assigned_issuables_count(:merge_requests)
+                %span.badge.merge-requests-count{ class: ('hidden' if merge_requests_count.zero?) }
+                  = number_with_delimiter(merge_requests_count)
+            %li
+              = link_to dashboard_todos_path, title: 'Todos', aria: { label: "Todos" }, class: 'shortcuts-todos', data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
+                = icon('check-circle fw')
+                %span.badge.todos-count{ class: ('hidden' if todos_pending_count.zero?) }
+                  = todos_count_format(todos_pending_count)
           - else
             %li
               %div
diff --git a/app/views/layouts/header/_new.html.haml b/app/views/layouts/header/_new.html.haml
index 60940dba475..8d40b528f8c 100644
--- a/app/views/layouts/header/_new.html.haml
+++ b/app/views/layouts/header/_new.html.haml
@@ -36,25 +36,8 @@
                 = link_to sherlock_transactions_path, title: 'Sherlock Transactions',
                   data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
                   = icon('tachometer fw')
-            %li
-              = link_to assigned_issues_dashboard_path, title: 'Issues', aria: { label: "Issues" }, data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
-                = icon('hashtag fw')
-                - issues_count = assigned_issuables_count(:issues)
-                %span.badge.issues-count{ class: ('hidden' if issues_count.zero?) }
-                  = number_with_delimiter(issues_count)
-            %li
-              = link_to assigned_mrs_dashboard_path, title: 'Merge requests', aria: { label: "Merge requests" }, data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
-                = custom_icon('mr_bold')
-                - merge_requests_count = assigned_issuables_count(:merge_requests)
-                %span.badge.merge-requests-count{ class: ('hidden' if merge_requests_count.zero?) }
-                  = number_with_delimiter(merge_requests_count)
-            %li
-              = link_to dashboard_todos_path, title: 'Todos', aria: { label: "Todos" }, class: 'shortcuts-todos', data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
-                = icon('check-circle fw')
-                %span.badge.todos-count{ class: ('hidden' if todos_pending_count.zero?) }
-                  = todos_count_format(todos_pending_count)
             %li.header-user.dropdown
-              = link_to current_user, class: "header-user-dropdown-toggle", data: { toggle: "dropdown" } do
+              = link_to current_user, class: "header-user-dropdown-toggle has-tooltip", title: "Profile and settings", ref: 'tooltip', aria: { label: "Profile and settings" }, data: { toggle: "dropdown", container: "body" } do
                 = image_tag avatar_icon(current_user, 26), width: 26, height: 26, class: "header-user-avatar"
                 = icon('chevron-down')
               .dropdown-menu-nav.dropdown-menu-align-right
@@ -73,6 +56,23 @@
                   %li.divider
                   %li
                     = link_to "Sign out", destroy_user_session_path, method: :delete, class: "sign-out-link"
+            %li
+              = link_to assigned_issues_dashboard_path, title: 'Issues', aria: { label: "Issues" }, data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
+                = icon('hashtag fw')
+                - issues_count = assigned_issuables_count(:issues)
+                %span.badge.issues-count{ class: ('hidden' if issues_count.zero?) }
+                  = number_with_delimiter(issues_count)
+            %li
+              = link_to assigned_mrs_dashboard_path, title: 'Merge requests', aria: { label: "Merge requests" }, data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
+                = custom_icon('mr_bold')
+                - merge_requests_count = assigned_issuables_count(:merge_requests)
+                %span.badge.merge-requests-count{ class: ('hidden' if merge_requests_count.zero?) }
+                  = number_with_delimiter(merge_requests_count)
+            %li
+              = link_to dashboard_todos_path, title: 'Todos', aria: { label: "Todos" }, class: 'shortcuts-todos', data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
+                = icon('check-circle fw')
+                %span.badge.todos-count{ class: ('hidden' if todos_pending_count.zero?) }
+                  = todos_count_format(todos_pending_count)
           - else
             %li
               %div
diff --git a/app/views/layouts/header/_new_dropdown.haml b/app/views/layouts/header/_new_dropdown.haml
index 9da739b0974..e15f73961ae 100644
--- a/app/views/layouts/header/_new_dropdown.haml
+++ b/app/views/layouts/header/_new_dropdown.haml
@@ -4,7 +4,7 @@
       = icon('plus')
       = icon('chevron-down')
     - else
-      = icon('plus fw')
+      = icon('plus')
       = icon('caret-down')
   .dropdown-menu-nav.dropdown-menu-align-right
     %ul