use conditional class

This commit is contained in:
Simon Knott 2024-10-24 14:30:36 +02:00
parent fef30043f0
commit 2f75cda984
No known key found for this signature in database
GPG key ID: 8CEDC00028084AEC
2 changed files with 7 additions and 1 deletions

View file

@ -40,6 +40,11 @@
margin: 4px 8px; margin: 4px 8px;
} }
.attachment-title-highlight {
text-decoration: underline var(--vscode-terminal-findMatchBackground);
text-decoration-thickness: 1.5px;
}
.attachment-item img { .attachment-item img {
flex: none; flex: none;
min-width: 200px; min-width: 200px;

View file

@ -24,6 +24,7 @@ import { CodeMirrorWrapper, lineHeight } from '@web/components/codeMirrorWrapper
import { isTextualMimeType } from '@isomorphic/mimeType'; import { isTextualMimeType } from '@isomorphic/mimeType';
import { Expandable } from '@web/components/expandable'; import { Expandable } from '@web/components/expandable';
import { linkifyText } from '@web/renderUtils'; import { linkifyText } from '@web/renderUtils';
import { clsx } from '@web/uiUtils';
type Attachment = AfterActionTraceEventAttachment & { traceUrl: string }; type Attachment = AfterActionTraceEventAttachment & { traceUrl: string };
@ -64,7 +65,7 @@ const ExpandableAttachment: React.FunctionComponent<ExpandableAttachmentProps> =
}, [attachmentText]); }, [attachmentText]);
const title = <span style={{ marginLeft: 5 }} ref={ref} aria-label={attachment.name}> const title = <span style={{ marginLeft: 5 }} ref={ref} aria-label={attachment.name}>
<span style={highlight ? { textDecoration: 'underline var(--vscode-terminal-findMatchBackground)', textDecorationThickness: 1.5 } : {}}>{linkifyText(attachment.name)}</span> <span className={clsx(highlight && 'attachment-title-highlight')}>{linkifyText(attachment.name)}</span>
{hasContent && <a style={{ marginLeft: 5 }} href={downloadURL(attachment)}>download</a>} {hasContent && <a style={{ marginLeft: 5 }} href={downloadURL(attachment)}>download</a>}
</span>; </span>;