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: Disable save btn after edit time limit

Browse Source 
Fixes #25413.

The old code was disabling the save button wrong by using
`.addClass("disabled")` instead of `prop()`.

Added tooltip for the disabled save button as per issue #25413 and changed
"Times up!" color to red.

The textbox readonly logic was changed to no longer becoming readonly. Reason
being there are edge cases involving the compose buttons such that simply
marking the textbox as readonly is not sufficient.

E.g. using the compose buttons after readonly still modifies the content.

One solution might be to just hide the compose buttons visually. However, there
are edge cases for that too. If preview mode was previously active, then
perhaps that state needs to be reverted. If any modal is open, such as the emoji
picker, then that needs to be closed. Solving these edge cases doesn't
improve the user experience. Keeping the textbox editable allows an easier way
for user to copy the text and don't have weird cases.
This commit is contained in:
Trident Pancake
2023-05-06 23:38:36 -07:00
committed by Tim Abbott
parent b1c801847b
commit 6fb16f3598
3 changed files with 10 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
web/src/message_edit.js
View File

@@ -522,6 +522,7 @@ function edit_message($row, raw_content) {
// I believe this needs to be defined outside the countdown_timer, since
// row just refers to something like the currently selected message, and
// can change out from under us
const $message_edit_save_container = $row.find(".message_edit_save_container");
const $message_edit_save = $row.find("button.message_edit_save");
// Do this right away, rather than waiting for the timer to do its first update,
// since otherwise there is a noticeable lag
@@ -530,12 +531,13 @@ function edit_message($row, raw_content) {
seconds_left -= 1;
if (seconds_left <= 0) {
clearInterval(countdown_timer);
$message_edit_content.prop("readonly", "readonly");
// We don't go directly to a "TOPIC_ONLY" type state (with an active Save button),
// since it isn't clear what to do with the half-finished edit. It's nice to keep
// the half-finished edit around so that they can copy-paste it, but we don't want
// people to think "Save" will save the half-finished edit.
$message_edit_save.addClass("disabled");
$message_edit_save.prop("disabled", true);
$message_edit_save_container.addClass("tippy-zulip-tooltip");
$message_edit_countdown_timer.addClass("expired");
$message_edit_countdown_timer.text($t({defaultMessage: "Time's up!"}));
} else {
$message_edit_countdown_timer.text(timer_text(seconds_left));

4
web/styles/zulip.css
View File

@@ -1777,6 +1777,10 @@ div.focused_table {
text-align: right;
display: inline;
color: hsl(0deg 0% 63%);
&.expired {
color: hsl(4deg 58% 33%);
}
}
.message_edit_tooltip {

3
web/templates/message_edit_form.hbs
View File

@@ -14,7 +14,8 @@
<div class="message_edit_spinner"></div>
<div class="controls edit-controls">
{{#if is_editable}}
<div class="btn-wrapper inline-block">
<div class="btn-wrapper inline-block message_edit_save_container"
data-tippy-content="{{t 'You can no longer save changes to this message.' }}">
<button type="button" class="button small rounded sea-green message_edit_save">
<img class="loader" alt="" src="" />
<span>{{t "Save" }}</span>