diff --git a/static/js/navbar_alerts.js b/static/js/navbar_alerts.js index e184bc0b44..02cff5afee 100644 --- a/static/js/navbar_alerts.js +++ b/static/js/navbar_alerts.js @@ -1,6 +1,14 @@ import {addDays} from "date-fns"; import $ from "jquery"; +import render_bankruptcy_alert_content from "../templates/navbar_alerts/bankruptcy.hbs"; +import render_configure_email_alert_content from "../templates/navbar_alerts/configure_outgoing_email.hbs"; +import render_desktop_notifications_alert_content from "../templates/navbar_alerts/desktop_notifications.hbs"; +import render_insecure_desktop_app_alert_content from "../templates/navbar_alerts/insecure_desktop_app.hbs"; +import render_navbar_alert_wrapper from "../templates/navbar_alerts/navbar_alert_wrapper.hbs"; +import render_profile_incomplete_alert_content from "../templates/navbar_alerts/profile_incomplete.hbs"; +import render_server_needs_upgrade_alert_content from "../templates/navbar_alerts/server_needs_upgrade.hbs"; + import {localstorage} from "./localstorage"; import * as notifications from "./notifications"; import {page_params} from "./page_params"; @@ -95,6 +103,9 @@ export function check_profile_incomplete() { export function show_profile_incomplete(is_profile_incomplete) { if (is_profile_incomplete) { + // Note that this will be a noop unless we'd already displayed + // the notice in this session. This seems OK, given that + // this is meant to be a one-time task for administrators. $("[data-process='profile-incomplete']").show(); } else { $("[data-process='profile-incomplete']").hide(); @@ -104,21 +115,34 @@ export function show_profile_incomplete(is_profile_incomplete) { export function initialize() { const ls = localstorage(); if (page_params.insecure_desktop_app) { - open($("[data-process='insecure-desktop-app']")); + open( + {data_process: "insecure-desktop-app", custom_class: "red"}, + render_insecure_desktop_app_alert_content(), + ); } else if (page_params.server_needs_upgrade) { if (should_show_server_upgrade_notification(ls)) { - open($("[data-process='server-needs-upgrade']")); + open( + {data_process: "server-needs-upgrade", custom_class: "red"}, + render_server_needs_upgrade_alert_content(), + ); } } else if (page_params.warn_no_email === true && page_params.is_admin) { // if email has not been set up and the user is the admin, // display a warning to tell them to set up an email server. - open($("[data-process='email-server']")); + open( + {data_process: "email-server", custom_class: "red"}, + render_configure_email_alert_content(), + ); } else if (should_show_notifications(ls)) { - open($("[data-process='notifications']")); + open({data_process: "notifications"}, render_desktop_notifications_alert_content()); } else if (unread_ui.should_display_bankruptcy_banner()) { - open($("[data-process='bankruptcy']")); + const unread_msgs_count = page_params.unread_msgs.count; + open( + {data_process: "bankruptcy", custom_class: "bankruptcy", is_bankruptcy_alert: true}, + render_bankruptcy_alert_content({unread_msgs_count}), + ); } else if (check_profile_incomplete()) { - open($("[data-process='profile-incomplete']")); + open({data_process: "profile-incomplete"}, render_profile_incomplete_alert_content()); } // Configure click handlers. @@ -169,8 +193,16 @@ export function initialize() { }); } -export function open($process) { - $("[data-process]").hide(); - $process.show(); +export function open(args, rendered_alert_content_html) { + const rendered_alert_wrapper_html = $(render_navbar_alert_wrapper(args)); + + // TODO: Use a proper CSS class to access correct outer widget. + rendered_alert_wrapper_html.first().prepend(rendered_alert_content_html); + + // Note: We only support one alert being rendered at a time; as a + // result, we just replace the alert area in the DOM with the + // indicated alert. We do this to avoid bad UX, as it'd look weird + // to have more than one alert visible at a time. + $("#navbar_alerts_wrapper").html(rendered_alert_wrapper_html); $(window).trigger("resize"); } diff --git a/static/styles/zulip.css b/static/styles/zulip.css index 4ae092186e..43f37a6455 100644 --- a/static/styles/zulip.css +++ b/static/styles/zulip.css @@ -280,6 +280,9 @@ p.n-margin { position: relative; .alert { + /* Since alerts are only rendered into the DOM when they are first + displayed, display: block is the right default for this setting. */ + display: block; margin: 0; padding-top: 12px; padding-bottom: 12px; diff --git a/static/templates/navbar_alerts/bankruptcy.hbs b/static/templates/navbar_alerts/bankruptcy.hbs new file mode 100644 index 0000000000..df0e312960 --- /dev/null +++ b/static/templates/navbar_alerts/bankruptcy.hbs @@ -0,0 +1,12 @@ +
+ {{#tr}} + Welcome back! You have {unread_msgs_count} unread messages. + Do you want to mark them all as read? + {{#*inline "z-link"}}{{> @partial-block}}{{/inline}} + {{/tr}} + + {{t "Yes, please!" }} + • + {{t "No, I'll catch up." }} + +
diff --git a/static/templates/navbar_alerts/configure_outgoing_email.hbs b/static/templates/navbar_alerts/configure_outgoing_email.hbs new file mode 100644 index 0000000000..6a10adff79 --- /dev/null +++ b/static/templates/navbar_alerts/configure_outgoing_email.hbs @@ -0,0 +1,6 @@ +
+ {{t "Zulip needs to send email to confirm users' addresses and send notifications."}} + + {{t "See how to configure email." }} + +
diff --git a/static/templates/navbar_alerts/desktop_notifications.hbs b/static/templates/navbar_alerts/desktop_notifications.hbs new file mode 100644 index 0000000000..1f05477edd --- /dev/null +++ b/static/templates/navbar_alerts/desktop_notifications.hbs @@ -0,0 +1,15 @@ +
+ {{#tr}}Zulip needs your permission to enable desktop notifications. + {{#*inline "z-link"}}{{> @partial-block}}{{/inline}} + {{/tr}} +
+
+ {{t "We strongly recommend enabling desktop notifications. They help Zulip keep your team connected." }} + + {{t "Enable notifications" }} + • + {{t "Ask me later" }} + • + {{t "Never ask on this computer" }} + +
diff --git a/static/templates/navbar_alerts/insecure_desktop_app.hbs b/static/templates/navbar_alerts/insecure_desktop_app.hbs new file mode 100644 index 0000000000..b612fdfce5 --- /dev/null +++ b/static/templates/navbar_alerts/insecure_desktop_app.hbs @@ -0,0 +1,7 @@ +
+ {{t "You are using an old version of the Zulip desktop app with known security bugs." }} + + {{t "Download the latest version." }} + +
+ diff --git a/static/templates/navbar_alerts/navbar_alert_wrapper.hbs b/static/templates/navbar_alerts/navbar_alert_wrapper.hbs new file mode 100644 index 0000000000..7396a2569a --- /dev/null +++ b/static/templates/navbar_alerts/navbar_alert_wrapper.hbs @@ -0,0 +1,11 @@ +
+ × +
+ +{{#if is_bankruptcy_alert}} + +{{/if}} diff --git a/static/templates/navbar_alerts/profile_incomplete.hbs b/static/templates/navbar_alerts/profile_incomplete.hbs new file mode 100644 index 0000000000..f04c827621 --- /dev/null +++ b/static/templates/navbar_alerts/profile_incomplete.hbs @@ -0,0 +1,7 @@ +
+ {{#tr}} + Complete the organization profile + to brand and explain the purpose of this Zulip organization. + {{#*inline "z-link"}}{{> @partial-block}}{{/inline}} + {{/tr}} +
diff --git a/static/templates/navbar_alerts/server_needs_upgrade.hbs b/static/templates/navbar_alerts/server_needs_upgrade.hbs new file mode 100644 index 0000000000..3b4d867d01 --- /dev/null +++ b/static/templates/navbar_alerts/server_needs_upgrade.hbs @@ -0,0 +1,10 @@ +
+ {{t "This Zulip server is running an old version and should be upgraded." }} + + + {{t "Learn more" }} + + • + {{t "Dismiss for a week" }} + +
diff --git a/templates/zerver/app/index.html b/templates/zerver/app/index.html index a392c2b317..bba61a2cb3 100644 --- a/templates/zerver/app/index.html +++ b/templates/zerver/app/index.html @@ -49,7 +49,7 @@ {% include "zerver/app/settings_overlay.html" %} -{% include "zerver/app/navbar_alerts.html" %} + {% include "zerver/app/navbar.html" %}
diff --git a/templates/zerver/app/navbar_alerts.html b/templates/zerver/app/navbar_alerts.html deleted file mode 100644 index 692ef46fbb..0000000000 --- a/templates/zerver/app/navbar_alerts.html +++ /dev/null @@ -1,80 +0,0 @@ -