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

user_info_popover: Show relevant info for spectators and hide buttons. 

We add the date joined info to the popover and hide all the buttons
since none are relevant for a spectator.
This commit is contained in:
Aman Agrawal 2021-11-02 07:36:31 +00:00
parent d76b4744bf
commit a40a5c0bdb
3 changed files with 90 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend_tests/node_tests/popovers.js
View File

@ -52,6 +52,7 @@ const alice = {
is_guest: false, is_guest: false,
is_admin: false, is_admin: false,
role: 400, role: 400,
date_joined: "2021-11-01T16:32:16.458735+00:00",
}; };
const me = { const me = {
@ -111,6 +112,7 @@ function test_ui(label, f) {
} }
test_ui("sender_hover", ({override, mock_template}) => { test_ui("sender_hover", ({override, mock_template}) => {
page_params.is_spectator = false;
override($.fn, "popover", noop); override($.fn, "popover", noop);
override(emoji, "get_emoji_details_by_name", noop); override(emoji, "get_emoji_details_by_name", noop);
@ -196,6 +198,8 @@ test_ui("sender_hover", ({override, mock_template}) => {
status_text: "on the beach", status_text: "on the beach",
status_emoji_info, status_emoji_info,
user_mention_syntax: "@**Alice Smith**", user_mention_syntax: "@**Alice Smith**",
date_joined: undefined,
spectator_view: false,
}); });
return "content-html"; return "content-html";
}); });

11
static/js/popovers.js
View File

