From e4f1156bea65c496512774d6b2194e687f7b260e Mon Sep 17 00:00:00 2001 From: Sayam Samal Date: Thu, 29 Aug 2024 21:53:23 +0530 Subject: [PATCH] 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. --- web/src/condense.ts | 64 +++++++++---------------- web/src/message_edit.ts | 13 ++--- web/styles/zulip.css | 1 - web/templates/message_body.hbs | 5 +- web/templates/message_length_toggle.hbs | 5 ++ 5 files changed, 35 insertions(+), 53 deletions(-) create mode 100644 web/templates/message_length_toggle.hbs diff --git a/web/src/condense.ts b/web/src/condense.ts index bfb715da3e..b44ddb4ea4 100644 --- a/web/src/condense.ts +++ b/web/src/condense.ts @@ -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(); diff --git a/web/src/message_edit.ts b/web/src/message_edit.ts index 2e32018fb6..fe194bcb6e 100644 --- a/web/src/message_edit.ts +++ b/web/src/message_edit.ts @@ -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,10 +853,12 @@ 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(".condensed").length !== 0) { - condense.show_message_expander($row); - } else { - condense.show_message_condenser($row); + 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(); diff --git a/web/styles/zulip.css b/web/styles/zulip.css index 51d4545621..cb29ebe43b 100644 --- a/web/styles/zulip.css +++ b/web/styles/zulip.css @@ -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); diff --git a/web/templates/message_body.hbs b/web/templates/message_body.hbs index 1f5320db89..25cb7af46c 100644 --- a/web/templates/message_body.hbs +++ b/web/templates/message_body.hbs @@ -59,10 +59,7 @@ {{> edited_notice}} {{/if}} -
- - -
+
{{#unless is_hidden}}
{{> message_reactions }}
diff --git a/web/templates/message_length_toggle.hbs b/web/templates/message_length_toggle.hbs new file mode 100644 index 0000000000..d3612f9748 --- /dev/null +++ b/web/templates/message_length_toggle.hbs @@ -0,0 +1,5 @@ +{{#if (eq toggle_type "expander")}} + +{{else if (eq toggle_type "condenser")}} + +{{/if}}