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_admin: false,
role: 400,
date_joined: "2021-11-01T16:32:16.458735+00:00",
};
const me = {
@ -111,6 +112,7 @@ function test_ui(label, f) {
}
test_ui("sender_hover", ({override, mock_template}) => {
page_params.is_spectator = false;
override($.fn, "popover", 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_emoji_info,
user_mention_syntax: "@**Alice Smith**",
date_joined: undefined,
spectator_view: false,
});
return "content-html";
});

11
static/js/popovers.js
View File

@ -1,5 +1,5 @@
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 $ from "jquery";
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_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 = {
can_revoke_away,
can_set_away,
@ -234,6 +241,8 @@ function render_user_info_popover(
status_text,
status_emoji_info,
user_mention_syntax: people.get_mention_syntax(user.full_name, user.user_id),
date_joined,
spectator_view,
};
if (user.is_bot) {

147
static/templates/user_info_popover_content.hbs
View File

@ -7,7 +7,7 @@
{{#if is_bot}}
<i class="zulip-icon zulip-icon-bot" aria-hidden="true"></i>
{{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}}
</li>
@ -49,6 +49,7 @@
{{else}}
<li>{{ user_type }}</li>
{{/if}}
<li class="only-visible-for-spectators">Joined {{date_joined}}</li>
</div>
{{#if is_me}}
@ -100,82 +101,86 @@
</li>
{{/if}}
<hr />
{{#if show_user_profile}}
<li>
<a tabindex="0" class="view_full_user_profile">
{{#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>
</li>
{{/if}}
{{#if is_active}}
{{#unless is_me}}
{{#if spectator_view}}
{{else}}
<hr />
{{#if show_user_profile}}
<li>
<a tabindex="0" class="{{ private_message_class }}">
<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}}
<a tabindex="0" class="view_full_user_profile">
{{#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>
</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}}
</li>
{{/unless}}
{{#if is_me}}
<li>
<a href="/#settings/profile">
<i class="fa fa-edit" aria-hidden="true"></i> {{#tr}}Edit your profile{{/tr}}
</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}}
{{#if is_active}}
{{#unless is_me}}
<li>
<a tabindex="0" class="{{ private_message_class }}">
<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}}
</a>
</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}}
{{#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}}
</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>
</li>
{{/unless}}
{{#if is_me}}
<li>
<a href="/#settings/profile">
<i class="fa fa-edit" aria-hidden="true"></i> {{#tr}}Edit your profile{{/tr}}
</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 }}
<hr />
<li>
<a tabindex="0" class="sidebar-popover-mute-user">
<i class="fa fa-eye-slash" aria-hidden="true"></i> {{#tr}}Mute this user{{/tr}}
</a>
</li>
{{/if}}
{{#if can_unmute}}
<hr />
<li>
<a tabindex="0" class="sidebar-popover-unmute-user">
<i class="fa fa-eye" aria-hidden="true"></i> {{#tr}}Unmute this user{{/tr}}
</a>
</li>
{{#if can_mute }}
<hr />
<li>
<a tabindex="0" class="sidebar-popover-mute-user">
<i class="fa fa-eye-slash" aria-hidden="true"></i> {{#tr}}Mute this user{{/tr}}
</a>
</li>
{{/if}}
{{#if can_unmute}}
<hr />
<li>
<a tabindex="0" class="sidebar-popover-unmute-user">
<i class="fa fa-eye" aria-hidden="true"></i> {{#tr}}Unmute this user{{/tr}}
</a>
</li>
{{/if}}
{{/if}}
</ul>