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

compose_box: Convert dynamic closed compose box tooltips to tippyjs. 

This commit converts the dynamic closed_compose_box
tooltip to template-based tippy.js tooltips. The functions in
the compose_closed_ui.js file are refactored to dynamically change
the 'data-tooltip-template-id' attribute according to the situation.

The title parameter is removed from the functions in
compose_closed_ui.js so that we can change the tooltip within the
caller functions themselves, according to the situation. Since there
is no way to match the title in existing functions with different
languages to change the tooltip attribute dynamically, it is better
to change the tooltip attribute within the caller function according
to the situation, rather than passing the title as a parameter.

In the case of the reply button, we disable it when direct messages
are not allowed. However, tippy.js tooltips do not appear in the
case of disabled elements, so we have to use the container element
around it to show the tooltip. This approach is used in the case of
the reply button, where the span element wraps the button.

We used to have two titles for the reply button: one is the usual
'Reply to selected message', and the other is for the disabled state.
However, in the case of recent conversations, it makes more sense
to have a new tooltip title: 'Reply to selected conversation'.

To ensure that the tooltip content changes dynamically, it is
required to destroy the tooltip instance and then reinitialize it
every time.

Fixes: #25096
This commit is contained in:
palashb01 2023-04-13 19:52:02 +05:30 committed by Tim Abbott
parent aa23b9deaf
commit 047bffe257
4 changed files with 72 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
web/src/compose_closed_ui.js
View File

