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

condense: Dynamically render content for message length toggle. 

This moves the content inside `message_length_controller` to a new
handlerbars template `message_length_toggle.hbs`, and dynamically
renders the content based on the message length.

Since the majority of the messages aren't collapsed/condensed, this
change should improve the initial rendering of the message list.

Fixes #31133.
This commit is contained in:
Sayam Samal 2024-08-29 21:53:23 +05:30 committed by Tim Abbott
parent 656c65c74c
commit e4f1156bea
5 changed files with 35 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
web/src/condense.ts
View File

@ -1,6 +1,8 @@
import $ from "jquery";
import assert from "minimalistic-assert";
import render_message_length_toggle from "../templates/message_length_toggle.hbs";
import * as message_flags from "./message_flags";
import * as message_lists from "./message_lists";
import type {Message} from "./message_store";
@ -20,26 +22,32 @@ This library implements two related, similar concepts:
*/
function show_more_link($row: JQuery): void {
$row.find(".message_condenser").hide();
$row.find(".message_expander").show();
export function show_message_expander($row: JQuery): void {
$row.find(".message_length_controller").html(
render_message_length_toggle({toggle_type: "expander"}),
);
}
function show_condense_link($row: JQuery): void {
$row.find(".message_expander").hide();
$row.find(".message_condenser").show();
export function show_message_condenser($row: JQuery): void {
$row.find(".message_length_controller").html(
render_message_length_toggle({toggle_type: "condenser"}),
);
}
export function hide_message_length_toggle($row: JQuery): void {
$row.find(".message_length_controller").empty();
}
function condense_row($row: JQuery): void {
const $content = $row.find(".message_content");
$content.addClass("condensed");
show_more_link($row);
show_message_expander($row);
}
function uncondense_row($row: JQuery): void {
const $content = $row.find(".message_content");
$content.removeClass("condensed");
show_condense_link($row);
show_message_condenser($row);
}
export function uncollapse(message: Message): void {
@ -65,7 +73,7 @@ export function uncollapse(message: Message): void {
condense_row($row);
} else {
// This was a short message, no more need for a [More] link.
$row.find(".message_expander").hide();
hide_message_length_toggle($row);
}
};
@ -92,7 +100,7 @@ export function collapse(message: Message): void {
const process_row = function process_row($row: JQuery): void {
$row.find(".message_content").addClass("collapsed");
show_more_link($row);
show_message_expander($row);
};
for (const list of message_lists.all_rendered_message_lists()) {
@ -133,15 +141,13 @@ export function toggle_collapse(message: Message): void {
message.condensed = true;
$content.addClass("condensed");
show_message_expander($row);
$row.find(".message_condenser").hide();
}
uncollapse(message);
} else {
if (is_condensed) {
message.condensed = false;
$content.removeClass("condensed");
hide_message_expander($row);
$row.find(".message_condenser").show();
show_message_condenser($row);
} else {
collapse(message);
}
@ -155,30 +161,6 @@ function get_message_height(elem: HTMLElement): number {
return util.the($(elem).find(".message_content")).scrollHeight;
}
export function hide_message_expander($row: JQuery): void {
if ($row.find(".could-be-condensed").length !== 0) {
$row.find(".message_expander").hide();
}
}
export function hide_message_condenser($row: JQuery): void {
if ($row.find(".could-be-condensed").length !== 0) {
$row.find(".message_condenser").hide();
}
}
export function show_message_expander($row: JQuery): void {
if ($row.find(".could-be-condensed").length !== 0) {
$row.find(".message_expander").show();
}
}
export function show_message_condenser($row: JQuery): void {
if ($row.find(".could-be-condensed").length !== 0) {
$row.find(".message_condenser").show();
}
}
export function condense_and_collapse(elems: JQuery): void {
if (message_lists.current === undefined) {
return;
@ -247,14 +229,14 @@ export function condense_and_collapse(elems: JQuery): void {
condense_row($(elem));
} else {
$content.removeClass("condensed");
$(elem).find(".message_expander").hide();
hide_message_length_toggle($(elem));
}
// Completely hide the message and replace it with a "Show more"
// button if the user has collapsed it.
if (message.collapsed) {
$content.addClass("collapsed");
$(elem).find(".message_expander").show();
show_message_expander($(elem));
}
}
}
@ -277,9 +259,7 @@ export function initialize(): void {
} else if ($content.hasClass("condensed")) {
// Uncondense (show the full long message).
message.condensed = false;
$content.removeClass("condensed");
$(this).hide();
$row.find(".message_condenser").show();
uncondense_row($row);
}
e.stopPropagation();
e.preventDefault();

5
web/src/message_edit.ts
View File

@ -469,8 +469,7 @@ function edit_message($row: JQuery, raw_content: string): void {
const message = message_lists.current.get(rows.id($row));
assert(message !== undefined);
$row.find(".message_reactions").hide();
condense.hide_message_expander($row);
condense.hide_message_condenser($row);
condense.hide_message_length_toggle($row);
// We potentially got to this function by clicking a button that implied the
// user would be able to edit their message. Give a little bit of buffer in
@ -854,11 +853,13 @@ export function end_message_row_edit($row: JQuery): void {
message_lists.current.hide_edit_message($row);
compose_call.abort_video_callbacks(message.id.toString());
}
if ($row.find(".could-be-condensed").length !== 0) {
if ($row.find(".condensed").length !== 0) {
condense.show_message_expander($row);
} else {
condense.show_message_condenser($row);
}
}
$row.find(".message_reactions").show();
// We have to blur out text fields, or else hotkeys.js

1
web/styles/zulip.css
View File

@ -987,7 +987,6 @@ div.focused-message-list {
.message_length_controller {
.message_length_toggle {
display: none;
width: 100%;
height: 24px;
margin-bottom: var(--message-box-markdown-aligned-vertical-space);

5
web/templates/message_body.hbs
View File

@ -59,10 +59,7 @@
{{> edited_notice}}
{{/if}}
<div class="message_length_controller">
<button type="button" class="message_expander message_length_toggle tippy-zulip-delayed-tooltip" data-tooltip-template-id="message-expander-tooltip-template">{{t "Show more" }}</button>
<button type="button" class="message_condenser message_length_toggle tippy-zulip-delayed-tooltip" data-tooltip-template-id="message-condenser-tooltip-template">{{t "Show less" }}</button>
</div>
<div class="message_length_controller"></div>
{{#unless is_hidden}}
<div class="message_reactions">{{> message_reactions }}</div>

5
web/templates/message_length_toggle.hbs Normal file
View File

@ -0,0 +1,5 @@
{{#if (eq toggle_type "expander")}}
<button type="button" class="message_expander message_length_toggle tippy-zulip-delayed-tooltip" data-tooltip-template-id="message-expander-tooltip-template">{{t "Show more" }}</button>
{{else if (eq toggle_type "condenser")}}
<button type="button" class="message_condenser message_length_toggle tippy-zulip-delayed-tooltip" data-tooltip-template-id="message-condenser-tooltip-template">{{t "Show less" }}</button>
{{/if}}