diff --git a/static/js/activity.js b/static/js/activity.js index e5fa13aa5d..5e24dbf690 100644 --- a/static/js/activity.js +++ b/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); }); diff --git a/static/js/search.js b/static/js/search.js index fe44bb1f66..4c3075cc87 100644 --- a/static/js/search.js +++ b/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) diff --git a/static/styles/right-sidebar.css b/static/styles/right-sidebar.css index 798649e0d8..18d92bf75d 100644 --- a/static/styles/right-sidebar.css +++ b/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; +} diff --git a/templates/zerver/right_sidebar.html b/templates/zerver/right_sidebar.html index a6fba4c190..f8bfac0031 100644 --- a/templates/zerver/right_sidebar.html +++ b/templates/zerver/right_sidebar.html @@ -40,7 +40,12 @@
- +
+ + +
{% if show_invites %} {{ _('Invite more users') }}