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

recent_topics: Show user presence status in PMs messages. 

We have bound the `mouseenter` event with a circle
status parent element to render the tooltip. Instead of passing
the tooltip content directly in `data-tippy-content`, we
are rendering it via JS because when showing the bot
tooltip we want a multiline tooltip.

We have also made some minor changes to `do_render_buddy_list_tooltip`,
so we can append the tooltip to the target element and avoid adding
a observer to it.

This commit also sets the font weight for tippy content to
400 to avoid bold content.
This commit is contained in:
Riken Shah 2022-10-20 17:19:03 +05:30 committed by Tim Abbott
parent 6e3d8c7733
commit 9d12a9c21e
4 changed files with 109 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
static/js/click_handlers.js
View File

@ -592,7 +592,12 @@ export function initialize() {
$(".tooltip").remove();
});
function do_render_buddy_list_tooltip($elem, title_data) {
function do_render_buddy_list_tooltip(
$elem,
title_data,
parent_element_to_append = null,
is_custom_observer_needed = true,
) {
let placement = "left";
let observer;
if (window.innerWidth < media_breakpoints_num.md) {
@ -611,9 +616,14 @@ export function initialize() {
showOnCreate: true,
onHidden: (instance) => {
instance.destroy();
observer.disconnect();
if (is_custom_observer_needed) {
observer.disconnect();
}
},
onShow: (instance) => {
if (!is_custom_observer_needed) {
return;
}
// For both buddy list and top left corner pm list, `target_node`
// is their parent `ul` element. We cannot use MutationObserver
// directly on the reference element because it will be removed
@ -638,7 +648,7 @@ export function initialize() {
observer = new MutationObserver(callback);
observer.observe(target_node, config);
},
appendTo: () => document.body,
appendTo: () => parent_element_to_append || document.body,
});
}
@ -663,6 +673,19 @@ export function initialize() {
do_render_buddy_list_tooltip($elem, title_data);
});
// Recent conversations PMs
$("body").on("mouseenter", ".recent_topic_stream .pm_status_icon", (e) => {
e.stopPropagation();
const $elem = $(e.currentTarget);
const user_ids_string = $elem.attr("data-user-ids-string");
// Don't show tooltip for group PMs.
if (!user_ids_string || user_ids_string.split(",").length !== 1) {
return;
}
const title_data = recent_topics_ui.get_pm_tooltip_data(user_ids_string);
do_render_buddy_list_tooltip($elem, title_data, undefined, false);
});
// MISC
{

49
static/js/recent_topics_ui.js
View File

@ -318,6 +318,43 @@ function message_to_conversation_unread_count(msg) {
return unread.num_unread_for_topic(msg.stream_id, msg.topic);
}
export function get_pm_tooltip_data(user_ids_string) {
const user_id = Number.parseInt(user_ids_string, 10);
const person = people.get_by_user_id(user_id);
if (person.is_bot) {
const bot_owner = people.get_bot_owner_user(person);
if (bot_owner) {
const bot_owner_name = $t(
{defaultMessage: "Owner: {name}"},
{name: bot_owner.full_name},
);
return {
first_line: person.full_name,
second_line: bot_owner_name,
};
}
// Bot does not have an owner.
return {
first_line: person.full_name,
second_line: "",
third_line: "",
};
}
const last_seen = buddy_data.user_last_seen_time_status(user_id);
// Users does not have a status.
return {
first_line: last_seen,
second_line: "",
third_line: "",
};
}
function format_conversation(conversation_data) {
const context = {};
const last_msg = message_store.get(conversation_data.last_msg_id);
@ -379,9 +416,15 @@ function format_conversation(conversation_data) {
senders = all_senders.slice(-MAX_AVATAR).map((sender) => sender.id);
if (!context.is_group) {
context.user_circle_class = buddy_data.get_user_circle_class(
Number.parseInt(last_msg.to_user_ids, 10),
);
const user_id = Number.parseInt(last_msg.to_user_ids, 10);
const user = people.get_by_user_id(user_id);
if (user.is_bot) {
// Bots do not have status emoji, and are modeled as
// always present.
context.user_circle_class = "user_circle_green";
} else {
context.user_circle_class = buddy_data.get_user_circle_class(user_id);
}
}
// Collect extra senders fullname for tooltip.

56
static/styles/recent_topics.css
View File

@ -170,6 +170,10 @@
/* Flex container to fit in user circle and group icon */
display: flex;
justify-content: space-between;
.tippy-content {
font-weight: 400;
}
}
.flex_container {
@ -382,29 +386,39 @@
}
}
.pm_status_icon {
display: flex;
justify-content: center;
align-items: center;
/* Increasing vertical padding any further will increase
the height of the row. */
padding: 5px 0 5px 8px;
/* To accommodate fa-group icon */
width: 14px;
height: 14px;
.fa-group {
font-size: 0.8rem;
/* color: hsl(105, 2%, 50%); */
opacity: 0.6;
.private_conversation_row {
.recent_topic_stream {
/* Reduce padding of stream section so that user status
icon can have more padding without impacting height of the row */
padding: 5px 0 5px 8px;
}
.user_circle {
/* Shrink the user activity circle for the recent topics context. */
width: 7px;
height: 7px;
float: left;
position: unset;
.pm_status_icon {
display: flex;
justify-content: center;
align-items: center;
/* Increasing vertical padding any further will increase
the height of the row. */
padding: 8px;
position: relative;
right: -8px; /* To cancel padding-right */
/* To accommodate fa-group icon */
width: 14px;
height: 14px;
.fa-group {
font-size: 0.8rem;
/* color: hsl(105, 2%, 50%); */
opacity: 0.6;
}
.user_circle {
/* Shrink the user activity circle for the recent topics context. */
width: 7px;
height: 7px;
float: left;
position: unset;
}
}
}
}

4
static/templates/recent_topic_row.hbs
View File

@ -1,4 +1,4 @@
<tr id="recent_conversation:{{conversation_key}}" {{#if unread_count}}class="unread_topic"{{/if}} data-unread-count="{{unread_count}}" data-muted="{{muted}}" data-participated="{{participated}}" data-private="{{is_private}}">
<tr id="recent_conversation:{{conversation_key}}" class="{{#if unread_count}}unread_topic{{/if}} {{#if is_private}}private_conversation_row{{/if}}" data-unread-count="{{unread_count}}" data-muted="{{muted}}" data-participated="{{participated}}" data-private="{{is_private}}">
<td class="recent_topic_stream">
<div class="flex_container flex_container_pm">
<div class="left_part recent_topics_focusable">
@ -15,7 +15,7 @@
{{!-- For presence/group indicator --}}
{{#if is_private}}
<div class="right_part">
<span class="pm_status_icon">
<span class="pm_status_icon {{#unless is_group}}show-tooltip{{/unless}}" data-tippy-placement="top" data-user-ids-string="{{user_ids_string}}">
{{#if is_group}}
<span class="fa fa-group"></span>
{{else}}