Merge branch '22790-mention-autocomplete-avatar' into 'master'

User avatar in mention autocomplete in comment box

## What does this MR do?
This MR shows avatar in `@<username>` autocomplete in comment box. Also shows first latter as avatar if there is no group avatar is available.

## Are there points in the code the reviewer needs to double check?

## Why was this MR needed?
This MR closes issue  #22790 
 
## Screenshots (if relevant)
**Before**
![Screen_Shot_2016-10-25_at_17.44.44](/uploads/c44de668c7a2d482594423ebcc917440/Screen_Shot_2016-10-25_at_17.44.44.png)
**After**
![mention-avatar](/uploads/7cd2fbefa42e4a5f14335e057cf6978a/mention-avatar.png)
## Does this MR meet the acceptance criteria?

- [x] [CHANGELOG](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CHANGELOG) entry added
- [x] [Documentation created/updated](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/development/doc_styleguide.md)
- [x] API support added
- Tests
  - [x] All builds are passing
- [ ] Conform by the [merge request performance guides](http://docs.gitlab.com/ce/development/merge_request_performance_guidelines.html)
- [x] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [x] Branch has no merge conflicts with `master` (if it does - rebase it please)
- [x] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)

## What are the relevant issue numbers?


Closes #22790

See merge request !6865

app/assets/javascripts/gfm_auto_complete.js.es6

@@ -16,7 +16,7 @@
     },
     // Team Members
     Members: {
-      template: '<li>${username} <small>${title}</small></li>'
+      template: '<li>${avatarTag} ${username} <small>${title}</small></li>'
     },
     Labels: {
       template: '<li><span class="dropdown-label-box" style="background: ${color}"></span> ${title}</li>'
@@ -118,7 +118,7 @@
           beforeInsert: this.DefaultOptions.beforeInsert,
           beforeSave: function(members) {
             return $.map(members, function(m) {
-              var title;
+              let title = '';
               if (m.username == null) {
                 return m;
               }
@@ -126,8 +126,14 @@
               if (m.count) {
                 title += " (" + m.count + ")";
               }
+
+              const autoCompleteAvatar = m.avatar_url || m.username.charAt(0).toUpperCase();
+              const imgAvatar = `<img src="${m.avatar_url}" alt="${m.username}" class="avatar avatar-inline center s26"/>`;
+              const txtAvatar = `<div class="avatar center avatar-inline s26">${autoCompleteAvatar}</div>`;
+
               return {
                 username: m.username,
+                avatarTag: autoCompleteAvatar.length === 1 ?  txtAvatar : imgAvatar,
                 title: gl.utils.sanitize(title),
                 search: gl.utils.sanitize(m.username + " " + m.name)
               };

app/assets/stylesheets/framework/avatar.scss

@@ -34,6 +34,7 @@
 
   &.avatar-inline {
     float: none;
+    display: inline-block;
     margin-left: 4px;
     margin-bottom: 2px;
 
@@ -41,6 +42,12 @@
     &.s24 { margin-right: 4px; }
   }
 
+  &.center {
+    font-size: 14px;
+    line-height: 1.8em;
+    text-align: center;
+  }
+
   &.avatar-tile {
     border-radius: 0;
     border: none;

app/assets/stylesheets/framework/markdown_area.scss

@@ -148,7 +148,19 @@
   }
 }
 
-.atwho-view small.description {
+.atwho-view {
+  small.description {
     float: right;
     padding: 3px 5px;
+  }
+
+  .avatar-inline {
+    margin-bottom: 0;
+  }
+
+  .cur {
+    .avatar {
+      border: 1px solid $white-light;
+    }
+  }
 }
\ No newline at end of file

app/services/projects/participants_service.rb

@@ -15,7 +15,8 @@ module Projects
 
       [{
         name: noteable.author.name,
-        username: noteable.author.username
+        username: noteable.author.username,
+        avatar_url: noteable.author.avatar_url
       }]
     end
 
@@ -28,14 +29,14 @@ module Projects
 
     def sorted(users)
       users.uniq.to_a.compact.sort_by(&:username).map do |user|
-        { username: user.username, name: user.name }
+        { username: user.username, name: user.name, avatar_url: user.avatar_url }
       end
     end
 
     def groups
       current_user.authorized_groups.sort_by(&:path).map do |group|
         count = group.users.count
-        { username: group.path, name: group.name, count: count }
+        { username: group.path, name: group.name, count: count, avatar_url: group.avatar.url }
       end
     end
 

changelogs/unreleased/22790-mention-autocomplete-avatar.yml

+---
+title: Show avatars in mention dropdown
+merge_request: 6865
+author: