Filip/playwright
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

add yellow flash

Browse source
This commit is contained in:
Simon Knott 2025-01-16 13:33:59 +01:00
parent 269b0bb2e1
commit b19177383d
No known key found for this signature in database
GPG key ID: 8CEDC00028084AEC
3 changed files with 27 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
packages/html-reporter/src/links.tsx
View file

@ -74,6 +74,7 @@ export const AttachmentLink: React.FunctionComponent<{
openInNewTab?: boolean,
}> = ({ attachment, result, href, linkName, openInNewTab }) => {
const isAnchored = useIsAnchored('attachment-' + result.attachments.indexOf(attachment));
const searchParams = React.useContext(SearchParamsContext);
return <TreeItem title={<span>
{attachment.contentType === kMissingContentType ? icons.warning() : icons.attachment()}
{attachment.path && <a href={href || attachment.path} download={downloadFileNameForAttachment(attachment)}>{linkName || attachment.name}</a>}
@ -84,7 +85,7 @@ export const AttachmentLink: React.FunctionComponent<{
)}
</span>} loadChildren={attachment.body ? () => {
return [<div key={1} className='attachment-body'><CopyToClipboard value={attachment.body!}/>{linkifyText(attachment.body!)}</div>];
} : undefined} depth={0} style={{ lineHeight: '32px' }} selected={isAnchored}></TreeItem>;
} : undefined} depth={0} style={{ lineHeight: '32px' }} selected={isAnchored} flash={isAnchored ? searchParams : undefined}></TreeItem>;
};
export const SearchParamsContext = React.createContext<URLSearchParams>(new URLSearchParams(window.location.hash.slice(1)));

8
packages/html-reporter/src/treeItem.css
View file

@ -33,3 +33,11 @@
.tree-item-body {
min-height: 18px;
}
.yellow-flash {
animation: yellowflash-bg 2s;
}
@keyframes yellowflash-bg {
from { background: var(--color-attention-subtle); }
to { background: transparent; }
}

19
packages/html-reporter/src/treeItem.tsx
View file

@ -19,6 +19,19 @@ import './treeItem.css';
import * as icons from './icons';
import { clsx } from '@web/uiUtils';
// flash is retriggered whenever the value changes
function useFlash(flash: any | undefined) {
const [flashState, setFlashState] = React.useState(false);
React.useEffect(() => {
if (flash) {
setFlashState(true);
const timeout = setTimeout(() => setFlashState(false), 1000);
return () => clearTimeout(timeout);
}
}, [flash]);
return flashState;
}
export const TreeItem: React.FunctionComponent<{
title: JSX.Element,
loadChildren?: () => JSX.Element[],
@ -27,9 +40,11 @@ export const TreeItem: React.FunctionComponent<{
depth: number,
selected?: boolean,
style?: React.CSSProperties,
}> = ({ title, loadChildren, onClick, expandByDefault, depth, selected, style }) => {
flash?: any
}> = ({ title, loadChildren, onClick, expandByDefault, depth, selected, style, flash }) => {
const addFlashClass = useFlash(flash);
const [expanded, setExpanded] = React.useState(expandByDefault || false);
return <div className={'tree-item'} style={style}>
return <div className={clsx('tree-item', addFlashClass && 'yellow-flash')} style={style}>
<span className={clsx('tree-item-title', selected && 'selected')} style={{ whiteSpace: 'nowrap', paddingLeft: depth * 22 + 4 }} onClick={() => { onClick?.(); setExpanded(!expanded); }} >
{loadChildren && !!expanded && icons.downArrow()}
{loadChildren && !expanded && icons.rightArrow()}