user status: Add "clear message (x)" button for status message input.

This adds the same "x" button as we have in "stream search" or "people
search" to the user status modal.

The button is shown if someone types something, or if the status
message was already set (meaning there was already a value in the
input field). If the input field is empty, the button is not visible.

This fixes the follow-up comments from #12179.

static/js/click_handlers.js

@@ -209,6 +209,7 @@ exports.initialize = function () {
         e.stopPropagation();
         var user_status_value = $(e.currentTarget).attr("data-user-status-value");
         $("input.user_status").val(user_status_value);
+        user_status_ui.toggle_clear_message_button();
         user_status_ui.update_button();
     });
 

static/js/user_status_ui.js

@@ -24,6 +24,7 @@ exports.open_overlay = function () {
     field.val(old_status_text);
     field.select();
     field.focus();
+    exports.toggle_clear_message_button();
 
     var button = exports.submit_button();
     button.attr('disabled', true);
@@ -66,6 +67,20 @@ exports.update_button = function () {
     }
 };
 
+exports.toggle_clear_message_button = function () {
+    if (exports.input_field().val() !== '') {
+        $('#clear_status_message_button').prop('disabled', false);
+    } else {
+        $('#clear_status_message_button').prop('disabled', true);
+    }
+};
+
+exports.clear_message = function () {
+    var field = exports.input_field();
+    field.val('');
+    $('#clear_status_message_button').prop('disabled', true);
+};
+
 exports.initialize = function () {
     $('body').on('click', '.user_status_overlay .set_user_status', function () {
         exports.submit_new_status();
@@ -73,6 +88,12 @@ exports.initialize = function () {
 
     $('body').on('keyup', '.user_status_overlay input.user_status', function () {
         exports.update_button();
+        exports.toggle_clear_message_button();
+    });
+
+    $('#clear_status_message_button').on('click', function () {
+        exports.clear_message();
+        exports.update_button();
     });
 };
 

static/styles/app_components.scss

@@ -327,6 +327,12 @@
     -webkit-box-shadow: none;
     -moz-box-shadow: none;
     z-index: 5;
+
+    .user_status_overlay & {
+        margin-left: -26px;
+        right: 0;
+        padding-top: 6px;
+    }
 }
 
 .grey-box {

templates/zerver/app/index.html

@@ -161,6 +161,9 @@
             <div class="modal-body">
                 <label for="user_status">Status message</label>
                 <input type="text" class="user_status" maxlength="60" />
+                <button type="button" class="btn clear_search_button" id="clear_status_message_button" disabled="disabled">
+                    <i class="fa fa-remove" aria-hidden="true"></i>
+                </button>
             </div>
             <div class="user-status-options">
                 <button type="button" class="button no-style user-status-value" data-user-status-value="In a meeting">In a meeting</button>