settings: Add UI option for custom notification batching period.

PR #19576 added a settings option for selecting a notification batching
period. We want to extend that UI option with the ability to select
a custom period.

Tweaked by tabbott to have the natural model that picking a value
present in the dropdown live-updates to remove the custom input,
rather than only having the custom input disappear on reload.

Fixes #19713.
This commit is contained in:
Andrew McAfee 2021-10-23 15:14:11 +00:00 committed by Tim Abbott
parent 8c7e144e47
commit 4f63378e7f
3 changed files with 67 additions and 12 deletions

View File

@ -563,6 +563,10 @@ export const email_notifications_batching_period_values = [
value: 60 * 60 * 24 * 7,
description: $t({defaultMessage: "1 week"}),
},
{
value: "custom_period",
description: $t({defaultMessage: "N minutes"}),
},
];
const email_message_notification_settings = [

View File

@ -65,10 +65,30 @@ function update_desktop_icon_count_display(settings_panel) {
}
}
function set_notification_batching_ui(container, setting_seconds, force_custom) {
const select_elem = container.find(".setting_email_notifications_batching_period_seconds");
const edit_elem = container.find(".email_notification_batching_period_edit_minutes");
const valid_period_values = settings_config.email_notifications_batching_period_values.map(
(x) => x.value,
);
// We display the custom widget if either the user just selected
// custom_period, or the current value cannot be represented with
// the existing set of values.
if (force_custom || !valid_period_values.includes(setting_seconds)) {
const setting_minutes = setting_seconds / 60;
select_elem.val("custom_period");
edit_elem.val(setting_minutes);
edit_elem.parent().show();
} else {
select_elem.val(setting_seconds);
edit_elem.parent().hide();
}
}
export function set_enable_digest_emails_visibility(settings_panel) {
const container = $(settings_panel.container);
const for_realm_settings = settings_panel.for_realm_settings;
if (page_params.realm_digest_emails_enabled) {
if (for_realm_settings) {
container.find(".other_email_notifications").show();
@ -123,10 +143,8 @@ export function set_up(settings_panel) {
}
});
const email_notifications_batching_period_dropdown = container.find(
".setting_email_notifications_batching_period_seconds",
);
email_notifications_batching_period_dropdown.val(
set_notification_batching_ui(
container,
settings_object.email_notifications_batching_period_seconds,
);
@ -148,10 +166,29 @@ export function set_up(settings_panel) {
stream_edit.stream_setting_changed(e, true);
return;
}
const setting_name = input_elem.attr("name");
let setting_name = input_elem.attr("name");
let setting_value = settings_org.get_input_element_value(this);
if (setting_name === "email_notifications_batching_period_seconds") {
if (input_elem.val() === "custom_period") {
set_notification_batching_ui(
container,
settings_object.email_notifications_batching_period_seconds,
true,
);
return;
}
set_notification_batching_ui(container, setting_value);
} else if (setting_name === "email_notification_batching_period_edit_minutes") {
// This field is in minutes, but the actual setting is seconds
setting_value = setting_value * 60;
set_notification_batching_ui(container, setting_value);
setting_name = "email_notifications_batching_period_seconds";
}
change_notification_setting(
setting_name,
settings_org.get_input_element_value(this),
setting_value,
input_elem.closest(".subsection-parent").find(".alert-notification"),
);
});
@ -187,8 +224,11 @@ export function update_page(settings_panel) {
update_desktop_icon_count_display(settings_panel);
break;
}
case "notification_sound":
case "email_notifications_batching_period_seconds": {
set_notification_batching_ui(container, settings_object[setting]);
break;
}
case "notification_sound": {
container.find(`.setting_${CSS.escape(setting)}`).val(settings_object[setting]);
break;
}

View File

@ -119,16 +119,27 @@
{{> settings_save_discard_widget section_name="email-message-settings" show_only_indicator=(not for_realm_settings) }}
</div>
<label for="email_notifications_batching_period">
{{t "Delay before sending message notification emails" }}
</label>
<div class="input-group form-horizontal">
<div class="input-group">
<label for="email_notifications_batching_period">
{{t "Delay before sending message notification emails" }}
</label>
<select name="email_notifications_batching_period_seconds" class="setting_email_notifications_batching_period_seconds prop-element" data-setting-widget-type="number">
{{#each email_notifications_batching_period_values}}
<option value="{{ this.value }}">{{ this.description }}</option>
{{/each}}
</select>
<div class="dependent-inline-block">
<label for="email_notification_batching_period_edit_minutes" class="inline-block">
{{t 'N' }}:
</label>
<input type="text"
name="email_notification_batching_period_edit_minutes"
class="email_notification_batching_period_edit_minutes admin-realm-time-limit-input prop-element"
data-setting-widget-type="number"
autocomplete="off"
value="{{ email_notifications_batching_period_seconds }}"/>
</div>
</div>
{{#each notification_settings.email_message_notification_settings}}