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

left_sidebar: Fix tooltips not hidden on blur. 

The elements which received focus didn't have tooltips attached to
them, thus when blur was triggered on `a`, the tooltip didn't hide
as it was not listening on it for the blur event.

We move the toolip to `a` elements so that when focus and blur
are triggered tippy is able to capture them.
This commit is contained in:
Aman Agrawal 2024-06-20 09:59:06 +00:00 committed by Tim Abbott
parent 79fc430b56
commit 23927ea5b1
2 changed files with 20 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
web/src/tippyjs.ts
View File

@ -167,6 +167,16 @@ export function initialize(): void {
if ($container.data("view-code") === user_settings.web_home_view) { if ($container.data("view-code") === user_settings.web_home_view) {
$container.find(".views-tooltip-home-view-note").removeClass("hide"); $container.find(".views-tooltip-home-view-note").removeClass("hide");
} }
// Since the tooltip is attached the anchor tag which doesn't
// include with of the ellipsis icon, we need to offset the
// tooltip so that the tooltip is displayed to right of the
// ellipsis icon.
if (instance.reference.classList.contains("left-sidebar-navigation-label-container")) {
instance.setProps({
offset: [0, 40],
});
}
}, },
onHidden(instance) { onHidden(instance) {
instance.destroy(); instance.destroy();

20
web/templates/left_sidebar.hbs
View File

@ -51,8 +51,8 @@
</div> </div>
</div> </div>
<ul id="left-sidebar-navigation-list" class="left-sidebar-navigation-list filters"> <ul id="left-sidebar-navigation-list" class="left-sidebar-navigation-list filters">
<li class="tippy-views-tooltip top_left_inbox top_left_row hidden-for-spectators {{#if is_inbox_home_view}}selected-home-view{{/if}}" data-tooltip-template-id="inbox-tooltip-template"> <li class="top_left_inbox top_left_row hidden-for-spectators {{#if is_inbox_home_view}}selected-home-view{{/if}}">
<a href="#inbox" {{#if is_inbox_home_view}}tabindex="0"{{/if}} class="left-sidebar-navigation-label-container"> <a href="#inbox" {{#if is_inbox_home_view}}tabindex="0"{{/if}} class="left-sidebar-navigation-label-container tippy-views-tooltip" data-tooltip-template-id="inbox-tooltip-template">
<span class="filter-icon"> <span class="filter-icon">
<i class="zulip-icon zulip-icon-inbox" aria-hidden="true"></i> <i class="zulip-icon zulip-icon-inbox" aria-hidden="true"></i>
</span> </span>
@ -62,8 +62,8 @@
</a> </a>
<span class="arrow sidebar-menu-icon inbox-sidebar-menu-icon hidden-for-spectators"><i class="zulip-icon zulip-icon-more-vertical" aria-hidden="true"></i></span> <span class="arrow sidebar-menu-icon inbox-sidebar-menu-icon hidden-for-spectators"><i class="zulip-icon zulip-icon-more-vertical" aria-hidden="true"></i></span>
</li> </li>
<li class="tippy-views-tooltip top_left_recent_view top_left_row {{#if is_recent_view_home_view}}selected-home-view{{/if}}" data-tooltip-template-id="recent-conversations-tooltip-template"> <li class="top_left_recent_view top_left_row {{#if is_recent_view_home_view}}selected-home-view{{/if}}">
<a href="#recent" {{#if is_recent_view_home_view}}tabindex="0"{{/if}} class="left-sidebar-navigation-label-container"> <a href="#recent" {{#if is_recent_view_home_view}}tabindex="0"{{/if}} class="left-sidebar-navigation-label-container tippy-views-tooltip" data-tooltip-template-id="recent-conversations-tooltip-template">
<span class="filter-icon"> <span class="filter-icon">
<i class="zulip-icon zulip-icon-recent" aria-hidden="true"></i> <i class="zulip-icon zulip-icon-recent" aria-hidden="true"></i>
</span> </span>
@ -75,8 +75,8 @@
<i class="zulip-icon zulip-icon-more-vertical" aria-hidden="true"></i> <i class="zulip-icon zulip-icon-more-vertical" aria-hidden="true"></i>
</span> </span>
</li> </li>
<li class="tippy-views-tooltip top_left_all_messages top_left_row {{#if is_all_messages_home_view}}selected-home-view{{/if}}" data-tooltip-template-id="all-message-tooltip-template"> <li class="top_left_all_messages top_left_row {{#if is_all_messages_home_view}}selected-home-view{{/if}}">
<a href="#feed" {{#if is_all_messages_home_view}}tabindex="0"{{/if}} class="home-link left-sidebar-navigation-label-container"> <a href="#feed" {{#if is_all_messages_home_view}}tabindex="0"{{/if}} class="home-link left-sidebar-navigation-label-container tippy-views-tooltip" data-tooltip-template-id="all-message-tooltip-template">
<span class="filter-icon"> <span class="filter-icon">
<i class="zulip-icon zulip-icon-all-messages" aria-hidden="true"></i> <i class="zulip-icon zulip-icon-all-messages" aria-hidden="true"></i>
</span> </span>
@ -98,8 +98,8 @@
<span class="unread_count"></span> <span class="unread_count"></span>
</a> </a>
</li> </li>
<li class="tippy-views-tooltip top_left_my_reactions top_left_row hidden-for-spectators" data-tooltip-template-id="my-reactions-tooltip-template"> <li class="top_left_my_reactions top_left_row hidden-for-spectators">
<a class="left-sidebar-navigation-label-container" href="#narrow/has/reaction/sender/me"> <a class="left-sidebar-navigation-label-container tippy-views-tooltip" href="#narrow/has/reaction/sender/me" data-tooltip-template-id="my-reactions-tooltip-template">
<span class="filter-icon"> <span class="filter-icon">
<i class="zulip-icon zulip-icon-smile" aria-hidden="true"></i> <i class="zulip-icon zulip-icon-smile" aria-hidden="true"></i>
</span> </span>
@ -119,8 +119,8 @@
</a> </a>
<span class="arrow sidebar-menu-icon starred-messages-sidebar-menu-icon"><i class="zulip-icon zulip-icon-more-vertical" aria-hidden="true"></i></span> <span class="arrow sidebar-menu-icon starred-messages-sidebar-menu-icon"><i class="zulip-icon zulip-icon-more-vertical" aria-hidden="true"></i></span>
</li> </li>
<li class="tippy-left-sidebar-tooltip top_left_drafts top_left_row hidden-for-spectators" data-tooltip-template-id="drafts-tooltip-template"> <li class="top_left_drafts top_left_row hidden-for-spectators">
<a href="#drafts" class="left-sidebar-navigation-label-container"> <a href="#drafts" class="left-sidebar-navigation-label-container tippy-views-tooltip" data-tooltip-template-id="drafts-tooltip-template">
<span class="filter-icon"> <span class="filter-icon">
<i class="zulip-icon zulip-icon-drafts" aria-hidden="true"></i> <i class="zulip-icon zulip-icon-drafts" aria-hidden="true"></i>
</span> </span>