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

compose: Allow 3-way compose box resizing with new fixed expanded state.

Browse Source 
Apart from the normal (collapsed) and full screen sizes, a new expanded
state with the same size as the maximum a normal compose box can stretch
to when full (40% of the screen height) is now available. Now a user can
expand the compose box without it covering the full screen with a click.
The vertical resize icon in the bottom right corner of the compose box
is rendered useless so has been removed.

All three states can be cycled through by clicking the compose resize
button in the order: collapsed -> 40% of the screen -> full screen. When
a message naturally causes the compose box in its normal state to expand
up to 40% of the screen, clicking the resize button will take it to full
screen state.

Fixes: #29966.
This commit is contained in:
N-Shar-ma
2024-06-10 21:48:28 +05:30
committed by Tim Abbott
parent b432b269ee
commit 9bc1eb4bb9
8 changed files with 80 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
web/src/compose_ui.ts
View File

@@ -376,6 +376,8 @@ export function make_compose_box_full_size(): void {
// box else it will interfere and shrink its size accordingly.
autosize.destroy($("textarea#compose-textarea"));
$("#compose").removeClass("compose-intermediate");
$("#compose").removeClass("automatically-expanded");
$("#compose").addClass("compose-fullscreen");
// Set the `top` property of compose-box.
@@ -385,10 +387,29 @@ export function make_compose_box_full_size(): void {
$("textarea#compose-textarea").trigger("focus");
}
export function make_compose_box_intermediate_size(): void {
set_expanded_status(true, false);
// The autosize should be destroyed for the intermediate size compose
// box else it will interfere and shrink its size accordingly.
autosize.destroy($("textarea#compose-textarea"));
$("#compose").removeClass("compose-fullscreen");
$("#compose").removeClass("automatically-expanded");
$("#compose").addClass("compose-intermediate");
// Unset the `top` property of compose-box.
set_compose_box_top(false);
$("textarea#compose-textarea").trigger("focus");
}
export function make_compose_box_original_size(): void {
set_expanded_status(false);
$("#compose").removeClass("compose-fullscreen");
$("#compose").removeClass("compose-intermediate");
$("#compose").removeClass("automatically-expanded");
// Unset the `top` property of compose-box.
set_compose_box_top(false);