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

search: Higlight #searchbox on focus.

Browse Source 
Adds box-shadow to `#searchbox` when either `#search_query` or any
of the pills have focus. Uses jquery instead of pure css as the
`:focus` event occurs on `#search_query`, while we want to add
box-shadow to `#searchbox`. This could have been done with
`:focus-within` CSS selector, but it is not supported in IE or Opera.

`#search_query` already had an onfocus/focusout listener, adding
listeners to `#searchbox.pills` for those events wouldn't have worked
as you don't want the focusout event to fire when the focus shifts
from input to pill.

Also adds `focusin`, `focusout` and `css()` to zjquery. `css` is
same as `val`, except it returns an empty object in case of no value
instead of an empty string. I don't think `css()` is valid syntax
in actual jquery.
This commit is contained in:
Shubham Padia
2018-07-23 03:55:21 +05:30
committed by Tim Abbott
parent 73e4f3b3fa
commit 1f553a41d0
4 changed files with 43 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
static/js/search.js
View File

@@ -61,6 +61,7 @@ exports.update_button_visibility = function () {
exports.initialize = function () {
var search_query_box = $('#search_query');
var searchbox_form = $('#searchbox_form');
var searchbox = $('#searchbox');
// Data storage for the typeahead.
// This maps a search string to an object with a "description" field.
@@ -183,6 +184,18 @@ exports.initialize = function () {
exports.update_button_visibility();
}, 100);
});
if (page_params.search_pills_enabled) {
// Uses jquery instead of pure css as the `:focus` event occurs on `#search_query`,
// while we want to add box-shadow to `#searchbox`. This could have been done
// with `:focus-within` CSS selector, but it is not supported in IE or Opera.
searchbox.on('focusin', function () {
searchbox.css({"box-shadow": "inset 0px 0px 0px 2px hsl(204, 20%, 74%)"});
});
searchbox.on('focusout', function () {
searchbox.css({"box-shadow": "unset"});
});
}
};
exports.focus_search = function () {