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

compose-box: Remove reset max-height calculation for preview click. 

Removes call to reset_compose_message_max_height when clicking on
the markdown preview button, which due to the `#compose` div element
momentarily shrinking to be empty, caused the calculation of the
max-height to grow larger on each click.

Also refactors reset_compose_message_max_height to use the height
from `getBoundingClientRect`, which defaults to zero when empty.

And fixes a small discrepancy in how max-height is applied to
a div element vs a textarea element, so that the visible height
doesn't change between the preview and write modes in the compose
box.

Fixes #23277.
This commit is contained in:
Lauryn Menard 2022-10-24 20:35:19 +02:00 committed by Tim Abbott
parent 4d87bf291c
commit 95aa9a4f83
3 changed files with 15 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend_tests/node_tests/compose.js
View File

@ -758,11 +758,6 @@ test_ui("on_events", ({override, override_rewire}) => {
})();
(function test_markdown_preview_compose_clicked() {
let reset_compose_message_max_height_called = false;
override(resize, "reset_compose_message_max_height", () => {
reset_compose_message_max_height_called = true;
});
// Tests setup
function setup_visibilities() {
$("#compose-textarea").show();
@ -847,7 +842,6 @@ test_ui("on_events", ({override, override_rewire}) => {
assert.equal($("#compose .preview_content").html(), "translated HTML: Nothing to preview");
assert_visibilities();
assert.ok(reset_compose_message_max_height_called);
let make_indicator_called = false;
$("#compose-textarea").val("```foobarfoobar```");

1
static/js/compose.js
View File

@ -696,7 +696,6 @@ export function initialize() {
$("#compose .preview_content"),
content,
);
resize.reset_compose_message_max_height();
});
$("#compose").on("click", ".undo_markdown_preview", (e) => {

23
static/js/resize.js
View File

@ -172,17 +172,24 @@ export function reset_compose_message_max_height(bottom_whitespace_height) {
bottom_whitespace_height = h.bottom_whitespace_height;
}
const $visible_textarea = $("#compose-textarea, #preview_message_area");
const compose_height = Number.parseInt($("#compose").outerHeight(), 10);
const compose_textarea_height = Number.parseInt($visible_textarea.outerHeight(), 10);
const compose_height = $("#compose").get(0).getBoundingClientRect().height;
const compose_textarea_height = Math.max(
$("#compose-textarea").get(0).getBoundingClientRect().height,
$("#preview_message_area").get(0).getBoundingClientRect().height,
);
const compose_non_textarea_height = compose_height - compose_textarea_height;
// The `preview_message_area` can have a slightly different height
// than `compose-textarea` based on operating system. We just
// ensure that the last message is not overlapped by compose box.
$visible_textarea.css(
// We ensure that the last message is not overlapped by compose box.
$("#compose-textarea").css(
"max-height",
// The 10 here leaves space for the selected message border.
// Because <textarea> max-height includes padding, we subtract
// 10 for the padding and 10 for the selected message border.
bottom_whitespace_height - compose_non_textarea_height - 20,
);
$("#preview_message_area").css(
"max-height",
// Because <div> max-height doesn't include padding, we only
// subtract 10 for the selected message border.
bottom_whitespace_height - compose_non_textarea_height - 10,
);
}