@ -53,32 +53,41 @@ export function get_recipient_label(message) {
return "";
}
function update_reply_button_state(disable = false, title) {
function update_reply_button_state(disable = false) {
$(".compose_reply_button").attr("disabled", disable);
if (!title) {
const title_text = $t({defaultMessage: "Reply to selected message"});
title = title_text + " (r)";
if (disable) {
$("#compose_buttons > .reply_button_container").attr(
"data-tooltip-template-id",
"compose_reply_button_disabled_tooltip_template",
);
return;
}
if (narrow_state.is_message_feed_visible()) {
$("#compose_buttons > .reply_button_container").attr(
"data-tooltip-template-id",
"compose_reply_message_button_tooltip_template",
);
} else {
$("#compose_buttons > .reply_button_container").attr(
"data-tooltip-template-id",
"compose_reply_selected_topic_button_tooltip_template",
);
}
$(".compose_reply_button").prop("title", title);
}
function update_stream_button(btn_text, title) {
function update_stream_button(btn_text) {
$("#left_bar_compose_stream_button_big").text(btn_text);
$("#left_bar_compose_stream_button_big").prop("title", title);
}
function update_conversation_button(btn_text, title) {
function update_conversation_button(btn_text) {
$("#left_bar_compose_private_button_big").text(btn_text);
$("#left_bar_compose_private_button_big").prop("title", title);
}
function update_buttons(text_stream, disable_reply, title_reply) {
const title_stream = text_stream + " (c)";
function update_buttons(text_stream, disable_reply) {
const text_conversation = $t({defaultMessage: "New direct message"});
const title_conversation = text_conversation + " (x)";
update_stream_button(text_stream, title_stream);
update_conversation_button(text_conversation, title_conversation);
update_reply_button_state(disable_reply, title_reply);
update_stream_button(text_stream);
update_conversation_button(text_conversation);
update_reply_button_state(disable_reply);
}
export function update_buttons_for_private() {
@ -87,25 +96,38 @@ export function update_buttons_for_private() {
!narrow_state.pm_ids_string() ||
people.user_can_direct_message(narrow_state.pm_ids_string())
) {
$("#left_bar_compose_stream_button_big").attr(
"data-tooltip-template-id",
"new_stream_message_button_tooltip_template",
);
update_buttons(text_stream);
return;
}
// disable the [Message X] button when in a private narrow
// if the user cannot dm the current recipient
const disable_reply = true;
const title_reply = $t({
defaultMessage: "You are not allowed to send private messages in this organization.",
});
update_buttons(text_stream, disable_reply, title_reply);
$("#compose_buttons > .reply_button_container").attr(
"data-tooltip-template-id",
"disable_reply_compose_reply_button_tooltip_template",
);
update_buttons(text_stream, disable_reply);
}
export function update_buttons_for_stream() {
const text_stream = $t({defaultMessage: "New topic"});
$("#left_bar_compose_stream_button_big").attr(
"data-tooltip-template-id",
"new_topic_message_button_tooltip_template",
);
update_buttons(text_stream);
}
export function update_buttons_for_recent_topics() {
const text_stream = $t({defaultMessage: "New stream message"});
$("#left_bar_compose_stream_button_big").attr(
"data-tooltip-template-id",
"new_stream_message_button_tooltip_template",
);
update_buttons(text_stream);
}

9
web/src/tippyjs.js
View File

@ -199,11 +199,18 @@ export function initialize() {
delegate("body", {
target: [
// Ideally this would be `#compose_buttons .button`, but the
// reply button's actual area is its containing span.
"#compose_buttons > .reply_button_container",
"#left_bar_compose_mobile_button_big",
"#left_bar_compose_stream_button_big",
"#left_bar_compose_private_button_big",
],
delay: LONG_HOVER_DELAY,
delay: EXTRA_LONG_HOVER_DELAY,
appendTo: () => document.body,
onHidden(instance) {
instance.destroy();
},
});
delegate("body", {

26
web/templates/compose.hbs
View File

@ -16,12 +16,22 @@
</div>
<div id="compose_controls" class="new-style">
<div id="compose_buttons">
<span class="new_message_button reply_button_container ">
<span class="new_message_button reply_button_container" data-tooltip-template-id="compose_reply_message_button_tooltip_template">
<button type="button" class="button small rounded compose_reply_button"
id="left_bar_compose_reply_button_big"
title="{{t 'Reply to selected message' }} (r)">
id="left_bar_compose_reply_button_big">
<span class="compose_reply_button_label">{{t 'Compose message' }}</span>
</button>
<template id="compose_reply_message_button_tooltip_template">
{{t 'Reply to selected message' }}
{{tooltip_hotkey_hints "R"}}
</template>
<template id="compose_reply_selected_topic_button_tooltip_template">
{{t 'Reply to selected conversation' }}
{{tooltip_hotkey_hints "R"}}
</template>
<template id="compose_reply_button_disabled_tooltip_template">
{{t 'You are not allowed to send direct messages in this organization.' }}
</template>
</span>
<span class="new_message_button mobile_button_container">
<button type="button" class="button small rounded compose_mobile_button"
@ -37,9 +47,17 @@
<span class="new_message_button stream_button_container">
<button type="button" class="button small rounded compose_stream_button"
id="left_bar_compose_stream_button_big"
title="{{t 'New topic' }} (c)">
data-tooltip-template-id="new_topic_message_button_tooltip_template">
<span class="compose_stream_button_label">{{t 'New topic' }}</span>
</button>
<template id="new_topic_message_button_tooltip_template">
{{t 'New topic' }}
{{tooltip_hotkey_hints "C"}}
</template>
<template id="new_stream_message_button_tooltip_template">
{{t 'New stream message' }}
{{tooltip_hotkey_hints "C"}}
</template>
</span>
{{#unless embedded }}
<span class="new_message_button private_button_container">

1
web/tests/compose.test.js
View File

@ -825,6 +825,7 @@ test_ui("DM policy disabled", ({override, override_rewire}) => {
test_ui("narrow_button_titles", ({override}) => {
override(narrow_state, "pm_ids_string", () => "31");
override(narrow_state, "is_message_feed_visible", () => true);
compose_closed_ui.update_buttons_for_private();
assert.equal(
$("#left_bar_compose_stream_button_big").text(),