From cd1348895901c10b1e94f9a6c2ae5105e813f1bf Mon Sep 17 00:00:00 2001
From: Steve Howell <steve@humbughq.com>
Date: Fri, 31 May 2013 13:07:59 -0400
Subject: [PATCH] Show fade effect in left pane for new mentions.

This also changes the color for the blink effect when you
get private messages.  For simplicity sake, we use the
same color for private messages and mentions.

(imported from commit 46b0f7af1dccefe575004e7676990e5c854a3dcc)
---
 zephyr/static/js/stream_list.js | 27 ++++++++++++++++-----------
 zephyr/static/styles/zephyr.css |  9 ++++++---
 2 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/zephyr/static/js/stream_list.js b/zephyr/static/js/stream_list.js
index 4d761a8473..e8eddc74e2 100644
--- a/zephyr/static/js/stream_list.js
+++ b/zephyr/static/js/stream_list.js
@@ -3,6 +3,7 @@ var stream_list = (function () {
 var exports = {};
 
 var last_private_message_count = 0;
+var last_mention_count = 0;
 var previous_sort_order;
 
 exports.sort_narrow_list = function () {
@@ -179,15 +180,15 @@ exports.update_streams_sidebar = function () {
     }
 };
 
-function do_new_private_messages_animation() {
-    var li = get_filter_li("global", "private-message");
-    li.addClass("new_private_messages");
+function do_new_messages_animation(message_type) {
+    var li = get_filter_li("global", message_type);
+    li.addClass("new_messages");
     function mid_animation() {
-        li.removeClass("new_private_messages");
-        li.addClass("new_private_messages_fadeout");
+        li.removeClass("new_messages");
+        li.addClass("new_messages_fadeout");
     }
     function end_animation() {
-        li.removeClass("new_private_messages_fadeout");
+        li.removeClass("new_messages_fadeout");
     }
     setTimeout(mid_animation, 3000);
     setTimeout(end_animation, 6000);
@@ -195,11 +196,18 @@ function do_new_private_messages_animation() {
 
 function animate_private_message_changes(new_private_message_count) {
     if (new_private_message_count > last_private_message_count) {
-        do_new_private_messages_animation();
+        do_new_messages_animation('private-message');
     }
     last_private_message_count = new_private_message_count;
 }
 
+function animate_mention_changes(new_mention_count) {
+    if (new_mention_count > last_mention_count) {
+        do_new_messages_animation('mentioned-message');
+    }
+    last_mention_count = new_mention_count;
+}
+
 exports.update_dom_with_unread_counts = function (counts) {
     // counts is just a data object that gets calculated elsewhere
     // Our job is to update some DOM elements.
@@ -221,11 +229,8 @@ exports.update_dom_with_unread_counts = function (counts) {
     exports.set_count("global", "mentioned-message", counts.mentioned_message_count);
     exports.set_count("global", "home", counts.home_unread_messages);
 
-    // For now increases in private messages get special treatment in terms of
-    // animating the left pane.  It is unlikely that we will generalize this,
-    // since Starred messages are user-initiated and Home messages would be too
-    // spammy.
     animate_private_message_changes(counts.private_message_count);
+    animate_mention_changes(counts.mentioned_message_count);
 };
 
 $(function () {
diff --git a/zephyr/static/styles/zephyr.css b/zephyr/static/styles/zephyr.css
index c76675b8f9..5158322fc6 100644
--- a/zephyr/static/styles/zephyr.css
+++ b/zephyr/static/styles/zephyr.css
@@ -363,12 +363,15 @@ td.pointer {
     visibility: visible;
 }
 
-.selected_message.private-message .message_data, .selected_message.private-message .messagebox,
-.new_private_messages {
+.selected_message.private-message .message_data, .selected_message.private-message .messagebox {
     background-color: #feffcc;
 }
 
-.new_private_messages, .new_private_messages_fadeout {
+.new_messages {
+    background-color: lightblue;
+}
+
+.new_messages, .new_messages_fadeout {
     -webkit-transition: all 3s ease-in-out;
     -moz-transition: all 3s ease-in-out;
     -o-transition: all 3s ease-in-out;