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

compose-box: Fix compose-box from covering last messages of stream.

Browse Source 
While writing a long message in compose-box, the last few messages of
the current stream gets covered by the compose-box and it gets pretty
annoying sometimes trying to figure out a way to read the last message
of the stream while writing. Right now, the only way to get past this
is to resize `compose-textarea` by using the resize tool at the
bottom-right corner of the `compose-textarea`. But, that small resize
tool is not always readily visible to the user.

The proposed solution in this commit is to reset the `max-height`
property of `#compose-textarea` everytime `bottom_whitespace_height`
is resized such that the total height of `#compose` is always less
than or equal to the height of `bottom_whitespace_height`.  Doing
this, the compose-box never covers the last message of the current
stream.

The only problem with this is that if the compose-box is closed at the
time of bottom-whitespace resize, we cannot find the
`compose_non_textarea_height` and so, we cannot reset the max-height
of `#compose-textarea`. To solve this, max-height of
`compose-textarea` is also reset everytime a new compose-box is opened
according to the value of `bottom_whitespace_height` at that time.

Thus, if the compose-box is already open at the time of
bottom-whitespace resize, the max-height of `#compose-textarea` will
also get reset at the same time, whereas, if the compose-box is closed
at the time of bottom-whitespace resize, the max-height of
`#compose-textarea` won't get reset at that time, but it will surely
get reset whenever the user will open the compose-box.

Tested on my Ubuntu Development Environment on Chrome and Firefox browsers.

Fixes: #16038.
This commit is contained in:
Priyansh Garg
2021-01-18 18:53:29 +05:30
committed by Tim Abbott
parent da596ef269
commit 6cfe10fef2
3 changed files with 43 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
static/js/compose_actions.js
View File

@@ -23,6 +23,7 @@ import * as people from "./people";
import * as recent_topics_ui from "./recent_topics_ui";
import * as recent_topics_util from "./recent_topics_util";
import * as reload_state from "./reload_state";
import * as resize from "./resize";
import * as stream_bar from "./stream_bar";
import * as stream_data from "./stream_data";
import * as unread_ops from "./unread_ops";
@@ -265,6 +266,11 @@ export function start(msg_type, opts) {
// Show either stream/topic fields or "You and" field.
show_box(msg_type, opts);
// Reset the `max-height` property of `compose-textarea` so that the
// compose-box do not cover the last messages of the current stream
// while writing a long message.
resize.reset_compose_textarea_max_height();
complete_starting_tasks(msg_type, opts);
}

34
static/js/resize.js
View File

@@ -159,8 +159,42 @@ export function watch_manual_resize(element) {
return [box_handler, body_handler];
}
export function reset_compose_textarea_max_height(bottom_whitespace_height) {
// If the compose-box is open, we set the `max-height` property of
// `compose-textarea` so that the compose-box's maximum extent
// does not overlap the last message in the current stream.is the
// right size to leave a tiny bit of space after the last message
// of the current stream.
// Compute bottom_whitespace_height if not provided by caller.
if (bottom_whitespace_height === undefined) {
const h = narrow_window ? left_userlist_get_new_heights() : get_new_heights();
bottom_whitespace_height = h.bottom_whitespace_height;
}
const compose_height = Number.parseInt($("#compose").outerHeight(), 10);
const compose_textarea_height = Number.parseInt($("#compose-textarea").outerHeight(), 10);
const compose_non_textarea_height = compose_height - compose_textarea_height;
$("#compose-textarea").css(
"max-height",
// The 10 here leaves space for the selected message border.
bottom_whitespace_height - compose_non_textarea_height - 10,
);
}
export function resize_bottom_whitespace(h) {
$("#bottom_whitespace").height(h.bottom_whitespace_height);
// The height of the compose box is tied to that of
// bottom_whitespace, so update it if necessary.
//
// reset_compose_textarea_max_height cannot compute the right
// height correctly while compose is hidden. This is OK, because
// we also resize compose every time it is opened.
if ($(".message_comp").is(":visible")) {
reset_compose_textarea_max_height(h.bottom_whitespace_height);
}
}
export function resize_stream_filters_container(h) {