paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-15 11:22:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

compose_box: Render limit indicator as template with zero-width space.

Browse Source
This commit is contained in:
Karl Stolley
2023-11-07 11:51:28 -06:00
committed by Tim Abbott
parent 601faf8548
commit 4fee51fc99
3 changed files with 21 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
web/src/compose_validate.js
View File

@@ -5,6 +5,7 @@ import render_compose_banner from "../templates/compose_banner/compose_banner.hb
import render_not_subscribed_warning from "../templates/compose_banner/not_subscribed_warning.hbs"; import render_not_subscribed_warning from "../templates/compose_banner/not_subscribed_warning.hbs";
import render_private_stream_warning from "../templates/compose_banner/private_stream_warning.hbs"; import render_private_stream_warning from "../templates/compose_banner/private_stream_warning.hbs";
import render_wildcard_warning from "../templates/compose_banner/wildcard_warning.hbs"; import render_wildcard_warning from "../templates/compose_banner/wildcard_warning.hbs";
import render_compose_limit_indicator from "../templates/compose_limit_indicator.hbs";
import * as channel from "./channel"; import * as channel from "./channel";
import * as compose_banner from "./compose_banner"; import * as compose_banner from "./compose_banner";
@@ -624,7 +625,12 @@ export function check_overflow_text() {
if (text.length > max_length) { if (text.length > max_length) {
$indicator.addClass("over_limit"); $indicator.addClass("over_limit");
$("textarea#compose-textarea").addClass("over_limit"); $("textarea#compose-textarea").addClass("over_limit");
$indicator.text(text.length + "/" + max_length); $indicator.html(
render_compose_limit_indicator({
text_length: text.length,
max_length,
}),
);
compose_banner.show_error_message( compose_banner.show_error_message(
$t( $t(
{ {
@@ -640,8 +646,12 @@ export function check_overflow_text() {
} else if (text.length > 0.9 * max_length) { } else if (text.length > 0.9 * max_length) {
$indicator.removeClass("over_limit"); $indicator.removeClass("over_limit");
$("textarea#compose-textarea").removeClass("over_limit"); $("textarea#compose-textarea").removeClass("over_limit");
$indicator.text(text.length + "/" + max_length); $indicator.html(
render_compose_limit_indicator({
text_length: text.length,
max_length,
}),
);
$("#compose-send-button").prop("disabled", false); $("#compose-send-button").prop("disabled", false);
$(`#compose_banners .${CSS.escape(compose_banner.CLASSNAMES.message_too_long)}`).remove(); $(`#compose_banners .${CSS.escape(compose_banner.CLASSNAMES.message_too_long)}`).remove();
} else { } else {

2
web/templates/compose_limit_indicator.hbs Normal file
View File

@@ -0,0 +1,2 @@
{{! Include a zero-width-space to allow breaks in narrow compose boxes. }}
{{text_length}}​/{{max_length}}

8
web/tests/compose_validate.test.js
View File

@@ -562,10 +562,14 @@ test_ui("test_check_overflow_text", ({mock_template}) => {
}); });
// Indicator should show red colored text // Indicator should show red colored text
let limit_indicator_html;
mock_template("compose_limit_indicator.hbs", true, (_data, html) => {
limit_indicator_html = html;
});
$textarea.val("a".repeat(10000 + 1)); $textarea.val("a".repeat(10000 + 1));
compose_validate.check_overflow_text(); compose_validate.check_overflow_text();
assert.ok($indicator.hasClass("over_limit")); assert.ok($indicator.hasClass("over_limit"));
assert.equal($indicator.text(), "10001/10000"); assert.equal(limit_indicator_html, "10001​/10000\n");
assert.ok($textarea.hasClass("over_limit")); assert.ok($textarea.hasClass("over_limit"));
assert.ok(banner_rendered); assert.ok(banner_rendered);
assert.ok($send_button.prop("disabled")); assert.ok($send_button.prop("disabled"));
@@ -575,7 +579,7 @@ test_ui("test_check_overflow_text", ({mock_template}) => {
$textarea.val("a".repeat(9000 + 1)); $textarea.val("a".repeat(9000 + 1));
compose_validate.check_overflow_text(); compose_validate.check_overflow_text();
assert.ok(!$indicator.hasClass("over_limit")); assert.ok(!$indicator.hasClass("over_limit"));
assert.equal($indicator.text(), "9001/10000"); assert.equal(limit_indicator_html, "9001​/10000\n");
assert.ok(!$textarea.hasClass("over_limit")); assert.ok(!$textarea.hasClass("over_limit"));
assert.ok(!$send_button.prop("disabled")); assert.ok(!$send_button.prop("disabled"));
assert.ok(!banner_rendered); assert.ok(!banner_rendered);