shows user avatar in mention autocomplete in editor

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 {
-  float: right;
-  padding: 3px 5px;
-}
+.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

 module Projects
   class ParticipantsService < BaseService
     attr_reader :noteable
-    
+
     def execute(noteable)
       @noteable = noteable
 
@@ -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: