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

tooltips: Add hotkey hints support to message controls.

This commit is contained in:
sayamsamal 2022-09-12 00:50:29 +05:30 committed by Tim Abbott
parent d66f2d900f
commit 4bf16ca9cc
5 changed files with 51 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
static/js/tippyjs.js
View File

@ -169,20 +169,8 @@ export function initialize() {
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_message_button");
content = $edit_button.attr("data-tippy-content");
}
instance.setContent(content);
return true;
const $template = $("#" + $elem.attr("data-tooltip-template-id"));
instance.setContent(parse_html($template.html()));
},
});

13
static/js/ui.js
View File

@ -1,7 +1,6 @@
import $ from "jquery";
import SimpleBar from "simplebar";
import {$t} from "./i18n";
import * as message_lists from "./message_lists";
// What, if anything, obscures the home tab?
@ -74,14 +73,10 @@ export function update_starred_view(message_id, new_value) {
$elt.removeClass("fa-star").addClass("fa-star-o");
$star_container.addClass("empty-star");
}
const title_state = starred ? $t({defaultMessage: "Unstar"}) : $t({defaultMessage: "Star"});
$star_container.attr(
"data-tippy-content",
$t(
{defaultMessage: "{starred_status} this message (Ctrl + s)"},
{starred_status: title_state},
),
);
const data_template_id = starred
? "unstar-message-tooltip-template"
: "star-message-tooltip-template";
$star_container.attr("data-tooltip-template-id", data_template_id);
});
}

11
static/js/ui_init.js
View File

@ -151,7 +151,16 @@ function message_hover($message_row) {
can_move_message,
msg_id: id,
};
$message_row.find(".edit_content").html(render_edit_content_button(args));
const $edit_content = $message_row.find(".edit_content");
$edit_content.html(render_edit_content_button(args));
let data_template_id = "view-source-tooltip-template";
if (args.is_content_editable) {
data_template_id = "edit-content-tooltip-template";
} else if (args.can_move_message) {
data_template_id = "move-message-tooltip-template";
}
$edit_content.attr("data-tooltip-template-id", data_template_id);
}
function initialize_bottom_whitespace() {

6
static/templates/edit_content_button.hbs
View File

@ -1,7 +1,7 @@
{{#if is_content_editable}}
<i class="fa fa-pencil edit_content_button edit_message_button" role="button" tabindex="0" aria-label="{{t 'Edit message' }} (e)" data-tippy-content="{{#tr}}Edit message{{/tr}} (e)"></i>
<i class="fa fa-pencil edit_content_button edit_message_button" role="button" tabindex="0" aria-label="{{t 'Edit message' }} (e)"></i>
{{else if can_move_message}}
<i class="fa fa-arrows move_message_button edit_message_button" role="button" tabindex="0" aria-label="{{t 'Move message' }} (m)" data-tippy-content="{{#tr}}Move message{{/tr}} (m)"></i>
<i class="fa fa-arrows move_message_button edit_message_button" role="button" tabindex="0" aria-label="{{t 'Move message' }} (m)"></i>
{{else}}
<i class="fa fa-file-code-o view_source_button edit_message_button" role="button" tabindex="0" aria-label="{{t 'View message source' }} (e)" data-tippy-content="{{#tr}}View message source{{/tr}} (e)" data-message-id="{{msg_id}}"></i>
<i class="fa fa-file-code-o view_source_button edit_message_button" role="button" tabindex="0" aria-label="{{t 'View message source' }} (e)" data-message-id="{{msg_id}}"></i>
{{/if}}

36
static/templates/message_controls.hbs
View File

@ -1,18 +1,38 @@
<div class="message_controls{{#status_message}} sender-status-controls{{/status_message}} no-select">
{{#if msg/sent_by_me}}
<div class="edit_content message_control_button"></div>
<div class="edit_content message_control_button" data-tooltip-template-id="view-source-tooltip-template"></div>
<template id="edit-content-tooltip-template">
{{#tr}}Edit message{{/tr}}
{{hotkey_hints "E"}}
</template>
<template id="move-message-tooltip-template">
{{#tr}}Move message{{/tr}}
{{hotkey_hints "M"}}
</template>
<template id="view-source-tooltip-template">
{{#tr}}View message source{{/tr}}
{{hotkey_hints "E"}}
</template>
{{/if}}
{{#unless msg/sent_by_me}}
<div class="reaction_button message_control_button" data-tippy-content="{{t 'Add emoji reaction' }} (:)">
<div class="reaction_button message_control_button" data-tooltip-template-id="add-emoji-tooltip-template">
<i class="fa fa-smile-o" aria-label="{{#tr}}Add emoji reaction{{/tr}} (:)" role="button" aria-haspopup="true" tabindex="0"></i>
</div>
<template id="add-emoji-tooltip-template">
{{#tr}}Add emoji reaction{{/tr}}
{{hotkey_hints ":"}}
</template>
{{/unless}}
{{#unless msg/locally_echoed}}
<div class="actions_hover message_control_button" data-tippy-content="{{#tr}}Message actions{{/tr}} (i)" >
<div class="actions_hover message_control_button" data-tooltip-template-id="message-actions-tooltip-template" >
<i class="zulip-icon zulip-icon-ellipsis-v-solid" role="button" aria-haspopup="true" tabindex="0" aria-label="{{#tr}}Message actions{{/tr}}"></i>
</div>
<template id="message-actions-tooltip-template">
{{#tr}}Message actions{{/tr}}
{{hotkey_hints "I"}}
</template>
{{/unless}}
<div class="message_failed {{#unless msg.failed_request}}hide{{/unless}}">
@ -26,9 +46,17 @@
</div>
{{#unless msg/locally_echoed}}
<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)">
<div class="star_container message_control_button {{#if msg/starred}}{{else}}empty-star{{/if}}" data-tooltip-template-id="{{#if msg/starred}}unstar{{else}}star{{/if}}-message-tooltip-template">
<i role="button" tabindex="0" class="star fa {{#if msg/starred}}fa-star{{else}}fa-star-o{{/if}}"></i>
</div>
<template id="star-message-tooltip-template">
<span class="starred-status">{{#tr}}Star this message{{/tr}}</span>
{{hotkey_hints "Ctrl" "S"}}
</template>
<template id="unstar-message-tooltip-template">
<span class="starred-status">{{#tr}}Unstar this message{{/tr}}</span>
{{hotkey_hints "Ctrl" "S"}}
</template>
{{/unless}}
</div>