Added peer photos to mention dropdown

app/css/app.css

@@ -2212,6 +2212,29 @@ a.composer_emoji_btn:hover {
 .composer_dropdown li a.composer_autocomplete_option_active .composer_user_mention {
   color: #698192;
 }
+span.composer_user_photo {
+  display: inline-block;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  overflow: hidden;
+  margin-right: 10px;
+  vertical-align: top;
+}
+img.composer_user_photo {
+  width: 32px;
+  height: 32px;
+}
+span.composer_user_photo .peer_initials {
+  line-height: 32px;
+  font-size: 14px;
+}
+.composer_user_name,
+.composer_user_mention {
+  display: inline-block;
+  line-height: 32px;
+  vertical-align: top;
+}
 
 .composer_sticker_btn {
   width: 67px;

app/js/directives.js

@@ -1145,7 +1145,7 @@ angular.module('myApp.directives', ['myApp.filters'])
 
   })
 
-  .directive('mySendForm', function ($timeout, $modalStack, $http, $interpolate, Storage, AppStickersManager, ErrorService) {
+  .directive('mySendForm', function ($timeout, $compile, $modalStack, $http, $interpolate, Storage, AppStickersManager, ErrorService) {
 
     return {
       link: link,
@@ -1195,6 +1195,9 @@ angular.module('myApp.directives', ['myApp.filters'])
         });
       }
 
+      var peerPhotoCompiled = $compile('<span class="composer_user_photo" my-peer-photolink="peerID" img-class="composer_user_photo"></span>');
+      var cachedPeerPhotos = {};
+
       var composer = new MessageComposer(messageField, {
         onTyping: function () {
           $scope.$emit('ui_typing');
@@ -1202,6 +1205,18 @@ angular.module('myApp.directives', ['myApp.filters'])
         getSendOnEnter: function () {
           return sendOnEnter;
         },
+        getPeerImage: function (element, peerID) {
+          if (cachedPeerPhotos[peerID]) {
+            element.replaceWith(cachedPeerPhotos[peerID]);
+            return;
+          }
+          var scope = $scope.$new(true);
+          scope.peerID = peerID;
+          peerPhotoCompiled(scope, function (clonedElement) {
+            cachedPeerPhotos[peerID] = clonedElement;
+            element.replaceWith(clonedElement);
+          });
+        },
         mentions: $scope.mentions,
         onMessageSubmit: onMessageSubmit,
         onFilePaste: onFilePaste

app/js/message_composer.js

@@ -461,6 +461,7 @@ function MessageComposer (textarea, options) {
   this.getSendOnEnter = options.getSendOnEnter;
   this.onFilePaste = options.onFilePaste;
   this.mentions = options.mentions;
+  this.getPeerImage = options.getPeerImage;
 }
 
 MessageComposer.prototype.setUpInput = function () {
@@ -1006,10 +1007,16 @@ MessageComposer.prototype.showMentionSuggestions = function (users) {
 
   for (i = 0; i < count; i++) {
     user = users[i];
-    html.push('<li><a class="composer_mention_option" data-mention="' + user.username + '"><span class="composer_user_name">' + user.rFullName + '</span><span class="composer_user_mention">@' + user.username + '</span></a></li>');
+    html.push('<li><a class="composer_mention_option" data-mention="' + user.username + '"><span class="composer_user_photo" data-user-id="' + user.id + '"></span><span class="composer_user_name">' + user.rFullName + '</span><span class="composer_user_mention">@' + user.username + '</span></a></li>');
   }
 
   this.autoCompleteEl.html(html.join(''));
+
+  var self = this;
+  this.autoCompleteEl.find('.composer_user_photo').each(function (k, element) {
+    self.getPeerImage($(element), element.getAttribute('data-user-id'));
+  });
+
   this.autoCompleteEl.show();
   this.updatePosition();
   this.autocompleteShown = true;