compose: Never hide send button.

`Press Enter to send` used to hide `Send` button, we remove that
behaviour.

We show the current state of `Enter` hotkey action via text below
`Send` button which can toggle behaviour on click.

frontend_tests/node_tests/compose.js

@@ -317,12 +317,9 @@ test_ui("enter_with_preview_open", ({override}) => {
     // Test sending a message without content.
     $("#compose-textarea").val("");
     $("#compose .preview_message_area").show();
-    $("#enter_sends").prop("checked", true);
     user_settings.enter_sends = true;
 
     compose.enter_with_preview_open();
-
-    assert.ok($("#enter_sends").prop("checked"));
     assert.equal($("#compose-error-msg").html(), "never-been-set");
 });
 

frontend_tests/node_tests/composebox_typeahead.js

@@ -1144,7 +1144,6 @@ test("initialize", ({override, mock_template}) => {
 
     // select_on_focus()
 
-    override(compose, "toggle_enter_sends_ui", noop);
     let channel_patch_called = false;
     override(channel, "patch", (params) => {
         assert.equal(params.url, "/json/settings");
@@ -1153,20 +1152,22 @@ test("initialize", ({override, mock_template}) => {
 
         channel_patch_called = true;
     });
-    $("#enter_sends").is = () => false;
+    user_settings.enter_sends = false;
-    $("#enter_sends").trigger("click");
+    $(".enter_sends").trigger("click");
+    assert.equal(user_settings.enter_sends, true);
 
     // Now we re-run both .initialize() and the click handler, this time
     // with enter_sends: user_settings.enter_sends being true
-    $("#enter_sends").is = () => true;
+    user_settings.enter_sends = true;
-    $("#enter_sends").trigger("click");
+    $(".enter_sends").trigger("click");
+    assert.equal(user_settings.enter_sends, false);
 
     $("#stream_message_recipient_stream").off("focus");
     $("#stream_message_recipient_topic").off("focus");
     $("#private_message_recipient").off("focus");
     $("form#send_message_form").off("keydown");
     $("form#send_message_form").off("keyup");
-    $("#enter_sends").off("click");
+    $(".enter_sends").off("click");
     $("#private_message_recipient").off("blur");
     ct.initialize();
 

frontend_tests/node_tests/dispatch.js

@@ -28,7 +28,6 @@ const activity = mock_esm("../../static/js/activity");
 const alert_words_ui = mock_esm("../../static/js/alert_words_ui");
 const attachments_ui = mock_esm("../../static/js/attachments_ui");
 const bot_data = mock_esm("../../static/js/bot_data");
-const compose = mock_esm("../../static/js/compose");
 const composebox_typeahead = mock_esm("../../static/js/composebox_typeahead");
 const dark_theme = mock_esm("../../static/js/dark_theme");
 const emoji_picker = mock_esm("../../static/js/emoji_picker");
@@ -839,8 +838,6 @@ run_test("user_settings", ({override}) => {
         assert_same(user_settings.demote_inactive_streams, 2);
     }
 
-    override(compose, "toggle_enter_sends_ui", noop);
-
     event = event_fixtures.user_settings__enter_sends;
     user_settings.enter_sends = false;
     dispatch(event);

frontend_tests/puppeteer_lib/common.ts

@@ -265,9 +265,10 @@ class CommonUtils {
     }
 
     async ensure_enter_does_not_send(page: Page): Promise<void> {
-        await page.$eval("#enter_sends", (el) => {
+        await page.$eval(".enter_sends_false", (el) => {
-            if ((el as HTMLInputElement).checked) {
+            if ((el as HTMLElement).style.display !== "none") {
-                (el as HTMLInputElement).click();
+                // Click events gets propagated to `.enter_sends` which toggles the value.
+                (el as HTMLElement).click();
             }
         });
     }

static/js/compose.js

@@ -119,15 +119,6 @@ export function empty_topic_placeholder() {
     return $t({defaultMessage: "(no topic)"});
 }
 
-export function toggle_enter_sends_ui() {
-    const send_button = $("#compose-send-button");
-    if (user_settings.enter_sends) {
-        send_button.fadeOut();
-    } else {
-        send_button.fadeIn();
-    }
-}
-
 export function create_message_object() {
     // Topics are optional, and we provide a placeholder if one isn't given.
     let topic = compose_state.topic();
@@ -413,6 +404,7 @@ export function render_compose_box() {
             giphy_enabled: giphy.is_giphy_enabled(),
         }),
     );
+    $(`.enter_sends_${user_settings.enter_sends}`).show();
 }
 
 export function initialize() {

static/js/composebox_typeahead.js

@@ -1097,9 +1097,10 @@ export function initialize() {
     $("form#send_message_form").on("keydown", handle_keydown);
     $("form#send_message_form").on("keyup", handle_keyup);
 
-    $("#enter_sends").on("click", () => {
+    $(".enter_sends").on("click", () => {
-        user_settings.enter_sends = $("#enter_sends").is(":checked");
+        user_settings.enter_sends = !user_settings.enter_sends;
-        compose.toggle_enter_sends_ui();
+        $(`.enter_sends_${!user_settings.enter_sends}`).hide();
+        $(`.enter_sends_${user_settings.enter_sends}`).show();
 
         // Refocus in the content box so you can continue typing or
         // press Enter to send.
@@ -1111,10 +1112,6 @@ export function initialize() {
             data: {enter_sends: user_settings.enter_sends},
         });
     });
-    $("#enter_sends").prop("checked", user_settings.enter_sends);
-    if (user_settings.enter_sends) {
-        $("#compose-send-button").hide();
-    }
 
     // limit number of items so the list doesn't fall off the screen
     $("#stream_message_recipient_stream").typeahead({

static/js/server_events_dispatch.js

@@ -685,8 +685,8 @@ export function dispatch_normal_event(event) {
             }
             if (event.property === "enter_sends") {
                 user_settings.enter_sends = event.value;
-                $("#enter_sends").prop("checked", user_settings.enter_sends);
+                $(`.enter_sends_${!user_settings.enter_sends}`).hide();
-                compose.toggle_enter_sends_ui();
+                $(`.enter_sends_${user_settings.enter_sends}`).show();
                 break;
             }
             if (event.property === "presence_enabled") {

static/styles/compose.css

@@ -422,6 +422,7 @@ input.recipient_box {
 
 #compose-send-button {
     height: 25px;
+    width: 40px;
     padding-top: 3px;
     padding-bottom: 3px;
     margin-bottom: 0;
@@ -429,14 +430,24 @@ input.recipient_box {
     font-size: 0.9em;
 }
 
-#send_controls {
+.enter_sends {
-    font-size: 0.8em;
+    font-size: 12px;
-    height: 2.2em;
+    height: 14px;
+    padding-left: 4px;
+    opacity: 0.7;
 
-    .compose_checkbox_label {
+    &:hover {
-        color: hsl(0, 0%, 67%);
+        opacity: 1;
-        margin: 4px;
     }
+
+    .enter_sends_true,
+    .enter_sends_false {
+        display: none;
+    }
+}
+
+.compose_left_wrapper {
+    margin-right: auto;
 }
 
 #stream-message,
@@ -479,9 +490,11 @@ input.recipient_box {
 
 .compose_right_float_container {
     display: flex;
+    flex-direction: column;
+    align-items: flex-end;
     white-space: nowrap;
     gap: 4px;
-    margin-top: 10px;
+    margin-top: 2px;
 }
 
 a.compose_control_button {
@@ -515,12 +528,6 @@ a.compose_control_button.hide {
     cursor: ns-resize;
 }
 
-#enter_sends {
-    vertical-align: middle;
-    margin-top: -2px;
-    margin-right: 4px;
-}
-
 .inline-subscribe-error {
     margin-left: 5px;
 }

static/templates/compose.hbs

@@ -95,16 +95,27 @@
                             <div id="below-compose-content">
                                 <div class="compose_right_float_container order-3">
                                     <button type="submit" id="compose-send-button" class="button small send_message animated-purple-button" title="{{t 'Send' }} (Ctrl + Enter)">{{t 'Send' }}</button>
+                                    <div class="enter_sends order-2">
+                                        <label id="enter-sends-label" class="compose_checkbox_label tippy-zulip-tooltip" data-tippy-content="Click to switch">
+                                            <span class="enter_sends_true">
+                                                {{t 'Enter to send' }}
+                                            </span>
+                                            <span class="enter_sends_false">
+                                                {{t 'Ctrl + Enter to send' }}
+                                            </span>
+                                            <i class="fa fa-exchange" aria-hidden="true"></i>
+                                            <span class="enter_sends_true">
+                                                {{t "Ctrl + Enter to add a new line" }}
+                                            </span>
+                                            <span class="enter_sends_false">
+                                                {{t "Enter to add a new line" }}
+                                            </span>
+                                        </label>
+                                    </div>
                                 </div>
                                 {{> compose_control_buttons }}
                                 <div class="compose_right_float_container order-2">
                                     <span id="compose_limit_indicator"></span>
-                                    <div id="send_controls" class="new-style">
-                                        <label id="enter-sends-label" class="compose_checkbox_label checkbox">
-                                            <input type="checkbox" tabindex="0" id="enter_sends" />
-                                            <span></span>{{t 'Press Enter to send' }}
-                                        </label>
-                                    </div>
                                 </div>
                             </div>
                         </div>

static/templates/compose_control_buttons.hbs

@@ -1,4 +1,5 @@
-<div class="compose_control_buttons_container order-1">
+<div class="compose_left_wrapper order-1">
+    <div class="compose_control_buttons_container order-1">
         <input type="file" class="file_input notvisible pull-left" multiple />
         {{#if file_upload_enabled }}
         <a role="button" class="compose_control_button compose_upload_file fa fa-paperclip notdisplayed" aria-label="{{t 'Upload files' }}" tabindex=0 data-tippy-content="{{t 'Upload files' }}"></a>
@@ -16,4 +17,5 @@
         <div class="divider">|</div>
         <a role="button" class="message-control-link" tabindex=0 data-overlay-trigger="message-formatting">{{t 'Help' }}</a>
         <span id="sending-indicator"></span>
+    </div>
 </div>

tools/lib/capitalization.py

@@ -168,6 +168,9 @@ IGNORED_PHRASES = [
     r"University of California San Diego",
     # Used in stream creation form
     r"email hidden",
+    # Use in compose box.
+    r"to send",
+    r"to add a new line",
 ]
 
 # Sort regexes in descending order of their lengths. As a result, the