From d4e1f0a9a88d1da4e6f11d1603b3a313d4426bb9 Mon Sep 17 00:00:00 2001
From: Raghav Jajodia <jajodia.raghav@gmail.com>
Date: Wed, 5 Apr 2017 17:48:35 +0530
Subject: [PATCH] stream_filter: Add clear-search button to Search stream input
 field.

---
 frontend_tests/casper_tests/03-narrow.js |  8 ++++----
 static/js/stream_list.js                 | 19 ++++++++++++++++---
 static/styles/left-sidebar.css           |  1 +
 templates/zerver/left_sidebar.html       |  7 ++++++-
 4 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/frontend_tests/casper_tests/03-narrow.js b/frontend_tests/casper_tests/03-narrow.js
index 495a1a6371..7b2d9eeef0 100644
--- a/frontend_tests/casper_tests/03-narrow.js
+++ b/frontend_tests/casper_tests/03-narrow.js
@@ -303,11 +303,11 @@ un_narrow();
 // Make sure stream search filters the stream list
 casper.then(function () {
     casper.test.info('Search streams using left sidebar');
-    casper.test.assertExists('.stream-list-filter.notdisplayed', 'Stream filter box not visible initially');
+    casper.test.assertExists('.input-append.notdisplayed', 'Stream filter box not visible initially');
     casper.click('#streams_header .sidebar-title');
 });
 
-casper.waitWhileSelector('.stream-list-filter.notdisplayed', function () {
+casper.waitWhileSelector('.input-append.notdisplayed', function () {
     casper.test.assertExists('#stream_filters [data-name="Denmark"]', 'Original stream list contains Denmark');
     casper.test.assertExists('#stream_filters [data-name="Scotland"]', 'Original stream list contains Scotland');
     casper.test.assertExists('#stream_filters [data-name="Verona"]', 'Original stream list contains Verona');
@@ -361,8 +361,8 @@ casper.waitUntilVisible('#stream_filters [data-name="Verona"]', function () {
 
 casper.thenClick('#streams_header .sidebar-title');
 
-casper.waitForSelector('.stream-list-filter.notdisplayed', function () {
-    casper.test.assertExists('.stream-list-filter.notdisplayed', 'Stream filter box not visible after second click');
+casper.waitForSelector('.input-append.notdisplayed', function () {
+    casper.test.assertExists('.input-append.notdisplayed', 'Stream filter box not visible after second click');
 });
 
 un_narrow();
diff --git a/static/js/stream_list.js b/static/js/stream_list.js
index bf0b95d79e..14b1c801a6 100644
--- a/static/js/stream_list.js
+++ b/static/js/stream_list.js
@@ -517,10 +517,22 @@ exports.escape_search = function () {
     update_streams_for_search();
 };
 
+exports.clear_search = function () {
+    var filter = $('.stream-list-filter').expectOne();
+    if (filter.val() === '') {
+        exports.clear_and_hide_search();
+        return;
+    }
+    filter.val('');
+    filter.blur();
+    update_streams_for_search();
+};
+
 exports.initiate_search = function () {
     var filter = $('.stream-list-filter').expectOne();
-    filter.removeClass('notdisplayed');
+    filter.parent().removeClass('notdisplayed');
     filter.focus();
+    $('#clear_search_stream_button').removeAttr('disabled');
 };
 
 exports.clear_and_hide_search = function () {
@@ -530,7 +542,7 @@ exports.clear_and_hide_search = function () {
         update_streams_for_search();
     }
     filter.blur();
-    filter.addClass('notdisplayed');
+    filter.parent().addClass('notdisplayed');
 };
 
 function focus_stream_filter(e) {
@@ -559,7 +571,7 @@ function toggle_filter_displayed(e) {
     if (e.target.id === 'streams_inline_cog') {
         return;
     }
-    if ($('.stream-list-filter.notdisplayed').length === 0) {
+    if ($('#stream-filters-container .input-append.notdisplayed').length === 0) {
         exports.clear_and_hide_search();
     } else {
         exports.initiate_search();
@@ -572,6 +584,7 @@ $(function () {
         .on('click', focus_stream_filter)
         .on('input', update_streams_for_search)
         .on('keydown', maybe_select_stream);
+    $('#clear_search_stream_button').on('click', exports.clear_search);
 });
 
 $(function () {
diff --git a/static/styles/left-sidebar.css b/static/styles/left-sidebar.css
index 41772916ae..acd2c8de2f 100644
--- a/static/styles/left-sidebar.css
+++ b/static/styles/left-sidebar.css
@@ -44,6 +44,7 @@
 }
 
 #stream-filters-container {
+    overflow-x: hidden;
     overflow-y: hidden;
     position: relative;
     z-index: 0;
diff --git a/templates/zerver/left_sidebar.html b/templates/zerver/left_sidebar.html
index 3f3452aa4e..79a2c7a825 100644
--- a/templates/zerver/left_sidebar.html
+++ b/templates/zerver/left_sidebar.html
@@ -28,7 +28,12 @@
                           </div>
                         </div>
                         <div id="stream-filters-container" class="scrolling_list">
-                            <input class="stream-list-filter notdisplayed" type="text" placeholder="{{ _('Search streams') }}" />
+                            <div class="input-append notdisplayed">
+                              <input class="stream-list-filter" type="text" placeholder="{{ _('Search streams') }}" />
+                              <button type="button" class="btn clear_search_button" id="clear_search_stream_button" disabled="disabled">
+                                <i class="icon-vector-remove"></i>
+                              </button>
+                            </div>
                            <ul id="stream_filters" class="filters"></ul>
                         </div>
                       </div>