fix: copy line in logs not copies

feat: hide copy button by default
felixmosh · Jan 11, 2024 · 5ba551c · 5ba551c
1 parent babcc64
commit 5ba551c
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 6 deletions.
diff --git a/packages/ui/src/components/Highlight/Highlight.module.css b/packages/ui/src/components/Highlight/Highlight.module.css
@@ -1,8 +1,18 @@
 .codeContainerWrapper {
-    display: flex;
-    align-items: flex-start;
+  display: flex;
+  align-items: flex-start;
+  gap: 1ch;
 }
 
 .codeContainerWrapper pre {
-    margin-right: 1ch;
+  flex: 1;
+}
+
+.copyBtn {
+  opacity: 0;
+  transition: opacity 150ms ease-in;
+}
+
+.codeContainerWrapper:hover .copyBtn {
+  opacity: 1;
 }
diff --git a/packages/ui/src/components/Highlight/Highlight.tsx b/packages/ui/src/components/Highlight/Highlight.tsx
@@ -39,7 +39,10 @@ export class Highlight extends React.Component<HighlightProps> {
         <pre ref={this.codeRef}>
           <code className={cn('hljs', language)} />
         </pre>
-        <Button onClick={() => navigator.clipboard.writeText(this.props.children ?? '')}>
+        <Button
+          onClick={() => navigator.clipboard.writeText(this.props.children ?? '')}
+          className={s.copyBtn}
+        >
           <CopyIcon />
         </Button>
       </div>

diff --git a/packages/ui/src/components/JobCard/Details/DetailsContent/JobLogs/JobLogs.module.css b/packages/ui/src/components/JobCard/Details/DetailsContent/JobLogs/JobLogs.module.css
@@ -84,7 +84,7 @@
 
 .logLineCopyButton {
   opacity: 0;
-  transition: opacity 150ms ease;
+  transition: opacity 150ms ease-in;
   margin-inline-start: 1ch;
 }
 

diff --git a/packages/ui/src/components/JobCard/Details/DetailsContent/JobLogs/JobLogs.tsx b/packages/ui/src/components/JobCard/Details/DetailsContent/JobLogs/JobLogs.tsx
@@ -32,7 +32,7 @@ const onClickFullScreen = (el: HTMLElement | null) => async () => {
   return document.exitFullscreen();
 };
 
-const copyLogToClipboard = (log: LogType) => async () => {
+const copyLogToClipboard = (log: LogType) => {
   navigator.clipboard.writeText(log.message);
 };