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

compose_ui: Refactor functions to show and hide loading spinners. 

This commit refactors show_compose_spinner and hide_compose_spinner
functions to use class of the button instead of ID to select the
appropriate elements such that we can use the same function to show
and hide spinner in "Schedule" button in further commits. For this
purpose, we add a new class compose-submit-button to the "Send"
button and this class will be added to "Schedule" button as well
in the next commit.
This commit is contained in:
Sahil Batra 2023-04-25 13:32:12 +05:30 committed by Tim Abbott
parent a079bb811b
commit 639af1d56d
4 changed files with 20 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/src/compose_banner.ts
View File

@ -52,9 +52,9 @@ export function clear_message_sent_banners(): void {
// TODO: Replace with compose_ui.hide_compose_spinner() when it is converted to ts.
function hide_compose_spinner(): void {
$("#compose-send-button .loader").hide();
$("#compose-send-button span").show();
$("#compose-send-button").removeClass("disable-btn");
$(".compose-submit-button .loader").hide();
$(".compose-submit-button span").show();
$(".compose-submit-button").removeClass("disable-btn");
}
export function clear_errors(): void {

12
web/src/compose_ui.js
View File

@ -481,17 +481,17 @@ export function format_text($textarea, type) {
* nothing to do with the compose textarea. */
export function hide_compose_spinner() {
compose_spinner_visible = false;
$("#compose-send-button .loader").hide();
$("#compose-send-button span").show();
$("#compose-send-button").removeClass("disable-btn");
$(".compose-submit-button .loader").hide();
$(".compose-submit-button span").show();
$(".compose-submit-button").removeClass("disable-btn");
}
export function show_compose_spinner() {
compose_spinner_visible = true;
// Always use white spinner.
loading.show_button_spinner($("#compose-send-button .loader"), true);
$("#compose-send-button span").hide();
$("#compose-send-button").addClass("disable-btn");
loading.show_button_spinner($(".compose-submit-button .loader"), true);
$(".compose-submit-button span").hide();
$(".compose-submit-button").addClass("disable-btn");
}
export function get_compose_click_target(e) {

2
web/templates/compose.hbs
View File

@ -130,7 +130,7 @@
<div id="below-compose-content">
<div class="compose_bottom_top_container">
<div class="compose_right_float_container order-3">
<button type="submit" id="compose-send-button" class="button small send_message animated-purple-button">
<button type="submit" id="compose-send-button" class="button small send_message compose-submit-button animated-purple-button">
<img class="loader" alt="" src="" />
<span>{{t 'Send' }}</span>
</button>

20
web/tests/compose.test.js
View File

@ -132,7 +132,7 @@ test_ui("send_message_success", ({override_rewire}) => {
mock_banners();
$("#compose-textarea").val("foobarfoobar");
$("#compose-textarea").trigger("blur");
$("#compose-send-button .loader").show();
$(".compose-submit-button .loader").show();
let reify_message_id_checked;
override_rewire(echo, "reify_message_id", (local_id, message_id) => {
@ -145,7 +145,7 @@ test_ui("send_message_success", ({override_rewire}) => {
assert.equal($("#compose-textarea").val(), "");
assert.ok($("#compose-textarea").is_focused());
assert.ok(!$("#compose-send-button .loader").visible());
assert.ok(!$(".compose-submit-button .loader").visible());
assert.ok(reify_message_id_checked);
});
@ -226,7 +226,7 @@ test_ui("send_message", ({override, override_rewire, mock_template}) => {
$("#compose-textarea").val("[foobar](/user_uploads/123456)");
$("#compose-textarea").trigger("blur");
$("#compose-send-button .loader").show();
$(".compose-submit-button .loader").show();
compose.send_message();
@ -238,7 +238,7 @@ test_ui("send_message", ({override, override_rewire, mock_template}) => {
assert.deepEqual(stub_state, state);
assert.equal($("#compose-textarea").val(), "");
assert.ok($("#compose-textarea").is_focused());
assert.ok(!$("#compose-send-button .loader").visible());
assert.ok(!$(".compose-submit-button .loader").visible());
})();
// This is the additional setup which is common to both the tests below.
@ -280,7 +280,7 @@ test_ui("send_message", ({override, override_rewire, mock_template}) => {
stub_state = initialize_state_stub_dict();
$("#compose-textarea").val("foobarfoobar");
$("#compose-textarea").trigger("blur");
$("#compose-send-button .loader").show();
$(".compose-submit-button .loader").show();
$("#compose-textarea").off("select");
echo_error_msg_checked = false;
override_rewire(echo, "try_deliver_locally", () => {});
@ -299,7 +299,7 @@ test_ui("send_message", ({override, override_rewire, mock_template}) => {
assert.ok(banner_rendered);
assert.equal($("#compose-textarea").val(), "foobarfoobar");
assert.ok($("#compose-textarea").is_focused());
assert.ok(!$("#compose-send-button .loader").visible());
assert.ok(!$(".compose-submit-button .loader").visible());
})();
});
@ -325,7 +325,7 @@ test_ui("enter_with_preview_open", ({override, override_rewire}) => {
override(document, "to_$", () => $("document-stub"));
let show_button_spinner_called = false;
override(loading, "show_button_spinner", ($spinner) => {
assert.equal($spinner.selector, "#compose-send-button .loader");
assert.equal($spinner.selector, ".compose-submit-button .loader");
show_button_spinner_called = true;
});
@ -377,7 +377,7 @@ test_ui("finish", ({override, override_rewire}) => {
override(document, "to_$", () => $("document-stub"));
let show_button_spinner_called = false;
override(loading, "show_button_spinner", ($spinner) => {
assert.equal($spinner.selector, "#compose-send-button .loader");
assert.equal($spinner.selector, ".compose-submit-button .loader");
show_button_spinner_called = true;
});
@ -389,14 +389,14 @@ test_ui("finish", ({override, override_rewire}) => {
$("#compose_invite_users").show();
$("#compose-send-button").prop("disabled", false);
$("#compose-send-button").trigger("focus");
$("#compose-send-button .loader").hide();
$(".compose-submit-button .loader").hide();
$("#compose-textarea").off("select");
$("#compose-textarea").val("");
compose_ui.compose_spinner_visible = false;
const res = compose.finish();
assert.equal(res, false);
assert.ok(!$("#compose_banners .recipient_not_subscribed").visible());
assert.ok(!$("#compose-send-button .loader").visible());
assert.ok(!$(".compose-submit-button .loader").visible());
assert.ok(show_button_spinner_called);
})();