compose: Add support for full size compose box.

This commit makes a working toggler in compose_actions that adds the
compose-fullscreen class to the compose that removes the max-height
from the compose textarea and adds flex elements above so that the
height automatically adjust with the device height. This results in
making the compose box full screen sized.

The compose_height.js maintains the state of the height of the compose
box. Also, when the compose box is closed, the compose box is reset to
it's default behaviour and original height. So, everytime user need
not toggle off the compose full size and only for specific message
it is used.

It also adds destroy autosize on compose_height state change.
It destroys the autosize of textarea when the full
screen sized compose box is toggled on. And everytime when it is
turned off, it reinitialises the autosize. This also adds a
condition in autosize_textarea to only autosize when composebox
is not in full height state.

Fixes #17660

frontend_tests/node_tests/compose_ui.js

@@ -406,3 +406,19 @@ run_test("quote_and_reply", ({override}) => {
         "translated: @_**Steve Stephenson|90** [said](https://chat.zulip.org/#narrow/stream/92-learning/topic/Tornado):\n```quote\nTesting with compose-box containing whitespaces and newlines only.\n```\n%",
     );
 });
+
+run_test("test_compose_height_changes", ({override}) => {
+    let autosize_destroyed = false;
+    override(autosize, "destroy", () => {
+        autosize_destroyed = true;
+    });
+
+    compose_ui.make_compose_box_full_size();
+    assert.ok($("#compose").hasClass("compose-fullscreen"));
+    assert.ok(compose_ui.is_full_size());
+    assert.ok(autosize_destroyed);
+
+    compose_ui.make_compose_box_original_size();
+    assert.ok(!$("#compose").hasClass("compose-fullscreen"));
+    assert.ok(!compose_ui.is_full_size());
+});

static/js/compose.js

@@ -830,6 +830,16 @@ export function initialize() {
         clear_preview_area();
     });
 
+    $("#compose").on("click", ".expand_composebox_button", (e) => {
+        e.preventDefault();
+        compose_ui.make_compose_box_full_size();
+    });
+
+    $("#compose").on("click", ".collapse_composebox_button", (e) => {
+        e.preventDefault();
+        compose_ui.make_compose_box_original_size();
+    });
+
     uppy = upload.setup_upload({
         mode: "compose",
     });

static/js/compose_actions.js

