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

2 files changed, 23 insertions, 12 deletions

diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 00111dfa706..2a90a1fef37 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/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;
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index c32ce5195c6..0c607071840 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/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%;
+}