Merge branch 'user-avatar-header' into 'master'

Added user avatar to header

## What does this MR do?

Adds  the users avatar to the header with a dropdown for profile & sign out.

## What are the relevant issue numbers?

Closes #18543 

## Screenshots (if relevant)

![Screen_Shot_2016-06-27_at_12.47.34](/uploads/852d0eb7075eefcf21f5cf5ff71a389a/Screen_Shot_2016-06-27_at_12.47.34.png)

![Screen_Shot_2016-06-27_at_12.47.36](/uploads/6cb29843d3a12bbf2d3ed2a7c9bde770/Screen_Shot_2016-06-27_at_12.47.36.png)

See merge request !4939

app/assets/stylesheets/framework/dropdowns.scss

@@ -20,7 +20,8 @@
 }
 .open {
-  .dropdown-menu {
+  .dropdown-menu,
+  .dropdown-menu-nav {
     display: block;
   }
@@ -66,7 +67,8 @@
   }
 }
-.dropdown-menu {
+.dropdown-menu,
+.dropdown-menu-nav {
   display: none;
   position: absolute;
   top: 100%;
@@ -77,7 +79,7 @@
   margin-bottom: 0;
   font-size: 15px;
   font-weight: normal;
-  padding: 10px 0;
+  padding: 8px 0;
   background-color: $dropdown-bg;
   border: 1px solid $dropdown-border-color;
   border-radius: $border-radius-base;
@@ -101,12 +103,12 @@
   li {
     text-align: left;
     list-style: none;
-    padding: 0 10px;
+    padding: 0 8px;
   }
   .divider {
     height: 1px;
-    margin: 8px 10px;
+    margin: 8px;
     padding: 0;
     background-color: $dropdown-divider-color;
   }
@@ -122,7 +124,7 @@
   a {
     display: block;
     position: relative;
-    padding: 5px 10px;
+    padding: 5px 8px;
     color: $dropdown-link-color;
     line-height: initial;
     text-overflow: ellipsis;

app/assets/stylesheets/framework/header.scss

@@ -60,7 +60,7 @@ header {
         margin: ($header-height - 28) / 2 0;
         margin-left: 10px;
         height: 28px;
-        width: 28px;
+        min-width: 28px;
         line-height: 28px;
         text-align: center;
@@ -241,14 +241,23 @@ header {
     .navbar-collapse {
       padding-left: 5px;
-      li {
+      .nav > li {
         display: table-cell;
         width: 1%;
-
-        a {
-          margin-left: 8px !important;
-        }
       }
     }
   }
 }
+
+.header-user {
+  .dropdown-menu-nav {
+    width: 140px;
+    margin-top: -5px;
+  }
+}
+
+.header-user-avatar {
+  float: left;
+  margin-right: 5px;
+  border-radius: 50%;
+}

app/views/layouts/header/_default.html.haml

@@ -38,9 +38,17 @@
                 = link_to sherlock_transactions_path, title: 'Sherlock Transactions',
                   data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
                   = icon('tachometer fw')
-            %li
-              = link_to destroy_user_session_path, class: 'logout', method: :delete, title: 'Sign out', data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
-                = icon('sign-out')
+            %li.header-user.dropdown
+              = link_to current_user, class: "header-user-dropdown-toggle", data: { toggle: "dropdown" } do
+                = image_tag avatar_icon(current_user, 26), width: 26, height: 26, class: "header-user-avatar"
+                %span.caret
+              .dropdown-menu-nav.dropdown-menu-align-right
+                %ul
+                  %li
+                    = link_to "Profile", current_user
+                  %li.divider
+                  %li
+                    = link_to "Sign out", destroy_user_session_path, method: :delete, class: "sign-out-link", title: 'Sign out'
           - else
             %li
               %div

features/project/issues/issues.feature

@@ -219,8 +219,8 @@ Feature: Project Issues
     When I click button "Unsubscribe"
     Then I should see that I am unsubscribed
+  @javascript
   Scenario: I submit new unassigned issue as guest
-    Given I logout
     Given public project "Community"
     When I visit project "Community" page
     And I visit project "Community" issues page

features/search.feature

@@ -73,13 +73,15 @@ Feature: Search
   Scenario: I logout and should see project I am looking for
     Given project "Shop" is public
-    And I logout
+    And I logout directly
+    And I visit dashboard search page
     And I search for "Sho"
     Then I should see "Shop" project link
   Scenario: I logout and should see issues I am looking for
     Given project "Shop" is public
-    And I logout
+    And I logout directly
+    And I visit dashboard search page
     And project has issues
     When I search for "Foo"
     And I click "Issues" link
@@ -88,7 +90,7 @@ Feature: Search
   Scenario: I logout and should see project code I am looking for
     Given project "Shop" is public
-    And I logout
+    And I logout directly
     When I visit project "Shop" page
     And I search for "rspec" on project page
     Then I should see code results for project "Shop"

spec/support/login_helpers.rb

@@ -39,7 +39,8 @@ module LoginHelpers
   # Requires Javascript driver.
   def logout
-    find(:css, ".fa.fa-sign-out").click
+    find(".header-user-dropdown-toggle").click
+    click_link "Sign out"
   end
   # Logout without JavaScript driver