buddy_list: Don't rerender whole header when toggling sections.

This will be necessary to get the triangle to rotate when toggled.
This commit is contained in:
evykassirer
2024-09-30 14:42:47 -07:00
committed by Tim Abbott
parent 83dc7fc4d9
commit 4adf6e6c1e
3 changed files with 49 additions and 11 deletions

View File

@@ -354,22 +354,59 @@ export class BuddyList extends BuddyListConf {
}
}
render_section_headers(): void {
const {
current_sub,
total_human_subscribers_count,
update_section_header_counts(): void {
const {total_human_subscribers_count, other_users_count, participant_ids_set} =
this.render_data;
const subscriber_section_user_count =
total_human_subscribers_count - this.participant_user_ids.length;
const formatted_participants_count = get_formatted_sub_count(participant_ids_set.size);
const formatted_sub_users_count = get_formatted_sub_count(subscriber_section_user_count);
const formatted_other_users_count = get_formatted_sub_count(other_users_count);
$("#buddy-list-participants-container .buddy-list-heading-user-count").text(
formatted_participants_count,
);
$("#buddy-list-users-matching-view-container .buddy-list-heading-user-count").text(
formatted_sub_users_count,
);
$("#buddy-list-other-users-container .buddy-list-heading-user-count").text(
formatted_other_users_count,
);
$("#buddy-list-participants-section-heading").attr(
"data-user-count",
participant_ids_set.size,
);
$("#buddy-list-users-matching-view-section-heading").attr(
"data-user-count",
subscriber_section_user_count,
);
$("#buddy-list-users-other-users-section-heading").attr(
"data-user-count",
other_users_count,
total_human_users,
hide_headers,
participant_ids_set,
} = this.render_data;
);
}
render_section_headers(): void {
const {hide_headers, participant_ids_set} = this.render_data;
// We only show the participants list if it has members, so updating even if we're updating
// the count, that can affect if we show/hide this section.
const show_participants_list = !hide_headers && participant_ids_set.size;
$("#buddy-list-participants-container").toggleClass("no-display", !show_participants_list);
if ($(".buddy-list-subsection-header").children().length) {
this.update_section_header_counts();
return;
}
const {current_sub, total_human_subscribers_count, other_users_count, total_human_users} =
this.render_data;
$(".buddy-list-subsection-header").empty();
// If we're in the mode of hiding headers, that means we're only showing the "other users"
// section, so hide the other two sections.
$("#buddy-list-users-matching-view-container").toggleClass("no-display", hide_headers);
const show_participants_list = !hide_headers && participant_ids_set.size;
$("#buddy-list-participants-container").toggleClass("no-display", !show_participants_list);
// This is the case where every subscriber is in the participants list. In this case, we
// hide the "others in this channel" section.
if (

View File

@@ -1,4 +1,4 @@
<h5 id="{{id}}" data-user-count="{{user_count}}" class="buddy-list-heading no-style hidden-for-spectators">
{{header_text}} ({{user_count}})
{{header_text}} (<span class="buddy-list-heading-user-count">{{user_count}}</span>)
</h5>
<i class="buddy-list-section-toggle {{toggle_class}} fa fa-sm {{#if is_collapsed}}fa-caret-right{{else}}fa-caret-down{{/if}}" aria-hidden="true"></i>

View File

@@ -44,4 +44,5 @@ exports.stub_buddy_list_elements = () => {
$("#buddy-list-other-users-container .view-all-users-link").length = 0;
$("#buddy-list-users-matching-view-container .view-all-subscribers-link").remove = noop;
$("#buddy-list-other-users-container .view-all-users-link").remove = noop;
$(".buddy-list-subsection-header").children = () => [];
};