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

message_list: Conditionally render message edit form container element. 

This commit moves the placeholder elements for the message edit form,
to `message_edit_form.hbs`, so they are conditionally rendered only
when a message is being edited, rather than being present for every
message in the list.

Fixes #31134.
This commit is contained in:
Sayam Samal 2024-08-29 09:20:46 +05:30 committed by Tim Abbott
parent b8e4bdccd8
commit c51bd1eab8
5 changed files with 43 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
web/src/message_list.js
View File

@ -447,21 +447,22 @@ export class MessageList {
if ($row.find(".message_edit_form form").length !== 0) {
return;
}
$row.find(".message_edit_form").append($form);
$row.find(".messagebox-content").append($form);
$row.find(".message_content, .status-message, .message_controls").hide();
$row.find(".messagebox-content").addClass("content_edit_mode");
$row.find(".message_edit").css("display", "block");
// autosize will not change the height of the textarea if the `$row` is not
// rendered in DOM yet. So, we call `autosize.update` post render.
autosize($row.find(".message_edit_content"));
}
hide_edit_message($row) {
if ($row.find(".message_edit_form form").length === 0) {
return;
}
compose_tooltips.hide_compose_control_button_tooltips($row);
$row.find(".message_content, .status-message, .message_controls").show();
$row.find(".message_edit_form").empty();
$row.find(".messagebox-content").removeClass("content_edit_mode");
$row.find(".message_edit").hide();
$row.find(".message_edit").remove();
$row.trigger("mouseleave");
}

4
web/styles/message_row.css
View File

@ -763,10 +763,6 @@ of the base style defined for a read-only textarea in dark mode. */
}
}
.message_edit {
display: none;
}
/* Reduce some of the heavy padding from Bootstrap. */
.message_edit_form {
margin-bottom: 10px;

4
web/templates/message_body.hbs
View File

@ -59,10 +59,6 @@
{{> edited_notice}}
{{/if}}
<div class="message_edit">
<div class="message_edit_form"></div>
</div>
<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>

71
web/templates/message_edit_form.hbs
View File

@ -1,40 +1,43 @@
{{! Client-side Handlebars template for rendering the message edit form. }}
<form id="edit_form_{{message_id}}" class="new-style">
<div class="edit_form_banners"></div>
<div class="edit-controls edit-content-container {{#if is_editable}}surround-formatting-buttons-row{{/if}}">
{{> copy_message_button message_id=this.message_id}}
<textarea class="message_edit_content" maxlength="{{ max_message_length }}">{{content}}</textarea>
<div class="scrolling_list preview_message_area" id="preview_message_area_{{message_id}}" style="display:none;">
<div class="markdown_preview_spinner"></div>
<div class="preview_content rendered_markdown"></div>
</div>
</div>
<div class="action-buttons">
<div class="controls edit-controls">
{{#if is_editable}}
<div class="message-edit-feature-group">
{{> compose_control_buttons }}
<div class="message_edit">
<div class="message_edit_form">
<form id="edit_form_{{message_id}}" class="new-style">
<div class="edit_form_banners"></div>
<div class="edit-controls edit-content-container {{#if is_editable}}surround-formatting-buttons-row{{/if}}">
{{> copy_message_button message_id=this.message_id}}
<textarea class="message_edit_content" maxlength="{{ max_message_length }}">{{content}}</textarea>
<div class="scrolling_list preview_message_area" id="preview_message_area_{{message_id}}" style="display:none;">
<div class="markdown_preview_spinner"></div>
<div class="preview_content rendered_markdown"></div>
</div>
</div>
{{/if}}
<div class="message-edit-buttons-and-timer">
{{#if is_editable}}
<div class="message_edit_save_container"
data-tippy-content="{{t 'You can no longer save changes to this message.' }}">
<button type="button" class="message-actions-button message_edit_save">
<img class="loader" alt="" src="" />
<span>{{t "Save" }}</span>
</button>
<div class="action-buttons">
<div class="controls edit-controls">
{{#if is_editable}}
<div class="message-edit-feature-group">
{{> compose_control_buttons }}
</div>
<button type="button" class="message-actions-button message_edit_cancel"><span>{{t "Cancel" }}</span></button>
<div class="message-edit-timer">
<span class="message_edit_countdown_timer
tippy-zulip-tooltip" data-tippy-content="{{t 'This organization is configured to restrict editing of message content to {minutes_to_edit} minutes after it is sent.' }}"></span>
{{/if}}
<div class="message-edit-buttons-and-timer">
{{#if is_editable}}
<div class="message_edit_save_container"
data-tippy-content="{{t 'You can no longer save changes to this message.' }}">
<button type="button" class="message-actions-button message_edit_save">
<img class="loader" alt="" src="" />
<span>{{t "Save" }}</span>
</button>
</div>
<button type="button" class="message-actions-button message_edit_cancel"><span>{{t "Cancel" }}</span></button>
<div class="message-edit-timer">
<span class="message_edit_countdown_timer
tippy-zulip-tooltip" data-tippy-content="{{t 'This organization is configured to restrict editing of message content to {minutes_to_edit} minutes after it is sent.' }}"></span>
</div>
{{else}}
<button type="button" class="message-actions-button message_edit_close"><span>{{t "Close" }}</span></button>
{{/if}}
</div>
{{else}}
<button type="button" class="message-actions-button message_edit_close"><span>{{t "Close" }}</span></button>
{{/if}}
</div>
</div>
</div>
</form>
</div>
</form>
</div>

1
web/templates/single_message.hbs
View File

@ -11,6 +11,7 @@
<div class="messagebox">
<div class="messagebox-content {{#if status_message}}is-me-message{{/if}}">
{{> message_body}}
{{!-- message_edit_form.hbs is inserted here when editing a message. --}}
</div>
</div>
</div>