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

Condense messages in a fail-safe way. 

Messages are now explicitly condensed by our JS, which means that if
we run into some bug where our JS doesn't run, you still see the whole
message (rather than getting a clipped message).

(As of this commit, this can happen when you, e.g. are on the
Settings page and someone sends you a message.)

(imported from commit f3bec97800ea1852c80203e73552ee545fcc7e8a)
This commit is contained in:
Waseem Daher 2013-05-01 17:21:45 -04:00
parent 4a01b7a95c
commit 5887d9c576
5 changed files with 27 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -397,7 +397,7 @@ MessageList.prototype = {
}});
}
$.each(rendered_elems, ui.process_collapsing);
$.each(rendered_elems, ui.process_condensing);
// Re-add the fading of messages that is lost when we re-render.
compose.update_faded_messages();

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

@ -418,7 +418,7 @@ exports.activate = function (operators, opts) {
// 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);
$("tr.message_row").each(ui.process_condensing);
reset_load_more_status();
if (! defer_selecting_closest) {

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

@ -919,16 +919,16 @@ $(function () {
$("#home").on("click", ".message_expander", function (e) {
var row = $(this).closest(".message_row");
current_msg_list.get(rows.id(row)).expanded = true;
row.find(".message_content").addClass("expanded");
current_msg_list.get(rows.id(row)).condensed = false;
row.find(".message_content").removeClass("condensed");
$(this).hide();
row.find(".message_collapser").show();
row.find(".message_condenser").show();
});
$("#home").on("click", ".message_collapser", function (e) {
$("#home").on("click", ".message_condenser", function (e) {
var row = $(this).closest(".message_row");
current_msg_list.get(rows.id(row)).expanded = false;
row.find(".message_content").removeClass("expanded");
current_msg_list.get(rows.id(row)).condensed = true;
row.find(".message_content").addClass("condensed");
$(this).hide();
row.find(".message_expander").show();
});
@ -1338,38 +1338,28 @@ 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];
exports.process_condensing = function (index, elem) {
var content = $(elem).find(".message_content");
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");
// If message.condensed is defined, then the user has manually
// specified whether this message should be expanded or condensed.
if (message.condensed === true) {
content.addClass("condensed");
$(elem).find(".message_expander").show();
$(elem).find(".message_collapser").hide();
$(elem).find(".message_condenser").hide();
return;
} else if (message.condensed === false) {
content.removeClass("condensed");
$(elem).find(".message_condenser").show();
$(elem).find(".message_expander").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) {
// Collapse the message if it takes up more than a certain % of the screen
if (content.height() > (viewport.height() * 0.65 ) ) {
content.addClass("condensed");
$(elem).find(".message_expander").show();
} else if (content.offsetHeight < content.scrollHeight) {
$(content).addClass("expanded");
}
}
};

8
zephyr/static/styles/zephyr.css
View File

@ -451,9 +451,6 @@ table.focused_table {
.message_content {
margin-left: 5px;
margin-right: 35px; /* size of the timestamp */
line-height: 1.5em;
max-height: 9.0em;
overflow: hidden;
}
@media (max-width: 480px) {
.message_content {
@ -461,8 +458,9 @@ table.focused_table {
}
}
.message_content.expanded {
max-height: none;
.message_content.condensed {
max-height: 8.5em;
overflow: hidden;
}
.message_length_controller {

2
zephyr/static/templates/message.handlebars
View File

@ -86,7 +86,7 @@
</div>
<div class="message_content">{{#if ../../use_match_properties}}{{{match_content}}}{{else}}{{{content}}}{{/if}}</div>
<div class="message_expander message_length_controller" title="See the rest of this message">[More...]</div>
<div class="message_collapser message_length_controller" title="Make this message take up less space on the screen">[Collapse this message]</div>
<div class="message_condenser message_length_controller" title="Make this message take up less space on the screen">[Collapse this message]</div>
</td>
</tr>
{{/with}}