From 842b14b916c96e49c11cfe5c7da523a1f16725bd Mon Sep 17 00:00:00 2001
From: Steve Howell <showell@zulip.com>
Date: Thu, 10 Jun 2021 14:52:29 +0000
Subject: [PATCH] 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     | 3 +--
 static/js/compose.js            | 5 ++---
 static/js/scroll_bar.js         | 4 ++--
 static/styles/compose.css       | 8 ++++----
 static/styles/night_mode.css    | 2 +-
 static/styles/zulip.css         | 2 +-
 static/templates/compose.hbs    | 6 +++---
 templates/zerver/app/index.html | 4 +++-
 8 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/static/js/click_handlers.js b/static/js/click_handlers.js
index 15f9f23a7c..5366103bf2 100644
--- a/static/js/click_handlers.js
+++ b/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();
diff --git a/static/js/compose.js b/static/js/compose.js
index ad8e5e4851..3b5f5b1921 100644
--- a/static/js/compose.js
+++ b/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(),
         }),
diff --git a/static/js/scroll_bar.js b/static/js/scroll_bar.js
index fc0c2660d7..2031fa3b5d 100644
--- a/static/js/scroll_bar.js
+++ b/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: " +
diff --git a/static/styles/compose.css b/static/styles/compose.css
index 1b68d1553e..56c0080d6d 100644
--- a/static/styles/compose.css
+++ b/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;
     }
diff --git a/static/styles/night_mode.css b/static/styles/night_mode.css
index 5ed287851c..a577812daf 100644
--- a/static/styles/night_mode.css
+++ b/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,
diff --git a/static/styles/zulip.css b/static/styles/zulip.css
index 43f37a6455..94eeea8f62 100644
--- a/static/styles/zulip.css
+++ b/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;
diff --git a/static/templates/compose.hbs b/static/templates/compose.hbs
index 5a50171bc3..c6c268ade8 100644
--- a/static/templates/compose.hbs
+++ b/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>
diff --git a/templates/zerver/app/index.html b/templates/zerver/app/index.html
index 6ab366d8ed..c18fea81ba 100644
--- a/templates/zerver/app/index.html
+++ b/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">