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

navbar_alerts: Replace HTML template with handlebars architecture. 

This moves this block of HTML templates, which are dynamically
rendered with some user data, to be managed by the frontend handlebars
template system.

This migration involves only displaying active alerts in the DOM, and
thus we no longer need navbar_alerts to have display: none by default.
This commit is contained in:
Riken Shah 2021-06-05 09:16:17 +00:00 committed by Tim Abbott
parent 54768c2210
commit ccfee49407
11 changed files with 113 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
static/js/navbar_alerts.js
View File

@ -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");
}

3
static/styles/zulip.css
View File

@ -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;

12
static/templates/navbar_alerts/bankruptcy.hbs Normal file
View File

@ -0,0 +1,12 @@
<div data-step="1">
{{#tr}}
Welcome back! You have <z-link>{unread_msgs_count}</z-link> unread messages.
Do you want to mark them all as read?
{{#*inline "z-link"}}<span class="bankruptcy_unread_count">{{> @partial-block}}</span>{{/inline}}
{{/tr}}
<span class="buttons">
<a class="alert-link accept-bankruptcy" role="button" tabindex=0>{{t "Yes, please!" }}</a>
&bull;
<a class="alert-link exit" role="button" tabindex=0>{{t "No, I'll catch up." }}</a>
</span>
</div>

6
static/templates/navbar_alerts/configure_outgoing_email.hbs Normal file
View File

@ -0,0 +1,6 @@
<div data-step="1">
{{t "Zulip needs to send email to confirm users' addresses and send notifications."}}
<a class="alert-link" href="https://zulip.readthedocs.io/en/latest/production/email.html" target="_blank" rel="noopener noreferrer">
{{t "See how to configure email." }}
</a>
</div>

15
static/templates/navbar_alerts/desktop_notifications.hbs Normal file
View File

@ -0,0 +1,15 @@
<div data-step="1">
{{#tr}}Zulip needs your permission to <z-link>enable desktop notifications.</z-link>
{{#*inline "z-link"}}<a class="request-desktop-notifications alert-link" role="button" tabindex=0>{{> @partial-block}}</a>{{/inline}}
{{/tr}}
</div>
<div data-step="2" style="display: none">
{{t "We strongly recommend enabling desktop notifications. They help Zulip keep your team connected." }}
<span class="buttons">
<a class="alert-link request-desktop-notifications" role="button" tabindex=0>{{t "Enable notifications" }}</a>
&bull;
<a class="alert-link exit" role="button" tabindex=0>{{t "Ask me later" }}</a>
&bull;
<a class="alert-link reject-notifications" role="button" tabindex=0>{{t "Never ask on this computer" }}</a>
</span>
</div>

7
static/templates/navbar_alerts/insecure_desktop_app.hbs Normal file
View File

@ -0,0 +1,7 @@
<div data-step="1">
{{t "You are using an old version of the Zulip desktop app with known security bugs." }}
<a class="alert-link" href="https://zulip.com/apps" target="_blank" rel="noopener noreferrer">
{{t "Download the latest version." }}
</a>
</div>

11
static/templates/navbar_alerts/navbar_alert_wrapper.hbs Normal file
View File

@ -0,0 +1,11 @@
<div data-process="{{data_process}}" class="alert alert-info {{custom_class}}">
<span class="close" data-dismiss="alert" aria-label="{{t 'Close' }}" role="button" tabindex=0>&times;</span>
</div>
{{#if is_bankruptcy_alert}}
<div class="alert alert-info bankruptcy-loader" style="display: none;">
{{#tr}}
Marking all messages as read…
{{/tr}}
</div>
{{/if}}

7
static/templates/navbar_alerts/profile_incomplete.hbs Normal file
View File

@ -0,0 +1,7 @@
<div data-step="1">
{{#tr}}
Complete the <z-link>organization profile</z-link>
to brand and explain the purpose of this Zulip organization.
{{#*inline "z-link"}}<a class="alert-link" href="#organization/organization-profile">{{> @partial-block}}</a>{{/inline}}
{{/tr}}
</div>

10
static/templates/navbar_alerts/server_needs_upgrade.hbs Normal file
View File

@ -0,0 +1,10 @@
<div data-step="1">
{{t "This Zulip server is running an old version and should be upgraded." }}
<span class="buttons">
<a class="alert-link" href="https://zulip.readthedocs.io/en/latest/overview/release-lifecycle.html#upgrade-nag" target="_blank" rel="noopener noreferrer">
{{t "Learn more" }}
</a>
&bull;
<a class="alert-link dismiss-upgrade-nag" role="button" tabindex=0>{{t "Dismiss for a week" }}</a>
</span>
</div>

2
templates/zerver/app/index.html
View File

@ -49,7 +49,7 @@
{% include "zerver/app/settings_overlay.html" %}
</div>
{% include "zerver/app/navbar_alerts.html" %}
<div id="navbar_alerts_wrapper"></div>
{% include "zerver/app/navbar.html" %}
<div class="fixed-app">

80
templates/zerver/app/navbar_alerts.html
View File

@ -1,80 +0,0 @@
<div id="navbar_alerts_wrapper">
<div data-process="notifications" class="alert alert-info">
<div data-step="1">
{% trans %}Zulip needs your permission to
<a class="request-desktop-notifications alert-link" role="button" tabindex=0>enable desktop notifications.</a>
{% endtrans %}
</div>
<div data-step="2" style="display: none">
{{ _('We strongly recommend enabling desktop notifications. They help Zulip keep your team connected.') }}
<span class="buttons">
<a class="alert-link request-desktop-notifications" role="button" tabindex=0>{{ _('Enable notifications') }}</a>
&bull;
<a class="alert-link exit" role="button" tabindex=0>{{ _('Ask me later') }}</a>
&bull;
<a class="alert-link reject-notifications" role="button" tabindex=0>{{ _('Never ask on this computer') }}</a>
</span>
</div>
<span class="close" data-dismiss="alert" aria-label="{{ _('Close') }}" role="button" tabindex=0>&times;</span>
</div>
<div data-process="email-server" class="alert alert-info red">
<div data-step="1">
{% trans %}Zulip needs to send email to confirm users' addresses and send notifications.{% endtrans %}
<a class="alert-link" href="https://zulip.readthedocs.io/en/latest/production/email.html" target="_blank" rel="noopener noreferrer">
{% trans %}See how to configure email.{% endtrans %}
</a>
</div>
<span class="close" data-dismiss="alert" aria-label="{{ _('Close') }}" role="button" tabindex=0>&times;</span>
</div>
<div data-process="profile-incomplete" class="alert alert-info">
<div data-step="2">
{% trans profile_link="#organization/organization-profile" %}
Complete the
<a class="alert-link" href="{{ profile_link }}">organization profile</a>
to brand and explain the purpose of this Zulip organization.
{% endtrans %}
</div>
<span class="close" data-dismiss="alert" aria-label="{{ _('Close') }}" role="button" tabindex=0>&times;</span>
</div>
<div data-process="insecure-desktop-app" class="alert alert-info red">
<div data-step="1">
{{ _("You are using an old version of the Zulip desktop app with known security bugs.") }}
<a class="alert-link" href="https://zulip.com/apps" target="_blank" rel="noopener noreferrer">
{{ _("Download the latest version.") }}
</a>
</div>
<span class="close" data-dismiss="alert" aria-label="{{ _('Close') }}" role="button" tabindex=0>&times;</span>
</div>
<div data-process="server-needs-upgrade" class="alert alert-info red">
<div data-step="1">
{{ _("This Zulip server is running an old version and should be upgraded.") }}
<span class="buttons">
<a class="alert-link" href="https://zulip.readthedocs.io/en/latest/overview/release-lifecycle.html#upgrade-nag" target="_blank" rel="noopener noreferrer">
{{ _("Learn more") }}
</a>
&bull;
<a class="alert-link dismiss-upgrade-nag" role="button" tabindex=0>{{ _("Dismiss for a week") }}</a>
</span>
</div>
<span class="close" data-dismiss="alert" aria-label="{{ _('Close') }}" role="button" tabindex=0>&times;</span>
</div>
<div data-process="bankruptcy" class="alert alert-info brankruptcy">
<div data-step="1">
{% trans count=page_params.unread_msgs.count %}
Welcome back! You have <span class="bankruptcy_unread_count">{{ count }}</span> unread messages. Do you want to mark them all as read?
{% endtrans %}
<span class="buttons">
<a class="alert-link accept-bankruptcy" role="button" tabindex=0>{{ _("Yes, please!") }}</a>
&bull;
<a class="alert-link exit" role="button" tabindex=0>{{ _("No, I'll catch up.") }}</a>
</span>
</div>
<span class="close" data-dismiss="alert" aria-label="{{ _('Close') }}" role="button" tabindex=0>&times;</span>
</div>
<div class="alert alert-info bankruptcy-loader" style="display: none;">
{% trans %}
Marking all messages as read…
{% endtrans %}
</div>
</div>