Make user_popover use user_info_popover template.

frontend_tests/node_tests/templates.js

@@ -1027,12 +1027,13 @@ function render(template_name, args) {
         },
         sent_by_uri: '/sent_by/uri',
         pm_with_uri: '/pm_with/uri',
+        private_message_class: 'compose_private_message',
     };
 
     var html = render('user_info_popover_content', args);
     global.write_handlebars_output("user_info_popover_content", html);
 
-    var a = $(html).find("a.respond_personal_button");
+    var a = $(html).find("a.compose_private_message");
     assert.equal(a.text().trim(), 'Send private message');
 }());
 
@@ -1075,20 +1076,6 @@ function render(template_name, args) {
     assert.equal(a.text(), 'King Lear');
 }());
 
-(function user_sidebar_actions() {
-    var args = {
-        email: 'hamlet@zulip.com',
-        name: 'Hamlet',
-    };
-
-    var html = render('user_sidebar_actions', args);
-
-    global.write_handlebars_output("user_sidebar_actions", html);
-
-    var a = $(html).find("a.narrow_to_private_messages");
-    assert.equal(a.text().trim(), 'Narrow to private messages with Hamlet');
-}());
-
 (function muted_topic_ui_row() {
     var args = {
         stream: 'Verona',

static/js/popovers.js

@@ -36,6 +36,13 @@ var list_of_popovers = [];
     }
 }($.fn.popover));
 
+function load_medium_avatar(user_email) {
+    var sender_avatar_medium = new Image();
+    sender_avatar_medium.src= "avatar/" + user_email + "/medium";
+    $(sender_avatar_medium).load(function () {
+        $(".popover-avatar").css("background-image","url("+$(this).attr("src")+")");
+    });
+}
 
 function show_message_info_popover(element, id) {
     var last_popover_elem = current_message_info_popover_elem;
@@ -64,28 +71,27 @@ function show_message_info_popover(element, id) {
         }
 
         var args = {
-            message:  message,
-            sender_email: sender_email,
+            user_full_name: message.sender_full_name,
+            user_email: sender_email,
+            user_id: message.sender_id,
             pm_with_uri: narrow.pm_with_uri(sender_email),
             sent_by_uri: narrow.by_sender_uri(sender_email),
             narrowed: narrow.active(),
+            historical: message.historical,
+            private_message_class: "respond_personal_button",
         };
 
         var ypos = elt.offset().top - message_viewport.scrollTop();
         elt.popover({
             placement: (ypos > (message_viewport.height() - 300)) ? 'top' : 'bottom',
             template:  templates.render('user_info_popover',   {class: "message-info-popover"}),
-            title:     templates.render('user_info_popover_title', {sender_avatar: "avatar/" + sender_email}),
+            title:     templates.render('user_info_popover_title', {user_avatar: "avatar/" + sender_email}),
             content:   templates.render('user_info_popover_content', args),
             trigger:   "manual",
         });
         elt.popover("show");
 
-        var sender_avatar_medium = new Image();
-        sender_avatar_medium.src= "avatar/" + sender_email + "/medium";
-            $(sender_avatar_medium).load(function () {
-            $(".popover-avatar").css("background-image","url("+$(this).attr("src")+")");
-        });
+        load_medium_avatar(sender_email);
 
         current_message_info_popover_elem = elt;
     }
@@ -532,6 +538,7 @@ exports.register_click_handlers = function () {
 
         compose_actions.start('private', {private_message_recipient: email, trigger: 'sidebar user actions'});
         e.stopPropagation();
+        e.preventDefault();
     });
 
     $('body').on('click', '.user_popover .mention_user', function (e) {
@@ -593,16 +600,30 @@ exports.register_click_handlers = function () {
         if (userlist_placement === "right") {
             popovers.show_userlist_sidebar();
         }
-        var template_vars = {user_id: user_id, name: name};
-        var content = templates.render('user_sidebar_actions', template_vars);
+
+        var user_email = people.get_person_from_user_id(user_id).email;
+
+        var args = {
+            user_email: user_email,
+            user_full_name: name,
+            user_id: user_id,
+            pm_with_uri: narrow.pm_with_uri(user_email),
+            sent_by_uri: narrow.by_sender_uri(user_email),
+            private_message_class: "compose_private_message",
+        };
 
         target.popover({
-            content:   content,
-            placement: userlist_placement === "left" ? "right" : "left",
+            template:  templates.render('user_info_popover',   {class: "user_popover"}),
+            title:     templates.render('user_info_popover_title', {user_avatar: "avatar/" + user_email}),
+            content:   templates.render('user_info_popover_content', args),
             trigger:   "manual",
             fixed: true,
+            placement: userlist_placement === "left" ? "right" : "left",
         });
         target.popover("show");
+
+        load_medium_avatar(user_email);
+
         current_user_sidebar_user_id = user_id;
         current_user_sidebar_popover = target.data('popover');
 

static/styles/zulip.css

@@ -2637,6 +2637,7 @@ ul.actions_popover i {
 
 .user_popover {
     top: 100px!important;
+    margin: -15px;
 }
 
 .popover-inner {

static/templates/user_info_popover_content.handlebars

@@ -1,16 +1,16 @@
 {{! Contents of the "message info" popup }}
-<ul class="nav nav-list actions_popover sender_info_popover" data-user-id="{{message.sender_id}}">
+<ul class="nav nav-list actions_popover sender_info_popover" data-user-id="{{user_id}}">
     <div class="popover_info">
-        <li><b>{{message.sender_full_name}}</b></li>
-        <li class='my_email'>{{sender_email}}</li>
+        <li><b>{{user_full_name}}</b></li>
+        <li class='my_email'>{{user_email}}</li>
 
-        {{#if message.historical}}
+        {{#if historical}}
         <li class="small">({{t "Message sent when you were not subscribed" }})</li>
         {{/if}}
     </div>
     <hr />
     <li>
-        <a href="#" class="respond_personal_button">
+        <a href="#" class="{{ private_message_class }}">
             <i class="icon-vector-edit"></i> {{#tr this}}Send private message{{/tr}}
         </a>
     </li>

static/templates/user_info_popover_title.handlebars

@@ -1,2 +1,2 @@
-<div class="popover-avatar" style="background-image: url('{{sender_avatar}}');" >
+<div class="popover-avatar" style="background-image: url('{{user_avatar}}');" >
 </div>

static/templates/user_sidebar_actions.handlebars

@@ -1,26 +0,0 @@
-{{! Contents of the "user actions" popup }}
-<ul class="nav nav-list user_popover" data-user-id="{{user_id}}">
-  <li>
-    <a class="narrow_to_private_messages">
-      <i class="icon-vector-user"></i>
-      {{#tr this}}Narrow to private messages with <b>__name__</b>{{/tr}}
-    </a>
-  </li>
-  <li>
-    <a class="narrow_to_messages_sent">
-      <i class="icon-vector-bullhorn"></i>
-      {{#tr this}}Narrow to messages sent by <b>__name__</b>{{/tr}}
-    </a>
-  </li>
-  <li>
-    <a class="compose_private_message">
-      <i class="icon-vector-edit"></i>
-      {{#tr this}}Compose a message to <b>__name__</b>{{/tr}}
-    </a>
-  </li>
-  <li>
-    <a class="mention_user">
-      {{#tr this}}@ Compose a message @-mentioning <b>__name__</b>{{/tr}}
-    </a>
-  </li>
-</ul>