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_height.js

@@ -0,0 +1,29 @@
+"use strict";
+
+const {strict: assert} = require("assert");
+
+const autosize = require("autosize");
+
+const {mock_cjs, zrequire} = require("../zjsunit/namespace");
+const {run_test} = require("../zjsunit/test");
+const $ = require("../zjsunit/zjquery");
+
+mock_cjs("jquery", $);
+
+const compose_height = zrequire("compose_height");
+
+run_test("test_compose_height_changes", (override) => {
+    let autosize_destroyed = false;
+    override(autosize, "destroy", () => {
+        autosize_destroyed = true;
+    });
+
+    compose_height.make_compose_box_full_size();
+    assert.ok($("#compose").hasClass("compose-fullscreen"));
+    assert.ok(compose_height.is_full_size());
+    assert.ok(autosize_destroyed);
+
+    compose_height.make_compose_box_original_size();
+    assert.ok(!$("#compose").hasClass("compose-fullscreen"));
+    assert.ok(!compose_height.is_full_size());
+});

static/js/compose.js

@@ -14,6 +14,7 @@ import * as common from "./common";
 import * as compose_actions from "./compose_actions";
 import * as compose_error from "./compose_error";
 import * as compose_fade from "./compose_fade";
+import * as compose_height from "./compose_height";
 import * as compose_pm_pill from "./compose_pm_pill";
 import * as compose_state from "./compose_state";
 import * as compose_ui from "./compose_ui";
@@ -1320,6 +1321,16 @@ export function initialize() {
         clear_preview_area();
     });
 
+    $("#compose").on("click", ".expand_composebox_button", (e) => {
+        e.preventDefault();
+        compose_height.make_compose_box_full_size();
+    });
+
+    $("#compose").on("click", ".collapse_composebox_button", (e) => {
+        e.preventDefault();
+        compose_height.make_compose_box_original_size();
+    });
+
     uppy = upload.setup_upload({
         mode: "compose",
     });

static/js/compose_actions.js

@@ -8,6 +8,7 @@ import * as common from "./common";
 import * as compose from "./compose";
 import * as compose_actions from "./compose_actions";
 import * as compose_fade from "./compose_fade";
+import * as compose_height from "./compose_height";
 import * as compose_pm_pill from "./compose_pm_pill";
 import * as compose_state from "./compose_state";
 import * as compose_ui from "./compose_ui";
@@ -118,11 +119,15 @@ function clear_box() {
 }
 
 export function autosize_message_content() {
-    autosize($("#compose-textarea"), {
-        callback() {
-            maybe_scroll_up_selected_message();
-        },
-    });
+    if (compose_height.is_full_size()) {
+        maybe_scroll_up_selected_message();
+    } else {
+        autosize($("#compose-textarea"), {
+            callback() {
+                maybe_scroll_up_selected_message();
+            },
+        });
+    }
 }
 
 export function expand_compose_box() {
@@ -275,6 +280,9 @@ export function start(msg_type, opts) {
 }
 
 export function cancel() {
+    // As user closes the compose box, restore the compose box max height
+    compose_height.make_compose_box_original_size();
+
     $("#compose-textarea").height(40 + "px");
 
     if (page_params.narrow !== undefined) {

static/js/compose_height.js

@@ -0,0 +1,39 @@
+import autosize from "autosize";
+import $ from "jquery";
+
+let full_size_status = false; // true or false
+
+// Some functions to handle the state explicitely
+export function set_full_size(is_full) {
+    full_size_status = is_full;
+}
+
+export function is_full_size() {
+    return full_size_status;
+}
+
+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();
+}
+
+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();
+}

static/js/compose_ui.js

@@ -1,14 +1,17 @@
 import autosize from "autosize";
 import $ from "jquery";
 
+import * as compose_height from "./compose_height";
 import {$t} from "./i18n";
 import * as people from "./people";
 import * as user_status from "./user_status";
 
 export function autosize_textarea(textarea) {
     // Since this supports both compose and file upload, one must pass
     // in the text area to autosize.
-    autosize.update(textarea);
+    if (!compose_height.is_full_size()) {
+        autosize.update(textarea);
+    }
 }
 
 export function smart_insert(textarea, syntax) {

static/styles/compose.css

@@ -184,11 +184,37 @@
     margin: auto;
 }
 
+#compose_top_right {
+    position: absolute;
+    right: 16px;
+    top: -1px;
+
+    a {
+        color: hsl(0, 0%, 0%);
+        font-size: 20px;
+        font-weight: 600;
+        opacity: 0.6;
+        text-decoration: none;
+
+        &:hover {
+            opacity: 1;
+        }
+    }
+}
+
+.collapse_composebox_button {
+    display: none;
+}
+
 #compose_close {
     display: none;
     position: absolute;
     right: 0;
-    opacity: 0.7;
+    opacity: 0.6;
+
+    &:hover {
+        opacity: 1;
+    }
 }
 
 .compose_invite_user,
@@ -525,3 +551,56 @@ a.compose_control_button.hide {
         margin-left: 5px;
     }
 }
+
+#compose.compose-fullscreen {
+    height: 100%;
+    z-index: 99;
+}
+
+.compose-fullscreen {
+    #compose-container {
+        margin-top: 50px;
+        height: calc(100% - 50px);
+    }
+
+    #compose-content {
+        height: 100%;
+        display: flex;
+        flex-flow: column;
+
+        .message_comp {
+            flex: 1;
+            display: flex !important;
+            flex-flow: column;
+
+            .composition-area {
+                flex: 1;
+            }
+        }
+    }
+
+    #send_message_form {
+        height: 100%;
+
+        .compose_table {
+            height: 100%;
+            display: flex;
+            flex-flow: column;
+        }
+    }
+
+    .messagebox-wrapper {
+        flex: 1;
+
+        .messagebox {
+            height: 100%;
+            display: flex;
+            flex-flow: column;
+        }
+    }
+
+    #compose-textarea {
+        max-height: none !important;
+        flex: 1;
+    }
+}

static/templates/compose.hbs

@@ -56,6 +56,10 @@
         <div id="out-of-view-notification" class="notification-alert"></div>
         <div class="composition-area">
             <button type="button" class="close" id='compose_close' title="{{t 'Cancel compose' }} (Esc)">&times;</button>
+            <div id="compose_top_right">
+                <a role="button" class="expand_composebox_button fa fa-angle-up" aria-label="{{t 'Expand composebox' }}" tabindex=0 title="{{t 'Expand composebox' }}"></a>
+                <a role="button" class="collapse_composebox_button fa fa-angle-down" aria-label="{{t 'Collapse composebox' }}" tabindex=0 title="{{t 'Collapse composebox' }}"></a>
+            </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" maxlength="10000" aria-label="{{t 'Compose your message here...' }}"></textarea>
                             <div class="scrolling_list preview_message_area" data-simplebar id="preview_message_area" style="display:none;">