From 966c8451dfffca64ba10fd799214b211bb39f6bd Mon Sep 17 00:00:00 2001 From: Karl Stolley Date: Fri, 1 Nov 2024 13:44:17 -0500 Subject: [PATCH] compose: Add functions to mute/unmute recipient row. --- web/src/compose_actions.ts | 12 +++++++++++- web/src/compose_recipient.ts | 19 +++++++++++++++++++ web/src/compose_setup.js | 5 +++++ web/templates/compose.hbs | 9 ++++++++- web/tests/compose.test.cjs | 1 + web/tests/compose_actions.test.cjs | 6 ++++++ 6 files changed, 50 insertions(+), 2 deletions(-) diff --git a/web/src/compose_actions.ts b/web/src/compose_actions.ts index acb4683cf7..9505132627 100644 --- a/web/src/compose_actions.ts +++ b/web/src/compose_actions.ts @@ -91,6 +91,10 @@ function hide_box(): void { compose_fade.clear_compose(); $(".message_comp").hide(); $("#compose_controls").show(); + // Assume a muted recipient row for the next time + // the compose box is reopened + $("#compose-recipient").addClass("muted-recipient-row"); + $("#compose").removeClass("compose-box-open"); } function show_compose_box(opts: ComposeActionsOpts): void { @@ -110,10 +114,15 @@ function show_compose_box(opts: ComposeActionsOpts): void { }; } compose_recipient.update_compose_for_message_type(opts_by_message_type); - $("#compose").css({visibility: "visible"}); // When changing this, edit the 42px in _maybe_autoscroll $(".new_message_textarea").css("min-height", "3em"); compose_ui.set_focus(opts_by_message_type); + // Transitions in the recipient row of the compose box are attached + // to this class we add a slight delay to avoid transitions firing + // immediately. + requestAnimationFrame(() => { + $("#compose").addClass("compose-box-open"); + }); } export let clear_textarea = (): void => { @@ -197,6 +206,7 @@ export let complete_starting_tasks = (opts: ComposeActionsOpts): void => { $(document).trigger(new $.Event("compose_started.zulip", opts)); compose_recipient.update_compose_area_placeholder_text(); compose_recipient.update_narrow_to_recipient_visibility(); + compose_recipient.maybe_mute_recipient_row(); // We explicitly call this function here apart from compose_setup.js // as this helps to show banner when responding in an interleaved view. // While responding, the compose box opens before fading resulting in diff --git a/web/src/compose_recipient.ts b/web/src/compose_recipient.ts index b0217d204a..0d83423734 100644 --- a/web/src/compose_recipient.ts +++ b/web/src/compose_recipient.ts @@ -45,6 +45,22 @@ function composing_to_current_private_message_narrow(): boolean { return _.isEqual(narrow_state_recipient, compose_state_recipient); } +export let maybe_mute_recipient_row = (): void => { + if (composing_to_current_topic_narrow() && compose_state.has_full_recipient()) { + $("#compose-recipient").toggleClass("muted-recipient-row", true); + } else { + $("#compose-recipient").toggleClass("muted-recipient-row", false); + } +}; + +export function rewire_maybe_mute_recipient_row(value: typeof maybe_mute_recipient_row): void { + maybe_mute_recipient_row = value; +} + +export function unmute_recipient_row(): void { + $("#compose-recipient").removeClass("muted-recipient-row"); +} + export let update_narrow_to_recipient_visibility = (): void => { const message_type = compose_state.get_message_type(); if (message_type === "stream") { @@ -98,6 +114,7 @@ export function update_on_recipient_change(): void { update_fade(); update_narrow_to_recipient_visibility(); compose_validate.warn_if_guest_in_dm_recipient(); + maybe_mute_recipient_row(); drafts.update_compose_draft_count(); check_posting_policy_for_compose_box(); compose_validate.validate_and_update_send_button_status(); @@ -187,6 +204,7 @@ export function update_compose_for_message_type(opts: ComposeTriggeredOptions): compose_banner.clear_errors(); compose_banner.clear_warnings(); compose_banner.clear_uploads(); + maybe_mute_recipient_row(); } export let on_compose_select_recipient_update = (): void => { @@ -293,6 +311,7 @@ function on_hidden_callback(): void { export function handle_middle_pane_transition(): void { if (compose_state.composing()) { update_narrow_to_recipient_visibility(); + maybe_mute_recipient_row(); } } diff --git a/web/src/compose_setup.js b/web/src/compose_setup.js index 4f1ceccd1b..4233096790 100644 --- a/web/src/compose_setup.js +++ b/web/src/compose_setup.js @@ -598,6 +598,11 @@ export function initialize() { const $input = $("input#stream_message_recipient_topic"); compose_recipient.update_topic_displayed_text($input.val(), true); compose_recipient.update_compose_area_placeholder_text(); + // Once the topic input has been focused, we no longer treat + // the recipient row as muted, as we assume the user is + // doing something that requires keeping attention called + // to the recipient row + compose_recipient.unmute_recipient_row(); $("input#stream_message_recipient_topic").one("blur", () => { compose_recipient.update_topic_displayed_text($input.val()); diff --git a/web/templates/compose.hbs b/web/templates/compose.hbs index d5b6584a38..d71ff3a05d 100644 --- a/web/templates/compose.hbs +++ b/web/templates/compose.hbs @@ -49,7 +49,14 @@
-
+ {{!-- We start with the muted-recipient-row class + on the template to avoid showing the transition + when the compose box first opens. Note that this + class is immediately removed when it's not used, + so, for example, opening the compose box from + Inbox view does not cause any flash of unwanted + styling. --}} +
{{> dropdown_widget_wrapper widget_name="compose_select_recipient"}}
diff --git a/web/tests/compose.test.cjs b/web/tests/compose.test.cjs index 15d9f08031..7af8ee2ffc 100644 --- a/web/tests/compose.test.cjs +++ b/web/tests/compose.test.cjs @@ -637,6 +637,7 @@ test_ui("update_fade", ({override, override_rewire}) => { override_rewire(compose_recipient, "update_narrow_to_recipient_visibility", () => { update_narrow_to_recipient_visibility_called = true; }); + override_rewire(compose_recipient, "maybe_mute_recipient_row", noop); override_rewire(compose_validate, "validate_and_update_send_button_status", noop); override_rewire(drafts, "update_compose_draft_count", noop); override(compose_pm_pill, "get_user_ids", () => []); diff --git a/web/tests/compose_actions.test.cjs b/web/tests/compose_actions.test.cjs index b2a2baf7de..58b6f4eff4 100644 --- a/web/tests/compose_actions.test.cjs +++ b/web/tests/compose_actions.test.cjs @@ -31,6 +31,8 @@ set_global("document", { to_$: () => $("document-stub"), }); +set_global("requestAnimationFrame", (func) => func()); + const autosize = noop; autosize.update = noop; mock_esm("autosize", {default: autosize}); @@ -165,6 +167,7 @@ test("start", ({override, override_rewire, mock_template}) => { override_rewire(compose_recipient, "on_compose_select_recipient_update", noop); override_rewire(compose_recipient, "check_posting_policy_for_compose_box", noop); + override_rewire(compose_recipient, "maybe_mute_recipient_row", noop); override_rewire(stream_data, "can_post_messages_in_stream", () => true); mock_template("inline_decorated_channel_name.hbs", false, noop); @@ -319,6 +322,7 @@ test("respond_to_message", ({override, override_rewire, mock_template}) => { override_rewire(compose_recipient, "on_compose_select_recipient_update", noop); override_rewire(compose_recipient, "check_posting_policy_for_compose_box", noop); + override_rewire(compose_recipient, "maybe_mute_recipient_row", noop); override_private_message_recipient_ids({override}); mock_template("inline_decorated_channel_name.hbs", false, noop); @@ -374,6 +378,7 @@ test("reply_with_mention", ({override, override_rewire, mock_template}) => { mock_banners(); compose_state.set_message_type("stream"); override_rewire(compose_recipient, "on_compose_select_recipient_update", noop); + override_rewire(compose_recipient, "maybe_mute_recipient_row", noop); override_rewire(compose_actions, "complete_starting_tasks", noop); override_rewire(compose_actions, "clear_textarea", noop); const $elem = $("#send_message_form"); @@ -436,6 +441,7 @@ test("reply_with_mention", ({override, override_rewire, mock_template}) => { test("quote_message", ({disallow, override, override_rewire}) => { override_rewire(compose_recipient, "on_compose_select_recipient_update", noop); + override_rewire(compose_recipient, "maybe_mute_recipient_row", noop); override_rewire(compose_reply, "selection_within_message_id", () => undefined); const $elem = $("#send_message_form"); const $textarea = $("textarea#compose-textarea");