compose_closed_ui: Show default label for empty narrows.

The default label for empty narrows depends on whether it's a
stream/topic narrow or a PMs narrow.

We leave some default text in compose.hbs for reply label
because it take some time for the js to display the
correct label.
This commit is contained in:
Aman Agrawal
2021-05-10 15:21:20 +00:00
committed by Tim Abbott
parent 98b9c7284e
commit 0d8a7efa09
8 changed files with 64 additions and 20 deletions

View File

@@ -99,3 +99,10 @@ run_test("test_custom_message_input", () => {
});
test_reply_label("#stream test > topic test");
});
run_test("empty_narrow", () => {
message_lists.current.empty = () => true;
compose_closed_ui.update_reply_recipient_label();
const label = $(".compose_reply_button_label").text();
assert.equal(label, "translated: Compose message");
});

View File

@@ -97,17 +97,11 @@ run_test("uris", () => {
run_test("show_empty_narrow_message", () => {
page_params.stop_words = [];
$("#left_bar_compose_reply_button_big").prop("disabled", false);
narrow_state.reset_current_filter();
hide_all_empty_narrow_messages();
narrow_banner.show_empty_narrow_message();
assert.equal($(".empty_feed_notice").visible(), false);
assert($("#empty_narrow_message").visible());
assert.equal(
$("#left_bar_compose_reply_button_big").attr("title"),
"translated: There are no messages to reply to.",
);
assert($("#left_bar_compose_reply_button_big").prop("disabled"));
// for non-existent or private stream
set_filter([["stream", "Foo"]]);
@@ -236,8 +230,6 @@ run_test("hide_empty_narrow_message", () => {
$(".empty_feed_notice").show();
narrow_banner.hide_empty_narrow_message();
assert(!$(".empty_feed_notice").visible());
assert.equal($("#left_bar_compose_reply_button_big").attr("title"), "translated: Reply (r)");
assert(!$("#left_bar_compose_reply_button_big").prop("disabled"));
});
run_test("show_search_stopwords", () => {

View File

@@ -15,6 +15,7 @@ const all_messages_data = mock_esm("../../static/js/all_messages_data");
const channel = mock_esm("../../static/js/channel");
const compose = mock_esm("../../static/js/compose");
const compose_actions = mock_esm("../../static/js/compose_actions");
const compose_closed_ui = mock_esm("../../static/js/compose_closed_ui");
const hashchange = mock_esm("../../static/js/hashchange");
const message_fetch = mock_esm("../../static/js/message_fetch");
const message_list = mock_esm("../../static/js/message_list", {
@@ -79,6 +80,7 @@ function test_helper() {
}
stub(compose_actions, "on_narrow");
stub(compose_closed_ui, "update_reply_recipient_label");
stub(hashchange, "save_narrow");
stub(message_scroll, "hide_indicators");
stub(message_scroll, "show_loading_older");
@@ -202,6 +204,7 @@ run_test("basics", () => {
[unread_ops, "process_visible"],
[hashchange, "save_narrow"],
[compose, "update_closed_compose_buttons_for_stream"],
[compose_closed_ui, "update_reply_recipient_label"],
[search, "update_button_visibility"],
[compose_actions, "on_narrow"],
[top_left_corner, "handle_narrow_activated"],

View File

@@ -6,6 +6,7 @@ import * as fenced_code from "../shared/js/fenced_code";
import * as channel from "./channel";
import * as common from "./common";
import * as compose from "./compose";
import * as compose_actions from "./compose_actions";
import * as compose_fade from "./compose_fade";
import * as compose_pm_pill from "./compose_pm_pill";
import * as compose_state from "./compose_state";
@@ -314,7 +315,7 @@ export function respond_to_message(opts) {
!narrow_state.narrowed_by_stream_reply() &&
!narrow_state.narrowed_by_topic_reply()
) {
compose.nonexistent_stream_reply_error();
start("stream", {trigger: "empty_narrow_compose"});
return;
}
const current_filter = narrow_state.filter();
@@ -323,7 +324,7 @@ export function respond_to_message(opts) {
const first_operand = first_term.operand;
if (first_operator === "stream" && !stream_data.is_subscribed(first_operand)) {
compose.nonexistent_stream_reply_error();
start("stream", {trigger: "empty_narrow_compose"});
return;
}

View File

@@ -3,7 +3,11 @@ import $ from "jquery";
import * as compose_actions from "./compose_actions";
import {$t} from "./i18n";
import * as message_lists from "./message_lists";
import * as message_store from "./message_store";
import * as narrow_state from "./narrow_state";
import * as people from "./people";
import * as popovers from "./popovers";
import * as recent_topics from "./recent_topics";
function set_reply_button_label(label) {
$(".compose_reply_button_label").text(label);
@@ -14,7 +18,38 @@ export function set_standard_text_for_reply_button() {
}
export function update_reply_recipient_label(message) {
message = message || message_lists.current.selected_message();
if (message === undefined) {
if (message_lists.current.empty()) {
// For empty narrows where there's a clear reply target,
// i.e. stream+topic or a single PM conversation, we label
// the button as replying to the thread.
if (narrow_state.narrowed_to_topic()) {
message = {
stream: narrow_state.stream(),
topic: narrow_state.topic(),
};
} else if (narrow_state.pm_string()) {
// TODO: This is a total hack. Ideally, we'd rework
// this to not duplicate the actual compose_actions.js
// logic for what happens when you click the button,
// and not call into random modules with hacky fake
// "message" objects.
const user_ids = people.user_ids_string_to_ids_array(narrow_state.pm_string());
const user_ids_dicts = user_ids.map((user_id) => ({id: user_id}));
message = {
display_reply_to: message_store.get_pm_full_names({
type: "private",
display_recipient: user_ids_dicts,
}),
};
} else {
set_standard_text_for_reply_button();
}
} else {
message = message_lists.current.selected_message();
}
}
let recipient_label = "";
if (message) {
if (message.stream && message.topic) {
@@ -22,13 +57,24 @@ export function update_reply_recipient_label(message) {
} else if (message.display_reply_to) {
recipient_label = message.display_reply_to;
}
set_reply_button_label(
$t({defaultMessage: "Message {recipient_label}"}, {recipient_label}),
);
} else {
set_standard_text_for_reply_button();
}
set_reply_button_label($t({defaultMessage: "Message {recipient_label}"}, {recipient_label}));
}
export function initialize() {
// When the message selection changes, change the label on the Reply button.
$(document).on("message_selected.zulip", () => {
if (recent_topics.is_visible()) {
// message_selected events can occur with recent topics
// open due to "All messages" loading in the background,
// so we return without calling changing button state.
return;
}
update_reply_recipient_label();
});

View File

@@ -5,6 +5,7 @@ import * as blueslip from "./blueslip";
import * as channel from "./channel";
import * as compose from "./compose";
import * as compose_actions from "./compose_actions";
import * as compose_closed_ui from "./compose_closed_ui";
import * as compose_fade from "./compose_fade";
import * as compose_state from "./compose_state";
import * as condense from "./condense";
@@ -388,6 +389,7 @@ export function activate(raw_operators, opts) {
} else {
compose.update_closed_compose_buttons_for_stream();
}
compose_closed_ui.update_reply_recipient_label();
search.update_button_visibility();

View File

@@ -187,15 +187,8 @@ function pick_empty_narrow_banner() {
export function show_empty_narrow_message() {
$(".empty_feed_notice").hide();
pick_empty_narrow_banner().show();
$("#left_bar_compose_reply_button_big").attr(
"title",
$t({defaultMessage: "There are no messages to reply to."}),
);
$("#left_bar_compose_reply_button_big").prop("disabled", true);
}
export function hide_empty_narrow_message() {
$(".empty_feed_notice").hide();
$("#left_bar_compose_reply_button_big").attr("title", $t({defaultMessage: "Reply (r)"}));
$("#left_bar_compose_reply_button_big").prop("disabled", false);
}

View File

@@ -9,7 +9,7 @@
<button type="button" class="button small rounded compose_reply_button"
id="left_bar_compose_reply_button_big"
title="{{t 'Reply' }} (r)">
<span class="compose_reply_button_label"></span>
<span class="compose_reply_button_label">{{t 'Compose message' }}</span>
</button>
</span>
<span class="new_message_button mobile_button_container">