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

message_reaction: Calculate and render tooltip using tippyjs. 

Tippyjs automatically places it to bottom.

NOTE: placement of tooltip is changed from 'bottom' to `auto`.
Custom css was set here to avoid tooltip being partially hidden
on small screens. This change automatically takes care of it
by showing the tooltip on right side of message_reaction on
small screens if it is partially hidden from the left or
vice versa.
This commit is contained in:
Aman Agrawal 2021-03-24 17:41:55 +00:00 committed by Tim Abbott
parent 487fcb6a3c
commit 0e32454b1d
2 changed files with 16 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
static/js/click_handlers.js
View File

@ -235,42 +235,6 @@ export function initialize() {
e.preventDefault();
});
// TOOLTIP FOR MESSAGE REACTIONS
$("#main_div").on("mouseenter", ".message_reaction", (e) => {
e.stopPropagation();
const elem = $(e.currentTarget);
const local_id = elem.attr("data-reaction-id");
const message_id = rows.get_message_id(e.currentTarget);
const title = reactions.get_reaction_title_data(message_id, local_id);
elem.tooltip({
title,
trigger: "hover",
placement: "bottom",
animation: false,
});
elem.tooltip("show");
$(".tooltip, .tooltip-inner").css({
"margin-left": "15px",
"max-width": $(window).width() * 0.6,
});
// Remove the arrow from the tooltip.
$(".tooltip-arrow").remove();
});
$("#main_div").on("mouseleave", ".message_reaction", (e) => {
e.stopPropagation();
$(e.currentTarget).tooltip("destroy");
});
// DESTROY PERSISTING TOOLTIPS ON HOVER
$("body").on("mouseenter", ".tooltip", (e) => {
e.stopPropagation();
$(e.currentTarget).remove();
});
$("#main_div").on("click", "a.stream", function (e) {
e.preventDefault();
// Note that we may have an href here, but we trust the stream id more,

16
static/js/tippyjs.js
View File

@ -1,5 +1,9 @@
import $ from "jquery";
import tippy, {delegate} from "tippy.js";
import * as reactions from "./reactions";
import * as rows from "./rows";
// We override the defaults set by tippy library here,
// so make sure to check this too after checking tippyjs
// documentation for default properties.
@ -37,4 +41,16 @@ export function initialize() {
// show tippy styled tooltip on hover.
target: ".tippy-zulip-tooltip",
});
// message reaction tooltip showing who reacted.
delegate("body", {
target: ".message_reaction",
onShow(instance) {
const elem = $(instance.reference);
const local_id = elem.attr("data-reaction-id");
const message_id = rows.get_message_id(instance.reference);
const title = reactions.get_reaction_title_data(message_id, local_id);
instance.setContent(title);
},
});
}