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

popovers: Add an x button to topic field in move topic/message modal.

Browse Source 
Fixes #33729.
This commit is contained in:
Saubhagya Patel
2025-04-04 17:10:06 +05:30
committed by Tim Abbott
parent f496bd6350
commit 869e81f14c
3 changed files with 48 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
web/src/stream_popover.ts
View File

@@ -785,6 +785,16 @@ export async function build_move_topic_to_stream_popover(
} }
} }
function update_clear_move_topic_button_state(): void {
const $clear_topic_name_button = $("#clear_move_topic_new_topic_name");
const topic_input_value = $("input#move-topic-new-topic-name").val();
if (topic_input_value === "") {
$clear_topic_name_button.css("visibility", "hidden");
} else {
$clear_topic_name_button.css("visibility", "visible");
}
}
function move_topic_post_render(): void { function move_topic_post_render(): void {
$("#move_topic_modal .dialog_submit_button").prop("disabled", true); $("#move_topic_modal .dialog_submit_button").prop("disabled", true);
$("#move_topic_modal .move_topic_warning_container").hide(); $("#move_topic_modal .move_topic_warning_container").hide();
@@ -812,6 +822,7 @@ export async function build_move_topic_to_stream_popover(
$topic_not_mandatory_placeholder.addClass( $topic_not_mandatory_placeholder.addClass(
"move-topic-new-topic-placeholder-visible", "move-topic-new-topic-placeholder-visible",
); );
$("#clear_move_topic_new_topic_name").css("visibility", "hidden");
} }
$topic_input.one("blur", () => { $topic_input.one("blur", () => {
@@ -821,12 +832,22 @@ export async function build_move_topic_to_stream_popover(
); );
$topic_input.attr("placeholder", empty_string_topic_display_name); $topic_input.attr("placeholder", empty_string_topic_display_name);
$topic_input.addClass("empty-topic-display"); $topic_input.addClass("empty-topic-display");
$("#clear_move_topic_new_topic_name").css("visibility", "visible");
} }
}); });
}); });
} }
setup_resize_observer($topic_input); setup_resize_observer($topic_input);
update_clear_move_topic_button_state();
$("#clear_move_topic_new_topic_name").on("click", (e) => {
e.stopPropagation();
const $topic_input = $("#move-topic-new-topic-name").expectOne();
$topic_input.val("");
$topic_input.trigger("input").trigger("focus");
move_topic_to_stream_topic_typeahead?.hide();
});
if (only_topic_edit) { if (only_topic_edit) {
// Set select_stream_id to current_stream_id since we user is not allowed // Set select_stream_id to current_stream_id since we user is not allowed
@@ -838,6 +859,7 @@ export async function build_move_topic_to_stream_popover(
const topic_input_value = $topic_input.val(); const topic_input_value = $topic_input.val();
assert(topic_input_value !== undefined); assert(topic_input_value !== undefined);
update_topic_input_placeholder_visibility(topic_input_value); update_topic_input_placeholder_visibility(topic_input_value);
update_clear_move_topic_button_state();
}); });
return; return;
} }
@@ -871,6 +893,7 @@ export async function build_move_topic_to_stream_popover(
const topic_input_value = $topic_input.val(); const topic_input_value = $topic_input.val();
assert(topic_input_value !== undefined); assert(topic_input_value !== undefined);
update_topic_input_placeholder_visibility(topic_input_value); update_topic_input_placeholder_visibility(topic_input_value);
update_clear_move_topic_button_state();
}); });
if (!args.from_message_actions_popover) { if (!args.from_message_actions_popover) {

31
web/styles/popovers.css
View File

@@ -859,19 +859,28 @@ ul.popover-group-menu-member-list {
} }
} }
.move_messages_edit_topic {
margin-bottom: unset;
box-sizing: border-box;
width: 100%;
height: auto;
&.empty-topic-display::placeholder {
color: inherit;
}
}
#move-topic-new-topic-input-wrapper { #move-topic-new-topic-input-wrapper {
position: relative; position: relative;
display: grid;
/* 30px at 16px/1em */
grid-template:
"move-topic-input clear-topic" auto / minmax(0, 1fr)
1.875em;
& input.move_messages_edit_topic {
grid-column: move-topic-input-start / clear-topic-end;
grid-row: move-topic-input;
/* 30px at 16px/1em */
padding-right: 1.875em;
margin-bottom: unset;
box-sizing: border-box;
width: 100%;
height: auto;
&.empty-topic-display::placeholder {
color: inherit;
}
}
} }
.move-topic-new-topic-placeholder { .move-topic-new-topic-placeholder {

5
web/templates/move_topic_to_stream.hbs
View File

@@ -14,6 +14,11 @@
<span class="move-topic-new-topic-placeholder placeholder"> <span class="move-topic-new-topic-placeholder placeholder">
{{> topic_not_mandatory_placeholder_text empty_string_topic_display_name=empty_string_topic_display_name}} {{> topic_not_mandatory_placeholder_text empty_string_topic_display_name=empty_string_topic_display_name}}
</span> </span>
{{#unless disable_topic_input}}
<button type="button" id="clear_move_topic_new_topic_name" class="clear_search_button">
<i class="zulip-icon zulip-icon-close"></i>
</button>
{{/unless}}
</div> </div>
</div> </div>
<input name="old_topic_name" type="hidden" value="{{topic_name}}" /> <input name="old_topic_name" type="hidden" value="{{topic_name}}" />