paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-02 04:53:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

bankruptcy: Migrate from modal view to top-of-page panel.

Browse Source 
Switched to top-of-page prompt to make it natural to fit in with other
notifications. As we switch to panel-based prompt, templates for the
bankruptcy modal are moved along with its usage in application's
homepage.

We include a bit of delay before reloading to make it easy for the
user to read the "Marking all messages as read" banner before it is
covered by the "Reloading..." notice in environments where the reload
is fast.

Fixes #3347.
This commit is contained in:
majordwarf
2020-03-29 00:03:46 +05:30
committed by Tim Abbott
parent 3cea9ce1c4
commit e85e598e56
7 changed files with 45 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
static/js/panels.js
View File

@@ -64,6 +64,8 @@ exports.initialize = function () {
exports.open($("[data-process='email-server']"));
} else if (should_show_notifications(ls)) {
exports.open($("[data-process='notifications']"));
} else if (unread_ui.should_display_bankruptcy_banner()) {
exports.open($("[data-process='bankruptcy']"));
} else {
// TODO: This should be restructured with separate check and
// show calls.
@@ -84,6 +86,18 @@ exports.initialize = function () {
resize_app();
});
$(".accept-bankruptcy").on("click", function (e) {
e.preventDefault();
$(this).closest(".alert").hide();
$('.bankruptcy-loader').show();
setTimeout(pointer.fast_forward_pointer, 1000);
resize_app();
});
$("#bankruptcy").on("hide", function () {
unread_ui.enable();
});
$("#panels").on("click", ".alert .close, .alert .exit", function (e) {
e.stopPropagation();
const $process = $(e.target).closest("[data-process]");

36
static/js/unread_ui.js
View File

@@ -1,5 +1,3 @@
const render_bankruptcy_modal = require('../templates/bankruptcy_modal.hbs');
let last_mention_count = 0;
function do_new_messages_animation(li) {
@@ -66,7 +64,7 @@ exports.enable = function enable() {
exports.update_unread_counts();
};
function consider_bankruptcy() {
exports.should_display_bankruptcy_banner = function () {
// Until we've handled possibly declaring bankruptcy, don't show
// unread counts since they only consider messages that are loaded
// client side and may be different from the numbers reported by
@@ -75,37 +73,21 @@ function consider_bankruptcy() {
if (!page_params.furthest_read_time) {
// We've never read a message.
exports.enable();
return;
return false;
}
const now = new XDate(true).getTime() / 1000;
if (page_params.unread_msgs.count > 500 &&
now - page_params.furthest_read_time > 60 * 60 * 24 * 2) { // 2 days.
const rendered_modal = render_bankruptcy_modal({
unread_count: page_params.unread_msgs.count});
$('#bankruptcy-unread-count').html(rendered_modal);
$('#bankruptcy').modal('show');
} else {
exports.enable();
now - page_params.furthest_read_time > 60 * 60 * 24 * 2) { // 2 days.
return true;
}
}
exports.enable();
return false;
};
exports.initialize = function () {
// No matter how the bankruptcy modal is closed, show unread counts after.
$("#bankruptcy").on("hide", function () {
exports.enable();
});
$('#yes-bankrupt').click(function () {
pointer.fast_forward_pointer();
$("#yes-bankrupt").hide();
$("#no-bankrupt").hide();
$('#bankruptcy-loader').css('margin', '0 auto');
loading.make_indicator($('#bankruptcy-loader'),
{text: i18n.t('Marking all messages as read…')});
});
consider_bankruptcy();
exports.enable();
};
window.unread_ui = exports;

4
static/styles/alerts.scss
View File

@@ -38,6 +38,10 @@ $alert-error-red: hsl(0, 80%, 40%);
&.stream_create_info {
margin: 10px 10px 0px 10px;
}
.bankruptcy_unread_count {
font-weight: 600;
}
}
/* alert box component changes */

6
static/templates/bankruptcy_modal.hbs
View File

@@ -1,6 +0,0 @@
{{! The unread count in the bankruptcy modal }}
<div class="modal-body">
<p>{{#tr this}}It's been a while! Since you were last here, you received <b>__unread_count__</b> new messages.{{/tr}}</p>
<p>{{t "Do you want to skip to your latest messages?" }}</p>
</div>

17
templates/zerver/app/bankruptcy.html
View File

@@ -1,17 +0,0 @@
<div class="modal hide modal-bg new-style" id="bankruptcy" tabindex="-1" role="dialog"
aria-labelledby="bankruptcy-label" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="{{ _('Close') }}"><span aria-hidden="true">&times;</span></button>
<h3 id="bankruptcy-label">{{ _('Welcome back') }}</h3>
</div>
<div id="bankruptcy-unread-count"></div>
<div class="modal-footer">
<div id="bankruptcy-loader"></div>
<button id="yes-bankrupt" class="bankruptcy_button button small rounded sea-green">{{ _('Yes, please!') }}</button>
<button id="no-bankrupt" class="bankruptcy_button button small rounded"
data-dismiss="modal">{{ _("No, I'll catch up.") }}</button>
</div>
</div>

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

@@ -167,7 +167,6 @@
</div>
</div>
{% include "zerver/app/invite_user.html" %}
{% include "zerver/app/bankruptcy.html" %}
{% include "zerver/app/logout.html" %}
{% include "zerver/app/deprecation_notice.html" %}
<div id="user-profile-modal-holder"></div>

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

@@ -48,4 +48,22 @@
{% endtrans %}
</div>
</div>
<div data-process="bankruptcy" class="alert alert-info brankruptcy">
<span class="close" data-dismiss="alert" aria-label="{{ _('Close') }}">&times;</span>
<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?
<span class="buttons">
<a class="alert-link accept-bankruptcy">Yes, please!</a>
&bull;
<a class="alert-link exit">No, I'll catch up.</a>
</span>
{% endtrans %}
</div>
</div>
<div class="alert alert-info bankruptcy-loader" style="display: none;">
{% trans %}
Marking all messages as read…
{% endtrans %}
</div>
</div>