From 2e4e017a18cac875678f3a9560fe5b162d641d2f Mon Sep 17 00:00:00 2001
From: Sayam Samal <sayam@zulip.com>
Date: Tue, 20 Aug 2024 19:46:22 +0530
Subject: [PATCH] copy: Use redesigned copy button in view original message UI.

This commit also updates the copy icon in the related /help docs.
---
 help/view-the-markdown-source-of-a-message.md |   2 +-
 static/images/help/copy_to_clipboard.svg      | Bin 531 -> 0 bytes
 web/src/message_edit.ts                       |   5 +++--
 web/styles/message_row.css                    |   1 +
 web/styles/zulip.css                          |  18 ++++++------------
 web/templates/copy_message_button.hbs         |   3 ---
 web/templates/message_edit_form.hbs           |   4 +++-
 7 files changed, 14 insertions(+), 19 deletions(-)
 delete mode 100644 static/images/help/copy_to_clipboard.svg
 delete mode 100644 web/templates/copy_message_button.hbs

diff --git a/help/view-the-markdown-source-of-a-message.md b/help/view-the-markdown-source-of-a-message.md
index bb01188faf..5c9e242329 100644
--- a/help/view-the-markdown-source-of-a-message.md
+++ b/help/view-the-markdown-source-of-a-message.md
@@ -33,7 +33,7 @@ formatted, or to copy the Markdown source for a reply.
    menu option for editable messages that you have sent.
 
 1. Click the **Copy and close**
-   ( <img src="/static/images/help/copy_to_clipboard.svg" alt="copy" class="help-center-icon"/>)
+   (<i class="zulip-icon zulip-icon-copy"></i>)
    widget in the upper right corner of the message.
 
 !!! keyboard_tip ""
diff --git a/static/images/help/copy_to_clipboard.svg b/static/images/help/copy_to_clipboard.svg
deleted file mode 100644
index d14cdde6f94e10fe2b307929d8247bd3d556cabf..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 531
zcmZWm%TB{E5WM#*R_5%+Z#yXI0WLkjHFp%Cu9VV>L{8POXY52pf+*g|<DJJk&6p09
zjvw>W`Pwo;f}{{jVRStWUt`PSG+iF6YM$rqtheXyL#5DDfys6o!qZ&drbwU1VQATd
z_ny&v%U-1l<Xwo$y5!6r+r*u@(Mc=8byyH*BDU*6X2@D~#)KC%kTYVyzF=OI&dz$b
z$AS!3AwaMQLq@tqX7NS$3asZKfCkCvOoCC*CCR`&Y0YI##*SS1j2H{Qy)!-6mIMsA
zs&jRwLzW)VEfoY>03*O>j7SzzQsV-1axvyv0F{wc$X$Kb0}1S05d)LQtcx!U6Y?RP
u=x}MbG6iI#m5b*+MfSw{9}fepL2-=tH)S!*$RFyx<Ho4kZJPW`cbgwk!h3oE

diff --git a/web/src/message_edit.ts b/web/src/message_edit.ts
index b643b6c53c..5e32d57f72 100644
--- a/web/src/message_edit.ts
+++ b/web/src/message_edit.ts
@@ -449,9 +449,10 @@ function create_copy_to_clipboard_handler(
     });
 
     clipboard.on("success", () => {
-        // Hide the Tippy and source box after a 600ms delay
-        const tippy_timeout_in_ms = 600;
+        // Hide the Tippy and source box after a 1000ms delay
+        const tippy_timeout_in_ms = 1000;
         show_copied_confirmation(the($row.find(".copy_message")), {
+            show_check_icon: true,
             timeout_in_ms: tippy_timeout_in_ms,
             on_hide_callback() {
                 end_message_row_edit($row);
diff --git a/web/styles/message_row.css b/web/styles/message_row.css
index 376d70f4c4..d218799936 100644
--- a/web/styles/message_row.css
+++ b/web/styles/message_row.css
@@ -655,6 +655,7 @@
 }
 
 .edit-content-container {
+    position: relative;
     border-radius: 4px;
     border: 1px solid var(--color-message-content-container-border);
     transition: border 0.2s ease;
diff --git a/web/styles/zulip.css b/web/styles/zulip.css
index e63050f45f..3c4274af98 100644
--- a/web/styles/zulip.css
+++ b/web/styles/zulip.css
@@ -632,18 +632,12 @@ li,
 }
 
 .copy_message {
-    float: right;
-    position: relative;
-    cursor: pointer;
-    top: 30px;
-    /* To make sure the svg doesn't occupy any vertical space. */
-    margin-top: -30px;
-    right: 2px;
-    padding-top: 2px;
-
-    #clipboard_image {
-        margin: 0;
-    }
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    height: 1em;
+    backdrop-filter: blur(20px);
+    outline: 1px solid var(--color-copy-btn-square-bg-active);
 }
 
 #copy_generated_link_container {
diff --git a/web/templates/copy_message_button.hbs b/web/templates/copy_message_button.hbs
deleted file mode 100644
index 66682e9bae..0000000000
--- a/web/templates/copy_message_button.hbs
+++ /dev/null
@@ -1,3 +0,0 @@
-<div class="copy_button_base copy_message tippy-zulip-tooltip" data-tippy-content="{{t 'Copy and close' }}" aria-label="{{t 'Copy and close' }}" role="button">
-    {{> copy_to_clipboard_svg }}
-</div>
diff --git a/web/templates/message_edit_form.hbs b/web/templates/message_edit_form.hbs
index afa63af49b..0e9ac39fbd 100644
--- a/web/templates/message_edit_form.hbs
+++ b/web/templates/message_edit_form.hbs
@@ -4,7 +4,9 @@
         <form id="edit_form_{{message_id}}">
             <div class="edit_form_banners"></div>
             <div class="edit-controls edit-content-container {{#if is_editable}}surround-formatting-buttons-row{{/if}}">
-                {{> copy_message_button message_id=this.message_id}}
+                <span class="copy_message copy-btn copy-btn-square tippy-zulip-tooltip" data-tippy-content="{{t 'Copy and close' }}" aria-label="{{t 'Copy and close' }}" role="button">
+                    <i class="zulip-icon zulip-icon-copy" aria-hidden="true"></i>
+                </span>
                 <textarea class="message_edit_content" maxlength="{{ max_message_length }}">{{content}}</textarea>
                 <div class="scrolling_list preview_message_area" id="preview_message_area_{{message_id}}" style="display:none;">
                     <div class="markdown_preview_spinner"></div>