From e0d685ce9211eb5dcc9a02b9226b15b19f73ffdc Mon Sep 17 00:00:00 2001 From: Sayam Samal Date: Fri, 27 Sep 2024 18:07:38 +0530 Subject: [PATCH] message: Improve the copy codeblock and playground buttons. This commit improves the copy codeblock button and playground button in the codeblocks to improve their visibility, particularly when on top of some code. Previously, the text under these buttons was difficult to select, as the buttons would block the selection. This commit now hides these buttons when a user clicks on any part of the codeblock, allowing to view the code without any distractions, as well as, allowing the user to select any part of the code. --- web/shared/icons/external-link.svg | Bin 0 -> 1370 bytes web/src/playground_links_popover.ts | 18 ++---- web/styles/rendered_markdown.css | 66 +++++++++++----------- web/templates/code_buttons_container.hbs | 7 ++- web/templates/view_code_in_playground.hbs | 2 - 5 files changed, 43 insertions(+), 50 deletions(-) create mode 100644 web/shared/icons/external-link.svg delete mode 100644 web/templates/view_code_in_playground.hbs diff --git a/web/shared/icons/external-link.svg b/web/shared/icons/external-link.svg new file mode 100644 index 0000000000000000000000000000000000000000..0347d0ca800b5de2262e714dc97ffff7760730ee GIT binary patch literal 1370 zcmZWp%WfMn47~R%g#7?n)LVs}L-*oCdi9~Vv~g{tt{pT+HlN?2M9F7pJek4l8SnS;1mb%jx-c+)U&rb=;p0$6I@UJMEWG z*Z0k2lu_jIo7DHy`MjAf*UNr-_@LDK<>_`*&ztG9)s7$Kbc`{~R#S*R2~?y@jyVD* z7gGSvkum|-|C!|6i5*oI<%MOy8e>NlCwOrz1(>~KQX#k6kfRZVkc`U~<}C?e8=X}> zM_}*<;7YFqZwu4MIG0Lq`?(?`{K5mw{CwZyn8pv>@-U5m>z*F-`+Ljz5 z$BB-LN*bLaVCt_ks9c18_p2twa208U`mR`)45^j`iAehpGN+zQNQ_N3z^?w!NTHoO zu|uiVueDi;L~M^z!d4`N)Y;gAkr6vWN#25Ac#JMotg8kba5g%4kE4-E)xsB4EveoQ zTK9LpwF|CLjV&=uHR#}SHELEPnr&f`9;cJh@fwvUrF#A|2n}wd1d7mtylZn3RMe%E z%&>N;LpP5%?vW`lY<{AJ(8+3a$-ea6`g(r)_G4Q8y;gM+OI466I!S29_|dQ;HG8WTG#i#Yp}MsRYL*Hfyho3s5z4@9@F7W3m=FU_#kG;nQM` jf8(); for (const playground of playground_info) { const url_template = url_template_lib.parse(playground.url_template); diff --git a/web/styles/rendered_markdown.css b/web/styles/rendered_markdown.css index 80b8672a31..91b26f4ca4 100644 --- a/web/styles/rendered_markdown.css +++ b/web/styles/rendered_markdown.css @@ -738,6 +738,14 @@ &:hover .code-buttons-container { visibility: visible; } + + /* Hide the code buttons container when the user is + clicking on the code block other than the buttons. + This allows the user to select part of the the code + without the buttons interfering with the selection. */ + &:active .code-buttons-container:not(:hover) { + visibility: hidden; + } } & pre code { @@ -776,50 +784,40 @@ /* Having absolute positioning here ensures that the element doesn't scroll along with the code div in narrow windows */ position: absolute; - top: 5px; + top: 4px; right: 0; padding: 0 4px; /* Invisible unless 
 is hovered. */
         visibility: hidden;
         z-index: 0;
+    }
 
-        &::after {
-            content: " ";
-            position: absolute;
-            height: 100%;
-            width: 100%;
-            z-index: -1;
-            /* Blur the background behind the button container */
-            backdrop-filter: blur(5px);
-            /* Use a radial gradient to avoid obvious hard edges
-               to the blur. */
-            mask-image: radial-gradient(
-                farthest-corner,
-                hsl(0deg 0% 0% / 100%),
-                hsl(0deg 0% 0% / 50%)
-            );
+    /* The properties of the code_external_link button are copied from the
+       copy-btn class in app_components.css. */
+    .code_external_link {
+        display: flex;
+        border-radius: 4px;
+        color: var(--color-copy-btn);
+        /* 2px at 16px/1em */
+        padding: 0.125em;
+        cursor: pointer;
+
+        &:hover,
+        :focus-visible {
+            background-color: var(--color-copy-btn-square-bg-hover);
+        }
+
+        &:active {
+            background-color: var(--color-copy-btn-square-bg-active);
+            color: var(--color-copy-btn-square-active);
         }
     }
 
+    .copy_codeblock,
     .code_external_link {
-        /* Match the apparent size of the playground icon
-           to the copy-to-clipboard icon. */
-        font-size: 16px;
-        /* Center the icon vertically in the link container. */
-        display: flex;
-        align-content: center;
-        /* The font-icon footprint still requires 2px of
-           top padding to get better alignment with the
-           copy-to-clipboard icon. */
-        padding-top: 2px;
-        /* The default icon and on-hover colors are inherited from  tag.
-        so we set our own to match the copy-to-clipbord icon */
-        color: hsl(0deg 0% 47%);
-
-        &:hover {
-            color: hsl(200deg 100% 40%);
-            text-decoration: none;
-        }
+        font-size: 1.1363em;
+        border: 1px solid var(--color-copy-btn-square-bg-active);
+        backdrop-filter: blur(20px);
     }
 }
 
diff --git a/web/templates/code_buttons_container.hbs b/web/templates/code_buttons_container.hbs
index f464cc22c2..d5ec1a7797 100644
--- a/web/templates/code_buttons_container.hbs
+++ b/web/templates/code_buttons_container.hbs
@@ -1,8 +1,11 @@
 

-    
+    
         
     
     {{~#if show_playground_button~}}
-    {{~> view_code_in_playground~}}
+    {{! Display the "view code in playground" option for code blocks}}
+    
+        
+    
     {{~/if~}}
 

diff --git a/web/templates/view_code_in_playground.hbs b/web/templates/view_code_in_playground.hbs
deleted file mode 100644
index fa9572947d..0000000000
--- a/web/templates/view_code_in_playground.hbs
+++ /dev/null
@@ -1,2 +0,0 @@
-{{! Display the "view code in playground" option for code blocks}}
-