mirror of https://github.com/zulip/zulip.git
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:
parent
fc5949d9b7
commit
c587a18646
|
@ -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 () {
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue