From c587a186460c324aa1cbce53279e35fb8d62b30d Mon Sep 17 00:00:00 2001
From: Steve Howell <steve@humbughq.com>
Date: Thu, 16 May 2013 17:40:07 -0400
Subject: [PATCH] Animate "Private messages" when new private messages come in.

Set the background behind "Private messages" to green whenever
a user's unread count goes up for private messages.  Remove
the background after 3s.  Advanced browsers will fade the
green in and out over 6s (3s up, 3s down).

(imported from commit 80ed9661d9eec1d697f3259854037d7e145615cd)
---
 zephyr/static/js/stream_list.js | 29 +++++++++++++++++++++++++++++
 zephyr/static/styles/zephyr.css | 10 +++++++++-
 2 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/zephyr/static/js/stream_list.js b/zephyr/static/js/stream_list.js
index 5310fa7ed5..0f69fc3854 100644
--- a/zephyr/static/js/stream_list.js
+++ b/zephyr/static/js/stream_list.js
@@ -2,7 +2,9 @@ var stream_list = (function () {
 
 var exports = {};
 
+var last_private_message_count = 0;
 var previous_sort_order;
+
 exports.sort_narrow_list = function () {
     var streams = subs.subscribed_streams();
     if (streams.length === 0) {
@@ -196,6 +198,27 @@ 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 mid_animation() {
+        li.removeClass("new_private_messages");
+        li.addClass("new_private_messages_fadeout");
+    }
+    function end_animation() {
+        li.removeClass("new_private_messages_fadeout");
+    }
+    setTimeout(mid_animation, 3000);
+    setTimeout(end_animation, 6000);
+}
+
+function animate_private_message_changes(new_private_message_count) {
+    if (new_private_message_count > last_private_message_count) {
+        do_new_private_messages_animation();
+    }
+    last_private_message_count = new_private_message_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.
@@ -215,6 +238,12 @@ exports.update_dom_with_unread_counts = function (counts) {
     // integer counts
     exports.set_count("global", "private-message", counts.private_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);
 };
 
 $(function () {
diff --git a/zephyr/static/styles/zephyr.css b/zephyr/static/styles/zephyr.css
index eb4e1c9e2c..64d4b51656 100644
--- a/zephyr/static/styles/zephyr.css
+++ b/zephyr/static/styles/zephyr.css
@@ -321,10 +321,18 @@ td.pointer {
     background-color: #FAFFC7;
 }
 
-.selected_message.private-message .message_data, .selected_message .messagebox.private-message {
+.selected_message.private-message .message_data, .selected_message .messagebox.private-message,
+.new_private_messages {
     background-color: #e1ffb2;
 }
 
+.new_private_messages, .new_private_messages_fadeout {
+    -webkit-transition: all 3s ease-in-out;
+    -moz-transition: all 3s ease-in-out;
+    -o-transition: all 3s ease-in-out;
+    transition: all 3s ease-in-out;
+}
+
 .selected_message .messagebox.mention {
     background-color: #FFE0DC;
 }