mirror of
https://github.com/zulip/zulip.git
synced 2025-11-12 18:06:44 +00:00
compose: Disable send button when upload/s are in progress.
Earlier, the send button's state was determined independently by the message length and the upload status, and its containing `div`'s state was separately determined on recipient change by whether the user had permission to post in that stream, or if direct messages were allowed in the organisation. The main problem was that as the message length check was run on each character input, it often overrode the upload status check. Now for consistency, the code has been refactored to always disable the send button by accordingly styling its containing `div`; and using the observer pattern we update it anytime the message length, upload status, or the recipient changes, considering **all** of them together. (The Save button when editing a message still works like before -- only dependent on upload status.) Fixes: #21135.
This commit is contained in:
@@ -23,9 +23,43 @@ import * as sub_store from "./sub_store";
|
||||
import * as util from "./util";
|
||||
|
||||
let user_acknowledged_wildcard = false;
|
||||
let upload_in_progress = false;
|
||||
let message_too_long = false;
|
||||
let recipient_disallowed = false;
|
||||
|
||||
export let wildcard_mention_large_stream_threshold = 15;
|
||||
|
||||
export function set_upload_in_progress(status) {
|
||||
upload_in_progress = status;
|
||||
update_send_button_status();
|
||||
}
|
||||
|
||||
function set_message_too_long(status) {
|
||||
message_too_long = status;
|
||||
update_send_button_status();
|
||||
}
|
||||
|
||||
export function set_recipient_disallowed(status) {
|
||||
recipient_disallowed = status;
|
||||
update_send_button_status();
|
||||
}
|
||||
|
||||
function update_send_button_status() {
|
||||
$(".message-send-controls").toggleClass(
|
||||
"disabled-message-send-controls",
|
||||
message_too_long || upload_in_progress || recipient_disallowed,
|
||||
);
|
||||
}
|
||||
|
||||
export function get_disabled_send_tooltip() {
|
||||
if (message_too_long) {
|
||||
return $t({defaultMessage: "Message length shouldn't be greater than 10000 characters."});
|
||||
} else if (upload_in_progress) {
|
||||
return $t({defaultMessage: "Cannot send message while files are being uploaded."});
|
||||
}
|
||||
return "";
|
||||
}
|
||||
|
||||
export function needs_subscribe_warning(user_id, stream_id) {
|
||||
// This returns true if all of these conditions are met:
|
||||
// * the user is valid
|
||||
@@ -655,7 +689,7 @@ export function check_overflow_text() {
|
||||
compose_banner.CLASSNAMES.message_too_long,
|
||||
$("#compose_banners"),
|
||||
);
|
||||
$("#compose-send-button").prop("disabled", true);
|
||||
set_message_too_long(true);
|
||||
} else if (text.length > 0.9 * max_length) {
|
||||
$indicator.removeClass("over_limit");
|
||||
$("textarea#compose-textarea").removeClass("over_limit");
|
||||
@@ -665,13 +699,13 @@ export function check_overflow_text() {
|
||||
max_length,
|
||||
}),
|
||||
);
|
||||
$("#compose-send-button").prop("disabled", false);
|
||||
set_message_too_long(false);
|
||||
$(`#compose_banners .${CSS.escape(compose_banner.CLASSNAMES.message_too_long)}`).remove();
|
||||
} else {
|
||||
$indicator.text("");
|
||||
$("textarea#compose-textarea").removeClass("over_limit");
|
||||
|
||||
$("#compose-send-button").prop("disabled", false);
|
||||
set_message_too_long(false);
|
||||
$(`#compose_banners .${CSS.escape(compose_banner.CLASSNAMES.message_too_long)}`).remove();
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user