diff --git a/web/src/message_list_tooltips.ts b/web/src/message_list_tooltips.ts index 792ee426a0..58992b8a4a 100644 --- a/web/src/message_list_tooltips.ts +++ b/web/src/message_list_tooltips.ts @@ -263,7 +263,14 @@ export function initialize(): void { }, }); - message_list_tooltip(".code_external_link"); + message_list_tooltip( + ".rendered_markdown .copy_codeblock, .rendered_markdown .code_external_link", + { + onHidden(instance) { + instance.destroy(); + }, + }, + ); message_list_tooltip("#message_feed_container .change_visibility_policy > i", { ...topic_visibility_policy_tooltip_props, @@ -276,7 +283,7 @@ export function initialize(): void { }, }); - message_list_tooltip(".rendered_markdown time, .rendered_markdown .copy_codeblock", { + message_list_tooltip(".rendered_markdown time", { // eslint-disable-next-line @typescript-eslint/consistent-type-assertions content: timerender.get_markdown_time_tooltip as tippy.Content, onHidden(instance) { diff --git a/web/src/rendered_markdown.ts b/web/src/rendered_markdown.ts index 7d8231b7ce..d1830b7818 100644 --- a/web/src/rendered_markdown.ts +++ b/web/src/rendered_markdown.ts @@ -341,7 +341,9 @@ export const update_elements = ($content: JQuery): void => { }); clipboard.on("success", () => { - show_copied_confirmation(util.the($copy_button)); + show_copied_confirmation(util.the($copy_button), { + show_check_icon: true, + }); }); $codehilite.addClass("zulip-code-block"); }); diff --git a/web/styles/rendered_markdown.css b/web/styles/rendered_markdown.css index e413733ecb..80b8672a31 100644 --- a/web/styles/rendered_markdown.css +++ b/web/styles/rendered_markdown.css @@ -776,7 +776,7 @@ /* Having absolute positioning here ensures that the element doesn't scroll along with the code div in narrow windows */ position: absolute; - top: 2px; + top: 5px; right: 0; padding: 0 4px; /* Invisible unless
is hovered. */
@@ -799,41 +799,6 @@
hsl(0deg 0% 0% / 50%)
);
}
-
- #clipboard_image {
- /* Zero out legacy negative margins */
- margin: 0;
- }
- }
-
- /* Style copy-to-clipboard button inside code blocks */
- .copy_codeblock {
- display: flex;
- align-content: center;
- /* Push back on legacy styles from .copy_button_base,
- which are not necessary in the flex setting established
- on the .code-buttons-container. */
- height: auto;
- width: auto;
- background-clip: unset;
- /* Don't let the default button color appear
- behind the icon. Regrettably, !important
- is necessary for a thorny selector-specificity
- issue in dark mode. */
- background-color: transparent !important;
- /* Square off the box around the copy-to-clipboard icon. */
- padding: 0 2px 0 4px;
-
- &:hover {
- /* Regrettably, !important is necessary for a thorny
- selector-specificity issue in dark mode. */
- background-color: transparent !important;
- }
-
- /* Remove the outline when clicking on the copy-to-clipboard button */
- &:focus {
- outline: none;
- }
}
.code_external_link {
diff --git a/web/templates/code_buttons_container.hbs b/web/templates/code_buttons_container.hbs
index 09286dffe3..f464cc22c2 100644
--- a/web/templates/code_buttons_container.hbs
+++ b/web/templates/code_buttons_container.hbs
@@ -1,5 +1,7 @@