copy: Indicate successful copy by displaying a check icon momentarily.

web/src/copied_tooltip.ts

@@ -1,18 +1,18 @@
+import $ from "jquery";
 import * as tippy from "tippy.js";
 
 import {$t} from "./i18n";
 
-export function show_copied_confirmation(
+function show_copied_tooltip(
     copy_button: HTMLElement,
     on_hide_callback?: () => void,
-    timeout_in_ms = 1000,
-): void {
+): tippy.Instance {
     // Display a tooltip to notify the user the message or code was copied.
     const instance = tippy.default(copy_button, {
         placement: "top",
         appendTo: () => document.body,
-        onUntrigger() {
-            remove_instance();
+        onUntrigger(instance) {
+            instance.destroy();
         },
         onHide() {
             if (on_hide_callback) {
@@ -22,10 +22,38 @@ export function show_copied_confirmation(
     });
     instance.setContent($t({defaultMessage: "Copied!"}));
     instance.show();
-    function remove_instance(): void {
+    return instance;
+}
+
+function show_check_icon(copy_button: HTMLElement): void {
+    $(copy_button).addClass("copy-btn-success");
+    $(copy_button).find(".zulip-icon").removeClass("zulip-icon-copy").addClass("zulip-icon-check");
+}
+
+function remove_check_icon(copy_button: HTMLElement): void {
+    $(copy_button).removeClass("copy-btn-success");
+    $(copy_button).find(".zulip-icon").addClass("zulip-icon-copy").removeClass("zulip-icon-check");
+}
+
+export function show_copied_confirmation(
+    copy_button: HTMLElement,
+    opts?: {
+        show_check_icon?: boolean;
+        timeout_in_ms?: number;
+        on_hide_callback?: () => void;
+    },
+): void {
+    const instance = show_copied_tooltip(copy_button, opts?.on_hide_callback);
+    if (opts?.show_check_icon) {
+        show_check_icon(copy_button);
+    }
+
+    setTimeout(() => {
         if (!instance.state.isDestroyed) {
             instance.destroy();
         }
-    }
-    setTimeout(remove_instance, timeout_in_ms);
+        if (opts?.show_check_icon) {
+            remove_check_icon(copy_button);
+        }
+    }, opts?.timeout_in_ms ?? 1000);
 }

web/src/invite.ts

@@ -228,13 +228,9 @@ function generate_multiuse_invite(): void {
 
             clipboard.on("success", () => {
                 const tippy_timeout_in_ms = 800;
-                show_copied_confirmation(
-                    util.the($("#copy_generated_invite_link")),
-                    () => {
-                        // Do nothing on hide
-                    },
-                    tippy_timeout_in_ms,
-                );
+                show_copied_confirmation(util.the($("#copy_generated_invite_link")), {
+                    timeout_in_ms: tippy_timeout_in_ms,
+                });
             });
         },
         error(xhr) {

web/src/message_edit.ts

@@ -451,13 +451,12 @@ 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;
-        show_copied_confirmation(
-            the($row.find(".copy_message")),
-            () => {
+        show_copied_confirmation(the($row.find(".copy_message")), {
+            timeout_in_ms: tippy_timeout_in_ms,
+            on_hide_callback() {
                 end_message_row_edit($row);
             },
-            tippy_timeout_in_ms,
-        );
+        });
     });
 }
 

web/src/user_card_popover.js

@@ -390,7 +390,9 @@ function init_email_clipboard() {
                 $copy_email_icon.removeClass("hide_copy_icon");
                 const copy_email_clipboard = clipboard_enable($copy_email_icon[0]);
                 copy_email_clipboard.on("success", (e) => {
-                    show_copied_confirmation(e.trigger);
+                    show_copied_confirmation(e.trigger, {
+                        show_check_icon: true,
+                    });
                 });
             }
         }
@@ -837,7 +839,9 @@ function register_click_handlers() {
             return $(trigger).parent().find(".custom-profile-field-link").attr("href");
         },
     }).on("success", (e) => {
-        show_copied_confirmation(e.trigger);
+        show_copied_confirmation(e.trigger, {
+            show_check_icon: true,
+        });
     });
 }
 

web/styles/app_components.css

@@ -1358,6 +1358,10 @@ input.settings_text_input {
             color: var(--color-copy-btn-square-active);
         }
     }
+
+    &.copy-btn-success {
+        color: var(--color-copy-btn-success);
+    }
 }
 
 .text-success {

web/styles/app_variables.css

@@ -768,6 +768,7 @@
         hsl(229deg 9% 36%) 11%,
         transparent
     );
+    --color-copy-btn-success: var(--green-500);
 
     /* Reaction container colors */
     --color-message-reaction-border: hsl(0deg 0% 0% / 10%);
@@ -1227,6 +1228,7 @@
         hsl(229deg 9% 60%) 18%,
         transparent
     );
+    --color-copy-btn-success: var(--green-300);
 
     /* Reaction container colors */
     --color-message-reaction-border: hsl(0deg 0% 100% / 15%);