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

inline_topic_edit: 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
inline topic edit input box.

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

Fixes part of #33846.
This commit is contained in:
Prakhar Pratyush
2025-03-12 17:47:57 +05:30
committed by Tim Abbott
parent 7d5b655538
commit 280fd40892
5 changed files with 64 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
web/src/message_edit.ts
View File

@@ -477,6 +477,15 @@ function handle_inline_topic_edit_change(this: HTMLInputElement): void {
// the error. So, we re-enable the save button and remove the tooltip.
ui_util.enable_element_and_remove_tooltip($topic_edit_save_button);
}
if (!realm.realm_mandatory_topics) {
const $topic_not_mandatory_placeholder = $(".inline-topic-edit-placeholder");
if ($inline_topic_edit_input.val() === "") {
$topic_not_mandatory_placeholder.addClass("inline-topic-edit-placeholder-visible");
} else {
$topic_not_mandatory_placeholder.removeClass("inline-topic-edit-placeholder-visible");
}
}
}
function timer_text(seconds_left: number): string {
@@ -935,7 +944,6 @@ export function start_inline_topic_edit($recipient_row: JQuery): void {
const $form = $(
render_topic_edit_form({
max_topic_length: realm.max_topic_length,
realm_mandatory_topics: realm.realm_mandatory_topics,
empty_string_topic_display_name: util.get_final_topic_display_name(""),
}),
);
@@ -957,6 +965,32 @@ export function start_inline_topic_edit($recipient_row: JQuery): void {
$form.on("keydown", handle_inline_topic_edit_keydown);
$inline_topic_edit_input.on("input", handle_inline_topic_edit_change);
if (!realm.realm_mandatory_topics) {
const $topic_not_mandatory_placeholder = $(".inline-topic-edit-placeholder");
if (topic === "") {
$topic_not_mandatory_placeholder.addClass("inline-topic-edit-placeholder-visible");
}
$inline_topic_edit_input.on("blur", () => {
if ($inline_topic_edit_input.val() === "") {
$topic_not_mandatory_placeholder.removeClass(
"inline-topic-edit-placeholder-visible",
);
$inline_topic_edit_input.attr("placeholder", util.get_final_topic_display_name(""));
$inline_topic_edit_input.addClass("empty-topic-display");
}
});
$inline_topic_edit_input.on("focus", () => {
if ($inline_topic_edit_input.val() === "") {
$inline_topic_edit_input.attr("placeholder", "");
$inline_topic_edit_input.removeClass("empty-topic-display");
$topic_not_mandatory_placeholder.addClass("inline-topic-edit-placeholder-visible");
}
});
}
}
export function end_inline_topic_edit($row: JQuery): void {

20
web/styles/zulip.css
View File

@@ -953,6 +953,7 @@ div.focused-message-list.is-conversation-view .recipient_row {
gap: 5px;
margin: 0;
padding-right: 5px;
position: relative;
}
.inline_topic_edit {
@@ -977,6 +978,25 @@ div.focused-message-list.is-conversation-view .recipient_row {
inset 0 1px 1px hsl(0deg 0% 0% / 7.5%),
0 0 8px hsl(206deg 80% 62% / 60%);
}
&.empty-topic-display::placeholder {
color: inherit;
}
}
.inline-topic-edit-placeholder {
position: absolute;
left: 5px;
max-width: 65%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
pointer-events: none;
visibility: hidden;
}
.inline-topic-edit-placeholder-visible {
visibility: visible;
}
.topic_edit_save {

5
web/templates/compose.hbs
View File

@@ -58,10 +58,7 @@
<div id="compose_recipient_box">
<input type="text" name="stream_message_recipient_topic" id="stream_message_recipient_topic" maxlength="{{ max_topic_length }}" value="" placeholder="{{t 'Topic' }}" autocomplete="off" tabindex="0" aria-label="{{t 'Topic' }}" />
<span id="topic-not-mandatory-placeholder" class="placeholder">
{{#tr}}
Enter a topic (skip for <z-empty-string-topic-display-name></z-empty-string-topic-display-name>)
{{#*inline "z-empty-string-topic-display-name"}}<span class="empty-topic-display">{{empty_string_topic_display_name}}</span>{{/inline}}
{{/tr}}
{{> topic_not_mandatory_placeholder_text empty_string_topic_display_name=empty_string_topic_display_name}}
</span>
<button type="button" id="recipient_box_clear_topic_button" class="tippy-zulip-delayed-tooltip" data-tippy-content="{{t 'Clear topic' }}" tabindex="-1">
<i class="zulip-icon zulip-icon-close"></i>

7
web/templates/topic_edit_form.hbs
View File

@@ -1,9 +1,10 @@
{{! Client-side Handlebars template for rendering the topic edit form. }}
<form class="topic_edit_form">
<input type="text" value="" autocomplete="off" maxlength="{{ max_topic_length }}"
class="inline_topic_edit header-v {{#unless realm_mandatory_topics}}empty-topic-placeholder-display{{/unless}}"
{{#unless realm_mandatory_topics}}placeholder="{{empty_string_topic_display_name}}"{{/unless}} />
<input type="text" value="" autocomplete="off" maxlength="{{ max_topic_length }}" class="inline_topic_edit header-v"/>
<span class="inline-topic-edit-placeholder placeholder">
{{> topic_not_mandatory_placeholder_text empty_string_topic_display_name=empty_string_topic_display_name}}
</span>
{{> components/action_button custom_classes="topic_edit_save tippy-zulip-delayed-tooltip" icon="check" attention="primary" intent="brand" data-tooltip-template-id="save-button-tooltip-template" }}
{{> components/action_button custom_classes="topic_edit_cancel tippy-zulip-delayed-tooltip" icon="circle-x" attention="borderless" intent="neutral" data-tooltip-template-id="cancel-button-tooltip-template" }}
<div class="topic_edit_spinner"></div>

4
web/templates/topic_not_mandatory_placeholder_text.hbs Normal file
View File

@@ -0,0 +1,4 @@
{{#tr}}
Enter a topic (skip for <z-empty-string-topic-display-name></z-empty-string-topic-display-name>)
{{#*inline "z-empty-string-topic-display-name"}}<span class="empty-topic-display">{{empty_string_topic_display_name}}</span>{{/inline}}
{{/tr}}