Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

settings: Refactor frontend code for notification settings. 

This is a prep commit for adding UI for realm-level default
of user settings. We refactor the code to use  classes
instead of ids such that we can use the common code for the
new settings.
This commit is contained in:
Sahil Batra 2021-08-09 16:56:49 +05:30 committed by Tim Abbott
parent 79fa7f9609
commit 032d347b4f
6 changed files with 41 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend_tests/puppeteer_tests/settings.ts
View File

@ -365,7 +365,7 @@ async function test_notifications_section(page: Page): Promise<void> {
// At the beginning, "PMs, mentions, and alerts"(checkbox name=enable_sounds) audio will be on // At the beginning, "PMs, mentions, and alerts"(checkbox name=enable_sounds) audio will be on
// and "Streams"(checkbox name=enable_stream_audible_notifications) audio will be off by default. // and "Streams"(checkbox name=enable_stream_audible_notifications) audio will be off by default.
const notification_sound_enabled = "#notification_sound:enabled"; const notification_sound_enabled = ".notification_sound:enabled";
await page.waitForSelector(notification_sound_enabled, {visible: true}); await page.waitForSelector(notification_sound_enabled, {visible: true});
await common.fill_form(page, ".notification-settings-form", { await common.fill_form(page, ".notification-settings-form", {
@ -382,7 +382,7 @@ async function test_notifications_section(page: Page): Promise<void> {
all audio notifications. But this seems flaky in tests. all audio notifications. But this seems flaky in tests.
TODO: Find the right fix and enable this. TODO: Find the right fix and enable this.
const notification_sound_disabled = "#notification_sound:disabled"; const notification_sound_disabled = ".notification_sound:disabled";
await page.waitForSelector(notification_sound_disabled); await page.waitForSelector(notification_sound_disabled);
*/ */
} }

33
static/js/settings_notifications.js
View File

@ -51,28 +51,33 @@ function change_notification_setting(setting, value, status_element) {
} }
function update_desktop_icon_count_display() { function update_desktop_icon_count_display() {
$("#desktop_icon_count_display").val(user_settings.desktop_icon_count_display); $("#user-notification-settings .desktop_icon_count_display").val(
user_settings.desktop_icon_count_display,
);
unread_ui.update_unread_counts(); unread_ui.update_unread_counts();
} }
export function set_enable_digest_emails_visibility() { export function set_enable_digest_emails_visibility() {
const container = $("#user-notification-settings");
if (page_params.realm_digest_emails_enabled) { if (page_params.realm_digest_emails_enabled) {
$("#enable_digest_emails_label").parent().show(); container.find(".enable_digest_emails_label").parent().show();
} else { } else {
$("#enable_digest_emails_label").parent().hide(); container.find(".enable_digest_emails_label").parent().hide();
} }
} }
export function set_enable_marketing_emails_visibility() { export function set_enable_marketing_emails_visibility() {
const container = $("#user-notification-settings");
if (page_params.corporate_enabled) { if (page_params.corporate_enabled) {
$("#enable_marketing_emails_label").parent().show(); container.find(".enable_marketing_emails_label").parent().show();
} else { } else {
$("#enable_marketing_emails_label").parent().hide(); container.find(".enable_marketing_emails_label").parent().hide();
} }
} }
export function set_up() { export function set_up() {
$("#notification-settings").on("change", "input, select", function (e) { const container = $("#user-notification-settings");
$("#user-notification-settings").on("change", "input, select", function (e) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
const input_elem = $(e.currentTarget); const input_elem = $(e.currentTarget);
@ -90,25 +95,25 @@ export function set_up() {
update_desktop_icon_count_display(); update_desktop_icon_count_display();
$("#send_test_notification").on("click", () => { container.find(".send_test_notification").on("click", () => {
notifications.send_test_notification( notifications.send_test_notification(
$t({defaultMessage: "This is what a Zulip notification looks like."}), $t({defaultMessage: "This is what a Zulip notification looks like."}),
); );
}); });
$("#play_notification_sound").on("click", () => { container.find(".play_notification_sound").on("click", () => {
if (user_settings.notification_sound !== "none") { if (user_settings.notification_sound !== "none") {
$("#notification-sound-audio")[0].play(); $("#notification-sound-audio")[0].play();
} }
}); });
const notification_sound_dropdown = $("#notification_sound"); const notification_sound_dropdown = container.find(".notification_sound");
notification_sound_dropdown.val(user_settings.notification_sound); notification_sound_dropdown.val(user_settings.notification_sound);
$("#enable_sounds, #enable_stream_audible_notifications").on("change", () => { container.find(".enable_sounds, .enable_stream_audible_notifications").on("change", () => {
if ( if (
$("#enable_stream_audible_notifications").prop("checked") || container.find(".enable_stream_audible_notifications").prop("checked") ||
$("#enable_sounds").prop("checked") container.find(".enable_sounds").prop("checked")
) { ) {
notification_sound_dropdown.prop("disabled", false); notification_sound_dropdown.prop("disabled", false);
notification_sound_dropdown.parent().removeClass("control-label-disabled"); notification_sound_dropdown.parent().removeClass("control-label-disabled");
@ -136,7 +141,9 @@ export function update_page() {
continue; continue;
} }
$(`#${CSS.escape(setting)}`).prop("checked", user_settings[setting]); $("#user-notification-settings")
.find(`.${CSS.escape(setting)}`)
.prop("checked", user_settings[setting]);
} }
rerender_ui(); rerender_ui();
} }

12
static/styles/settings.css
View File

@ -128,8 +128,8 @@ h3 .fa-question-circle-o {
padding: 0 20px; padding: 0 20px;
} }
#notification_sound, .notification_sound,
#play_notification_sound { .play_notification_sound {
display: inline; display: inline;
margin-right: 4px; margin-right: 4px;
@ -139,7 +139,7 @@ h3 .fa-question-circle-o {
} }
} }
#notification_sound { .notification_sound {
text-transform: capitalize; text-transform: capitalize;
} }
@ -562,12 +562,12 @@ input[type="checkbox"] {
margin-top: 4px; margin-top: 4px;
} }
#notification-settings { #user-notification-settings {
.notification-reminder { .notification-reminder {
text-align: left; text-align: left;
} }
#notification-table { .notification-table {
th, th,
td { td {
text-align: center; text-align: center;
@ -1561,7 +1561,7 @@ body:not(.night-mode) #settings_page .custom_user_field .datepicker {
} }
/* These have enough space for "Admins and full members" in German. */ /* These have enough space for "Admins and full members" in German. */
#desktop_icon_count_display, .desktop_icon_count_display,
#id_realm_waiting_period_setting, #id_realm_waiting_period_setting,
#id_realm_create_stream_policy, #id_realm_create_stream_policy,
#id_realm_invite_to_stream_policy, #id_realm_invite_to_stream_policy,

20
static/templates/settings/notification_settings.hbs
View File

@ -1,10 +1,10 @@
<div id="notification-settings" class="settings-section" data-name="notifications"> <div id="user-notification-settings" class="settings-section" data-name="notifications">
<form class="notification-settings-form"> <form class="notification-settings-form">
<div id="general_notifications" class="subsection-parent"> <div class="general_notifications subsection-parent">
<h3 class="inline-block">{{t "Notification triggers" }}</h3> <h3 class="inline-block">{{t "Notification triggers" }}</h3>
<div class="alert-notification" id="general-notify-settings-status"></div> <div class="alert-notification general-notify-settings-status"></div>
<p>{{t "Configure how Zulip notifies you about new messages." }}</p> <p>{{t "Configure how Zulip notifies you about new messages." }}</p>
<table id="notification-table" class="table table-condensed table-bordered wrapped-table"> <table class="notification-table table table-condensed table-bordered wrapped-table">
<thead> <thead>
<tr> <tr>
<th rowspan="2" width="30%"></th> <th rowspan="2" width="30%"></th>
@ -44,14 +44,14 @@
</table> </table>
</div> </div>
<div id="other_notifications" class="m-10 inline-block subsection-parent"> <div class="other_notifications m-10 inline-block subsection-parent">
<h3 class="inline-block">{{t "Other notification settings" }}</h3> <h3 class="inline-block">{{t "Other notification settings" }}</h3>
<div class="alert-notification" id="other-notify-settings-status"></div> <div class="alert-notification other-notify-settings-status"></div>
<h5>{{t "Desktop" }}</h5> <h5>{{t "Desktop" }}</h5>
<p><a id="send_test_notification">{{t "Send test notification" }}</a></p> <p><a class="send_test_notification">{{t "Send test notification" }}</a></p>
{{#each notification_settings.desktop_notification_settings}} {{#each notification_settings.desktop_notification_settings}}
{{> settings_checkbox {{> settings_checkbox
@ -65,7 +65,7 @@
</label> </label>
<div class="input-group {{#unless enable_sound_select}}control-label-disabled{{/unless}}"> <div class="input-group {{#unless enable_sound_select}}control-label-disabled{{/unless}}">
<select name="notification_sound" id="notification_sound" data-setting-widget-type="string" <select name="notification_sound" class="notification_sound" data-setting-widget-type="string"
{{#unless enable_sound_select}} {{#unless enable_sound_select}}
disabled disabled
{{/unless}}> {{/unless}}>
@ -74,14 +74,14 @@
<option value="{{ this }}">{{ this }}</option> <option value="{{ this }}">{{ this }}</option>
{{/each}} {{/each}}
</select> </select>
<span id="play_notification_sound"> <span class="play_notification_sound">
<i class="fa fa-play-circle" aria-label="{{t 'Play sound' }}"></i> <i class="fa fa-play-circle" aria-label="{{t 'Play sound' }}"></i>
</span> </span>
</div> </div>
<div class="input-group"> <div class="input-group">
<label for="desktop_icon_count_display" class="dropdown-title">{{ settings_label.desktop_icon_count_display }}</label> <label for="desktop_icon_count_display" class="dropdown-title">{{ settings_label.desktop_icon_count_display }}</label>
<select name="desktop_icon_count_display" id="desktop_icon_count_display" class="prop-element" <select name="desktop_icon_count_display" class="desktop_icon_count_display prop-element"
data-setting-widget-type="number"> data-setting-widget-type="number">
{{> dropdown_options_widget option_values=desktop_icon_count_display_values}} {{> dropdown_options_widget option_values=desktop_icon_count_display_values}}
</select> </select>

3
static/templates/settings/notification_settings_checkboxes.hbs
View File

@ -2,7 +2,8 @@
<label class="checkbox"> <label class="checkbox">
<input type="checkbox" name="{{setting_name}}" id="{{prefix}}{{setting_name}}" <input type="checkbox" name="{{setting_name}}" id="{{prefix}}{{setting_name}}"
{{#if is_disabled}}disabled="disabled"{{/if}} {{#if is_disabled}}disabled="disabled"{{/if}}
{{#if is_checked}}checked="checked"{{/if}} data-setting-widget-type="boolean"/> {{#if is_checked}}checked="checked"{{/if}} data-setting-widget-type="boolean"
class="{{setting_name}}"/>
<span></span> <span></span>
</label> </label>
</td> </td>

2
static/templates/settings/settings_checkbox.hbs
View File

@ -5,7 +5,7 @@
id="{{prefix}}{{setting_name}}" {{#if is_checked}}checked="checked"{{/if}} /> id="{{prefix}}{{setting_name}}" {{#if is_checked}}checked="checked"{{/if}} />
<span></span> <span></span>
</label> </label>
<label for="{{prefix}}{{setting_name}}" class="inline" id="{{prefix}}{{setting_name}}_label"> <label for="{{prefix}}{{setting_name}}" class="inline {{setting_name}}_label" id="{{prefix}}{{setting_name}}_label">
{{label}} {{label}}
{{#if help_link}} {{#if help_link}}
{{> ../help_link_widget link=help_link }} {{> ../help_link_widget link=help_link }}