paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-10-23 04:52:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

tooltips: Use TippyJS for all message_control_button tooltips.

Browse Source 
The inconsistent style between these three buttons looked bad.

We have to take some care with the "Starred messages" and "Edit" ones,
to make sure they live-update properly.
This commit is contained in:
Tim Abbott
2021-05-13 10:16:36 -07:00
parent 2e334bec89
commit 3edb9b8ed6
4 changed files with 34 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
static/js/tippyjs.js
View File

@@ -70,4 +70,29 @@ export function initialize() {
// them unless they want to.
delay: [300, 20],
});
delegate("body", {
target: ".message_control_button",
placement: "top",
// Add some additional delay when they open
// so that regular users don't have to see
// them unless they want to.
delay: [300, 20],
onShow(instance) {
// Handle dynamic "starred messages" and "edit" widgets.
const elem = $(instance.reference);
let content = elem.attr("data-tippy-content");
if (content === undefined) {
// Tippy cannot get the content for message edit button
// as it is dynamically inserted based on editability.
// So, we have to manually get the i element to get the
// content from it.
//
// TODO: Change the template structure so logic is unnecessary.
const edit_button = elem.find("i.edit_content_button").expectOne();
content = edit_button.attr("data-tippy-content");
}
instance.setContent(content);
},
});
}

4
static/js/ui.js
View File

@@ -82,8 +82,8 @@ export function update_starred_view(message_id, new_value) {
star_container.addClass("empty-star");
}
const title_state = starred ? $t({defaultMessage: "Unstar"}) : $t({defaultMessage: "Star"});
elt.attr(
"title",
star_container.attr(
"data-tippy-content",
$t(
{defaultMessage: "{starred_status} this message (Ctrl + s)"},
{starred_status: title_state},

4
static/templates/edit_content_button.hbs
View File

@@ -1,5 +1,5 @@
{{#if is_editable}}
<i class="fa fa-pencil edit_content_button" role="button" tabindex="0" aria-label="{{t 'Edit' }} (e)" title="{{t 'Edit' }} (e)"></i>
<i class="fa fa-pencil edit_content_button" role="button" tabindex="0" aria-label="{{t 'Edit' }} (e)" data-tippy-content="{{#tr}}Edit{{/tr}} (e)"></i>
{{else}}
<i class="fa fa-file-code-o edit_content_button" role="button" tabindex="0" aria-label="{{t 'View source' }} (e)" title="{{t 'View source' }} (e)" data-message-id="{{msg_id}}"></i>
<i class="fa fa-file-code-o edit_content_button" role="button" tabindex="0" aria-label="{{t 'View source' }} (e)" data-tippy-content="{{#tr}}View source{{/tr}} (e)" data-message-id="{{msg_id}}"></i>
{{/if}}

10
static/templates/message_controls.hbs
View File

@@ -4,14 +4,14 @@
{{/if}}
{{#unless msg/sent_by_me}}
<div class="reaction_button message_control_button tippy-zulip-tooltip" data-tippy-content="{{t 'Add emoji reaction' }} (:)">
<div class="reaction_button message_control_button" data-tippy-content="{{t 'Add emoji reaction' }} (:)">
<i class="fa fa-smile-o" aria-label="{{#tr}}Add emoji reaction{{/tr}} (:)" role="button" aria-haspopup="true" tabindex="0"></i>
</div>
{{/unless}}
{{#unless msg/locally_echoed}}
<div class="info actions_hover message_control_button">
<i class="zulip-icon zulip-icon-ellipsis-v-solid" title="{{#tr}}Message actions{{/tr}} (i)" role="button" aria-haspopup="true" tabindex="0" aria-label="{{#tr}}Message actions{{/tr}}"></i>
<div class="info actions_hover message_control_button" data-tippy-content="{{#tr}}Message actions{{/tr}} (i)" >
<i class="zulip-icon zulip-icon-ellipsis-v-solid" role="button" aria-haspopup="true" tabindex="0" aria-label="{{#tr}}Message actions{{/tr}}"></i>
</div>
{{/unless}}
@@ -21,8 +21,8 @@
</div>
{{#unless msg/locally_echoed}}
<div class="star_container message_control_button {{#if msg/starred}}{{else}}empty-star{{/if}}">
<i role="button" tabindex="0" class="star fa {{#if msg/starred}}fa-star{{else}}fa-star-o{{/if}}" title="{{#with msg}}{{#tr}}{starred_status} this message{{/tr}}{{/with}} (Ctrl + s)"></i>
<div class="star_container message_control_button {{#if msg/starred}}{{else}}empty-star{{/if}}" data-tippy-content="{{#with msg}}{{#tr}}{starred_status} this message{{/tr}}{{/with}} (Ctrl + s)">
<i role="button" tabindex="0" class="star fa {{#if msg/starred}}fa-star{{else}}fa-star-o{{/if}}"></i>
</div>
{{/unless}}