fix: Center copy btn icon, make code cleaner. #2025

h2oai · Sep 6, 2023 · 542fc88 · 542fc88
1 parent 6e2c9ca
commit 542fc88
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 40 deletions.
diff --git a/ui/src/copyable_text.tsx b/ui/src/copyable_text.tsx
@@ -4,19 +4,18 @@ import React from 'react'
 import { stylesheet } from 'typestyle'
 import { clas, cssVar, pc } from './theme'
 
-
 const
   css = stylesheet({
     btn: {
       position: 'absolute',
       minWidth: 'initial',
-      width: 34,
+      width: 24,
       height: 24,
       right: 0,
       transform: 'translate(-4px, 4px)',
       outlineWidth: 1,
       outlineStyle: 'solid',
-      outlineColor: cssVar('$white'),
+      outlineColor: cssVar('$text'),
       zIndex: 1,
     },
     copiedBtn: {
@@ -27,14 +26,6 @@ const
         }
       }
     },
-    animate: {
-      $nest: {
-        'button': {
-          opacity: 0,
-          transition: 'opacity .5s',
-        }
-      }
-    },
     labelContainer: {
       position: 'relative'
     }
@@ -86,12 +77,17 @@ export const ClipboardCopyButton = ({ value }: { value: S }) => {
 
   React.useEffect(() => () => window.clearTimeout(timeoutRef.current), [])
 
-  return <Fluent.PrimaryButton
-    title='Copy to clipboard'
-    onClick={onClick}
-    iconProps={{ iconName: copied ? 'CheckMark' : 'Copy' }}
-    className={clas(css.btn, copied ? css.copiedBtn : '')}
-  />
+  return (
+    <Fluent.PrimaryButton
+      title='Copy to clipboard'
+      onClick={onClick}
+      iconProps={{
+        iconName: copied ? 'CheckMark' : 'Copy',
+        styles: { root: { marginTop: -1.35 } } // Nudge up the icon a bit to account for incorrect Fluent crop.
+      }}
+      className={clas(css.btn, copied ? css.copiedBtn : '')}
+    />
+  )
 }
 
 export const XCopyableText = ({ model }: { model: CopyableText }) => {
@@ -107,16 +103,14 @@ export const XCopyableText = ({ model }: { model: CopyableText }) => {
       onRenderLabel={() =>
         <div className={css.labelContainer}>
           <Fluent.Label>{label}</Fluent.Label>
-          <span className={multiline ? clas(css.animate) : ''}>
-            <ClipboardCopyButton value={value} />
-          </span>
+          <ClipboardCopyButton value={value} />
         </div>
       }
       styles={{
         root: {
           ...heightStyle,
           textFieldRoot: { position: 'relative', width: pc(100) },
-          textFieldMultiline: multiline ? { '&:hover button': { opacity: 1 } } : undefined
+          textFieldMultiline: multiline ? { '& button': { opacity: 0 }, '&:hover button': { opacity: 1 } } : undefined
         },
         wrapper: heightStyle,
         fieldGroup: heightStyle || { minHeight: height },

diff --git a/ui/src/markdown.tsx b/ui/src/markdown.tsx
@@ -16,12 +16,12 @@ import { Model, Rec, S, unpack } from 'h2o-wave'
 import hljs from 'highlight.js/lib/core'
 import MarkdownIt from 'markdown-it'
 import React from 'react'
+import ReactDOM from 'react-dom'
 import { stylesheet } from 'typestyle'
+import { ClipboardCopyButton } from './copyable_text'
 import { cards, grid, substitute } from './layout'
 import { border, clas, cssVar, padding, pc } from './theme'
 import { bond } from './ui'
-import { ClipboardCopyButton } from './copyable_text'
-import ReactDOM from 'react-dom'
 
 const
   css = stylesheet({
@@ -69,18 +69,24 @@ const
         },
       },
     },
-    copyButton: {
+    codeblock: {
       position: 'relative',
       $nest: {
-        'button': {
+        '&:hover button': {
+          opacity: 1,
+        },
+      }
+    },
+    copyBtnWrapper: {
+      position: 'absolute',
+      right: 4,
+      top: 4,
+      $nest: {
+        button: {
           opacity: 0,
-          top: 0
         },
-        '&:hover button': {
-          opacity: 1
-        }
       }
-    }
+    },
   })
 const highlightSyntax = async (str: S, language: S, codeBlockId: S) => {
   const codeBlock = document.getElementById(codeBlockId)
@@ -105,15 +111,9 @@ const highlightSyntax = async (str: S, language: S, codeBlockId: S) => {
     : hljs.highlightAuto(str).value
 
   codeBlock.innerHTML = highlightedCode
-
-  // Add copy button.
-  const codeBlockContainer = codeBlock.parentElement
-  if (codeBlockContainer) {
-    const buttonContainer = document.createElement('span')
-    ReactDOM.render(<ClipboardCopyButton value={str} />, buttonContainer)
-    codeBlockContainer.classList.add(css.copyButton)
-    codeBlockContainer.appendChild(buttonContainer)
-  }
+  const btnContainer = document.createElement('div')
+  btnContainer.classList.add(css.copyBtnWrapper)
+  ReactDOM.render(<ClipboardCopyButton value={str} />, codeBlock.appendChild(btnContainer))
 
   return highlightedCode
 }
@@ -132,7 +132,7 @@ export const Markdown = ({ source }: { source: S }) => {
         setTimeout(async () => prevHighlights.current[+codeBlockId] = await highlightSyntax(str, lang, codeBlockId), 0)
 
         // TODO: Sanitize the HTML.
-        const ret = `<code id='${codeBlockId}' class="hljs">${prevHighlights.current[codeBlockIdx.current] || str}</code>`
+        const ret = `<code id='${codeBlockId}' class="hljs ${css.codeblock}">${prevHighlights.current[codeBlockIdx.current] || str}</code>`
         codeBlockIdx.current++
         return ret
       }