paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-17 20:41:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

compose: Show banner to explain interleaved view messages fading.

Browse Source 
In an interleaved view when composing a message we fade messages
which the user is not replying to, to reduce the chance they send
a message to a recipient they didn't intend to.
Also, it reduces the visual/cognitive processing required
to figure out where their message is going to go.

But, it's not necessarily clear to users that what the
fading means, so this commit adds a one-time compose banner
to explain what's going on the first time this comes up.

Fixes part of #29076.
This commit is contained in:
Prakhar Pratyush
2024-04-23 12:34:05 +05:30
committed by Tim Abbott
parent 35380b095f
commit df7ed437c2
9 changed files with 86 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
web/src/compose_notifications.ts
View File

@@ -306,8 +306,9 @@ export function notify_messages_outside_current_search(messages: Message[]): voi
}
export function maybe_show_one_time_non_interleaved_view_messages_fading_banner(): void {
// Remove message fading banner if exists. Helps in live-updating banner.
// Remove message fading banners if exists. Helps in live-updating banner.
compose_banner.clear_non_interleaved_view_messages_fading_banner();
compose_banner.clear_interleaved_view_messages_fading_banner();
if (!onboarding_steps.ONE_TIME_NOTICES_TO_DISPLAY.has("non_interleaved_view_messages_fading")) {
return;
@@ -334,6 +335,39 @@ export function maybe_show_one_time_non_interleaved_view_messages_fading_banner(
compose_banner.append_compose_banner_to_banner_list($(new_row_html), $("#compose_banners"));
}
export function maybe_show_one_time_interleaved_view_messages_fading_banner(): void {
// Remove message fading banners if exists. Helps in live-updating banner.
compose_banner.clear_non_interleaved_view_messages_fading_banner();
compose_banner.clear_interleaved_view_messages_fading_banner();
if (!onboarding_steps.ONE_TIME_NOTICES_TO_DISPLAY.has("interleaved_view_messages_fading")) {
return;
}
// Wait to display the banner the first time until there's actually fading.
const faded_messages_exist = $(".focused-message-list .recipient_row").hasClass("message-fade");
if (!faded_messages_exist) {
return;
}
// TODO: Introduce two variants of the banner_text depending on whether
// sending a message to the current recipient would appear in the view you're in.
// See: https://github.com/zulip/zulip/pull/29634#issuecomment-2073274029
const context = {
banner_type: compose_banner.INFO,
classname: compose_banner.CLASSNAMES.interleaved_view_messages_fading,
banner_text: $t({
defaultMessage:
"To make it easier to tell where your message will be sent, messages in conversations you are not composing to are faded.",
}),
button_text: $t({defaultMessage: "Got it"}),
hide_close_button: true,
};
const new_row_html = render_compose_banner(context);
compose_banner.append_compose_banner_to_banner_list($(new_row_html), $("#compose_banners"));
}
export function reify_message_id(opts: {old_id: number; new_id: number}): void {
const old_id = opts.old_id;
const new_id = opts.new_id;