From dd13136371efee9279dbbc52877e23f98ea0a87f Mon Sep 17 00:00:00 2001 From: Pragati Agrawal Date: Mon, 23 Mar 2020 12:59:48 +0530 Subject: [PATCH] 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. --- static/js/notifications.js | 6 +- static/js/settings.js | 15 +--- static/js/settings_notifications.js | 51 +++++++++++-- static/styles/settings.scss | 18 ++++- .../settings/notification_settings.hbs | 73 +++++++++++-------- .../notification_settings_checkboxes.hbs | 8 ++ .../templates/settings/settings_checkbox.hbs | 12 +-- .../help/pm-mention-alert-notifications.md | 2 +- templates/zerver/help/stream-notifications.md | 2 +- 9 files changed, 117 insertions(+), 70 deletions(-) create mode 100644 static/templates/settings/notification_settings_checkboxes.hbs diff --git a/static/js/notifications.js b/static/js/notifications.js index 0980cd5502..af7fd03504 100644 --- a/static/js/notifications.js +++ b/static/js/notifications.js @@ -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); } diff --git a/static/js/settings.js b/static/js/settings.js index ea846a7de5..16aafbf0cd 100644 --- a/static/js/settings.js +++ b/static/js/settings.js @@ -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: diff --git a/static/js/settings_notifications.js b/static/js/settings_notifications.js index c58ee418cf..f727bd98f8 100644 --- a/static/js/settings_notifications.js +++ b/static/js/settings_notifications.js @@ -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, }, }; diff --git a/static/styles/settings.scss b/static/styles/settings.scss index 385fbaa2f2..2ff6b677e9 100644 --- a/static/styles/settings.scss +++ b/static/styles/settings.scss @@ -667,8 +667,22 @@ input[type=checkbox].inline-block { margin-top: 4px; } -#notification-settings .notification-reminder { - text-align: left; +#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 { diff --git a/static/templates/settings/notification_settings.hbs b/static/templates/settings/notification_settings.hbs index e3a27a548b..4d85ba1264 100644 --- a/static/templates/settings/notification_settings.hbs +++ b/static/templates/settings/notification_settings.hbs @@ -1,36 +1,47 @@
-
{{#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}}
- -
-

{{t "Stream messages" }}

-
-

{{t "Unless I say otherwise for a particular stream, I want:" }}

- - {{#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)}} - {{/each}} - -

- {{#tr this}}Change notification settings for individual streams on your Streams page.{{/tr}} -

-
- -
-

{{t "Private messages, @-mentions, and alert words" }}

-
- - {{#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)}} - {{/each}} +
+

{{t "Notification triggers" }}

+

{{t "Configure how Zulip notifies you about new messages." }}

+
+ + + + + + + + + + + + + + + + {{#each general_settings}} + + + {{#each this.notification_settings}} + {{> notification_settings_checkboxes + setting_name=this.setting_name + is_checked=this.is_checked + is_disabled=this.is_disabled}} + {{/each}} + + {{/each}} + +
{{t "Desktop"}} + {{t "Mobile"}} + {{#if (not page_params.realm_push_notifications_enabled) }} + + {{/if}} + {{t "Email"}}@all + +
{{t "Visual"}}{{t "Audio"}}
{{ this.label }}
+

{{t "You can also override these settings for individual streams." }}

diff --git a/static/templates/settings/notification_settings_checkboxes.hbs b/static/templates/settings/notification_settings_checkboxes.hbs new file mode 100644 index 0000000000..e4a85f37f8 --- /dev/null +++ b/static/templates/settings/notification_settings_checkboxes.hbs @@ -0,0 +1,8 @@ + + + diff --git a/static/templates/settings/settings_checkbox.hbs b/static/templates/settings/settings_checkbox.hbs index b9ad47c085..e4378e2d5a 100644 --- a/static/templates/settings/settings_checkbox.hbs +++ b/static/templates/settings/settings_checkbox.hbs @@ -1,20 +1,12 @@ {{#unless (eq render_only false)}} -
+
- {{#if show_push_notifications_tooltip}} - - {{/if}}
{{/unless}} diff --git a/templates/zerver/help/pm-mention-alert-notifications.md b/templates/zerver/help/pm-mention-alert-notifications.md index 3905d438df..27fc8fa8a4 100644 --- a/templates/zerver/help/pm-mention-alert-notifications.md +++ b/templates/zerver/help/pm-mention-alert-notifications.md @@ -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} diff --git a/templates/zerver/help/stream-notifications.md b/templates/zerver/help/stream-notifications.md index ddf88068ee..8b1158b141 100644 --- a/templates/zerver/help/stream-notifications.md +++ b/templates/zerver/help/stream-notifications.md @@ -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}