From f833f68bfd4ef185aacd955b320b5e5ad84ea9b0 Mon Sep 17 00:00:00 2001
From: Durga Akhil M u1604vbox <akhil.m.durga2@gmail.com>
Date: Tue, 22 Nov 2016 13:50:20 +0530
Subject: [PATCH] mute_ui: Add UI for mute on recipient bar.

Like the topic edit pencil icon, the new UI is mostly invisible, but
appears when you hover over the recipient bar.

* Added a tag to hold the mute button in recipient_row.handlebars with
corresponding styling in zulip.css.
* Added an event handler for the mute button in click_handlers.js.

Fixes: #2235.
---
 static/js/click_handlers.js               | 10 ++++++++++
 static/js/message_list_view.js            | 10 ++++++++++
 static/styles/zulip.css                   |  9 +++++++++
 static/templates/recipient_row.handlebars |  1 +
 4 files changed, 30 insertions(+)

diff --git a/static/js/click_handlers.js b/static/js/click_handlers.js
index 490ac1ad8d..abd34604b4 100644
--- a/static/js/click_handlers.js
+++ b/static/js/click_handlers.js
@@ -163,6 +163,16 @@ $(function () {
         meta.focusing = true;
     });
 
+    // MUTING
+
+    $('body').on('click', '.on_hover_topic_mute', function (e) {
+        e.stopPropagation();
+        var stream_id = $(e.currentTarget).attr('data-stream-id');
+        var topic = $(e.currentTarget).attr('data-topic-name');
+        var stream = stream_data.get_sub_by_id(stream_id);
+        popovers.topic_ops.mute(stream.name, topic);
+    });
+
     // RECIPIENT BARS
 
     function get_row_id_for_narrowing(narrow_link_elem) {
diff --git a/static/js/message_list_view.js b/static/js/message_list_view.js
index f6d37f777f..cebc5b23a3 100644
--- a/static/js/message_list_view.js
+++ b/static/js/message_list_view.js
@@ -93,6 +93,16 @@ function populate_group_from_message_container(group, message_container) {
         group.match_subject = message_container.msg.match_subject;
         group.stream_url = message_container.stream_url;
         group.topic_url = message_container.topic_url;
+        var sub = stream_data.get_sub(message_container.msg.stream);
+        if (sub === undefined) {
+            // Hack to handle unusual cases like the tutorial where
+            // the streams used don't actually exist in the subs
+            // module.  Ideally, we'd clean this up by making the
+            // tutorial populate subs.js "properly".
+            group.stream_id = -1;
+        } else {
+            group.stream_id = sub.stream_id;
+        }
     } else if (group.is_private) {
         group.pm_with_url = message_container.pm_with_url;
         group.display_reply_to = message_store.get_pm_full_names(message_container.msg);
diff --git a/static/styles/zulip.css b/static/styles/zulip.css
index 5243b92a55..8cc90fabe8 100644
--- a/static/styles/zulip.css
+++ b/static/styles/zulip.css
@@ -997,6 +997,15 @@ a.message_label_clickable:hover {
     opacity: 1.0;
 }
 
+.on_hover_topic_mute {
+    opacity: .1;
+}
+
+.on_hover_topic_mute:hover {
+    cursor: pointer;
+    opacity: 1.0;
+}
+
 .edit_content {
     display: inline-block;
     position: relative;
diff --git a/static/templates/recipient_row.handlebars b/static/templates/recipient_row.handlebars
index 4e6ba11dfd..ffa372dde0 100644
--- a/static/templates/recipient_row.handlebars
+++ b/static/templates/recipient_row.handlebars
@@ -51,6 +51,7 @@
           <span class="topic_edit_form" id="{{id}}"></span>
         </span>
 
+        <i class="icon-vector-eye-close on_hover_topic_mute" data-stream-id="{{stream_id}}" data-topic-name="{{subject}}"></i>
         <span class="recipient_row_date {{#if show_date}}{{else}}hide-date{{/if}}">{{{date}}}</span>
       </div>
     </div>