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

Process message condensing in narrow.activate rather than hashchange. 

Previously, we were having this problem where:
* You narrow to something
* That causes message_list.js:process_collapsing to run on all of the
  elements in the view, which changes some of their sizes
* That causes the pane to scroll and either push the content up or
  down, depending (since stuff on top of where you were is now a
  different size)
* That triggers keep_pointer_in_view, which moves your pointer

Moving process_collapsing into narrow.activate doesn't obviously
fix any of this, but it does seem to mitigate the issue a bit.

In particular, we (a) process it less frequently, and (b) process it
immediately after we show the narrowed view table, which seems to
reduce the raciness of the overall experience.

This does, however, introduce a regression:
* If you receive a long message when you're on
  #settings, e.g., and then go back to Home,
  the message does not properly get a [More] appended
  to it.

(imported from commit b1440d656cc7b71eca8af736f2f7b3aa7e0cca14)
This commit is contained in:
Waseem Daher 2013-05-01 15:36:04 -04:00
parent 9f0fc7c031
commit 435098d001
3 changed files with 44 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
zephyr/static/js/message_list.js
View File

@ -24,42 +24,6 @@ function MessageList(table_name, filter, opts) {
return this;
}
function process_collapsing(index, elem) {
var content = $(elem).find(".message_content")[0];
var message = current_msg_list.get(rows.id($(elem)));
if (content !== undefined && message !== undefined) {
// If message.expanded is defined, then the user has manually
// specified whether this message should be expanded or collapsed.
if (message.expanded === true) {
$(content).addClass("expanded");
$(elem).find(".message_collapser").show();
$(elem).find(".message_expander").hide();
return;
} else if (message.expanded === false) {
$(content).removeClass("expanded");
$(elem).find(".message_expander").show();
$(elem).find(".message_collapser").hide();
return;
}
// We've limited the height of all elements in CSS.
// If offsetHeight < scrollHeight, then our CSS height limit has taken
// effect and we should show an expander button.
// If offsetHeight is only slightly smaller than scrollHeight, then we
// would only be collapsing by a small amount, which can be annoying.
// Instead of showing an expander button, just expand that element instead
// of keeping it collapsed. (This also solves a bug seen on some Mac
// systems where offsetHeight == scrollHeight-1 for no apparent reason).
if (content.offsetHeight === 0 && content.scrollHeight === 0) {
return;
} else if (content.offsetHeight + 250 < content.scrollHeight) {
$(elem).find(".message_expander").show();
} else if (content.offsetHeight < content.scrollHeight) {
$(content).addClass("expanded");
}
}
}
(function () {
function add_display_time(message, prev) {
@ -433,7 +397,7 @@ MessageList.prototype = {
}});
}
$.each(rendered_elems, process_collapsing);
$.each(rendered_elems, ui.process_collapsing);
// Re-add the fading of messages that is lost when we re-render.
compose.update_faded_messages();
@ -566,8 +530,5 @@ $(document).on('message_selected.zephyr hashchange.zephyr mousewheel mousemove',
// TODO: Figure out how to limit this animation stop to just the autoscroll
$("html, body").stop();
});
$(document).on('hashchange.zephyr', function (event) {
$("tr.message_row").each(process_collapsing);
});
}());
/*jslint nomen: false */

7
zephyr/static/js/narrow.js
View File

@ -413,6 +413,13 @@ exports.activate = function (operators, opts) {
$("#zhome").removeClass("focused_table");
$("#zfilt").css("opacity", 0).animate({opacity: 1});
// Deal with message condensing/uncondensing.
// In principle, this code causes us to scroll around because divs
// above us could change size -- which is problematic, because it
// could cause us to lose our position. But doing this here, right
// after showing the table, seems to cause us to win the race.
$("tr.message_row").each(ui.process_collapsing);
reset_load_more_status();
if (! defer_selecting_closest) {
maybe_select_closest();

36
zephyr/static/js/ui.js
View File

@ -1345,6 +1345,42 @@ exports.restore_compose_cursor = function () {
.caret(saved_compose_cursor, saved_compose_cursor);
};
exports.process_collapsing = function (index, elem) {
var content = $(elem).find(".message_content")[0];
var message = current_msg_list.get(rows.id($(elem)));
if (content !== undefined && message !== undefined) {
// If message.expanded is defined, then the user has manually
// specified whether this message should be expanded or collapsed.
if (message.expanded === true) {
$(content).addClass("expanded");
$(elem).find(".message_collapser").show();
$(elem).find(".message_expander").hide();
return;
} else if (message.expanded === false) {
$(content).removeClass("expanded");
$(elem).find(".message_expander").show();
$(elem).find(".message_collapser").hide();
return;
}
// We've limited the height of all elements in CSS.
// If offsetHeight < scrollHeight, then our CSS height limit has taken
// effect and we should show an expander button.
// If offsetHeight is only slightly smaller than scrollHeight, then we
// would only be collapsing by a small amount, which can be annoying.
// Instead of showing an expander button, just expand that element instead
// of keeping it collapsed. (This also solves a bug seen on some Mac
// systems where offsetHeight == scrollHeight-1 for no apparent reason).
if (content.offsetHeight === 0 && content.scrollHeight === 0) {
return;
} else if (content.offsetHeight + 250 < content.scrollHeight) {
$(elem).find(".message_expander").show();
} else if (content.offsetHeight < content.scrollHeight) {
$(content).addClass("expanded");
}
}
};
exports.update_recent_subjects = function () {
function same(arr1, arr2) {
var i = 0;