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

Be consistent about when we display search buttons

Browse Source 
Show the buttons iff

    - the search input is focused,
    - the search input has non-empty contents, or
    - we are narrowed.

(imported from commit f5c98471a2db4ab522160960dd1271471a9db555)
This commit is contained in:
Keegan McAllister
2012-12-18 17:38:55 -05:00
parent 60f2d06736
commit dbc4798594
3 changed files with 38 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
templates/zephyr/home.html
View File

@@ -5,7 +5,9 @@
<div id="searchbox" class="always_in_view">
<form id="searchbox_form" class="form-search form-inline">
<div id="search_arrows">
<input class="search-query" id="search_query" type="text" placeholder="Search…" onfocus="search.focus_search();" autocomplete="off">
<input class="search-query" id="search_query" type="text" placeholder="Search…"
onfocus="search.focus_search();" onblur="search.update_button_visibility();"
autocomplete="off">
<button class="btn search_button search_button_middle" type="button" id="search_up" onclick="search.search_button_handler(true);"><i class="icon-chevron-up"></i></button>
<button class="btn search_button search_button_middle" type="button" id="search_down" onclick="search.search_button_handler(false);"><i class="icon-chevron-down"></i></button>
<button class="btn search_button" type="button" id="search_exit" onclick="search.clear_search();"><i class="icon-remove"></i></button>

1
zephyr/static/js/narrow.js
View File

@@ -229,6 +229,7 @@ exports.activate = function (operators, opts) {
// Put the narrow operators in the URL fragment and search bar
hashchange.save_narrow(operators);
$('#search_query').val(unparse(operators));
search.update_button_visibility();
};
// This is the message we're about to select, within the narrowed view.

56
zephyr/static/js/search.js
View File

@@ -125,6 +125,36 @@ function searchbox_sorter(items) {
return result;
}
exports.update_button_visibility = function (will_be_focused) {
var search_query = $('#search_query');
var focused = search_query.is(':focus') || will_be_focused;
// Show buttons iff the search input is focused, or has non-empty contents,
// or we are narrowed.
if (focused
|| search_query.val()
|| narrow.active()) {
if ($('.search_button').is(':visible')) {
// Already visible, and the width manipulation below
// will break if we do it again.
return;
}
// Shrink the searchbox to make room for the buttons.
var new_width = search_query.width() -
$('.search_button').outerWidth(true)*3;
search_query.width(new_width);
$("#search_arrows").addClass("input-append");
$('.search_button').show();
} else {
// Hide buttons.
$('#search_query').width('');
$("#search_arrows").removeClass("input-append");
$("#search_up, #search_down").removeAttr("disabled");
$('.search_button').blur().hide();
}
};
exports.initialize = function () {
$( "#search_query" ).typeahead({
source: function (query, process) {
@@ -179,6 +209,7 @@ exports.initialize = function () {
});
$("#searchbox_form").keydown(function (e) {
exports.update_button_visibility();
var code = e.which;
var search_query_box = $("#search_query");
if (code === 13 && search_query_box.is(":focus")) {
@@ -318,27 +349,8 @@ function clear_search_cache() {
cached_term = "";
}
function show_buttons() {
if (!$('.search_button').is(':visible')) {
// Shrink the searchbox to make room for the buttons.
var search_query = $('#search_query');
var new_width = search_query.width() -
$('.search_button').outerWidth(true)*3;
search_query.width(new_width);
$("#search_arrows").addClass("input-append");
$('.search_button').show();
}
}
function hide_buttons() {
$('#search_query').width('');
$("#search_arrows").removeClass("input-append");
$("#search_up, #search_down").removeAttr("disabled");
$('.search_button').blur().hide();
}
exports.focus_search = function () {
show_buttons();
exports.update_button_visibility(true);
disable_search_arrows_if(false, ["up", "down"]);
};
@@ -350,8 +362,8 @@ exports.clear_search = function () {
narrow.deactivate();
$('table tr').removeHighlight();
// Clear & reset searchbox to its normal size
$('#search_query').val('');
hide_buttons();
$('#search_query').val('').blur();
exports.update_button_visibility();
clear_search_cache();
};