paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-10-23 04:52:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

ui_util: Extract do_new_unread_animation for re-use.

Browse Source
This commit is contained in:
Karl Stolley
2025-08-08 11:17:33 -04:00
committed by Tim Abbott
parent 4289cb67e5
commit 8b059ec025
2 changed files with 28 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
web/src/left_sidebar_navigation_area.ts
View File

@@ -174,38 +174,11 @@ function toggle_condensed_navigation_area(): void {
export function animate_mention_changes($li: JQuery, new_mention_count: number): void {
if (new_mention_count > last_mention_count) {
do_new_unread_animation($li);
ui_util.do_new_unread_animation($li);
}
last_mention_count = new_mention_count;
}
function do_new_unread_animation($target: JQuery): void {
// The .new-unread-highlight class manages the
// transition on the target element's background.
// The pulse effect on unread counts, by contrast,
// is handled via CSS animations on the .new-unread
// class.
$target.addClass("new-unread new-unread-highlight");
// We listen for the end of the animation to remove
// the .new-unread class; this allows us to express
// exclusively in CSS our desired timing, duration,
// and any other effects. Doing so also gives us
// very smooth rendering, as no visual properties
// get tied to JavaScript's event loop.
$target.on("animationend", (): void => {
$target.removeClass("new-unread");
// We remove the transition-managing highlight
// some time after the animation has run; how
// long after doesn't really matter, as the
// transition will run as soon as .new-unread
// is removed above. This just ensures that we
// *do* see a transition on the background color.
setTimeout(() => {
$target.removeClass("new-unread-highlight");
}, 2000);
});
}
export function highlight_inbox_view(): void {
select_top_left_corner_item(".top_left_inbox");

27
web/src/ui_util.ts
View File

@@ -202,6 +202,33 @@ export function update_unread_mention_info_in_dom(
$unread_mention_info_span.text("@");
}
export function do_new_unread_animation($target: JQuery): void {
// The .new-unread-highlight class manages the
// transition on the target element's background.
// The pulse effect on unread counts, by contrast,
// is handled via CSS animations on the .new-unread
// class.
$target.addClass("new-unread new-unread-highlight");
// We listen for the end of the animation to remove
// the .new-unread class; this allows us to express
// exclusively in CSS our desired timing, duration,
// and any other effects. Doing so also gives us
// very smooth rendering, as no visual properties
// get tied to JavaScript's event loop.
$target.on("animationend", (): void => {
$target.removeClass("new-unread");
// We remove the transition-managing highlight
// some time after the animation has run; how
// long after doesn't really matter, as the
// transition will run as soon as .new-unread
// is removed above. This just ensures that we
// *do* see a transition on the background color.
setTimeout(() => {
$target.removeClass("new-unread-highlight");
}, 2000);
});
}
/**
* Parse HTML and return a DocumentFragment.
*