theme: Change recipient bar color and theme in the same paint.

`update_recipient_bar_background_color` changes in a paint
after change in theme without using `requestAnimationFrame` to
make sure they happen in the same paint..

Replaced `setTimeout` with `requestAnimationFrame` in
`server_events_dispatch` since `requestAnimationFrame` already
ensures that they happen in the next paint, assuming that was the
intention of `setTimeout` being preset there.
This commit is contained in:
Aman Agrawal 2023-07-02 12:36:30 +00:00 committed by Tim Abbott
parent 1c8bf4f050
commit d547b838ac
4 changed files with 19 additions and 11 deletions

View File

@ -847,15 +847,19 @@ export function initialize() {
$("body").on("click", "#gear-menu .dark-theme", (e) => {
// Allow propagation to close gear menu.
e.preventDefault();
dark_theme.enable();
message_lists.update_recipient_bar_background_color();
requestAnimationFrame(() => {
dark_theme.enable();
message_lists.update_recipient_bar_background_color();
});
});
$("body").on("click", "#gear-menu .light-theme", (e) => {
// Allow propagation to close gear menu.
e.preventDefault();
dark_theme.disable();
message_lists.update_recipient_bar_background_color();
requestAnimationFrame(() => {
dark_theme.disable();
message_lists.update_recipient_bar_background_color();
});
});
$("body").on("click", "#header-container .brand", (e) => {

View File

@ -746,7 +746,7 @@ export function dispatch_normal_event(event) {
unread_ui.update_unread_banner();
}
if (event.property === "color_scheme") {
setTimeout(() => {
requestAnimationFrame(() => {
if (event.value === settings_config.color_scheme_values.night.code) {
dark_theme.enable();
realm_logo.render();
@ -758,7 +758,7 @@ export function dispatch_normal_event(event) {
realm_logo.render();
}
message_lists.update_recipient_bar_background_color();
}, 300);
});
}
if (event.property === "starred_message_counts") {
starred_messages_ui.rerender_ui();

View File

@ -61,8 +61,10 @@ export function switch_to_light_theme() {
send({
command: "/day",
on_success(data) {
dark_theme.disable();
message_lists.update_recipient_bar_background_color();
requestAnimationFrame(() => {
dark_theme.disable();
message_lists.update_recipient_bar_background_color();
});
feedback_widget.show({
populate($container) {
const rendered_msg = markdown.parse_non_message(data.msg);
@ -84,8 +86,10 @@ export function switch_to_dark_theme() {
send({
command: "/night",
on_success(data) {
dark_theme.enable();
message_lists.update_recipient_bar_background_color();
requestAnimationFrame(() => {
dark_theme.enable();
message_lists.update_recipient_bar_background_color();
});
feedback_widget.show({
populate($container) {
const rendered_msg = markdown.parse_non_message(data.msg);

View File

@ -17,7 +17,7 @@ const test_message = events.test_message;
const test_user = events.test_user;
const typing_person1 = events.typing_person1;
set_global("setTimeout", (func) => func());
set_global("requestAnimationFrame", (func) => func());
const activity = mock_esm("../src/activity");
const alert_words_ui = mock_esm("../src/alert_words_ui");