paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-04 05:53:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

settings_display: Refactor code to use a single handler.

Browse Source 
This commit refactors the display settings code to use
a single handler similar to what we do in notification
settings. We still keep default language and emojiset
setting as they are handled differently and they do
not call 'change_display_setting' directly on changing
input.

We refactor the 'change_display_setting' to directly
accept status element as parameter and not class as
a string. We also add a common class to the subsection
div such that we can get status element for each of
them easily.
This commit is contained in:
Sahil Batra
2021-10-08 23:33:38 +05:30
committed by Tim Abbott
parent 78da9d21f3
commit 38cf2d07a6
2 changed files with 29 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
static/js/settings_display.js
View File

@@ -5,7 +5,7 @@ import * as emojisets from "./emojisets";
import {$t_html, get_language_name} from "./i18n"; import {$t_html, get_language_name} from "./i18n";
import * as loading from "./loading"; import * as loading from "./loading";
import * as overlays from "./overlays"; import * as overlays from "./overlays";
import * as settings_config from "./settings_config"; import * as settings_org from "./settings_org";
import * as settings_ui from "./settings_ui"; import * as settings_ui from "./settings_ui";
import * as ui_report from "./ui_report"; import * as ui_report from "./ui_report";
import {user_settings} from "./user_settings"; import {user_settings} from "./user_settings";
@@ -22,8 +22,7 @@ export function set_default_language_name(name) {
user_default_language_name = name; user_default_language_name = name;
} }
function change_display_setting(data, status_element, success_msg_html, sticky) { function change_display_setting(data, $status_el, success_msg_html, sticky) {
const $status_el = $("#user-display-settings").find(`${status_element}`);
const status_is_sticky = $status_el.data("is_sticky"); const status_is_sticky = $status_el.data("is_sticky");
const display_message_html = status_is_sticky const display_message_html = status_is_sticky
? $status_el.data("sticky_msg_html") ? $status_el.data("sticky_msg_html")
@@ -74,30 +73,30 @@ export function set_up(settings_panel) {
// Common handler for sending requests to the server when an input // Common handler for sending requests to the server when an input
// element is changed. // element is changed.
const all_display_settings = settings_config.get_all_display_settings(); container.on("change", "input[type=checkbox], select", function (e) {
for (const setting of all_display_settings.settings.user_display_settings) { const input_elem = $(e.currentTarget);
container.find(`.${CSS.escape(setting)}`).on("change", function () { const setting = input_elem.attr("name");
const data = {}; const data = {};
data[setting] = JSON.stringify($(this).prop("checked")); data[setting] = settings_org.get_input_element_value(this);
const status_element = input_elem.closest(".subsection-parent").find(".alert-notification");
if (["left_side_userlist"].includes(setting)) { if (["left_side_userlist"].includes(setting)) {
change_display_setting( change_display_setting(
data, data,
".display-settings-status", status_element,
$t_html( $t_html(
{ {
defaultMessage: defaultMessage:
"Saved. Please <z-link>reload</z-link> for the change to take effect.", "Saved. Please <z-link>reload</z-link> for the change to take effect.",
}, },
{"z-link": (content_html) => `<a class='reload_link'>${content_html}</a>`}, {"z-link": (content_html) => `<a class='reload_link'>${content_html}</a>`},
), ),
true, true,
); );
} else { } else {
change_display_setting(data, ".display-settings-status"); change_display_setting(data, status_element);
} }
}); });
}
$("#user_default_language_modal") $("#user_default_language_modal")
.find(".language") .find(".language")
@@ -115,7 +114,7 @@ export function set_up(settings_panel) {
change_display_setting( change_display_setting(
data, data,
".language-settings-status", container.find(".language-settings-status"),
$t_html( $t_html(
{ {
defaultMessage: defaultMessage:
@@ -133,26 +132,6 @@ export function set_up(settings_panel) {
overlays.open_modal("#user_default_language_modal"); overlays.open_modal("#user_default_language_modal");
}); });
container.find(".setting_twenty_four_hour_time").on("change", function () {
const data = {twenty_four_hour_time: this.value};
change_display_setting(data, ".time-settings-status");
});
container.find(".setting_demote_inactive_streams").on("change", function () {
const data = {demote_inactive_streams: this.value};
change_display_setting(data, ".display-settings-status");
});
container.find(".setting_color_scheme").on("change", function () {
const data = {color_scheme: this.value};
change_display_setting(data, ".display-settings-status");
});
container.find(".setting_default_view").on("change", function () {
const data = {default_view: this.value};
change_display_setting(data, ".display-settings-status");
});
$("body").on("click", ".reload_link", () => { $("body").on("click", ".reload_link", () => {
window.location.reload(); window.location.reload();
}); });
@@ -179,11 +158,6 @@ export function set_up(settings_panel) {
}, },
}); });
}); });
container.find(".translate_emoticons").on("change", function () {
const data = {translate_emoticons: JSON.stringify(this.checked)};
change_display_setting(data, ".emoji-settings-status");
});
} }
export async function report_emojiset_change(settings_panel) { export async function report_emojiset_change(settings_panel) {

6
static/templates/settings/display_settings.hbs
View File

@@ -20,7 +20,7 @@
</div> </div>
{{/unless}} {{/unless}}
<div class="display-settings {{#if for_realm_settings}}org-subsection-parent{{/if}}"> <div class="display-settings {{#if for_realm_settings}}org-subsection-parent{{else}}subsection-parent{{/if}}">
<div class="subsection-header"> <div class="subsection-header">
<h3>{{t "Display settings" }}</h3> <h3>{{t "Display settings" }}</h3>
{{> settings_save_discard_widget section_name="display-settings" show_only_indicator=(not for_realm_settings) }} {{> settings_save_discard_widget section_name="display-settings" show_only_indicator=(not for_realm_settings) }}
@@ -62,7 +62,7 @@
</div> </div>
</div> </div>
<div class="time-settings {{#if for_realm_settings}}org-subsection-parent{{/if}}"> <div class="time-settings {{#if for_realm_settings}}org-subsection-parent{{else}}subsection-parent{{/if}}">
<div class="subsection-header"> <div class="subsection-header">
<h3>{{t "Time settings" }}</h3> <h3>{{t "Time settings" }}</h3>
{{> settings_save_discard_widget section_name="time-settings" show_only_indicator=(not for_realm_settings) }} {{> settings_save_discard_widget section_name="time-settings" show_only_indicator=(not for_realm_settings) }}
@@ -78,7 +78,7 @@
</div> </div>
</div> </div>
<div class="emoji-settings {{#if for_realm_settings}}org-subsection-parent{{/if}}"> <div class="emoji-settings {{#if for_realm_settings}}org-subsection-parent{{else}}subsection-parent{{/if}}">
<div class="subsection-header"> <div class="subsection-header">
<h3 class="light">{{t "Emoji settings" }}</h3> <h3 class="light">{{t "Emoji settings" }}</h3>
{{> settings_save_discard_widget section_name="emoji-settings" show_only_indicator=(not for_realm_settings) }} {{> settings_save_discard_widget section_name="emoji-settings" show_only_indicator=(not for_realm_settings) }}