From 8aa982f7bad30ff7d43701ee8d95815bc61a56fe Mon Sep 17 00:00:00 2001
From: Alexandra Ciobica <alexandraciobica@gmail.com>
Date: Sun, 28 Apr 2019 22:32:38 +0200
Subject: [PATCH] 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       |  1 +
 static/js/user_status_ui.js       | 21 +++++++++++++++++++++
 static/styles/app_components.scss |  6 ++++++
 templates/zerver/app/index.html   |  3 +++
 4 files changed, 31 insertions(+)

diff --git a/static/js/click_handlers.js b/static/js/click_handlers.js
index 6ee72cb3a6..121d466cdc 100644
--- a/static/js/click_handlers.js
+++ b/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();
     });
 
diff --git a/static/js/user_status_ui.js b/static/js/user_status_ui.js
index b3a69f2805..36ab410813 100644
--- a/static/js/user_status_ui.js
+++ b/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();
     });
 };
 
diff --git a/static/styles/app_components.scss b/static/styles/app_components.scss
index 8e73329360..32e38b1d2c 100644
--- a/static/styles/app_components.scss
+++ b/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 {
diff --git a/templates/zerver/app/index.html b/templates/zerver/app/index.html
index 1c9c07920d..2d1d9f68d8 100644
--- a/templates/zerver/app/index.html
+++ b/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>