paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-04 14:03:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
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
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
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();

19
static/js/stream_list.js
View File

@@ -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 () {

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

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

7
templates/zerver/left_sidebar.html
View File

@@ -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>