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 @@
 
- {{~> copy_code_button~}} + + + {{~#if show_playground_button~}} {{~> view_code_in_playground~}} {{~/if~}} diff --git a/web/templates/copy_code_button.hbs b/web/templates/copy_code_button.hbs deleted file mode 100644 index 81aa93d565..0000000000 --- a/web/templates/copy_code_button.hbs +++ /dev/null @@ -1,3 +0,0 @@ -