right-sidebar: Added clear-search button on user-list searchbar.

A clear-search option to clear the user-list searchbox has been added.
This feature was present in the main searchbar but absent elsewhere.
Fix a part of #3716.

static/js/activity.js

@@ -520,6 +520,17 @@ exports.searching = function () {
     return $('.user-list-filter').expectOne().is(':focus');
 };
 
+function update_clear_search_button() {
+    var focused = $('.user-list-filter').is(':focus');
+
+    // Show button iff the search input is focused, or has non-empty contents
+    if (focused || $('.user-list-filter').val()) {
+        $('#clear_search_people_button').removeAttr('disabled');
+    } else {
+        $('#clear_search_people_button').attr('disabled', 'disabled');
+    }
+}
+
 exports.escape_search = function () {
     var filter = $('.user-list-filter').expectOne();
     if (filter.val() === '') {
@@ -527,6 +538,7 @@ exports.escape_search = function () {
         return;
     }
     filter.val('');
+    update_clear_search_button();
     update_users_for_search();
 };
 
@@ -537,6 +549,14 @@ exports.initiate_search = function () {
 
 exports.blur_search = function () {
     $('.user-list-filter').blur();
+    update_clear_search_button();
+};
+
+exports.clear_search = function () {
+    $('.user-list-filter').val('');
+    $('.user-list-filter').blur();
+    update_clear_search_button();
+    update_users_for_search();
 };
 
 function maybe_select_person(e) {
@@ -562,13 +582,16 @@ function maybe_select_person(e) {
 
 function focus_user_filter(e) {
     e.stopPropagation();
+    update_clear_search_button();
 }
 
 $(function () {
     $(".user-list-filter").expectOne()
         .on('click', focus_user_filter)
         .on('input', update_users_for_search)
-        .on('keydown', maybe_select_person);
+        .on('keydown', maybe_select_person)
+        .on('blur', update_clear_search_button);
+    $('#clear_search_people_button').on('click', exports.clear_search);
 });
 
 

static/js/search.js

@@ -99,7 +99,7 @@ exports.initialize = function () {
     // Some of these functions don't actually need to be exported,
     // but the code was moved here from elsewhere, and it would be
     // more work to re-order everything and make them private.
-    $('#search_exit' ).on('click', exports.clear_search);
+    $('#search_exit').on('click', exports.clear_search);
 
     var query = $('#search_query');
     query.on('focus', exports.focus_search)

static/styles/right-sidebar.css

@@ -201,3 +201,35 @@
 .add-user-list-filter {
     width: 80%;
 }
+
+#user-list .input-append {
+    margin-bottom: 5px;
+    font-size: 90%;
+    letter-spacing: -.3em;
+}
+
+#user-list #clear_search_people_button:hover {
+    color: #000;
+}
+
+#user-list #clear_search_people_button[disabled] {
+    visibility: hidden;
+}
+
+#user-list #clear_search_people_button,
+#user-list #clear_search_people_button[disabled]:hover {
+    position: relative;
+    right: 20px;
+    background: none;
+    border: none;
+    height: 30px;
+    text-align: center;
+    padding: 4px;
+    color: #ccc;
+    font-size: 12px;
+    text-shadow: none;
+    box-shadow: none;
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+    z-index: 5;
+}

templates/zerver/right_sidebar.html

@@ -40,7 +40,12 @@
                 <div id="userlist-header">
                   <h4 class='sidebar-title' id='userlist-title'>{{ _('USERS') }}</h4>
                 </div>
-                 <input class="user-list-filter" type="text" placeholder="{{ _('Search people') }}" />
+                <div class="input-append">
+                  <input class="user-list-filter" type="text" placeholder="{{ _('Search people') }}" />
+                  <button type="button" class="btn" id="clear_search_people_button" disabled="disabled">
+                    <i class="icon-vector-remove"></i>
+                  </button>
+                </div>
                  <ul id="user_presences" class="filters scrolling_list"></ul>
               {% if show_invites %}
                  <a id="invite-user-link" href="#invite-user" data-toggle="modal"><i class="icon-vector-plus-sign"></i>{{ _('Invite more users') }}</a>