use conditional class
This commit is contained in:
parent
fef30043f0
commit
2f75cda984
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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>;
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue