compose: Make a toggler for full screen size compose box.

This commit makes a working toggler in compose_actions that changes the
max height and max height accordingly making the compose box full size.
The compose_height.js maintains the state of the height of the compose
box and according to it, the toggler updates the height. Also, when the
compose box is closed, the compose box is reset to it's default behaviour
and height as expected. So, everytime user need not toggle for every
message.

Fixes #17660

static/js/compose.js

@@ -12,6 +12,7 @@ import * as channel from "./channel";
 import * as common from "./common";
 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";
@@ -1322,6 +1323,17 @@ export function initialize() {
         clear_preview_area();
     });
 
+    // Expansion of composebox from original height to full height
+    $("#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

@@ -7,6 +7,7 @@ import * as channel from "./channel";
 import * as common from "./common";
 import * as compose from "./compose";
 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";
@@ -269,6 +270,8 @@ 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,44 @@
+// Making this similar to compose_state.js
+
+import $ from "jquery";
+
+import * as compose_ui from "./compose_ui";
+
+const compose_textarea = $("#compose-textarea");
+let is_full_size = false; // true or false
+
+function get_expected_full_height() {
+    // This returns the full size of the compose box
+    // Panels can have different height and this calculates it accordignly
+    return window.innerHeight - 138 - Number.parseInt($("#panels").css("height"), 10);
+}
+
+// Some functions to handle the state explicitely
+export function set_is_full_size(is_full) {
+    is_full_size = is_full;
+}
+
+export function get_is_full_size() {
+    return is_full_size;
+}
+
+export function make_compose_box_full_size() {
+    set_is_full_size(true);
+
+    compose_textarea.css("max-height", get_expected_full_height());
+    compose_textarea.css("height", get_expected_full_height());
+    $("#floating_recipient_bar").css("z-index", -1);
+
+    $("#collapse_composebox_button").show();
+    $("#expand_composebox_button").hide();
+}
+
+export function make_compose_box_original_size() {
+    set_is_full_size(false);
+
+    compose_textarea.css("max-height", "calc(50vh - 50px)");
+    $("#floating_recipient_bar").css("z-index", 98);
+
+    $("#collapse_composebox_button").hide();
+    $("#expand_composebox_button").show();
+}

templates/zerver/app/compose.html

@@ -101,6 +101,8 @@
                                     <a role="button" id="undo_markdown_preview" class="message-control-button fa fa-edit" aria-label="{{ _('Write') }}" tabindex=0 style="display:none;" title="{{ _('Write') }}"></a>
                                     <a role="button" class="message-control-button fa fa-video-camera video_link" aria-label="{{ _('Add video call') }}" tabindex=0 title="{{ _('Add video call') }}"></a>
                                     <a role="button" class="message-control-button fa fa-smile-o" aria-label="{{_('Add emoji')}}" id="emoji_map" tabindex=0 title="{{ _('Add emoji') }}"></a>
+                                    <a role="button" class="message-control-button fa fa-expand" aria-label="{{_('Expand composebox')}}" id="expand_composebox_button" tabindex=0 title="{{ _('Expand composebox') }}"></a>
+                                    <a role="button" class="message-control-button fa fa-compress" aria-label="{{_('Collapse composebox')}}" id="collapse_composebox_button" tabindex=0 style="display:none;" title="{{ _('Collapse composebox') }}"></a>
                                     {% if giphy_api_available %}
                                     <a role="button" class="message-control-button" aria-label="{{_('Add GIF')}}" id="compose_box_giphy_grid" title="{{ _('Add GIF') }}">
                                         <img class="compose_giphy_logo" tabindex=0 src="/static/images/GIPHY_logo.png">