paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-10-23 04:52:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

move_topic: Improve placeholder when topic is not mandatory.

Browse Source 
Earlier, we used to show "general chat" as the placeholder.

This commit adds support to show "Enter a topic (skip for general
chat)" as the placeholder when topic is not mandatory in the
move-topic-new-topic input box.

We show "general chat" (as we show in compose topic input box)
when move-topic-new-topic input box is not focused and topic="".

Fixes #33846.
This commit is contained in:
Prakhar Pratyush
2025-03-14 00:47:36 +05:30
committed by Tim Abbott
parent d69d2d8b9f
commit 4cc0d52f74
3 changed files with 82 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
web/src/stream_popover.ts
View File

@@ -344,7 +344,6 @@ export async function build_move_topic_to_stream_popover(
const args: {
topic_name: string;
empty_string_topic_display_name: string;
realm_mandatory_topics: boolean;
current_stream_id: number;
notify_new_thread: boolean;
notify_old_thread: boolean;
@@ -357,7 +356,6 @@ export async function build_move_topic_to_stream_popover(
} = {
topic_name,
empty_string_topic_display_name,
realm_mandatory_topics: realm.realm_mandatory_topics,
current_stream_id,
stream,
notify_new_thread: message_edit.notify_new_thread_default,
@@ -758,6 +756,21 @@ export async function build_move_topic_to_stream_popover(
$("#move_messages_count").text(message_text);
}
function update_topic_input_placeholder_visibility(topic_input_value: string): void {
if (!realm.realm_mandatory_topics) {
const $topic_not_mandatory_placeholder = $(".move-topic-new-topic-placeholder");
if (topic_input_value === "") {
$topic_not_mandatory_placeholder.addClass(
"move-topic-new-topic-placeholder-visible",
);
} else {
$topic_not_mandatory_placeholder.removeClass(
"move-topic-new-topic-placeholder-visible",
);
}
}
}
function move_topic_post_render(): void {
$("#move_topic_modal .dialog_submit_button").prop("disabled", true);
$("#move_topic_modal .move_topic_warning_container").hide();
@@ -769,6 +782,36 @@ export async function build_move_topic_to_stream_popover(
false,
);
if (!realm.realm_mandatory_topics) {
const $topic_not_mandatory_placeholder = $(".move-topic-new-topic-placeholder");
if (topic_name === "") {
$topic_not_mandatory_placeholder.addClass(
"move-topic-new-topic-placeholder-visible",
);
}
$topic_input.on("focus", () => {
if ($topic_input.val() === "") {
$topic_input.attr("placeholder", "");
$topic_input.removeClass("empty-topic-display");
$topic_not_mandatory_placeholder.addClass(
"move-topic-new-topic-placeholder-visible",
);
}
$topic_input.one("blur", () => {
if ($topic_input.val() === "") {
$topic_not_mandatory_placeholder.removeClass(
"move-topic-new-topic-placeholder-visible",
);
$topic_input.attr("placeholder", empty_string_topic_display_name);
$topic_input.addClass("empty-topic-display");
}
});
});
}
if (only_topic_edit) {
// Set select_stream_id to current_stream_id since we user is not allowed
// to edit stream in topic-edit only UI.
@@ -776,6 +819,9 @@ export async function build_move_topic_to_stream_popover(
$topic_input.on("input", () => {
update_submit_button_disabled_state(select_stream_id);
maybe_show_topic_already_exists_warning();
const topic_input_value = $topic_input.val();
assert(topic_input_value !== undefined);
update_topic_input_placeholder_visibility(topic_input_value);
});
return;
}
@@ -805,6 +851,9 @@ export async function build_move_topic_to_stream_popover(
$topic_input.on("input", () => {
update_submit_button_disabled_state(current_stream_id);
maybe_show_topic_already_exists_warning();
const topic_input_value = $topic_input.val();
assert(topic_input_value !== undefined);
update_topic_input_placeholder_visibility(topic_input_value);
});
// Update position of topic typeahead because showing/hiding the

25
web/styles/popovers.css
View File

@@ -885,6 +885,31 @@ ul.popover-group-menu-member-list {
box-sizing: border-box;
width: 100%;
height: auto;
&.empty-topic-display::placeholder {
color: inherit;
}
}
#move-topic-new-topic-input-wrapper {
position: relative;
}
.move-topic-new-topic-placeholder {
position: absolute;
left: 6px;
right: 6px;
top: 50%;
transform: translateY(-50%);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
pointer-events: none;
visibility: hidden;
}
.move-topic-new-topic-placeholder-visible {
visibility: visible;
}
#message_move_select_options {

7
web/templates/move_topic_to_stream.hbs
View File

@@ -9,7 +9,12 @@
{{/unless}}
<div class="input-group">
<label for="move-topic-new-topic-name" class="modal-field-label">New topic</label>
<input id="move-topic-new-topic-name" name="new_topic_name" type="text" class="move_messages_edit_topic modal_text_input {{#unless realm_mandatory_topics}}empty-topic-placeholder-display{{/unless}}" autocomplete="off" {{#unless realm_mandatory_topics}}placeholder="{{empty_string_topic_display_name}}"{{/unless}} value="{{topic_name}}" {{#if disable_topic_input}}disabled{{/if}} maxlength="{{ max_topic_length }}"/>
<div id="move-topic-new-topic-input-wrapper">
<input id="move-topic-new-topic-name" name="new_topic_name" type="text" class="move_messages_edit_topic modal_text_input" autocomplete="off" value="{{topic_name}}" {{#if disable_topic_input}}disabled{{/if}} maxlength="{{ max_topic_length }}"/>
<span class="move-topic-new-topic-placeholder placeholder">
{{> topic_not_mandatory_placeholder_text empty_string_topic_display_name=empty_string_topic_display_name}}
</span>
</div>
</div>
<input name="old_topic_name" type="hidden" value="{{topic_name}}" />
<input name="current_stream_id" type="hidden" value="{{current_stream_id}}" />