paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-17 12:21:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

settings: Fix flashing of information density setting inputs.

Browse Source 
We change the code to update the visibility of information
density setting inputs only on successful completion of
request and not on receiving events.

Visibility of inputs is not being live updated on receiving
events because that leads to flashing of inputs when deselecting
the "Compact mode" checkbox due to the data being sent in
different events and data with the client being different for
time till the all events are received.
This commit is contained in:
Sahil Batra
2024-07-18 16:05:07 +05:30
committed by Tim Abbott
parent 59068c24e9
commit d8aedc1f8e
5 changed files with 57 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
web/src/server_events_dispatch.js
View File

@@ -461,17 +461,6 @@ export function dispatch_normal_event(event) {
realm_user_settings_defaults,
);
}
if (
["dense_mode", "web_font_size_px", "web_line_height_percent"].includes(
event.property,
)
) {
/* istanbul ignore next */
settings_preferences.update_information_density_settings_visibility(
$(settings_realm_user_settings_defaults.realm_default_settings_panel.container),
);
}
break;
}
@@ -804,9 +793,6 @@ export function dispatch_normal_event(event) {
$("body").toggleClass("more-dense-mode");
information_density.set_base_typography_css_variables();
information_density.calculate_timestamp_widths();
settings_preferences.update_information_density_settings_visibility(
$(settings_preferences.user_settings_panel.container),
);
}
if (
event.property === "web_font_size_px" ||
@@ -814,9 +800,6 @@ export function dispatch_normal_event(event) {
) {
information_density.set_base_typography_css_variables();
information_density.calculate_timestamp_widths();
settings_preferences.update_information_density_settings_visibility(
$(settings_preferences.user_settings_panel.container),
);
}
if (event.property === "web_mark_read_on_scroll_policy") {
unread_ui.update_unread_banner();

23
web/src/settings_org.js
View File

@@ -20,6 +20,7 @@ import * as settings_components from "./settings_components";
import * as settings_config from "./settings_config";
import * as settings_data from "./settings_data";
import * as settings_notifications from "./settings_notifications";
import * as settings_preferences from "./settings_preferences";
import * as settings_realm_domains from "./settings_realm_domains";
import * as settings_ui from "./settings_ui";
import {current_user, realm} from "./state_data";
@@ -730,7 +731,7 @@ export function sync_realm_settings(property) {
}
}
export function save_organization_settings(data, $save_button, patch_url) {
export function save_organization_settings(data, $save_button, patch_url, success_continuation) {
const $subsection_parent = $save_button.closest(".settings-subsection-parent");
const $save_btn_container = $subsection_parent.find(".save-button-controls");
const $failed_alert_elem = $subsection_parent.find(".subsection-failed-status p");
@@ -741,6 +742,9 @@ export function save_organization_settings(data, $save_button, patch_url) {
success() {
$failed_alert_elem.hide();
settings_components.change_save_button_state($save_btn_container, "succeeded");
if (success_continuation !== undefined) {
success_continuation();
}
},
error(xhr) {
settings_components.change_save_button_state($save_btn_container, "failed");
@@ -949,6 +953,7 @@ export function register_save_discard_widget_handlers(
const $save_button = $(e.currentTarget);
const $subsection_elem = $save_button.closest(".settings-subsection-parent");
let data;
let success_continuation;
if (!for_realm_default_settings) {
data = settings_components.populate_data_for_realm_settings_request($subsection_elem);
} else {
@@ -956,8 +961,22 @@ export function register_save_discard_widget_handlers(
settings_components.populate_data_for_default_realm_settings_request(
$subsection_elem,
);
if (
data.dense_mode !== undefined ||
data.web_font_size_px !== undefined ||
data.web_line_height_percent !== undefined
) {
success_continuation = () => {
settings_preferences.update_information_density_settings_visibility(
$("#realm-user-default-settings"),
realm_user_settings_defaults,
data,
);
};
}
save_organization_settings(data, $save_button, patch_url);
}
save_organization_settings(data, $save_button, patch_url, success_continuation);
});
}

43
web/src/settings_preferences.ts
View File

@@ -18,8 +18,10 @@ import {
import * as loading from "./loading";
import * as overlays from "./overlays";
import {page_params} from "./page_params";
import type {RealmDefaultSettings} from "./realm_user_settings_defaults";
import * as settings_components from "./settings_components";
import type {GenericUserSettings} from "./settings_config";
import type {RequestOpts} from "./settings_ui";
import * as settings_ui from "./settings_ui";
import {realm} from "./state_data";
import * as ui_report from "./ui_report";
@@ -53,6 +55,7 @@ export function set_default_language_name(name: string | undefined): void {
function change_display_setting(
data: Record<string, string | boolean | number>,
$status_el: JQuery,
success_continuation?: (response_data: unknown) => void,
success_msg_html?: string,
sticky?: boolean,
): void {
@@ -60,11 +63,15 @@ function change_display_setting(
const display_message_html = status_is_sticky
? $status_el.attr("data-sticky_msg_html")
: success_msg_html;
const opts = {
const opts: RequestOpts = {
success_msg_html: display_message_html,
sticky: status_is_sticky || sticky,
};
if (success_continuation !== undefined) {
opts.success_continuation = success_continuation;
}
if (sticky && success_msg_html) {
$status_el.attr("data-is_sticky", "true");
$status_el.attr("data-sticky_msg_html", success_msg_html);
@@ -141,6 +148,7 @@ function user_default_language_modal_post_render(): void {
change_display_setting(
data,
$("#settings_content").find(".general-settings-status"),
undefined,
$t_html(
{
defaultMessage:
@@ -226,6 +234,8 @@ export function set_up(settings_panel: SettingsPanel): void {
.find(".setting_web_stream_unreads_count_display_policy")
.val(settings_object.web_stream_unreads_count_display_policy);
update_information_density_settings_visibility($container, settings_object, {});
if (for_realm_settings) {
// For the realm-level defaults page, we use the common
// settings_org.js handlers, so we can return early here.
@@ -263,10 +273,20 @@ export function set_up(settings_panel: SettingsPanel): void {
data.dense_mode = false;
}
let success_continuation;
if (["dense_mode", "web_font_size_px", "web_line_height_percent"].includes(setting)) {
success_continuation = () => {
update_information_density_settings_visibility(
$container,
settings_object,
data,
);
};
}
const $status_element = $input_elem
.closest(".subsection-parent")
.find(".alert-notification");
change_display_setting(data, $status_element);
change_display_setting(data, $status_element, success_continuation);
},
);
@@ -321,8 +341,6 @@ export function set_up(settings_panel: SettingsPanel): void {
},
});
});
update_information_density_settings_visibility($container);
}
export async function report_emojiset_change(settings_panel: SettingsPanel): Promise<void> {
@@ -399,20 +417,29 @@ export function update_page(property: UserSettingsProperty): void {
settings_components.set_input_element_value($input_elem, value);
}
export function update_information_density_settings_visibility($container: JQuery): void {
export function update_information_density_settings_visibility(
$container: JQuery,
settings_object: UserSettings | RealmDefaultSettings,
request_data: Record<string, boolean | number | string>,
): void {
if (page_params.development_environment) {
$container.find(".information-density-settings").show();
return;
}
if (user_settings.dense_mode) {
const dense_mode = request_data.dense_mode ?? settings_object.dense_mode;
const web_font_size_px = request_data.web_font_size_px ?? settings_object.web_font_size_px;
const web_line_height_percent =
request_data.web_line_height_percent ?? settings_object.web_line_height_percent;
if (dense_mode) {
$container.find(".information-density-settings").hide();
return;
}
if (
user_settings.web_font_size_px === NON_COMPACT_MODE_FONT_SIZE_PX &&
user_settings.web_line_height_percent === NON_COMPACT_MODE_LINE_HEIGHT_PERCENT
web_font_size_px === NON_COMPACT_MODE_FONT_SIZE_PX &&
web_line_height_percent === NON_COMPACT_MODE_LINE_HEIGHT_PERCENT
) {
$container.find(".information-density-settings").hide();
return;

2
web/src/settings_ui.ts
View File

@@ -7,7 +7,7 @@ import {$t, $t_html} from "./i18n";
import * as loading from "./loading";
import * as ui_report from "./ui_report";
type RequestOpts = {
export type RequestOpts = {
success_msg_html?: string | undefined;
failure_msg_html?: string;
success_continuation?: (response_data: unknown) => void;

7
web/tests/dispatch.test.js
View File

@@ -961,13 +961,6 @@ run_test("user_settings", ({override}) => {
container: "#user-preferences",
};
override(information_density, "set_base_typography_css_variables", noop);
override(
settings_preferences,
"update_information_density_settings_visibility",
($container) => {
assert.equal($container, $("#user-preferences"));
},
);
toggled = [];
dispatch(event);
assert_same(user_settings.dense_mode, true);