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 * as message_edit from "./message_edit.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 {page_params} from "./page_params.ts";
import * as people from "./people.ts";
@ -52,6 +53,7 @@ type TopicPopoverContext = {
topic_name: string;
topic_unmuted: boolean;
is_spectator: boolean;
is_topic_empty: boolean;
can_move_topic: boolean;
can_rename_topic: 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 all_visibility_policies = user_topics.all_visibility_policies;
const is_spectator = page_params.is_spectator;
const is_topic_empty = message_util.get_messages_in_topic(stream_id, topic_name).length === 0;
return {
stream_name: sub.name,
stream_id: sub.stream_id,
@ -255,6 +258,7 @@ export function get_topic_popover_content_context({
topic_name,
topic_unmuted,
is_spectator,
is_topic_empty,
can_move_topic,
can_rename_topic,
is_realm_admin: current_user.is_admin,

View File

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

View File

@ -3,103 +3,110 @@
<li role="none" class="popover-topic-header text-item popover-menu-list-item">
<span class="popover-topic-name">{{topic_name}}</span>
</li>
{{!-- Group 1 --}}
{{#unless is_spectator}}
<li role="separator" class="popover-menu-separator"></li>
<li role="none" class="popover-menu-list-item">
<div role="group" class="tab-picker popover-menu-tab-group" aria-label="{{t 'Topic visibility' }}">
<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>
{{#if is_topic_empty}}
<li role="separator" class="popover-menu-separator"></li>
<li role="none" class="popover-menu-list-item text-item italic">
<span class="popover-menu-label">{{t "There are no messages in this topic." }}</span>
</li>
{{else}}
<li role="none" class="link-item popover-menu-list-item hidden-for-spectators">
<a role="menuitem" class="sidebar-popover-mark-topic-unread popover-menu-link" tabindex="0">
<i class="popover-menu-icon zulip-icon zulip-icon-mark-as-unread" aria-hidden="true"></i>
<span class="popover-menu-label">{{t "Mark all messages as unread" }}</span>
</a>
</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>
{{!-- Group 1 --}}
{{#unless is_spectator}}
<li role="separator" class="popover-menu-separator"></li>
<li role="none" class="popover-menu-list-item">
<div role="group" class="tab-picker popover-menu-tab-group" aria-label="{{t 'Topic visibility' }}">
<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}}
<li role="none" class="link-item popover-menu-list-item hidden-for-spectators">
<a role="menuitem" class="sidebar-popover-mark-topic-unread popover-menu-link" tabindex="0">
<i class="popover-menu-icon zulip-icon zulip-icon-mark-as-unread" aria-hidden="true"></i>
<span class="popover-menu-label">{{t "Mark all messages as unread" }}</span>
</a>
</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}}
</ul>
</div>