@ -1,5 +1,5 @@
import ClipboardJS from "clipboard"; import ClipboardJS from "clipboard";
import {add, formatISO, set} from "date-fns"; import {add, formatISO, parseISO, set} from "date-fns";
import ConfirmDatePlugin from "flatpickr/dist/plugins/confirmDate/confirmDate"; import ConfirmDatePlugin from "flatpickr/dist/plugins/confirmDate/confirmDate";
import $ from "jquery"; import $ from "jquery";
import tippy, {hideAll} from "tippy.js"; import tippy, {hideAll} from "tippy.js";
@ -208,6 +208,13 @@ function render_user_info_popover(
const status_text = user_status.get_status_text(user.user_id); const status_text = user_status.get_status_text(user.user_id);
const status_emoji_info = user_status.get_status_emoji(user.user_id); const status_emoji_info = user_status.get_status_emoji(user.user_id);
const spectator_view = page_params.is_spectator;
let date_joined;
if (spectator_view) {
const dateFormat = new Intl.DateTimeFormat("default", {dateStyle: "long"});
date_joined = dateFormat.format(parseISO(user.date_joined));
}
const args = { const args = {
can_revoke_away, can_revoke_away,
can_set_away, can_set_away,
@ -234,6 +241,8 @@ function render_user_info_popover(
status_text, status_text,
status_emoji_info, status_emoji_info,
user_mention_syntax: people.get_mention_syntax(user.full_name, user.user_id), user_mention_syntax: people.get_mention_syntax(user.full_name, user.user_id),
date_joined,
spectator_view,
}; };
if (user.is_bot) { if (user.is_bot) {

147
static/templates/user_info_popover_content.hbs
View File

@ -7,7 +7,7 @@
{{#if is_bot}} {{#if is_bot}}
<i class="zulip-icon zulip-icon-bot" aria-hidden="true"></i> <i class="zulip-icon zulip-icon-bot" aria-hidden="true"></i>
{{else}} {{else}}
<span class="{{user_circle_class}} user_circle popover_user_presence tippy-zulip-tooltip" data-tippy-content="{{user_last_seen_time_status}}"></span> <span class="{{user_circle_class}} user_circle popover_user_presence tippy-zulip-tooltip hidden-for-spectators" data-tippy-content="{{user_last_seen_time_status}}"></span>
{{/if}} {{/if}}
{{/if}} {{/if}}
</li> </li>
@ -49,6 +49,7 @@
{{else}} {{else}}
<li>{{ user_type }}</li> <li>{{ user_type }}</li>
{{/if}} {{/if}}
<li class="only-visible-for-spectators">Joined {{date_joined}}</li>
</div> </div>
{{#if is_me}} {{#if is_me}}
@ -100,82 +101,86 @@
</li> </li>
{{/if}} {{/if}}
<hr /> {{#if spectator_view}}
{{#if show_user_profile}} {{else}}
<li>
<a tabindex="0" class="view_full_user_profile"> <hr />
{{#if is_me}} {{#if show_user_profile}}
<i class="fa fa-user" aria-hidden="true"></i> {{#tr}}View your profile{{/tr}}
{{else}}
<i class="fa fa-user" aria-hidden="true"></i> {{#tr}}View full profile{{/tr}}
{{/if}}
</a>
</li>
{{/if}}
{{#if is_active}}
{{#unless is_me}}
<li> <li>
<a tabindex="0" class="{{ private_message_class }}"> <a tabindex="0" class="view_full_user_profile">
<i class="fa fa-envelope" aria-hidden="true"></i> {{#tr}}Send private message{{/tr}} {{#if is_sender_popover}}<span class="hotkey-hint">(R)</span>{{/if}} {{#if is_me}}
<i class="fa fa-user" aria-hidden="true"></i> {{#tr}}View your profile{{/tr}}
{{else}}
<i class="fa fa-user" aria-hidden="true"></i> {{#tr}}View full profile{{/tr}}
{{/if}}
</a> </a>
</li> </li>
{{/unless}}
{{/if}}
{{#unless is_me}}
<li>
{{#if has_message_context}}
<a tabindex="0" class="mention_user">
<i class="fa fa-at" aria-hidden="true"></i>
{{#tr}}Reply mentioning user{{/tr}}
{{#if is_sender_popover}}<span class="hotkey-hint">(@)</span>{{/if}}
</a>
{{else}}
<a tabindex="0" class="copy_mention_syntax" data-clipboard-text="{{ user_mention_syntax }}">
<i class="fa fa-at" aria-hidden="true"></i>
{{#tr}}Copy mention syntax{{/tr}}
{{#if is_sender_popover}}<span class="hotkey-hint">(@)</span>{{/if}}
</a>
{{/if}} {{/if}}
</li> {{#if is_active}}
{{/unless}} {{#unless is_me}}
{{#if is_me}} <li>
<li> <a tabindex="0" class="{{ private_message_class }}">
<a href="/#settings/profile"> <i class="fa fa-envelope" aria-hidden="true"></i> {{#tr}}Send private message{{/tr}} {{#if is_sender_popover}}<span class="hotkey-hint">(R)</span>{{/if}}
<i class="fa fa-edit" aria-hidden="true"></i> {{#tr}}Edit your profile{{/tr}} </a>
</a> </li>
</li> {{/unless}}
{{/if}} {{/if}}
<hr /> {{#unless is_me}}
<li> <li>
<a href="{{ pm_with_uri }}" class="narrow_to_private_messages"> {{#if has_message_context}}
<i class="fa fa-lock" aria-hidden="true"></i> <a tabindex="0" class="mention_user">
{{#if is_me}} <i class="fa fa-at" aria-hidden="true"></i>
{{#tr}}View private messages to myself{{/tr}} {{#tr}}Reply mentioning user{{/tr}}
{{#if is_sender_popover}}<span class="hotkey-hint">(@)</span>{{/if}}
</a>
{{else}} {{else}}
{{#tr}}View private messages{{/tr}} <a tabindex="0" class="copy_mention_syntax" data-clipboard-text="{{ user_mention_syntax }}">
<i class="fa fa-at" aria-hidden="true"></i>
{{#tr}}Copy mention syntax{{/tr}}
{{#if is_sender_popover}}<span class="hotkey-hint">(@)</span>{{/if}}
</a>
{{/if}} {{/if}}
</a> </li>
</li> {{/unless}}
<li> {{#if is_me}}
<a href="{{ sent_by_uri }}" class="narrow_to_messages_sent"> <li>
<i class="fa fa-paper-plane" aria-hidden="true"></i> {{#tr}}View messages sent{{/tr}} <a href="/#settings/profile">
</a> <i class="fa fa-edit" aria-hidden="true"></i> {{#tr}}Edit your profile{{/tr}}
</li> </a>
</li>
{{/if}}
<hr />
<li>
<a href="{{ pm_with_uri }}" class="narrow_to_private_messages">
<i class="fa fa-lock" aria-hidden="true"></i>
{{#if is_me}}
{{#tr}}View private messages to myself{{/tr}}
{{else}}
{{#tr}}View private messages{{/tr}}
{{/if}}
</a>
</li>
<li>
<a href="{{ sent_by_uri }}" class="narrow_to_messages_sent">
<i class="fa fa-paper-plane" aria-hidden="true"></i> {{#tr}}View messages sent{{/tr}}
</a>
</li>
{{#if can_mute }} {{#if can_mute }}
<hr /> <hr />
<li> <li>
<a tabindex="0" class="sidebar-popover-mute-user"> <a tabindex="0" class="sidebar-popover-mute-user">
<i class="fa fa-eye-slash" aria-hidden="true"></i> {{#tr}}Mute this user{{/tr}} <i class="fa fa-eye-slash" aria-hidden="true"></i> {{#tr}}Mute this user{{/tr}}
</a> </a>
</li> </li>
{{/if}} {{/if}}
{{#if can_unmute}} {{#if can_unmute}}
<hr /> <hr />
<li> <li>
<a tabindex="0" class="sidebar-popover-unmute-user"> <a tabindex="0" class="sidebar-popover-unmute-user">
<i class="fa fa-eye" aria-hidden="true"></i> {{#tr}}Unmute this user{{/tr}} <i class="fa fa-eye" aria-hidden="true"></i> {{#tr}}Unmute this user{{/tr}}
</a> </a>
</li> </li>
{{/if}}
{{/if}} {{/if}}
</ul> </ul>