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

tooltips: Use TippyJS instead of HTML title in recipient bars. 

Additional changes are added in `tippyjs.js` to ensure
that the tooltip doesn't hide behind the message
box or it is not limited by the parent container, in
case of recipient bar icons.
This commit is contained in:
akshatdalton 2021-06-26 18:21:25 +00:00 committed by Tim Abbott
parent 2aec7b1644
commit 505502a993
2 changed files with 13 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
static/js/tippyjs.js
View File

@ -176,4 +176,13 @@ export function initialize() {
instance.destroy();
},
});
// In case of recipient bar icons, following change
// ensures that tooltip doesn't hide behind the message
// box or it is not limited by the parent container.
delegate("body", {
target: ".recipient_bar_icon",
placement: "top",
appendTo: () => document.body,
});
}

8
static/templates/recipient_row.hbs
View File

@ -39,10 +39,10 @@
{{! edit topic pencil icon }}
{{#if always_visible_topic_edit}}
<i class="fa fa-pencil always_visible_topic_edit recipient_bar_icon hidden-for-spectators" {{#unless realm_allow_message_editing}}style="display: none"{{/unless}} title="{{t 'Edit topic'}}" role="button" tabindex="0" aria-label="{{t 'Edit topic' }}"></i>
<i class="fa fa-pencil always_visible_topic_edit recipient_bar_icon hidden-for-spectators" {{#unless realm_allow_message_editing}}style="display: none"{{/unless}} data-tippy-content="{{t 'Edit topic'}}" role="button" tabindex="0" aria-label="{{t 'Edit topic' }}"></i>
{{else}}
{{#if on_hover_topic_edit}}
<i class="fa fa-pencil on_hover_topic_edit recipient_bar_icon hidden-for-spectators" {{#unless realm_allow_message_editing}}style="display: none"{{/unless}} title="{{t 'Edit topic'}}" role="button" tabindex="0" aria-label="{{t 'Edit topic' }}"></i>
<i class="fa fa-pencil on_hover_topic_edit recipient_bar_icon hidden-for-spectators" {{#unless realm_allow_message_editing}}style="display: none"{{/unless}} data-tippy-content="{{t 'Edit topic'}}" role="button" tabindex="0" aria-label="{{t 'Edit topic' }}"></i>
{{/if}}
{{/if}}
@ -51,9 +51,9 @@
</span>
{{#if topic_muted}}
<i class="fa fa-bell-slash on_hover_topic_unmute recipient_bar_icon" data-stream-id="{{stream_id}}" data-topic-name="{{topic}}" title="{{t 'Unmute topic' }} (M)" role="button" tabindex="0" aria-label="{{t 'Unmute topic' }}"></i>
<i class="fa fa-bell-slash on_hover_topic_unmute recipient_bar_icon" data-stream-id="{{stream_id}}" data-topic-name="{{topic}}" data-tippy-content="{{t 'Unmute topic' }} (M)" role="button" tabindex="0" aria-label="{{t 'Unmute topic' }}"></i>
{{else}}
<i class="fa fa-bell-slash on_hover_topic_mute recipient_bar_icon hidden-for-spectators" data-stream-id="{{stream_id}}" data-topic-name="{{topic}}" title="{{t 'Mute topic' }} (M)" role="button" tabindex="0" aria-label="{{t 'Mute topic' }}"></i>
<i class="fa fa-bell-slash on_hover_topic_mute recipient_bar_icon hidden-for-spectators" data-stream-id="{{stream_id}}" data-topic-name="{{topic}}" data-tippy-content="{{t 'Mute topic' }} (M)" role="button" tabindex="0" aria-label="{{t 'Mute topic' }}"></i>
{{/if}}
</span>
<span class="recipient_row_date {{#if group_date_divider_html}}{{else}}hide-date{{/if}}">{{{date}}}</span>