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

Attempt 2: Notifications in the composebox 

This moves the notify-not-in-view notifications into the composebox area.
It also tries to be a bit smarter about what action it links and what it displays.

(imported from commit 1c79bd0d9ef972059a006b17501a09b72e961ee3)
This commit is contained in:
acrefoot 2013-11-13 13:40:02 -05:00
parent e7e2f0ee6e
commit e2c388c49c
7 changed files with 66 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
static/js/compose.js
View File

@ -199,7 +199,7 @@ exports.start = function (msg_type, opts) {
if (reload.is_in_progress()) {
return;
}
notifications.clear_compose_notifications();
$("#compose_close").show();
$("#compose_controls").hide();
$('.message_comp').show();
@ -248,6 +248,7 @@ function abort_xhr () {
exports.cancel = function () {
$("#compose_close").hide();
clear_box();
notifications.clear_compose_notifications();
hide_box();
abort_xhr();
is_composing_message = false;

2
static/js/feature_flags.js
View File

@ -43,7 +43,7 @@ exports.left_side_userlist = page_params.staging ||
// Still very beta:
exports.fade_users_when_composing = page_params.staging || is_customer4;
exports.use_socket = page_params.staging;
exports.notify_on_send_not_in_view = false;
exports.notify_on_send_not_in_view = page_params.staging;
exports.show_huddles = page_params.staging || is_customer4;
// Still burning in...

66
static/js/notifications.js
View File

@ -193,16 +193,14 @@ function in_browser_notify(message, title, content) {
}).show();
}
exports.notify_above_composebox = function (title, content, link_class, link_msg_id, link_text) {
var notification_html = $(templates.render('compose-notification', {title: title,
content: content,
exports.notify_above_composebox = function (note, link_class, link_msg_id, link_text) {
var notification_html = $(templates.render('compose_notification', {note: note,
link_class: link_class,
link_msg_id: link_msg_id,
link_text: link_text}));
$('#compose-notifications').notify({
message: {html: notification_html},
fadeOut: {enabled: true, delay: 8000}
}).show();
exports.clear_compose_notifications();
$('#out-of-view-notification').append(notification_html);
$('#out-of-view-notification').show();
};
function process_notification(notification) {
@ -373,6 +371,19 @@ exports.received_messages = function (messages) {
});
};
function get_message_header(message) {
if (message.type === "stream") {
return message.stream + ">" + message.subject;
}
if (message.display_recipient.length > 2) {
return "group PM with " + message.display_reply_to;
}
if (message.display_recipient.length === 1) {
return "PM with yourself";
}
return "PM with " + message.display_reply_to;
}
exports.possibly_notify_new_messages_outside_viewport = function (messages) {
if (!feature_flags.notify_on_send_not_in_view) {
return;
@ -384,6 +395,7 @@ exports.possibly_notify_new_messages_outside_viewport = function (messages) {
// queue up offscreen because of narrowed, or (secondarily) offscreen
// because it doesn't fit in the currently visible viewport
var msg_text = $(message.content).text();
var note;
var link_class;
var link_msg_id = message.id;
@ -394,24 +406,22 @@ exports.possibly_notify_new_messages_outside_viewport = function (messages) {
// offscreen because it is outside narrow
// we can only look for these on non-search (can_apply_locally) messages
// see also: exports.notify_messages_outside_current_search
note = "is outside the current narrow.";
note = "You sent a message outside the current narrow.";
link_class = "compose_notification_narrow_by_subject";
link_text = "narrow to that conversation";
link_text = "Narrow to " + get_message_header(message);
}
else if (viewport.is_below_visible_bottom(row.offset().top + row.height()) && !narrow.narrowed_by_reply()){
else if (viewport.is_below_visible_bottom(row.offset().top) && !narrow.narrowed_by_reply()){
// offscreen because it's too far down.
// offer scroll to message link.
note = "is further down.";
if (!narrow.active()) {
// in the home view, let's offer to take them to it.
link_class = "compose_notification_narrow_by_time_travel";
link_text = "show in context";
}
note = "Your recently sent message is";
link_class = "compose_notification_scroll_to_message";
link_text = "further down";
} else {
// return with _.each is like continue for normal for loops.
return;
}
exports.notify_above_composebox(msg_text, note, link_class, link_msg_id, link_text);
exports.notify_above_composebox(note, link_class, link_msg_id, link_text);
});
};
@ -425,16 +435,17 @@ exports.notify_messages_outside_current_search = function (messages) {
if (message.sender_email !== page_params.email) {
return;
}
exports.notify_above_composebox($(message.content).text(),
"is outside the current search.",
exports.notify_above_composebox("Your recent message is outside the current search.",
"compose_notification_narrow_by_subject",
message.id,
"narrow to it");
"Narrow to " + get_message_header(message));
});
};
exports.clear_compose_notifications = function () {
$("#compose-notifications").children().remove();
$('#out-of-view-notification').empty();
$('#out-of-view-notification').stop(true, true);
$('#out-of-view-notification').hide();
};
$(function () {
@ -446,16 +457,21 @@ $(function () {
});
exports.register_click_handlers = function () {
$('body').on('click', '.compose_notification_narrow_by_subject', function (e) {
$('#out-of-view-notification').on('click', '.compose_notification_narrow_by_subject', function (e) {
var msgid = $(e.currentTarget).data('msgid');
narrow.by_subject(msgid, {trigger: 'compose_notification'});
e.stopPropagation();
e.preventDefault();
});
$('body').on('click', '.compose_notification_narrow_by_time_travel', function (e) {
$('#out-of-view-notification').on('click', '.compose_notification_scroll_to_message', function (e) {
var msgid = $(e.currentTarget).data('msgid');
narrow.by_time_travel(msgid, {trigger: 'compose_notification'});
scroll_to_selected();
current_msg_list.select_id(msgid);
scroll_to_selected();
e.stopPropagation();
e.preventDefault();
});
$('#out-of-view-notification').on('click', '.out-of-view-notification-close', function (e) {
exports.clear_compose_notifications();
e.stopPropagation();
e.preventDefault();
});

16
static/styles/zulip.css
View File

@ -1415,6 +1415,21 @@ blockquote p {
filter: alpha(opacity=40);
}
#out-of-view-notification {
/* Don't overlap into the compose_close × */
margin-right: 10px;
}
.out-of-view-notification-close {
font-size: 17px;
font-weight: bold;
color: black;
text-shadow: 0 1px 0 white;
opacity: .2;
filter: alpha(opacity=20);
float: right;
}
.home-error-bar {
margin-top: 5px;
display: none;
@ -3561,3 +3576,4 @@ div.edit_bot {
.inactive_user_row {
text-decoration: line-through;
}

7
static/templates/compose-notification.handlebars
View File

@ -1,7 +0,0 @@
{{! Content of sent-message notifications }}
<div>
<div class="compose-notifications-content">
<div class="title">{{title}}</div>
{{content}} {{#if link_class}}<br /><a href="#" class="{{link_class}}" data-msgid="{{link_msg_id}}">{{link_text}}</a>{{/if}}
</div>
</div>

5
static/templates/compose_notification.handlebars Normal file
View File

@ -0,0 +1,5 @@
{{! Content of sent-message notifications }}
<div class="compose-notifications-content">
{{note}} {{#if link_class}}<a href="#" class="{{link_class}}" data-msgid="{{link_msg_id}}">{{link_text}}</a>{{/if}}
<button type="button" class="out-of-view-notification-close close">×</button>
</div>

1
templates/zerver/compose.html
View File

@ -25,6 +25,7 @@
<span id="error-msg"></span>
</div>
<div id="compose_invite_users" class="alert"></div>
<div id="out-of-view-notification" class="alert"></div>
<form id="send_message_form" action="/json/send_message" method="post">
{% csrf_token %}
<table class="compose_table">