Fade out messages surrounding a reply message, to make mixing harder.

(imported from commit da150ad2f0877d058e1a60deb7a7632e52bd3533)

zephyr/static/js/compose.js

@@ -2,6 +2,7 @@ var compose = (function () {
 
 var exports = {};
 var is_composing_message = false;
+var faded_to;
 
 function show(tabname, focus_area) {
     if (tabname === "stream") {
@@ -66,6 +67,59 @@ exports.decorate_stream_bar = function (stream_name) {
         .addClass(subs.get_color_class(color));
 };
 
+function neighbors(target_message) {
+    var table = narrow.active() ? "zfilt" : "zhome";
+    var message_tr = $(rows.get(target_message.id, table));
+    var message_neighbors = $();
+
+    var candidates = $.merge(message_tr.prevAll("*:lt(20)"), message_tr.nextAll("*:lt(20)"));
+
+    $.each(candidates, function () {
+        var row = $(this);
+        if (row.hasClass("recipient_row")) {
+            message_neighbors = message_neighbors.add(row);
+        } else {
+            message_neighbors = message_neighbors.add(row.children(".messagebox")[0]);
+        }
+    });
+
+    return message_neighbors;
+}
+
+function neighbors_with_different_recipients(target_message) {
+    return neighbors(target_message).filter(function (index) {
+        if ($(this).hasClass("recipient_row")) {
+            // This is a recipient_row.
+            return !same_recipient(target_message, current_msg_list.get(rows.id($(this))));
+        } else {
+            // This is a messagebox.
+            var row = $(this).parent("tr");
+            return !same_recipient(target_message, current_msg_list.get(rows.id(row)));
+        }
+    });
+}
+
+function fade_around(reply_message) {
+    faded_to = reply_message;
+    var fade_class = narrow.active() ? "message_reply_fade_narrowed" : "message_reply_fade";
+
+    neighbors_with_different_recipients(reply_message).addClass(fade_class);
+    ui.disable_floating_recipient_bar();
+}
+
+exports.unfade_messages = function () {
+    if (faded_to === undefined) {
+        return;
+    }
+
+    var table = narrow.active() ? "zfilt" : "zhome";
+    var fade_class = narrow.active() ? "message_reply_fade_narrowed" : "message_reply_fade";
+
+    neighbors_with_different_recipients(faded_to).removeClass(fade_class);
+    faded_to = undefined;
+    ui.enable_floating_recipient_bar();
+};
+
 exports.start = function (msg_type, opts) {
     if (reload.is_in_progress()) {
         return;
@@ -103,6 +157,14 @@ exports.start = function (msg_type, opts) {
         show('private', $("#" + (focus_area || 'private_message_recipient')));
     }
 
+    if (opts.replying_to_message !== undefined) {
+        if (exports.composing() && (faded_to !== opts.replying_to_message)) {
+            // Already faded to another message. First unfade everything.
+            exports.unfade_messages();
+        }
+        fade_around(opts.replying_to_message);
+    }
+
     is_composing_message = msg_type;
     exports.decorate_stream_bar(opts.stream);
     $(document).trigger($.Event('compose_started.zephyr', opts));
@@ -205,6 +267,7 @@ exports.hide = function () {
     $('.message_comp').slideUp(100,
                               function() { $('#compose').css({visibility: "hidden"});});
     notifications_bar.enable();
+    exports.unfade_messages();
 };
 
 exports.clear = function () {

zephyr/static/js/narrow.js

@@ -213,6 +213,9 @@ exports.activate = function (operators, opts) {
         then_select_id: current_msg_list.selected_id()
     }, opts);
 
+    // Unfade the home view before we switch tables.
+    compose.unfade_messages();
+
     var was_narrowed = exports.active();
     var then_select_id  = opts.then_select_id;
 

zephyr/static/js/ui.js

@@ -281,6 +281,7 @@ function show_floating_recipient_bar() {
 }
 
 var old_label;
+var disable_floating_recipient_bar = false;
 function replace_floating_recipient_bar(desired_label) {
     var new_label, other_label, header;
     if (desired_label !== old_label) {
@@ -315,7 +316,20 @@ function hide_floating_recipient_bar() {
     }
 }
 
+exports.disable_floating_recipient_bar = function () {
+    disable_floating_recipient_bar = true;
+    hide_floating_recipient_bar();
+};
+
+exports.enable_floating_recipient_bar = function () {
+    disable_floating_recipient_bar = false;
+};
+
 exports.update_floating_recipient_bar = function () {
+    if (disable_floating_recipient_bar) {
+        return;
+    }
+
     var top_statusbar = $("#top_statusbar");
     var top_statusbar_top = top_statusbar.offset().top;
     var top_statusbar_bottom = top_statusbar_top + top_statusbar.outerHeight();

zephyr/static/js/zephyr.js

@@ -158,7 +158,8 @@ function respond_to_message(reply_type) {
         msg_type = message.type;
     }
     compose.start(msg_type, {'stream': stream, 'subject': subject,
-                             'private_message_recipient': pm_recipient});
+                             'private_message_recipient': pm_recipient,
+                             'replying_to_message': message});
 }
 
 function message_range(msg_list, start, end) {

zephyr/static/styles/zephyr.css

@@ -210,6 +210,7 @@ ul.filters .count {
 
 .message_list {
     max-width: 640px;
+    /* If we change this color, we must change message_reply_fade */
     background-color: aliceblue;
     padding-left: 10px;
     padding-right: 20px;
@@ -292,6 +293,10 @@ td.pointer {
 .ztable_col3 {    /* subjectname */
 }
 
+.recipient_row {
+    border: 1px solid grey;
+}
+
 .message_header {
     vertical-align: middle;
     text-align:     left;
@@ -305,23 +310,13 @@ td.pointer {
 
 .message_header_stream {
     background-color: #bbb;
-    border: 1px solid grey;
 }
 
 .message_header_private_message {
     background-color: #444;
-    border: 1px solid #444;
-}
-
-.message_header.left_part {
-    border-right: 0px;
-}
-.message_header.right_part {
-    border-left: 0px;
 }
 
 .messagebox.private-message {
-    border-color: #444;
     border-width: 0px 1px 1px 1px;
     background-color: #feffe0;
 }
@@ -711,6 +706,8 @@ table.floating_recipient {
 }
 
 .narrowed_view {
+    /* If we change this color, also change
+       message_reply_fade_narrowed */
     background-color: #DDD;
 }
 
@@ -997,3 +994,19 @@ table.floating_recipient {
 #empty_narrow_message p {
     text-align: center;
 }
+
+.message_reply_fade {
+    /* If we change the message_list background, we must change this */
+    border-color: aliceblue;
+    opacity: .4;
+}
+
+.message_reply_fade_narrowed {
+    /* If we change the narrowed_view background, we must change this */
+    border-color: #DDD;
+    opacity: .4;
+}
+
+#stream-message, #private-message {
+    border: 1px solid grey;
+}