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 rows from "./rows";
import * as settings_data from "./settings_data"; import * as settings_data from "./settings_data";
import * as timerender from "./timerender"; import * as timerender from "./timerender";
import {show_copied_confirmation} from "./tippyjs";
import * as ui_report from "./ui_report"; import * as ui_report from "./ui_report";
import * as upload from "./upload"; import * as upload from "./upload";
import * as util from "./util"; import * as util from "./util";
@@ -399,13 +400,15 @@ function create_copy_to_clipboard_handler($row, source, message_id) {
}); });
clipboard.on("success", () => { 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); end_message_row_edit($row);
$row.find(".alert-msg").text($t({defaultMessage: "Copied!"})); },
$row.find(".alert-msg").css("display", "block"); tippy_timeout_in_ms,
$row.find(".alert-msg").delay(1000).fadeOut(300); );
if ($(".tooltip").is(":visible")) {
$(".tooltip").hide();
}
}); });
} }

View File

@@ -31,7 +31,7 @@ import * as drafts from "./drafts";
import * as emoji_picker from "./emoji_picker"; import * as emoji_picker from "./emoji_picker";
import * as flatpickr from "./flatpickr"; import * as flatpickr from "./flatpickr";
import * as giphy from "./giphy"; 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 from "./message_edit";
import * as message_edit_history from "./message_edit_history"; import * as message_edit_history from "./message_edit_history";
import * as message_lists from "./message_lists"; 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 starred_messages_ui from "./starred_messages_ui";
import * as stream_popover from "./stream_popover"; import * as stream_popover from "./stream_popover";
import * as timerender from "./timerender"; import * as timerender from "./timerender";
import {show_copied_confirmation} from "./tippyjs";
import {parse_html} from "./ui_util"; import {parse_html} from "./ui_util";
import * as unread_ops from "./unread_ops"; import * as unread_ops from "./unread_ops";
import {user_settings} from "./user_settings"; import {user_settings} from "./user_settings";
@@ -784,16 +785,8 @@ export function initialize() {
instance.hide(); instance.hide();
}); });
new ClipboardJS($popper.find(".copy_link")[0]).on("success", (e) => { new ClipboardJS($popper.find(".copy_link")[0]).on("success", () => {
// e.trigger returns the DOM element triggering the copy action show_copied_confirmation($(instance.reference).closest(".message_controls")[0]);
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);
setTimeout(() => { setTimeout(() => {
// The Clipboard library works by focusing to a hidden textarea. // The Clipboard library works by focusing to a hidden textarea.
// We unfocus this so keyboard shortcuts, etc., will work again. // We unfocus this so keyboard shortcuts, etc., will work again.