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

compose: Use loading spinner as loading indicator.

This commit is contained in:
Aman Agrawal 2021-11-30 05:26:05 +00:00 committed by Tim Abbott
parent 25ee6a795e
commit a64f6edc2a
10 changed files with 62 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
frontend_tests/node_tests/compose.js
View File

@ -105,8 +105,7 @@ test_ui("send_message_success", ({override}) => {
$("#compose-textarea").val("foobarfoobar");
$("#compose-textarea").trigger("blur");
$("#compose-send-status").show();
$("#compose-send-button").prop("disabled", true);
$("#sending-indicator").show();
$("#compose-send-button .loader").show();
let reify_message_id_checked;
override(echo, "reify_message_id", (local_id, message_id) => {
@ -120,8 +119,7 @@ test_ui("send_message_success", ({override}) => {
assert.equal($("#compose-textarea").val(), "");
assert.ok($("#compose-textarea").is_focused());
assert.ok(!$("#compose-send-status").visible());
assert.equal($("#compose-send-button").prop("disabled"), false);
assert.ok(!$("#sending-indicator").visible());
assert.ok(!$("#compose-send-button .loader").visible());
assert.ok(reify_message_id_checked);
});
@ -202,8 +200,7 @@ test_ui("send_message", ({override}) => {
$("#compose-textarea").val("[foobar](/user_uploads/123456)");
$("#compose-textarea").trigger("blur");
$("#compose-send-status").show();
$("#compose-send-button").prop("disabled", true);
$("#sending-indicator").show();
$("#compose-send-button .loader").show();
compose.send_message();
@ -216,8 +213,7 @@ test_ui("send_message", ({override}) => {
assert.equal($("#compose-textarea").val(), "");
assert.ok($("#compose-textarea").is_focused());
assert.ok(!$("#compose-send-status").visible());
assert.equal($("#compose-send-button").prop("disabled"), false);
assert.ok(!$("#sending-indicator").visible());
assert.ok(!$("#compose-send-button .loader").visible());
})();
// This is the additional setup which is common to both the tests below.
@ -254,8 +250,7 @@ test_ui("send_message", ({override}) => {
$("#compose-textarea").val("foobarfoobar");
$("#compose-textarea").trigger("blur");
$("#compose-send-status").show();
$("#compose-send-button").prop("disabled", true);
$("#sending-indicator").show();
$("#compose-send-button .loader").show();
$("#compose-textarea").off("select");
echo_error_msg_checked = false;
override(echo, "try_deliver_locally", () => {});
@ -271,13 +266,11 @@ test_ui("send_message", ({override}) => {
};
assert.deepEqual(stub_state, state);
assert.ok(!echo_error_msg_checked);
assert.equal($("#compose-send-button").prop("disabled"), false);
assert.equal($("#compose-error-msg").html(), "Error sending message: Server says 408");
assert.equal($("#compose-textarea").val(), "foobarfoobar");
assert.ok($("#compose-textarea").is_focused());
assert.ok($("#compose-send-status").visible());
assert.equal($("#compose-send-button").prop("disabled"), false);
assert.ok(!$("#sending-indicator").visible());
assert.ok(!$("#compose-send-button .loader").visible());
})();
});
@ -285,6 +278,11 @@ test_ui("enter_with_preview_open", ({override}) => {
override(notifications, "clear_compose_notifications", () => {});
override(reminder, "is_deferred_delivery", () => false);
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");
show_button_spinner_called = true;
});
page_params.user_id = new_user.user_id;
@ -308,6 +306,7 @@ test_ui("enter_with_preview_open", ({override}) => {
assert.ok(!$("#compose .preview_message_area").visible());
assert.ok($("#compose .markdown_preview").visible());
assert.ok(send_message_called);
assert.ok(show_button_spinner_called);
user_settings.enter_sends = false;
$("#compose-textarea").trigger("blur");
@ -327,24 +326,28 @@ test_ui("finish", ({override}) => {
override(notifications, "clear_compose_notifications", () => {});
override(reminder, "is_deferred_delivery", () => false);
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");
show_button_spinner_called = true;
});
(function test_when_compose_validation_fails() {
$("#compose_invite_users").show();
$("#compose-send-button").prop("disabled", false);
$("#compose-send-button").trigger("focus");
$("#sending-indicator").hide();
$("#compose-send-button .loader").hide();
$("#compose-textarea").off("select");
$("#compose-textarea").val("");
const res = compose.finish();
assert.equal(res, false);
assert.ok(!$("#compose_invite_users").visible());
assert.ok(!$("#sending-indicator").visible());
assert.ok(!$("#compose-send-button").is_focused());
assert.equal($("#compose-send-button").prop("disabled"), false);
assert.ok(!$("#compose-send-button .loader").visible());
assert.equal(
$("#compose-error-msg").html(),
$t_html({defaultMessage: "You have nothing to send!"}),
);
assert.ok(show_button_spinner_called);
})();
(function test_when_compose_validation_succeed() {
@ -366,7 +369,6 @@ test_ui("finish", ({override}) => {
send_message_called = true;
});
assert.ok(compose.finish());
assert.equal($("#sending-indicator").text(), "translated: Sending...");
assert.ok($("#compose-textarea").visible());
assert.ok(!$("#compose .undo_markdown_preview").visible());
assert.ok(!$("#compose .preview_message_area").visible());
@ -389,7 +391,6 @@ test_ui("finish", ({override}) => {
});
reminder.is_deferred_delivery = () => true;
assert.ok(compose.finish());
assert.equal($("#sending-indicator").text(), "translated: Scheduling...");
assert.ok($("#compose-textarea").visible());
assert.ok(!$("#compose .undo_markdown_preview").visible());
assert.ok(!$("#compose .preview_message_area").visible());
@ -486,8 +487,6 @@ test_ui("initialize", ({override, mock_template}) => {
})();
(function test_abort_xhr() {
$("#compose-send-button").prop("disabled", true);
reset_jquery();
compose.initialize();

3
frontend_tests/node_tests/compose_error.js
View File

@ -14,8 +14,7 @@ run_test("compose_error_test", () => {
assert.ok($("#compose-send-status").hasClass("alert-error"));
assert.equal($("#compose-error-msg").html(), $t({defaultMessage: "You have nothing to send!"}));
assert.equal($("#compose-send-button").prop("disabled"), false);
assert.ok(!$("#sending-indicator").visible());
assert.ok(!$("#compose-send-button .loader").visible());
assert.ok($("#compose-textarea").is_focused());
$("#compose-send-status").fadeOut = (prop) => {

4
frontend_tests/node_tests/compose_validate.js
View File

@ -128,7 +128,7 @@ test_ui("validate", ({override, mock_template}) => {
$("#compose-send-button").prop("disabled", false);
$("#compose-send-button").trigger("focus");
$("#sending-indicator").hide();
$("#compose-send-button .loader").hide();
const pm_pill_container = $.create("fake-pm-pill-container");
$("#private_message_recipient")[0] = {};
@ -151,7 +151,7 @@ test_ui("validate", ({override, mock_template}) => {
initialize_pm_pill();
assert.ok(!compose_validate.validate());
assert.ok(!$("#sending-indicator").visible());
assert.ok(!$("#compose-send-button .loader").visible());
assert.equal($("#compose-send-button").prop("disabled"), false);
assert.equal(
$("#compose-error-msg").html(),

20
static/js/compose.js
View File

@ -187,8 +187,7 @@ export function clear_compose_box() {
$("#compose-textarea").removeData("draft-id");
compose_ui.autosize_textarea($("#compose-textarea"));
$("#compose-send-status").hide(0);
$("#compose-send-button").prop("disabled", false);
$("#sending-indicator").hide();
compose_ui.hide_compose_spinner();
}
export function send_message_success(local_id, message_id, locally_echoed) {
@ -269,11 +268,6 @@ export function enter_with_preview_open() {
}
}
function show_sending_indicator(whats_happening) {
$("#sending-indicator").text(whats_happening);
$("#sending-indicator").show();
}
export function finish() {
clear_preview_area();
clear_invites();
@ -291,15 +285,11 @@ export function finish() {
return undefined;
}
$("#compose-send-button").prop("disabled", true).trigger("blur");
if (reminder.is_deferred_delivery(message_content)) {
show_sending_indicator($t({defaultMessage: "Scheduling..."}));
} else {
show_sending_indicator($t({defaultMessage: "Sending..."}));
}
compose_ui.show_compose_spinner();
if (!compose_validate.validate()) {
// If the message failed validation, hide the sending indicator.
$("#sending-indicator").hide();
// If the message failed validation, hide compose spinner.
compose_ui.hide_compose_spinner();
return false;
}

7
static/js/compose_error.ts
View File

@ -9,8 +9,11 @@ export function show(error_html: string, bad_input?: JQuery, alert_class = "aler
.stop(true)
.fadeTo(0, 1);
$("#compose-error-msg").html(error_html);
$("#compose-send-button").prop("disabled", false);
$("#sending-indicator").hide();
// TODO: Replace with compose_ui.hide_compose_spinner() when it is converted to ts.
$("#compose-send-button .loader").hide();
$("#compose-send-button span").show();
$("#compose-send-button").removeClass("disable-btn");
if (bad_input !== undefined) {
bad_input.trigger("focus").trigger("select");
}

15
static/js/compose_ui.js
View File

@ -4,8 +4,10 @@ import {set, wrapSelection} from "text-field-edit";
import * as common from "./common";
import {$t} from "./i18n";
import * as loading from "./loading";
import * as people from "./people";
import * as rtl from "./rtl";
import * as settings_data from "./settings_data";
import * as user_status from "./user_status";
let full_size_status = false; // true or false
@ -386,3 +388,16 @@ export function format_text(textarea, type) {
}
}
}
export function hide_compose_spinner() {
$("#compose-send-button .loader").hide();
$("#compose-send-button span").show();
$("#compose-send-button").removeClass("disable-btn");
}
export function show_compose_spinner() {
const using_dark_theme = settings_data.using_dark_theme();
loading.show_button_spinner($("#compose-send-button .loader"), using_dark_theme);
$("#compose-send-button span").hide();
$("#compose-send-button").addClass("disable-btn");
}

5
static/js/compose_validate.js
View File

@ -10,6 +10,7 @@ import * as channel from "./channel";
import * as compose_error from "./compose_error";
import * as compose_pm_pill from "./compose_pm_pill";
import * as compose_state from "./compose_state";
import * as compose_ui from "./compose_ui";
import {$t_html} from "./i18n";
import {page_params} from "./page_params";
import * as peer_data from "./peer_data";
@ -337,7 +338,7 @@ function validate_stream_message_mentions(stream_id) {
show_all_everyone_warnings(stream_id);
$("#compose-send-button").prop("disabled", false);
$("#sending-indicator").hide();
compose_ui.hide_compose_spinner();
return false;
}
} else {
@ -359,7 +360,7 @@ function validate_stream_message_announce(sub) {
show_announce_warnings(sub.stream_id);
$("#compose-send-button").prop("disabled", false);
$("#sending-indicator").hide();
compose_ui.hide_compose_spinner();
return false;
}
} else {

13
static/styles/compose.css
View File

@ -428,6 +428,12 @@ input.recipient_box {
margin-bottom: 0;
font-weight: 600;
font-size: 0.9em;
.loader {
display: none;
position: relative;
top: -4px;
}
}
.enter_sends {
@ -459,10 +465,6 @@ input.recipient_box {
align-items: center;
}
#sending-indicator {
font-weight: bold;
}
.compose_control_buttons_container {
flex-wrap: wrap;
margin-right: auto;
@ -475,8 +477,7 @@ input.recipient_box {
padding-bottom: 2px;
}
.message-control-link,
#sending-indicator {
.message-control-link {
padding: 0 4px;
align-self: center;
}

5
static/templates/compose.hbs
View File

@ -94,7 +94,10 @@
<div class="drag"></div>
<div id="below-compose-content">
<div class="compose_right_float_container order-3">
<button type="submit" id="compose-send-button" class="button small send_message animated-purple-button" title="{{t 'Send' }} (Ctrl + Enter)">{{t 'Send' }}</button>
<button type="submit" id="compose-send-button" class="button small send_message animated-purple-button" title="{{t 'Send' }} (Ctrl + Enter)">
<img class="loader" alt="" src="" />
<span>{{t 'Send' }}</span>
</button>
<div class="enter_sends order-2">
<label id="enter-sends-label" class="compose_checkbox_label tippy-zulip-tooltip" data-tippy-content="Click to switch">
<span class="enter_sends_true">

1
static/templates/compose_control_buttons.hbs
View File

@ -16,6 +16,5 @@
<a role="button" data-format-type="link" class="compose_control_button fa fa-link formatting_button" aria-label="{{t 'Link' }}" tabindex=0 data-tippy-content="{{t 'Link' }}"></a>
<div class="divider">|</div>
<a role="button" class="message-control-link" tabindex=0 data-overlay-trigger="message-formatting">{{t 'Help' }}</a>
<span id="sending-indicator"></span>
</div>
</div>