@@ -120,12 +120,14 @@ function clear_box() {
 }
 
 export function autosize_message_content() {
+    if (!compose_ui.is_full_size()) {
         autosize($("#compose-textarea"), {
             callback() {
                 maybe_scroll_up_selected_message();
             },
         });
     }
+}
 
 export function expand_compose_box() {
     $("#compose_close").show();
@@ -281,6 +283,9 @@ export function start(msg_type, opts) {
 }
 
 export function cancel() {
+    // As user closes the compose box, restore the compose box max height
+    compose_ui.make_compose_box_original_size();
+
     $("#compose-textarea").height(40 + "px");
 
     if (page_params.narrow !== undefined) {

static/js/compose_ui.js

@@ -5,11 +5,24 @@ import {$t} from "./i18n";
 import * as people from "./people";
 import * as user_status from "./user_status";
 
+let full_size_status = false; // true or false
+
+// Some functions to handle the full size status explicitly
+export function set_full_size(is_full) {
+    full_size_status = is_full;
+}
+
+export function is_full_size() {
+    return full_size_status;
+}
+
 export function autosize_textarea(textarea) {
     // Since this supports both compose and file upload, one must pass
     // in the text area to autosize.
+    if (!is_full_size()) {
         autosize.update(textarea);
     }
+}
 
 export function smart_insert(textarea, syntax) {
     function is_space(c) {
@@ -130,3 +143,31 @@ export function wrap_text_with_markdown(textarea, prefix, suffix) {
         textarea.range(range.start, range.end).range(prefix + range.text + suffix);
     }
 }
+
+export function make_compose_box_full_size() {
+    set_full_size(true);
+
+    // The autosize should be destroyed for the full size compose
+    // box else it will interfare and shrink its size accordingly.
+    autosize.destroy($("#compose-textarea"));
+
+    $("#compose").addClass("compose-fullscreen");
+
+    $(".collapse_composebox_button").show();
+    $(".expand_composebox_button").hide();
+    $("#compose-textarea").trigger("focus");
+}
+
+export function make_compose_box_original_size() {
+    set_full_size(false);
+
+    $("#compose").removeClass("compose-fullscreen");
+
+    // Again initialise the compose textarea as it was destroyed
+    // when compose box was made full screen
+    autosize($("#compose-textarea"));
+
+    $(".collapse_composebox_button").hide();
+    $(".expand_composebox_button").show();
+    $("#compose-textarea").trigger("focus");
+}

static/styles/compose.css

@@ -65,6 +65,9 @@
     padding: 4px 4px 8px 4px;
     border-left: 1px solid hsl(0, 0%, 93%);
     border-right: 1px solid hsl(0, 0%, 93%);
+    height: 100%;
+    display: flex;
+    flex-flow: column;
 }
 
 .ztable_comp_col1 {
@@ -85,6 +88,10 @@
 }
 
 .compose_table {
+    height: 100%;
+    display: flex;
+    flex-flow: column;
+
     .stream-selection-header-colorblock {
         &.message_header_private_message {
             border-radius: 3px 0 0 3px;
@@ -147,6 +154,11 @@
 
 #send_message_form {
     margin: 0;
+    height: 100%;
+
+    .messagebox-wrapper {
+        flex: 1;
+    }
 
     .messagebox {
         /* normally 5px 14px; pull in the right and bottom a bit */
@@ -155,6 +167,9 @@
         background: none;
         box-shadow: none;
         border: none;
+        height: 100%;
+        display: flex;
+        flex-flow: column;
     }
 
     .message_content {
@@ -198,11 +213,30 @@
     margin: auto;
 }
 
-#compose_close {
+#compose_top_right {
-    display: none;
     position: absolute;
     right: 0;
-    opacity: 0.7;
+    float: right;
+
+    button {
+        background: transparent;
+        font-size: 20px;
+        font-weight: bold;
+        line-height: 20px;
+        opacity: 0.6;
+        border: 0;
+        padding: 0;
+        margin-left: 4px;
+
+        &:hover {
+            opacity: 1;
+        }
+    }
+}
+
+.collapse_composebox_button,
+#compose_close {
+    display: none;
 }
 
 .compose_invite_user,
@@ -306,6 +340,7 @@ div[id^="message-edit-send-status"],
 
 .composition-area {
     position: relative;
+    flex: 1;
 }
 
 textarea.new_message_textarea {
@@ -543,3 +578,24 @@ a.compose_control_button.hide {
         margin-left: 5px;
     }
 }
+
+#compose.compose-fullscreen {
+    height: 100%;
+    z-index: 99;
+
+    #compose-container {
+        margin-top: 50px;
+        height: calc(100% - 50px);
+    }
+
+    .message_comp {
+        flex: 1;
+        display: flex !important;
+        flex-flow: column;
+    }
+
+    #compose-textarea {
+        max-height: none !important;
+        flex: 1;
+    }
+}

static/templates/compose.hbs

@@ -55,7 +55,11 @@
         <div id="compose_private_stream_alert" class="alert home-error-bar"></div>
         <div id="out-of-view-notification" class="notification-alert"></div>
         <div class="composition-area">
+            <div id="compose_top_right">
+                <button type="button" class="expand_composebox_button fa fa-angle-up" aria-label="{{t 'Expand compose' }}" tabindex=0 title="{{t 'Expand compose' }}"></button>
+                <button type="button" class="collapse_composebox_button fa fa-angle-down" aria-label="{{t 'Collapse compose' }}" tabindex=0 title="{{t 'Collapse compose' }}"></button>
                 <button type="button" class="close" id='compose_close' title="{{t 'Cancel compose' }} (Esc)">&times;</button>
+            </div>
             <form id="send_message_form" action="/json/messages" method="post">
                 {{ csrf_input }}
                 <div class="compose_table">
@@ -82,7 +86,7 @@
                             </div>
                         </div>
                     </div>
-                    <div>
+                    <div class="messagebox-wrapper">
                         <div class="messagebox">
                             <textarea class="new_message_textarea" name="content" id='compose-textarea' placeholder="{{t 'Compose your message here' }}" tabindex="0" aria-label="{{t 'Compose your message here...' }}"></textarea>
                             <div class="scrolling_list preview_message_area" data-simplebar id="preview_message_area" style="display:none;">