settings: Migrate notification checkboxes to table format.

Here we have migrated checkboxes of all general notifications to the table.
By general notifications we mean, Mobile, Email, Desktop audio, and visual
notifications.

This is a part of a bigger migration to simply our notifications setting
changing infrastructure for all streams and individual streams. Later we
will add more row to this for different categories of notifications in
addition to the current ones ("Streams" and "PMs, mentions, alerts").

Fixes: #12182.
This commit is contained in:
Pragati Agrawal
2020-03-23 12:59:48 +05:30
committed by Tim Abbott
parent 2f213f7c8e
commit dd13136371
9 changed files with 117 additions and 70 deletions

View File

@@ -753,11 +753,7 @@ exports.handle_global_notification_updates = function (notification_name, settin
page_params[notification_name] = setting;
}
if (
settings_notifications.all_notifications.settings.stream_notification_settings.includes(
notification_name
)
) {
if (settings_notifications.stream_notification_settings.includes(notification_name)) {
notification_name = notification_name.replace("enable_stream_", "");
stream_ui_updates.update_notification_setting_checkbox(notification_name);
}

View File

@@ -63,23 +63,9 @@ $("body").ready(function () {
function setup_settings_label() {
exports.settings_label = {
// settings_notification
// stream_notification_settings
enable_stream_desktop_notifications: i18n.t("Visual desktop notifications"),
enable_stream_audible_notifications: i18n.t("Audible desktop notifications"),
enable_stream_push_notifications: i18n.t("Mobile notifications"),
enable_stream_email_notifications: i18n.t("Email notifications"),
wildcard_mentions_notify: i18n.t("Notifications for @all/@everyone mentions"),
// pm_mention_notification_settings
enable_desktop_notifications: i18n.t("Visual desktop notifications"),
enable_offline_email_notifications: i18n.t("Email notifications"),
enable_offline_push_notifications: i18n.t("Mobile notifications"),
enable_online_push_notifications: i18n.t("Send mobile notifications even if I'm online (useful for testing)"),
enable_sounds: i18n.t("Audible desktop notifications"),
pm_content_in_desktop_notifications: i18n.t("Include content of private messages in desktop notifications"),
desktop_icon_count_display: i18n.t("Unread count summary (appears in desktop sidebar and browser tab)"),
// other_notification_settings
enable_digest_emails: i18n.t("Send digest emails when I'm away"),
enable_login_emails: i18n.t("Send email notifications for new logins to my account"),
message_content_in_email_notifications: i18n.t("Include message content in missed message emails"),
@@ -112,6 +98,7 @@ exports.build_page = function () {
settings_label: exports.settings_label,
demote_inactive_streams_values: settings_config.demote_inactive_streams_values,
twenty_four_hour_time_values: settings_config.twenty_four_hour_time_values,
general_settings: settings_notifications.all_notifications.general_settings,
notification_settings: settings_notifications.all_notifications.settings,
desktop_icon_count_display_values: settings_notifications.desktop_icon_count_display_values,
show_push_notifications_tooltip:

View File

@@ -1,4 +1,12 @@
const stream_notification_settings = [
const general_notifications_table_columns = [
/* An array of notification settings of any category like
* `stream_notification_settings` which makes a single row of
* "Notification triggers" table should follow this order
*/
"visual", "audio", "mobile", "email", "all_mentions",
];
exports.stream_notification_settings = [
"enable_stream_desktop_notifications",
"enable_stream_audible_notifications",
"enable_stream_push_notifications",
@@ -37,20 +45,51 @@ const other_notification_settings = desktop_notification_settings.concat(
exports.all_notification_settings = other_notification_settings.concat(
pm_mention_notification_settings,
stream_notification_settings
exports.stream_notification_settings
);
function get_notifications_table_row_data(notify_settings) {
return general_notifications_table_columns.map((column, index) => {
const setting_name = notify_settings[index];
if (setting_name === undefined) {
return {
setting_name: "",
is_disabled: true,
is_checked: false,
};
}
const checkbox = {
setting_name: setting_name,
is_disabled: false,
};
if (column === "mobile") {
checkbox.is_disabled = !page_params.realm_push_notifications_enabled;
}
checkbox.is_checked = page_params[setting_name];
return checkbox;
});
}
exports.all_notifications = {
general_settings: [
{
label: i18n.t("Streams"),
notification_settings: get_notifications_table_row_data(
exports.stream_notification_settings),
},
{
label: i18n.t("PMs, mentions, and alerts"),
notification_settings: get_notifications_table_row_data(
pm_mention_notification_settings),
},
],
settings: {
stream_notification_settings: stream_notification_settings,
pm_mention_notification_settings: pm_mention_notification_settings,
desktop_notification_settings: desktop_notification_settings,
mobile_notification_settings: mobile_notification_settings,
email_notification_settings: email_notification_settings,
},
show_push_notifications_tooltip: {
enable_stream_push_notifications: !page_params.realm_push_notifications_enabled,
enable_offline_push_notifications: !page_params.realm_push_notifications_enabled,
enable_online_push_notifications: !page_params.realm_push_notifications_enabled,
},
};

View File

@@ -667,8 +667,22 @@ input[type=checkbox].inline-block {
margin-top: 4px;
}
#notification-settings .notification-reminder {
#notification-settings {
.notification-reminder {
text-align: left;
}
#notification-table {
th,
td {
text-align: center;
vertical-align: middle;
}
td:first-child {
font-weight: bold;
}
}
}
#account-settings .custom-profile-fields-form .custom_user_field label {

View File

@@ -1,36 +1,47 @@
<div id="notification-settings" class="settings-section" data-name="notifications">
<form class="notification-settings-form">
<div class="notification-reminder tip">{{#tr this }}Desktop notifications are triggered for messages that are offscreen when they arrive. Mobile and email notifications are triggered once you have been away from Zulip for a few minutes.{{/tr}}</div>
<div id="stream-notify-settings" class="subsection-parent">
<h3 class="inline-block">{{t "Stream messages" }}</h3>
<div class="alert-notification" id="stream-notify-settings-status"></div>
<p>{{t "Unless I say otherwise for a particular stream, I want:" }}</p>
{{#each notification_settings.stream_notification_settings}}
{{> settings_checkbox
setting_name=this
is_checked=(lookup ../page_params this)
label=(lookup ../settings_label this)
show_push_notifications_tooltip=(lookup ../show_push_notifications_tooltip this)}}
<div id="general_notifications" class="subsection-parent">
<h3 class="inline-block">{{t "Notification triggers" }}</h3>
<p>{{t "Configure how Zulip notifies you about new messages." }}</p>
<div class="alert-notification" id="general-notify-settings-status"></div>
<table id="notification-table" class="table table-condensed table-bordered wrapped-table">
<thead>
<tr>
<th rowspan="2" width="30%"></th>
<th colspan="2" width="28%">{{t "Desktop"}}</th>
<th rowspan="2" width="14%" class="{{#if show_push_notifications_tooltip}}control-label-disabled{{/if}}">
{{t "Mobile"}}
{{#if (not page_params.realm_push_notifications_enabled) }}
<i class="fa fa-question-circle settings-info-icon" data-toggle="tooltip"
title="{{t 'Mobile push notifications are not configured on this server.' }}"></i>
{{/if}}
</th>
<th rowspan="2" width="14%">{{t "Email"}}</th>
<th rowspan="2" width="14%">@all
<i class="fa fa-question-circle settings-info-icon" data-toggle="tooltip"
title="{{t 'Whether wildcard mentions like @all are treated as mentions for the purpose of notifications.' }}"></i>
</th>
</tr>
<tr>
<th>{{t "Visual"}}</th>
<th>{{t "Audio"}}</th>
</tr>
</thead>
<tbody>
{{#each general_settings}}
<tr>
<td>{{ this.label }}</td>
{{#each this.notification_settings}}
{{> notification_settings_checkboxes
setting_name=this.setting_name
is_checked=this.is_checked
is_disabled=this.is_disabled}}
{{/each}}
<p class="notification-settings-note">
{{#tr this}}Change notification settings for individual streams on your <a href="/#streams">Streams page</a>.{{/tr}}
</p>
</div>
<div id="pm-mention-notify-settings" class="subsection-parent">
<h3 class="inline-block">{{t "Private messages, @-mentions, and alert words" }}</h3>
<div class="alert-notification" id="pm-mention-notify-settings-status"></div>
{{#each notification_settings.pm_mention_notification_settings}}
{{> settings_checkbox
setting_name=this
is_checked=(lookup ../page_params this)
label=(lookup ../settings_label this)
show_push_notifications_tooltip=(lookup ../show_push_notifications_tooltip this)}}
</tr>
{{/each}}
</tbody>
</table>
<p>{{t "You can also override these settings for individual streams." }}</p>
</div>
<div id="other_notifications" class="m-10 inline-block subsection-parent">

View File

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

View File

@@ -1,20 +1,12 @@
{{#unless (eq render_only false)}}
<div class="input-group {{#if is_nested}}disableable{{/if}} {{#if show_push_notifications_tooltip}}control-label-disabled{{/if}}">
<div class="input-group {{#if is_nested}}disableable{{/if}}">
<label class="checkbox">
<input type="checkbox" class="inline-block setting-widget prop-element" name="{{setting_name}}" data-setting-widget-type="bool"
id="{{prefix}}{{setting_name}}"
{{#if show_push_notifications_tooltip}}disabled="disabled"{{/if}}
{{#if is_checked}}
checked="checked"
{{/if}} />
id="{{prefix}}{{setting_name}}" {{#if is_checked}}checked="checked"{{/if}} />
<span></span>
</label>
<label for="{{prefix}}{{setting_name}}" class="inline-block" id="{{prefix}}{{setting_name}}_label">
{{{label}}}
</label>
{{#if show_push_notifications_tooltip}}
<i class="fa fa-question-circle settings-info-icon" data-toggle="tooltip"
title="{{t 'Mobile push notifications are not configured on this server.' }}"></i>
{{/if}}
</div>
{{/unless}}

View File

@@ -30,7 +30,7 @@ can toggle whether you receive notifications for wildcard mentions:
{settings_tab|notifications}
1. Under **Stream messages**, toggle **Notifications for @all/@everyone mentions**.
1. Under **Streams**, toggle the **@all** checkbox.
{end_tabs}

View File

@@ -26,7 +26,7 @@ These settings will override any default stream notification settings.
{settings_tab|notifications}
1. Toggle the notification settings under **Stream messages**.
1. Configure notifications in the "Notification triggers" table.
{end_tabs}