Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

tooltips: Add tippy tooltip for search_query. 

Added tippy tooltips for search_open, search_close icon and
search_query input field with hotkey hint `/' by adding a class
`.tippy-zulip-delayed-tooltip` which adds tooltip with
LONG_HOVER_DELAY and default placement top with fallback placement
equal to bottom.

Added tippy tooltip with text `Close` on `.search_close_button`.

Fixes part of #24311
This commit is contained in:
Hardik Dharmani 2023-04-20 14:26:13 +05:30 committed by Tim Abbott
parent 9c866f9be1
commit 941c15b802
2 changed files with 11 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/templates/message_view_header.hbs
View File

@ -18,4 +18,8 @@
{{> navbar_icon_and_title }}
</span>
{{/if}}
<span class="search_icon search_closed" role="button"><i class="zulip-icon zulip-icon-search" aria-hidden="true"></i></span>
<span class="search_icon search_closed" role="button"><i class="zulip-icon zulip-icon-search tippy-zulip-delayed-tooltip" data-tooltip-template-id="search-query-tooltip-template" aria-hidden="true"></i></span>
<template id="search-query-tooltip-template">
{{t 'Search' }}
{{tooltip_hotkey_hints "/"}}
</template>

12
web/templates/navbar.hbs
View File

@ -19,11 +19,11 @@
<div id="searchbox">
<form id="searchbox_form" class="navbar-search">
<div id="search_arrows" class="pill-container input-append">
<span class="search_icon search_open" ><i class="zulip-icon zulip-icon-search"></i></span>
<span class="search_icon search_open"><i class="zulip-icon zulip-icon-search tippy-zulip-delayed-tooltip" data-tooltip-template-id="search-query-tooltip-template"></i></span>
<div contenteditable="true" class="input search-query input-block-level" id="search_query" type="text" placeholder="{{t 'Search' }}"
autocomplete="off" aria-label="{{t 'Search' }}" title="{{t 'Search' }} (/)">
autocomplete="off">
</div>
<button class="btn search_close_button" type="button" id="search_exit" aria-label="{{t 'Exit search' }}">
<button class="btn search_close_button tippy-zulip-delayed-tooltip" type="button" id="search_exit" aria-label="{{t 'Exit search' }}" data-tippy-content="Close">
<i class="zulip-icon zulip-icon-close" aria-hidden="true"></i>
</button>
</div>
@ -33,10 +33,10 @@
<div id="searchbox_legacy">
<form id="searchbox_form" class="navbar-search">
<div id="search_arrows" class="input-append">
<span class="search_icon search_open" ><i class="zulip-icon zulip-icon-search"></i></span>
<span class="search_icon search_open"><i class="zulip-icon zulip-icon-search tippy-zulip-delayed-tooltip" data-tooltip-template-id="search-query-tooltip-template"></i></span>
<input class="search-query input-block-level home-page-input" id="search_query" type="text" placeholder="{{t 'Search' }}"
autocomplete="off" aria-label="{{t 'Search' }}" title="{{t 'Search' }} (/)"/>
<button class="btn search_close_button" type="button" id="search_exit" aria-label="{{t 'Exit search' }}"><i class="zulip-icon zulip-icon-close" aria-hidden="true"></i></button>
autocomplete="off"/>
<button class="btn search_close_button tippy-zulip-delayed-tooltip" type="button" id="search_exit" aria-label="{{t 'Exit search' }}" data-tippy-content="Close"><i class="zulip-icon zulip-icon-close" aria-hidden="true"></i></button>
</div>
</form>
</div>