popovers: Hide left sidebar actions popover for empty topics.

This commit changes the behavior of the topic actions popover
(displayed from the left sidebar via the `...` menu) to no
longer appear for empty topics (topics with no messages).
Instead, a message is displayed: "There are no messages in
this topic.", along with the name of the topic.

Fixes: #32098.
This commit is contained in:
Saubhagya Patel 2024-11-12 20:14:22 +05:30
parent 76d3bf2532
commit b9676912b7
3 changed files with 111 additions and 96 deletions

View File

@ -11,6 +11,7 @@ import * as hash_util from "./hash_util.ts";
import {$t} from "./i18n.ts"; import {$t} from "./i18n.ts";
import * as message_edit from "./message_edit.ts"; import * as message_edit from "./message_edit.ts";
import * as message_lists from "./message_lists.ts"; import * as message_lists from "./message_lists.ts";
import * as message_util from "./message_util.ts";
import * as muted_users from "./muted_users.ts"; import * as muted_users from "./muted_users.ts";
import {page_params} from "./page_params.ts"; import {page_params} from "./page_params.ts";
import * as people from "./people.ts"; import * as people from "./people.ts";
@ -52,6 +53,7 @@ type TopicPopoverContext = {
topic_name: string; topic_name: string;
topic_unmuted: boolean; topic_unmuted: boolean;
is_spectator: boolean; is_spectator: boolean;
is_topic_empty: boolean;
can_move_topic: boolean; can_move_topic: boolean;
can_rename_topic: boolean; can_rename_topic: boolean;
is_realm_admin: boolean; is_realm_admin: boolean;
@ -248,6 +250,7 @@ export function get_topic_popover_content_context({
const visibility_policy = user_topics.get_topic_visibility_policy(sub.stream_id, topic_name); const visibility_policy = user_topics.get_topic_visibility_policy(sub.stream_id, topic_name);
const all_visibility_policies = user_topics.all_visibility_policies; const all_visibility_policies = user_topics.all_visibility_policies;
const is_spectator = page_params.is_spectator; const is_spectator = page_params.is_spectator;
const is_topic_empty = message_util.get_messages_in_topic(stream_id, topic_name).length === 0;
return { return {
stream_name: sub.name, stream_name: sub.name,
stream_id: sub.stream_id, stream_id: sub.stream_id,
@ -255,6 +258,7 @@ export function get_topic_popover_content_context({
topic_name, topic_name,
topic_unmuted, topic_unmuted,
is_spectator, is_spectator,
is_topic_empty,
can_move_topic, can_move_topic,
can_rename_topic, can_rename_topic,
is_realm_admin: current_user.is_admin, is_realm_admin: current_user.is_admin,

View File

@ -63,6 +63,10 @@ export function initialize() {
return; return;
} }
if (instance.context.is_topic_empty) {
return;
}
$popper.on("change", "input[name='sidebar-topic-visibility-select']", (e) => { $popper.on("change", "input[name='sidebar-topic-visibility-select']", (e) => {
const start_time = Date.now(); const start_time = Date.now();
const visibility_policy = Number.parseInt( const visibility_policy = Number.parseInt(

View File

@ -3,103 +3,110 @@
<li role="none" class="popover-topic-header text-item popover-menu-list-item"> <li role="none" class="popover-topic-header text-item popover-menu-list-item">
<span class="popover-topic-name">{{topic_name}}</span> <span class="popover-topic-name">{{topic_name}}</span>
</li> </li>
{{!-- Group 1 --}} {{#if is_topic_empty}}
{{#unless is_spectator}} <li role="separator" class="popover-menu-separator"></li>
<li role="separator" class="popover-menu-separator"></li> <li role="none" class="popover-menu-list-item text-item italic">
<li role="none" class="popover-menu-list-item"> <span class="popover-menu-label">{{t "There are no messages in this topic." }}</span>
<div role="group" class="tab-picker popover-menu-tab-group" aria-label="{{t 'Topic visibility' }}"> </li>
<input type="radio" id="sidebar-topic-muted-policy" class="tab-option" name="sidebar-topic-visibility-select" data-visibility-policy="{{all_visibility_policies.MUTED}}" {{#if (eq visibility_policy all_visibility_policies.MUTED)}}checked{{/if}} />
<label role="menuitemradio" class="tab-option-content tippy-zulip-delayed-tooltip" for="sidebar-topic-muted-policy" aria-label="{{t 'Mute' }}" data-tippy-content="{{t 'Mute' }}" tabindex="0">
<i class="zulip-icon zulip-icon-mute-new" aria-hidden="true"></i>
</label>
<input type="radio" id="sidebar-topic-inherit-policy" class="tab-option" name="sidebar-topic-visibility-select" data-visibility-policy="{{all_visibility_policies.INHERIT}}" {{#if (eq visibility_policy all_visibility_policies.INHERIT)}}checked{{/if}} />
<label role="menuitemradio" class="tab-option-content tippy-zulip-delayed-tooltip" for="sidebar-topic-inherit-policy" aria-label="{{t 'Default' }}" data-tippy-content="{{t 'Default' }}" tabindex="0">
<i class="zulip-icon zulip-icon-inherit" aria-hidden="true"></i>
</label>
{{#if (or stream_muted topic_unmuted)}}
<input type="radio" id="sidebar-topic-unmuted-policy" class="tab-option" name="sidebar-topic-visibility-select" data-visibility-policy="{{all_visibility_policies.UNMUTED}}" {{#if (eq visibility_policy all_visibility_policies.UNMUTED)}}checked{{/if}} />
<label role="menuitemradio" class="tab-option-content tippy-zulip-delayed-tooltip" for="sidebar-topic-unmuted-policy" aria-label="{{t 'Unmute' }}" data-tippy-content="{{t 'Unmute' }}" tabindex="0">
<i class="zulip-icon zulip-icon-unmute-new" aria-hidden="true"></i>
</label>
{{/if}}
<input type="radio" id="sidebar-topic-followed-policy" class="tab-option" name="sidebar-topic-visibility-select" data-visibility-policy="{{all_visibility_policies.FOLLOWED}}" {{#if (eq visibility_policy all_visibility_policies.FOLLOWED)}}checked{{/if}} />
<label role="menuitemradio" class="tab-option-content tippy-zulip-delayed-tooltip" for="sidebar-topic-followed-policy" aria-label="{{t 'Follow' }}" data-tippy-content="{{t 'Follow' }}" tabindex="0">
<i class="zulip-icon zulip-icon-follow" aria-hidden="true"></i>
</label>
<span class="slider"></span>
</div>
</li>
{{/unless}}
{{!-- Group 2 --}}
<li role="separator" class="popover-menu-separator"></li>
{{#if has_starred_messages}}
<li role="none" class="link-item popover-menu-list-item hidden-for-spectators">
<a role="menuitem" class="sidebar-popover-unstar-all-in-topic popover-menu-link" tabindex="0">
<i class="popover-menu-icon zulip-icon zulip-icon-star" aria-hidden="true"></i>
<span class="popover-menu-label">{{t "Unstar all messages in topic" }}</span>
</a>
</li>
{{/if}}
{{#if has_unread_messages}}
<li role="none" class="link-item popover-menu-list-item hidden-for-spectators">
<a role="menuitem" class="sidebar-popover-mark-topic-read popover-menu-link" tabindex="0">
<i class="popover-menu-icon zulip-icon zulip-icon-mark-as-read" aria-hidden="true"></i>
<span class="popover-menu-label">{{t "Mark all messages as read" }}</span>
</a>
</li>
{{else}} {{else}}
<li role="none" class="link-item popover-menu-list-item hidden-for-spectators"> {{!-- Group 1 --}}
<a role="menuitem" class="sidebar-popover-mark-topic-unread popover-menu-link" tabindex="0"> {{#unless is_spectator}}
<i class="popover-menu-icon zulip-icon zulip-icon-mark-as-unread" aria-hidden="true"></i> <li role="separator" class="popover-menu-separator"></li>
<span class="popover-menu-label">{{t "Mark all messages as unread" }}</span> <li role="none" class="popover-menu-list-item">
</a> <div role="group" class="tab-picker popover-menu-tab-group" aria-label="{{t 'Topic visibility' }}">
</li> <input type="radio" id="sidebar-topic-muted-policy" class="tab-option" name="sidebar-topic-visibility-select" data-visibility-policy="{{all_visibility_policies.MUTED}}" {{#if (eq visibility_policy all_visibility_policies.MUTED)}}checked{{/if}} />
{{/if}} <label role="menuitemradio" class="tab-option-content tippy-zulip-delayed-tooltip" for="sidebar-topic-muted-policy" aria-label="{{t 'Mute' }}" data-tippy-content="{{t 'Mute' }}" tabindex="0">
<li role="none" class="link-item popover-menu-list-item"> <i class="zulip-icon zulip-icon-mute-new" aria-hidden="true"></i>
<a role="menuitem" class="sidebar-popover-copy-link-to-topic popover-menu-link" data-clipboard-text="{{ url }}" tabindex="0"> </label>
<i class="popover-menu-icon zulip-icon zulip-icon-link-alt" aria-hidden="true"></i> <input type="radio" id="sidebar-topic-inherit-policy" class="tab-option" name="sidebar-topic-visibility-select" data-visibility-policy="{{all_visibility_policies.INHERIT}}" {{#if (eq visibility_policy all_visibility_policies.INHERIT)}}checked{{/if}} />
<span class="popover-menu-label">{{t "Copy link to topic" }}</span> <label role="menuitemradio" class="tab-option-content tippy-zulip-delayed-tooltip" for="sidebar-topic-inherit-policy" aria-label="{{t 'Default' }}" data-tippy-content="{{t 'Default' }}" tabindex="0">
</a> <i class="zulip-icon zulip-icon-inherit" aria-hidden="true"></i>
</li> </label>
{{!-- Group 3 --}} {{#if (or stream_muted topic_unmuted)}}
{{#if (or can_move_topic can_rename_topic is_realm_admin)}} <input type="radio" id="sidebar-topic-unmuted-policy" class="tab-option" name="sidebar-topic-visibility-select" data-visibility-policy="{{all_visibility_policies.UNMUTED}}" {{#if (eq visibility_policy all_visibility_policies.UNMUTED)}}checked{{/if}} />
<li role="separator" class="popover-menu-separator"></li> <label role="menuitemradio" class="tab-option-content tippy-zulip-delayed-tooltip" for="sidebar-topic-unmuted-policy" aria-label="{{t 'Unmute' }}" data-tippy-content="{{t 'Unmute' }}" tabindex="0">
{{/if}} <i class="zulip-icon zulip-icon-unmute-new" aria-hidden="true"></i>
{{#if can_move_topic}} </label>
<li role="none" class="link-item popover-menu-list-item"> {{/if}}
<a role="menuitem" class="sidebar-popover-move-topic-messages popover-menu-link" tabindex="0"> <input type="radio" id="sidebar-topic-followed-policy" class="tab-option" name="sidebar-topic-visibility-select" data-visibility-policy="{{all_visibility_policies.FOLLOWED}}" {{#if (eq visibility_policy all_visibility_policies.FOLLOWED)}}checked{{/if}} />
<i class="popover-menu-icon zulip-icon zulip-icon-move-alt" aria-hidden="true"></i> <label role="menuitemradio" class="tab-option-content tippy-zulip-delayed-tooltip" for="sidebar-topic-followed-policy" aria-label="{{t 'Follow' }}" data-tippy-content="{{t 'Follow' }}" tabindex="0">
<span class="popover-menu-label">{{t "Move topic" }}</span> <i class="zulip-icon zulip-icon-follow" aria-hidden="true"></i>
</a> </label>
</li> <span class="slider"></span>
{{else if can_rename_topic}} </div>
<li role="none" class="link-item popover-menu-list-item"> </li>
<a role="menuitem" class="sidebar-popover-rename-topic-messages popover-menu-link" tabindex="0"> {{/unless}}
<i class="popover-menu-icon zulip-icon zulip-icon-rename" aria-hidden="true"></i> {{!-- Group 2 --}}
<span class="popover-menu-label">{{t "Rename topic" }}</span> <li role="separator" class="popover-menu-separator"></li>
</a> {{#if has_starred_messages}}
</li> <li role="none" class="link-item popover-menu-list-item hidden-for-spectators">
{{/if}} <a role="menuitem" class="sidebar-popover-unstar-all-in-topic popover-menu-link" tabindex="0">
{{#if can_rename_topic}} <i class="popover-menu-icon zulip-icon zulip-icon-star" aria-hidden="true"></i>
<li role="none" class="link-item popover-menu-list-item"> <span class="popover-menu-label">{{t "Unstar all messages in topic" }}</span>
<a role="menuitem" class="sidebar-popover-toggle-resolved popover-menu-link" tabindex="0"> </a>
{{# if topic_is_resolved }} </li>
<i class="popover-menu-icon zulip-icon zulip-icon-check-x" aria-hidden="true"></i> {{/if}}
<span class="popover-menu-label">{{t "Mark as unresolved"}}</span> {{#if has_unread_messages}}
{{else}} <li role="none" class="link-item popover-menu-list-item hidden-for-spectators">
<i class="popover-menu-icon zulip-icon zulip-icon-check" aria-hidden="true"></i> <a role="menuitem" class="sidebar-popover-mark-topic-read popover-menu-link" tabindex="0">
<span class="popover-menu-label">{{t "Mark as resolved"}}</span> <i class="popover-menu-icon zulip-icon zulip-icon-mark-as-read" aria-hidden="true"></i>
{{/if}} <span class="popover-menu-label">{{t "Mark all messages as read" }}</span>
</a> </a>
</li> </li>
{{/if}} {{else}}
{{#if is_realm_admin}} <li role="none" class="link-item popover-menu-list-item hidden-for-spectators">
<li role="none" class="link-item popover-menu-list-item"> <a role="menuitem" class="sidebar-popover-mark-topic-unread popover-menu-link" tabindex="0">
<a role="menuitem" class="sidebar-popover-delete-topic-messages popover-menu-link" tabindex="0"> <i class="popover-menu-icon zulip-icon zulip-icon-mark-as-unread" aria-hidden="true"></i>
<i class="popover-menu-icon zulip-icon zulip-icon-trash" aria-hidden="true"></i> <span class="popover-menu-label">{{t "Mark all messages as unread" }}</span>
<span class="popover-menu-label">{{t "Delete topic"}}</span> </a>
</a> </li>
</li> {{/if}}
<li role="none" class="link-item popover-menu-list-item">
<a role="menuitem" class="sidebar-popover-copy-link-to-topic popover-menu-link" data-clipboard-text="{{ url }}" tabindex="0">
<i class="popover-menu-icon zulip-icon zulip-icon-link-alt" aria-hidden="true"></i>
<span class="popover-menu-label">{{t "Copy link to topic" }}</span>
</a>
</li>
{{!-- Group 3 --}}
{{#if (or can_move_topic can_rename_topic is_realm_admin)}}
<li role="separator" class="popover-menu-separator"></li>
{{/if}}
{{#if can_move_topic}}
<li role="none" class="link-item popover-menu-list-item">
<a role="menuitem" class="sidebar-popover-move-topic-messages popover-menu-link" tabindex="0">
<i class="popover-menu-icon zulip-icon zulip-icon-move-alt" aria-hidden="true"></i>
<span class="popover-menu-label">{{t "Move topic" }}</span>
</a>
</li>
{{else if can_rename_topic}}
<li role="none" class="link-item popover-menu-list-item">
<a role="menuitem" class="sidebar-popover-rename-topic-messages popover-menu-link" tabindex="0">
<i class="popover-menu-icon zulip-icon zulip-icon-rename" aria-hidden="true"></i>
<span class="popover-menu-label">{{t "Rename topic" }}</span>
</a>
</li>
{{/if}}
{{#if can_rename_topic}}
<li role="none" class="link-item popover-menu-list-item">
<a role="menuitem" class="sidebar-popover-toggle-resolved popover-menu-link" tabindex="0">
{{# if topic_is_resolved }}
<i class="popover-menu-icon zulip-icon zulip-icon-check-x" aria-hidden="true"></i>
<span class="popover-menu-label">{{t "Mark as unresolved"}}</span>
{{else}}
<i class="popover-menu-icon zulip-icon zulip-icon-check" aria-hidden="true"></i>
<span class="popover-menu-label">{{t "Mark as resolved"}}</span>
{{/if}}
</a>
</li>
{{/if}}
{{#if is_realm_admin}}
<li role="none" class="link-item popover-menu-list-item">
<a role="menuitem" class="sidebar-popover-delete-topic-messages popover-menu-link" tabindex="0">
<i class="popover-menu-icon zulip-icon zulip-icon-trash" aria-hidden="true"></i>
<span class="popover-menu-label">{{t "Delete topic"}}</span>
</a>
</li>
{{/if}}
{{/if}} {{/if}}
</ul> </ul>
</div> </div>