paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-04 14:03:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

compose: Avoid preview message area overlap with last message.

Browse Source 
Instead of blindly adjusting `compose-textarea` on resize,
we adjust the height of `compose-textarea` or `preview_message_area`
based on which is visible.
This commit is contained in:
Aman Agrawal
2022-01-31 10:27:54 +00:00
committed by Tim Abbott
parent 17f74a3f57
commit 31dd1d554c
3 changed files with 18 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend_tests/node_tests/compose.js
View File

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

1
static/js/compose.js
View File

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

17
static/js/resize.js
View File

@@ -161,10 +161,10 @@ export function watch_manual_resize(element) {
export function reset_compose_textarea_max_height(bottom_whitespace_height) { export function reset_compose_textarea_max_height(bottom_whitespace_height) {
// If the compose-box is open, we set the `max-height` property of // If the compose-box is open, we set the `max-height` property of
// `compose-textarea` so that the compose-box's maximum extent // `compose-textarea` and `preview-textarea`, so that the
// does not overlap the last message in the current stream.is the // compose-box's maximum extent does not overlap the last message
// right size to leave a tiny bit of space after the last message // in the current stream. We also leave a tiny bit of space after
// of the current stream. // the last message of the current stream.
// Compute bottom_whitespace_height if not provided by caller. // Compute bottom_whitespace_height if not provided by caller.
if (bottom_whitespace_height === undefined) { if (bottom_whitespace_height === undefined) {
@@ -172,11 +172,16 @@ export function reset_compose_textarea_max_height(bottom_whitespace_height) {
bottom_whitespace_height = h.bottom_whitespace_height; bottom_whitespace_height = h.bottom_whitespace_height;
} }
// Take properties of the whichever message area is visible.
const visible_textarea = $("#compose-textarea:visible, #preview_message_area:visible");
const compose_height = Number.parseInt($("#compose").outerHeight(), 10); const compose_height = Number.parseInt($("#compose").outerHeight(), 10);
const compose_textarea_height = Number.parseInt($("#compose-textarea").outerHeight(), 10); const compose_textarea_height = Number.parseInt(visible_textarea.outerHeight(), 10);
const compose_non_textarea_height = compose_height - compose_textarea_height; const compose_non_textarea_height = compose_height - compose_textarea_height;
$("#compose-textarea").css( // 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(
"max-height", "max-height",
// The 10 here leaves space for the selected message border. // The 10 here leaves space for the selected message border.
bottom_whitespace_height - compose_non_textarea_height - 10, bottom_whitespace_height - compose_non_textarea_height - 10,