From 2723adac54a7a428e771c68f3435d64fbe68e829 Mon Sep 17 00:00:00 2001
From: Sayam Samal <sayam@zulip.com>
Date: Thu, 30 Jan 2025 18:04:50 +0530
Subject: [PATCH] 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.
---
 web/src/message_edit.ts                  |  2 +-
 web/src/message_list.ts                  |  4 +-
 web/styles/dark_theme.css                | 11 ---
 web/styles/zulip.css                     | 92 ++++++++----------------
 web/templates/components/icon_button.hbs |  2 +-
 web/templates/recipient_row.hbs          |  4 +-
 web/templates/tooltip_templates.hbs      |  6 ++
 web/templates/topic_edit_form.hbs        |  4 +-
 8 files changed, 42 insertions(+), 83 deletions(-)

diff --git a/web/src/message_edit.ts b/web/src/message_edit.ts
index cb2a38fdcf..d2fdc8c98a 100644
--- a/web/src/message_edit.ts
+++ b/web/src/message_edit.ts
@@ -366,7 +366,7 @@ export function show_topic_edit_spinner($row: JQuery): void {
 }
 
 export function end_if_focused_on_inline_topic_edit(): void {
-    const $focused_elem = $(".topic_edit_form").find(":focus");
+    const $focused_elem = $(".topic_edit").find(":focus");
     if ($focused_elem.length === 1) {
         $focused_elem.trigger("blur");
         const $recipient_row = $focused_elem.closest(".recipient_row");
diff --git a/web/src/message_list.ts b/web/src/message_list.ts
index c333d84575..b0815b7048 100644
--- a/web/src/message_list.ts
+++ b/web/src/message_list.ts
@@ -538,7 +538,7 @@ export class MessageList {
     }
 
     show_edit_topic_on_recipient_row($recipient_row: JQuery, $form: JQuery): void {
-        $recipient_row.find(".topic_edit_form").append($form);
+        $recipient_row.find(".topic_edit").append($form);
         $recipient_row.find(".stream_topic").hide();
         $recipient_row.find(".topic_edit").show();
         $recipient_row.find(".recipient-bar-control").hide();
@@ -546,7 +546,7 @@ export class MessageList {
 
     hide_edit_topic_on_recipient_row($recipient_row: JQuery): void {
         $recipient_row.find(".stream_topic").show();
-        $recipient_row.find(".topic_edit_form").empty();
+        $recipient_row.find(".topic_edit").empty();
         $recipient_row.find(".topic_edit").hide();
         $recipient_row.find(".recipient-bar-control").show();
     }
diff --git a/web/styles/dark_theme.css b/web/styles/dark_theme.css
index 63182579db..542cfa5ab4 100644
--- a/web/styles/dark_theme.css
+++ b/web/styles/dark_theme.css
@@ -703,17 +703,6 @@
         }
     }
 
-    .small_square_button {
-        &.small_square_x {
-            background-color: hsl(0deg 0% 95%);
-            color: hsl(0deg 0% 42%);
-
-            &:hover {
-                color: hsl(0deg 0% 18%);
-            }
-        }
-    }
-
     & a:not(:active):focus,
     button:not(.action-button, .icon-button):focus,
     i.fa:focus,
diff --git a/web/styles/zulip.css b/web/styles/zulip.css
index c6ef777c21..f2b59326ab 100644
--- a/web/styles/zulip.css
+++ b/web/styles/zulip.css
@@ -907,8 +907,7 @@ div.focused-message-list.is-conversation-view .recipient_row {
 
 .topic_edit {
     display: none;
-    line-height: 22px;
-    visibility: visible;
+    flex-grow: 1;
 
     .alert {
         display: inline-block;
@@ -918,36 +917,36 @@ div.focused-message-list.is-conversation-view .recipient_row {
     }
 }
 
-.inline_topic_edit {
-    margin-bottom: 5px;
-    width: 206px;
-
-    &.header-v {
-        height: 18px;
-        display: inline-block;
-        padding: 0 3px;
-        vertical-align: baseline;
-        line-height: 0px;
-        box-shadow: none;
-        color: hsl(0deg 0% 33%);
-        border-radius: 4px;
-        border: 1px solid hsl(0deg 0% 80%);
-        transition:
-            border-color linear 0.2s,
-            box-shadow linear 0.2s;
-
-        &:focus {
-            border-color: hsl(206deg 80% 62% / 80%);
-            outline: 0;
-            box-shadow:
-                inset 0 1px 1px hsl(0deg 0% 0% / 7.5%),
-                0 0 8px hsl(206deg 80% 62% / 60%);
-        }
-    }
+#topic_edit_form {
+    display: flex;
+    align-items: center;
+    gap: 3px;
+    margin: 0;
+    padding-right: 5px;
 }
 
-.inline_topic_edit:focus {
-    outline: none;
+.inline_topic_edit {
+    flex: 1;
+    /* Set the max width of the inline topic edit input to the realm's
+       max_topic_length (60 chars) + 5 chars extra for some cushion. */
+    max-width: 65ch;
+    line-height: 1.2142em;
+    padding: 0 5px;
+    color: hsl(0deg 0% 33%);
+    border-radius: 4px;
+    border: 1px solid hsl(0deg 0% 80%);
+
+    transition:
+        border-color linear 0.2s,
+        box-shadow linear 0.2s;
+
+    &:focus {
+        border-color: hsl(206deg 80% 62% / 80%);
+        outline: 0;
+        box-shadow:
+            inset 0 1px 1px hsl(0deg 0% 0% / 7.5%),
+            0 0 8px hsl(206deg 80% 62% / 60%);
+    }
 }
 
 .information-settings .user-profile-picture,
@@ -1202,29 +1201,6 @@ nav {
     text-align: center;
 }
 
-.small_square_button {
-    padding: 0;
-    border: none;
-    font-size: 12px;
-    width: 18px;
-    height: 18px;
-    border-radius: 4px;
-    margin-bottom: 3px;
-
-    &:focus {
-        outline: none;
-    }
-
-    &.small_square_x {
-        background-color: hsl(0deg 0% 100%);
-        color: hsl(0deg 0% 47%);
-
-        &:hover {
-            color: hsl(0deg 0% 18%);
-        }
-    }
-}
-
 div.topic_edit_spinner {
     display: inline-block;
     width: 18px;
@@ -1425,16 +1401,6 @@ div.toggle_resolve_topic_spinner .loading_indicator_spinner {
     margin-right: -50%;
 }
 
-#topic_edit_form {
-    display: inline-block;
-    margin: 0;
-    height: 22px;
-    padding-left: 20px;
-    padding-right: 3px;
-    line-height: 22px;
-    margin-left: -15px;
-}
-
 .screen {
     position: absolute;
     left: 0;
diff --git a/web/templates/components/icon_button.hbs b/web/templates/components/icon_button.hbs
index 8205a1a403..c50892f6db 100644
--- a/web/templates/components/icon_button.hbs
+++ b/web/templates/components/icon_button.hbs
@@ -1,3 +1,3 @@
-<button class="{{#if custom_classes}}{{custom_classes}} {{/if}}icon-button {{#if squared}}icon-button-square {{/if}}icon-button-{{intent}}" tabindex="0">
+<button class="{{#if custom_classes}}{{custom_classes}} {{/if}}icon-button {{#if squared}}icon-button-square {{/if}}icon-button-{{intent}}" {{#if data-tooltip-template-id}}data-tooltip-template-id="{{data-tooltip-template-id}}"{{/if}} tabindex="0">
     <i class="zulip-icon zulip-icon-{{icon}}"></i>
 </button>
diff --git a/web/templates/recipient_row.hbs b/web/templates/recipient_row.hbs
index 239bafa99d..40c92a830a 100644
--- a/web/templates/recipient_row.hbs
+++ b/web/templates/recipient_row.hbs
@@ -36,9 +36,7 @@
             </a>
         </span>
         <span class="recipient_bar_controls no-select">
-            <span class="topic_edit hidden-for-spectators">
-                <span class="topic_edit_form"></span>
-            </span>
+            <span class="topic_edit hidden-for-spectators"></span>
 
             {{! exterior links (e.g. to a trac ticket) }}
             {{#each topic_links}}
diff --git a/web/templates/tooltip_templates.hbs b/web/templates/tooltip_templates.hbs
index 74269f7ddc..ed3817676b 100644
--- a/web/templates/tooltip_templates.hbs
+++ b/web/templates/tooltip_templates.hbs
@@ -283,3 +283,9 @@
 <template id="color-picker-confirm-button-tooltip-template">
     {{t 'Confirm new color' }}
 </template>
+<template id="save-button-tooltip-template">
+    {{t 'Save' }}
+</template>
+<template id="cancel-button-tooltip-template">
+    {{t 'Cancel' }}
+</template>
diff --git a/web/templates/topic_edit_form.hbs b/web/templates/topic_edit_form.hbs
index bd307c6951..5156f2cf82 100644
--- a/web/templates/topic_edit_form.hbs
+++ b/web/templates/topic_edit_form.hbs
@@ -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>