shows user avatar in mention autocomplete in editor

adds entry in CHANGELOG

no uninitialized variable and unnecessary if statement

formatting issue in CHANGELOG

resolves scss lint warings

cleanup: unnecessary css classes

adds css class that cleaned up by mistake

replaces snake_case variables name with camelCase

removes unnecessary css class and adds white color border for avatar

moves changelog entry from 8.13 to 8.14

remove bottom margin from avatar-inline

resolves lint warnings

rebased and moves changelog entry to 8.14

fixes avatar shifting on hover

adds entry at top of 8.14 section in CHANGELOG.md

calls sanitization for gl.utils

syncing changelog with master and created changelog files using cli

changes changelog title

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: