paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-10-23 04:52:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

message_edit: Preserve width of Save button when showing spinner.

Browse Source
This commit is contained in:
Karl Stolley
2025-03-18 15:46:44 -04:00
committed by Tim Abbott
parent 1eb4b65b5a
commit 7f8899bf99
2 changed files with 24 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/message_edit.ts
View File

@@ -347,7 +347,7 @@ export function stream_and_topic_exist_in_edit_history(
export function hide_message_edit_spinner($row: JQuery): void {
$row.find(".loader").hide();
$row.find(".message_edit_save span").show();
$row.find(".message_edit_save span").removeClass("showing-button-spinner");
$row.find(".message_edit_save").removeClass("message-edit-button-disabled");
$row.find(".message_edit_cancel").removeClass("message-edit-button-disabled");
}
@@ -356,7 +356,7 @@ export function show_message_edit_spinner($row: JQuery): void {
// Always show the white spinner like we
// do for send button in compose box.
loading.show_button_spinner($row.find(".loader"), true);
$row.find(".message_edit_save span").hide();
$row.find(".message_edit_save span").addClass("showing-button-spinner");
$row.find(".message_edit_save").addClass("message-edit-button-disabled");
$row.find(".message_edit_cancel").addClass("message-edit-button-disabled");
}

24
web/styles/message_row.css
View File

@@ -903,8 +903,28 @@ of the base style defined for a read-only textarea in dark mode. */
.message_edit_save .loader {
display: none;
height: 28px;
width: 28px;
/* 28px at 16px/1em */
height: 1.75em;
width: 1.75em;
grid-area: button-display;
justify-self: center;
z-index: 1;
}
.message_edit_save:has(.showing-button-spinner) {
/* We want to maintain the width of the Save button
in an i18n friendly way; this quick grid ensures
that the width of the text holds the button open,
while the styles above ensure the spinner's
centering. */
display: grid;
grid-template: "button-display";
}
.showing-button-spinner {
visibility: hidden;
grid-area: button-display;
z-index: 0;
}
.edit-controls {