Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

stream_filter: Add clear-search button to Search stream input field.

This commit is contained in:
Raghav Jajodia 2017-04-05 17:48:35 +05:30 committed by Tim Abbott
parent 99f8750684
commit d4e1f0a9a8
4 changed files with 27 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend_tests/casper_tests/03-narrow.js
View File

@ -303,11 +303,11 @@ un_narrow();
// Make sure stream search filters the stream list // Make sure stream search filters the stream list
casper.then(function () { casper.then(function () {
casper.test.info('Search streams using left sidebar'); 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.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="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="Scotland"]', 'Original stream list contains Scotland');
casper.test.assertExists('#stream_filters [data-name="Verona"]', 'Original stream list contains Verona'); 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.thenClick('#streams_header .sidebar-title');
casper.waitForSelector('.stream-list-filter.notdisplayed', function () { casper.waitForSelector('.input-append.notdisplayed', function () {
casper.test.assertExists('.stream-list-filter.notdisplayed', 'Stream filter box not visible after second click'); casper.test.assertExists('.input-append.notdisplayed', 'Stream filter box not visible after second click');
}); });
un_narrow(); un_narrow();

19
static/js/stream_list.js
View File

@ -517,10 +517,22 @@ exports.escape_search = function () {
update_streams_for_search(); 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 () { exports.initiate_search = function () {
var filter = $('.stream-list-filter').expectOne(); var filter = $('.stream-list-filter').expectOne();
filter.removeClass('notdisplayed'); filter.parent().removeClass('notdisplayed');
filter.focus(); filter.focus();
$('#clear_search_stream_button').removeAttr('disabled');
}; };
exports.clear_and_hide_search = function () { exports.clear_and_hide_search = function () {
@ -530,7 +542,7 @@ exports.clear_and_hide_search = function () {
update_streams_for_search(); update_streams_for_search();
} }
filter.blur(); filter.blur();
filter.addClass('notdisplayed'); filter.parent().addClass('notdisplayed');
}; };
function focus_stream_filter(e) { function focus_stream_filter(e) {
@ -559,7 +571,7 @@ function toggle_filter_displayed(e) {
if (e.target.id === 'streams_inline_cog') { if (e.target.id === 'streams_inline_cog') {
return; return;
} }
if ($('.stream-list-filter.notdisplayed').length === 0) { if ($('#stream-filters-container .input-append.notdisplayed').length === 0) {
exports.clear_and_hide_search(); exports.clear_and_hide_search();
} else { } else {
exports.initiate_search(); exports.initiate_search();
@ -572,6 +584,7 @@ $(function () {
.on('click', focus_stream_filter) .on('click', focus_stream_filter)
.on('input', update_streams_for_search) .on('input', update_streams_for_search)
.on('keydown', maybe_select_stream); .on('keydown', maybe_select_stream);
$('#clear_search_stream_button').on('click', exports.clear_search);
}); });
$(function () { $(function () {

1
static/styles/left-sidebar.css
View File

@ -44,6 +44,7 @@
} }
#stream-filters-container { #stream-filters-container {
overflow-x: hidden;
overflow-y: hidden; overflow-y: hidden;
position: relative; position: relative;
z-index: 0; z-index: 0;

7
templates/zerver/left_sidebar.html
View File

@ -28,7 +28,12 @@
</div> </div>
</div> </div>
<div id="stream-filters-container" class="scrolling_list"> <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> <ul id="stream_filters" class="filters"></ul>
</div> </div>
</div> </div>