alerts: Show Copied! Tippy alerts in message area.

This commit properly displays Tippy Copied! alerts in two cases:

1) On the clipboard icon when copying message source.
2) On the hover controls when copying the link to a message.

Fixes #21036.
This commit is contained in:
Karl Stolley
2023-08-01 11:24:52 -05:00
committed by Tim Abbott
parent b75b53d465
commit 0c9aec24fd
2 changed files with 14 additions and 18 deletions

View File

@@ -33,6 +33,7 @@ import * as resize from "./resize";
import * as rows from "./rows";
import * as settings_data from "./settings_data";
import * as timerender from "./timerender";
import {show_copied_confirmation} from "./tippyjs";
import * as ui_report from "./ui_report";
import * as upload from "./upload";
import * as util from "./util";
@@ -399,13 +400,15 @@ function create_copy_to_clipboard_handler($row, source, message_id) {
});
clipboard.on("success", () => {
// Hide the Tippy and source box after a 600ms delay
const tippy_timeout_in_ms = 600;
show_copied_confirmation(
$row.find(".copy_message")[0],
() => {
end_message_row_edit($row);
$row.find(".alert-msg").text($t({defaultMessage: "Copied!"}));
$row.find(".alert-msg").css("display", "block");
$row.find(".alert-msg").delay(1000).fadeOut(300);
if ($(".tooltip").is(":visible")) {
$(".tooltip").hide();
}
},
tippy_timeout_in_ms,
);
});
}

View File

@@ -31,7 +31,7 @@ import * as drafts from "./drafts";
import * as emoji_picker from "./emoji_picker";
import * as flatpickr from "./flatpickr";
import * as giphy from "./giphy";
import {$t, $t_html} from "./i18n";
import {$t_html} from "./i18n";
import * as message_edit from "./message_edit";
import * as message_edit_history from "./message_edit_history";
import * as message_lists from "./message_lists";
@@ -48,6 +48,7 @@ import * as starred_messages from "./starred_messages";
import * as starred_messages_ui from "./starred_messages_ui";
import * as stream_popover from "./stream_popover";
import * as timerender from "./timerender";
import {show_copied_confirmation} from "./tippyjs";
import {parse_html} from "./ui_util";
import * as unread_ops from "./unread_ops";
import {user_settings} from "./user_settings";
@@ -784,16 +785,8 @@ export function initialize() {
instance.hide();
});
new ClipboardJS($popper.find(".copy_link")[0]).on("success", (e) => {
// e.trigger returns the DOM element triggering the copy action
const message_id = e.trigger.dataset.messageId;
const $row = $(`[zid='${CSS.escape(message_id)}']`);
$row.find(".alert-msg")
.text($t({defaultMessage: "Copied!"}))
.css("display", "block")
.delay(1000)
.fadeOut(300);
new ClipboardJS($popper.find(".copy_link")[0]).on("success", () => {
show_copied_confirmation($(instance.reference).closest(".message_controls")[0]);
setTimeout(() => {
// The Clipboard library works by focusing to a hidden textarea.
// We unfocus this so keyboard shortcuts, etc., will work again.