open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix highlight & scroll to comment

Browse Source
This commit is contained in:
James Grugett 2022-10-07 14:40:38 -05:00
parent f0b35993c9
commit b57ff68654
1 changed files with 10 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
web/components/feed/feed-comments.tsx
View File

@ -109,12 +109,18 @@ export const FeedComment = memo(function FeedComment(props: {
}
const totalAwarded = bountiesAwarded ?? 0
const router = useRouter()
const highlighted = router.asPath.endsWith(`#${comment.id}`)
const { isReady, asPath } = useRouter()
const [highlighted, setHighlighted] = useState(false)
const commentRef = useRef<HTMLDivElement>(null)
useEffect(() => {
if (highlighted && commentRef.current != null) {
if (isReady && asPath.endsWith(`#${comment.id}`)) {
setHighlighted(true)
}
}, [isReady, asPath, comment.id])
useEffect(() => {
if (highlighted && commentRef.current) {
commentRef.current.scrollIntoView(true)
}
}, [highlighted])
@ -126,7 +132,7 @@ export const FeedComment = memo(function FeedComment(props: {
className={clsx(
'relative',
indent ? 'ml-6' : '',
highlighted ? `-m-1.5 rounded bg-indigo-500/[0.2] p-1.5` : ''
highlighted ? `-m-1.5 rounded bg-indigo-500/[0.2] px-2 py-4` : ''
)}
>
{/*draw a gray line from the comment to the left:*/}