paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-02 21:13:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

message_list: Conditionally render message edit form container element.

Browse Source 
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
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) { if ($row.find(".message_edit_form form").length !== 0) {
return; 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(".message_content, .status-message, .message_controls").hide();
$row.find(".messagebox-content").addClass("content_edit_mode"); $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 // 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. // rendered in DOM yet. So, we call `autosize.update` post render.
autosize($row.find(".message_edit_content")); autosize($row.find(".message_edit_content"));
} }
hide_edit_message($row) { hide_edit_message($row) {
if ($row.find(".message_edit_form form").length === 0) {
return;
}
compose_tooltips.hide_compose_control_button_tooltips($row); compose_tooltips.hide_compose_control_button_tooltips($row);
$row.find(".message_content, .status-message, .message_controls").show(); $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(".messagebox-content").removeClass("content_edit_mode");
$row.find(".message_edit").hide(); $row.find(".message_edit").remove();
$row.trigger("mouseleave"); $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. */ /* Reduce some of the heavy padding from Bootstrap. */
.message_edit_form { .message_edit_form {
margin-bottom: 10px; margin-bottom: 10px;

4
web/templates/message_body.hbs
View File

@@ -59,10 +59,6 @@
{{> edited_notice}} {{> edited_notice}}
{{/if}} {{/if}}
<div class="message_edit">
<div class="message_edit_form"></div>
</div>
<div class="message_length_controller"> <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_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> <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. }} {{! Client-side Handlebars template for rendering the message edit form. }}
<div class="message_edit">
<form id="edit_form_{{message_id}}" class="new-style"> <div class="message_edit_form">
<div class="edit_form_banners"></div> <form id="edit_form_{{message_id}}" class="new-style">
<div class="edit-controls edit-content-container {{#if is_editable}}surround-formatting-buttons-row{{/if}}"> <div class="edit_form_banners"></div>
{{> copy_message_button message_id=this.message_id}} <div class="edit-controls edit-content-container {{#if is_editable}}surround-formatting-buttons-row{{/if}}">
<textarea class="message_edit_content" maxlength="{{ max_message_length }}">{{content}}</textarea> {{> copy_message_button message_id=this.message_id}}
<div class="scrolling_list preview_message_area" id="preview_message_area_{{message_id}}" style="display:none;"> <textarea class="message_edit_content" maxlength="{{ max_message_length }}">{{content}}</textarea>
<div class="markdown_preview_spinner"></div> <div class="scrolling_list preview_message_area" id="preview_message_area_{{message_id}}" style="display:none;">
<div class="preview_content rendered_markdown"></div> <div class="markdown_preview_spinner"></div>
</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> </div>
{{/if}} <div class="action-buttons">
<div class="message-edit-buttons-and-timer"> <div class="controls edit-controls">
{{#if is_editable}} {{#if is_editable}}
<div class="message_edit_save_container" <div class="message-edit-feature-group">
data-tippy-content="{{t 'You can no longer save changes to this message.' }}"> {{> compose_control_buttons }}
<button type="button" class="message-actions-button message_edit_save">
<img class="loader" alt="" src="" />
<span>{{t "Save" }}</span>
</button>
</div> </div>
<button type="button" class="message-actions-button message_edit_cancel"><span>{{t "Cancel" }}</span></button> {{/if}}
<div class="message-edit-timer"> <div class="message-edit-buttons-and-timer">
<span class="message_edit_countdown_timer {{#if is_editable}}
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 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> </div>
{{else}} </div>
<button type="button" class="message-actions-button message_edit_close"><span>{{t "Close" }}</span></button>
{{/if}}
</div> </div>
</div> </form>
</div> </div>
</form> </div>

1
web/templates/single_message.hbs
View File

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