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)
This commit is contained in:
Steve Howell 2013-05-16 17:40:07 -04:00 committed by Leo Franchi
parent fc5949d9b7
commit c587a18646
2 changed files with 38 additions and 1 deletions

View File

@ -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 () {

View File

@ -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;
}