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: 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

1
web/shared/icons/maximize-diagonal.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#000" d="m10.34 1-.01-.01c0-.36.29-.66.66-.66h4c.37 0 .67.29.67.67v4a.67.67 0 0 1-1.33 0V2.61l-3.54 3.53a.665.665 0 0 1-.94-.94l3.55-3.53H11c-.36 0-.66-.3-.66-.67ZM1.67 11v2.4l3.54-3.54a.665.665 0 0 1 .94.94L2.6 14.34H5a.67.67 0 0 1 0 1.33H1c-.36 0-.66-.3-.66-.67v-4a.665.665 0 1 1 1.33 0Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 405 B

14
web/src/compose_actions.ts
View File

@@ -138,10 +138,22 @@ let autosize_callback_opts: ComposeActionsStartOpts;
export function autosize_message_content(opts: ComposeActionsStartOpts): void {
if (!compose_ui.is_expanded()) {
autosize_callback_opts = opts;
let has_resized_once = false;
$("textarea#compose-textarea")
.off("autosize:resized")
.one("autosize:resized", () => {
.on("autosize:resized", (e) => {
if (!has_resized_once) {
has_resized_once = true;
maybe_scroll_up_selected_message(autosize_callback_opts);
}
const height = $(e.currentTarget).height()!;
const max_height = Number.parseFloat($(e.currentTarget).css("max-height"));
// We add 5px to account for minor differences in height detected in Chrome.
if (height + 5 >= max_height) {
$("#compose").addClass("automatically-expanded");
} else {
$("#compose").removeClass("automatically-expanded");
}
});
autosize($("textarea#compose-textarea"));
}

7
web/src/compose_setup.js
View File

@@ -439,6 +439,13 @@ export function initialize() {
e.preventDefault();
e.stopPropagation();
compose_ui.make_compose_box_intermediate_size();
});
$("#compose").on("click", ".maximize-composebox-button", (e) => {
e.preventDefault();
e.stopPropagation();
compose_ui.make_compose_box_full_size();
});

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);

11
web/src/resize.ts
View File

@@ -110,17 +110,18 @@ export function reset_compose_message_max_height(bottom_whitespace_height?: numb
const compose_non_textarea_height = compose_height - compose_textarea_height;
// We ensure that the last message is not overlapped by compose box.
// TODO: Remove subtraction of 2 when we remove the margin in #29953
$("textarea#compose-textarea").css(
"max-height",
// 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,
// 10 for the padding and 2 for the margin.
bottom_whitespace_height - compose_non_textarea_height - 2 - 10,
);
$("#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,
// Because <div> max-height doesn't include padding, we subtract
// 2 for the margin.
bottom_whitespace_height - compose_non_textarea_height - 2,
);
$("#scroll-to-bottom-button-container").css("bottom", compose_height);
compose_ui.autosize_textarea($("#compose-textarea"));

9
web/src/tippyjs.ts
View File

@@ -268,9 +268,12 @@ export function initialize(): void {
});
tippy.delegate("body", {
target: ["#compose_close", ".expand-composebox-button", ".collapse-composebox-button"].join(
",",
),
target: [
"#compose_close",
".expand-composebox-button",
".collapse-composebox-button",
".maximize-composebox-button",
].join(","),
delay: LONG_HOVER_DELAY,
appendTo: () => document.body,
onHidden(instance) {

27
web/styles/compose.css
View File

@@ -345,7 +345,8 @@
}
}
.collapse-composebox-button {
.collapse-composebox-button,
.maximize-composebox-button {
display: none;
}
}
@@ -830,7 +831,7 @@ textarea.new_message_textarea {
height: 1.5em;
max-height: 22em;
margin: 0;
resize: vertical !important;
resize: none !important;
border-radius: 3px 3px 0 0;
border: none;
background-color: hsl(0deg 0% 100%);
@@ -1455,7 +1456,8 @@ textarea.new_message_textarea {
}
}
#compose.compose-fullscreen {
#compose.compose-fullscreen,
#compose.compose-intermediate {
z-index: 99;
#compose-container {
@@ -1490,7 +1492,10 @@ textarea.new_message_textarea {
height: 0;
flex: 1;
}
}
#compose.compose-fullscreen {
.maximize-composebox-button,
.expand-composebox-button {
display: none;
}
@@ -1500,6 +1505,22 @@ textarea.new_message_textarea {
}
}
#compose.compose-intermediate,
#compose.automatically-expanded {
.collapse-composebox-button,
.expand-composebox-button {
display: none;
}
.maximize-composebox-button {
display: flex;
}
}
#compose.compose-intermediate {
height: var(--max-unmaximized-compose-height);
}
.preview_mode {
#preview-message-area-container {
/* When in preview mode, we display the

1
web/templates/compose.hbs
View File

@@ -78,6 +78,7 @@
</div>
</div>
<div class="composebox-buttons">
<button type="button" class="maximize-composebox-button zulip-icon zulip-icon-maximize-diagonal" aria-label="{{t 'Maximize compose box' }}" data-tippy-content="{{t 'Maximize compose box' }}"></button>
<button type="button" class="expand-composebox-button zulip-icon zulip-icon-expand-diagonal" aria-label="{{t 'Expand compose box' }}" data-tippy-content="{{t 'Expand compose box' }}"></button>
<button type="button" class="collapse-composebox-button zulip-icon zulip-icon-collapse-diagonal" aria-label="{{t 'Collapse compose box' }}" data-tippy-content="{{t 'Collapse compose box' }}"></button>
</div>