navbar: Increase the click area of to initiate search.

This commit:
- Switches margin for padding on the search closed icon, to ensure we
  cover the region to the right of icon as clickable area.
- Applies the click handler that initiates the search to the second
  last element of the navbar:
  - This will most commonly be the narrow_description element, but may
    also be the entire navbar eg in the case of "ALL" or "starred".
    Applying this change to user names in "group-pm-with: ..." based
    narrows is a little questionable, but there are no other triggers
    on these names so this change makes sense for now.
  - The narrow_description may also contain links, which need to be
    handled correctly so that the behave like links should. We work
    around the onClick on the narrow_description, by applying a
    handler to <a> tags and invoking stopPropagation.
- We also add CSS to change the cursor to a pointer to make the
  search icon change color on hover over the clickable area to
  indicate that the search box can be opened with a single click.
- However, since <a> tags are handled differently, we add a hover
  listener which makes sure it behaves appropriately. We also increase
  the vertical padding of the <a> tags so they cover the entire
  vertical navbar region.
This commit is contained in:
YashRE42
2020-04-22 22:54:52 +05:30
committed by Tim Abbott
parent 7c23c8730c
commit 30065b4ee8
4 changed files with 55 additions and 3 deletions

View File

@@ -190,6 +190,8 @@ $("#tab_list .stream").length = 0;
compose.compute_show_video_chat_button = () => {};
$("#below-compose-content .video_link").toggle = () => {};
$(".narrow_description > a").hover = () => {};
run_test('initialize_everything', () => {
ui_init.initialize_everything();
});