layout: Introduce a #compose-content div.

This should make it more intuitive to add
new elements to the compose box (such as
banners), and it also makes it a bit more
clear for styling purposes that the same
geometry happens whether the compose box
is open or the buttons are visible.

I lifted the #compose_container div into
the server template.  It's not totally
clear to me why we need both #compose
and #compose_container, but there are
some scary comments about 1400px that
made me too timid to address that quirk.

In passing I removed a clearly redundant
click handler.

static/js/click_handlers.js

@@ -686,8 +686,7 @@ export function initialize() {
         popovers.hide_all();
     }
 
-    $("body").on("click", "#compose_buttons", handle_compose_click);
-    $("body").on("click", ".compose-content", handle_compose_click);
+    $("body").on("click", "#compose-content", handle_compose_click);
 
     $("body").on("click", "#compose_close", () => {
         compose_actions.cancel();

static/js/compose.js

@@ -1091,10 +1091,9 @@ export function warn_if_mentioning_unsubscribed_user(mentioned) {
 }
 
 export function render_compose_box() {
-    const $compose = $("#compose");
-    $compose.append(
+    $("#compose-container").append(
         render_compose({
-            embedded: $compose.attr("data-embedded") === "",
+            embedded: $("#compose").attr("data-embedded") === "",
             file_upload_enabled: page_params.max_file_upload_size_mib > 0,
             giphy_enabled: giphy.is_giphy_enabled(),
         }),

static/js/scroll_bar.js

@@ -59,13 +59,13 @@ export function initialize() {
         });
 
         $("#compose").css("left", "-" + sbWidth + "px");
-        $(".compose-content").css({left: sbWidth + "px", "margin-right": 7 + sbWidth + "px"});
+        $("#compose-content").css({left: sbWidth + "px", "margin-right": 7 + sbWidth + "px"});
         $("#keyboard-icon").css({"margin-right": sbWidth + "px"});
 
         $("head").append(
             "<style> @media (min-width: " +
                 media_breakpoints.xl_min +
-                ") { .compose-content, .header-main .column-middle { margin-right: " +
+                ") { #compose-content, .header-main .column-middle { margin-right: " +
                 (right_sidebar_width + sbWidth) +
                 "px !important; } } " +
                 "@media (min-width: " +

static/styles/compose.css

@@ -59,7 +59,7 @@
 }
 
 /* Main geometry for this element is in zulip.css */
-.compose-content {
+#compose-content {
     border-top: 1px solid hsla(0, 0%, 0%, 0.07);
     transition: background-color 200ms linear;
     padding: 4px 4px 8px 4px;
@@ -518,13 +518,13 @@ a.undo_markdown_preview {
 
 /* This max-width must be synced with message_viewport.is_narrow */
 @media (width < $xl_min) {
-    .compose-content {
+    #compose-content {
         margin-right: 7px;
     }
 }
 
 @media (width < $md_min) {
-    .compose-content {
+    #compose-content {
         margin-right: 7px;
         margin-left: 7px;
     }
@@ -536,7 +536,7 @@ a.undo_markdown_preview {
         min-width: 95px;
     }
 
-    .compose-content {
+    #compose-content {
         margin-right: 5px;
         margin-left: 5px;
     }

static/styles/night_mode.css

@@ -305,7 +305,7 @@ on a dark background, and don't change the dark labels dark either. */
     }
 
     /* Not that .message_row (below) needs to be more contrast on dark mode */
-    .compose-content,
+    #compose-content,
     .message_list .recipient_row,
     .message_row,
     .draft-row .draft-info-box,

static/styles/zulip.css

@@ -404,7 +404,7 @@ p.n-margin {
 }
 
 .column-middle,
-.compose-content {
+#compose-content {
     margin-right: $right_sidebar_width;
     margin-left: $left_sidebar_width;
     position: relative;

static/templates/compose.hbs

@@ -1,5 +1,5 @@
-<div id="compose-container">
-    <div id="compose_controls" class="compose-content new-style">
+<div id="compose-content">
+    <div id="compose_controls" class="new-style">
         <div id="compose_buttons">
             <span class="new_message_button reply_button_container">
                 <button type="button" class="button small rounded compose_reply_button"
@@ -38,7 +38,7 @@
             </span>
         </div>
     </div>
-    <div class="message_comp compose-content">
+    <div class="message_comp">
         <div class="alert" id="compose-send-status">
             <span class="compose-send-status-close">&times;</span>
             <span id="compose-error-msg"></span>

templates/zerver/app/index.html

@@ -126,7 +126,9 @@
                     </div>
                     {% include "zerver/app/home.html" %}
                 </div>
-                <div id="compose" {% if embedded %}data-embedded{% endif %}></div>
+                <div id="compose" {% if embedded %}data-embedded{% endif %}>
+                    <div id="compose-container"></div>
+                </div>
             </div><!--/tab-content-->
         </div>
         <div class="column-right">