inline_topic_edit: Improve design of inline topic edit UI.

This commit improves the design of the inline topic edit UI by making
the following changes:
- Increases the dimensions of the text input element.
- Fixes the font scaling inside text input element.
- Replaces the old save and cancel buttons with the new icon buttons.

Fixes #33155.
This commit is contained in:
Sayam Samal
2025-01-30 18:04:50 +05:30
committed by Tim Abbott
parent 1e0318e948
commit 2723adac54
8 changed files with 42 additions and 83 deletions

View File

@@ -4,8 +4,8 @@
<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}} />
<button type="button" class="topic_edit_save small_square_button animated-purple-button"><i class="fa fa-check" aria-hidden="true"></i></button>
<button type="button" class="topic_edit_cancel small_square_button small_square_x"><i class="fa fa-remove" aria-hidden="true"></i></button>
{{> components/icon_button squared=true custom_classes="topic_edit_save tippy-zulip-delayed-tooltip" icon="check" intent="brand" data-tooltip-template-id="save-button-tooltip-template" }}
{{> components/icon_button squared=true custom_classes="topic_edit_cancel tippy-zulip-delayed-tooltip" icon="circle-x" intent="neutral" data-tooltip-template-id="cancel-button-tooltip-template" }}
<div class="alert alert-error edit_error" style="display: none"></div>
<div class="topic_edit_spinner"></div>
</form>