From e2c388c49c6b6c4c3b51f3975d0e3cef55f20683 Mon Sep 17 00:00:00 2001 From: acrefoot Date: Wed, 13 Nov 2013 13:40:02 -0500 Subject: [PATCH] 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) --- static/js/compose.js | 3 +- static/js/feature_flags.js | 2 +- static/js/notifications.js | 66 ++++++++++++------- static/styles/zulip.css | 16 +++++ .../templates/compose-notification.handlebars | 7 -- .../templates/compose_notification.handlebars | 5 ++ templates/zerver/compose.html | 1 + 7 files changed, 66 insertions(+), 34 deletions(-) delete mode 100644 static/templates/compose-notification.handlebars create mode 100644 static/templates/compose_notification.handlebars diff --git a/static/js/compose.js b/static/js/compose.js index 3636314e2c..da7b1bb573 100644 --- a/static/js/compose.js +++ b/static/js/compose.js @@ -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; diff --git a/static/js/feature_flags.js b/static/js/feature_flags.js index 9498e2a6d2..cf68318f0a 100644 --- a/static/js/feature_flags.js +++ b/static/js/feature_flags.js @@ -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... diff --git a/static/js/notifications.js b/static/js/notifications.js index a8418738bf..c715738dbd 100644 --- a/static/js/notifications.js +++ b/static/js/notifications.js @@ -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(); }); diff --git a/static/styles/zulip.css b/static/styles/zulip.css index e4d1243a65..5a3439539a 100644 --- a/static/styles/zulip.css +++ b/static/styles/zulip.css @@ -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; } + diff --git a/static/templates/compose-notification.handlebars b/static/templates/compose-notification.handlebars deleted file mode 100644 index 83747309e4..0000000000 --- a/static/templates/compose-notification.handlebars +++ /dev/null @@ -1,7 +0,0 @@ -{{! Content of sent-message notifications }} -
-
-
{{title}}
- {{content}} {{#if link_class}}
{{link_text}}{{/if}} -
-
diff --git a/static/templates/compose_notification.handlebars b/static/templates/compose_notification.handlebars new file mode 100644 index 0000000000..20d4185714 --- /dev/null +++ b/static/templates/compose_notification.handlebars @@ -0,0 +1,5 @@ +{{! Content of sent-message notifications }} +
+ {{note}} {{#if link_class}}{{link_text}}{{/if}} + +
diff --git a/templates/zerver/compose.html b/templates/zerver/compose.html index 21166ea4b2..24eb91a62e 100644 --- a/templates/zerver/compose.html +++ b/templates/zerver/compose.html @@ -25,6 +25,7 @@
+
{% csrf_token %}