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

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

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...

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) {
+exports.notify_above_composebox = function (note, link_class, link_msg_id, link_text) {
-    var notification_html = $(templates.render('compose-notification', {title: title,
+    var notification_html = $(templates.render('compose_notification', {note: note,
-                                                                        content: content,
                                                                         link_class: link_class,
                                                                         link_msg_id: link_msg_id,
                                                                         link_text: link_text}));
-    $('#compose-notifications').notify({
+    exports.clear_compose_notifications();
-        message: {html: notification_html},
+    $('#out-of-view-notification').append(notification_html);
-        fadeOut: {enabled: true, delay: 8000}
+    $('#out-of-view-notification').show();
-    }).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.";
+            note = "Your recently sent message is";
-            if (!narrow.active()) {
+            link_class = "compose_notification_scroll_to_message";
-                // in the home view, let's offer to take them to it.
+            link_text = "further down";
-                link_class = "compose_notification_narrow_by_time_travel";
+
-                link_text = "show in context";
-            }
         } 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(),
+        exports.notify_above_composebox("Your recent message is outside the current search.",
-                                        "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,19 +457,24 @@ $(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'});
+        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();
+    });
 };
 
 return exports;

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;
 }
+

static/templates/compose-notification.handlebars

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

static/templates/compose_notification.handlebars

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

templates/zerver/compose.html

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