github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-21 20:47:08 -05:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #20586 from overleaf/dp-resoled-comments-tooltip

Browse source 
Add tooltips for resolved comments toggle and reopen/delete thread buttons

GitOrigin-RevId: 6e043d0ca83418f4362ec1b49994c4ceed24742b
This commit is contained in:
David 2024-09-26 15:13:20 +01:00 committed by Copybot
parent cfd0b39b96
commit 2a051700b5
2 changed files with 35 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
services/web/frontend/js/features/review-panel-new/components/review-panel-resolved-thread.tsx
View file

@ -7,6 +7,7 @@ import MaterialIcon from '@/shared/components/material-icon'
import { ExpandableContent } from './review-panel-expandable-content'
import { ReviewPanelCommentContent } from './review-panel-comment-content'
import { Change, CommentOperation } from '../../../../../types/change'
import Tooltip from '@/shared/components/tooltip'
export const ReviewPanelResolvedThread: FC<{
id: string
@ -32,12 +33,25 @@ export const ReviewPanelResolvedThread: FC<{
/>
</div>
<div className="review-panel-resolved-comment-buttons">
<Button onClick={() => reopenThread(id as ThreadId)}>
<MaterialIcon type="refresh" accessibilityLabel={t('reopen')} />
</Button>
<Button onClick={() => deleteThread(id as ThreadId)}>
<MaterialIcon type="delete" accessibilityLabel={t('delete')} />
</Button>
<Tooltip
id="reopen-thread"
overlayProps={{ placement: 'bottom' }}
description={t('reopen')}
>
<Button onClick={() => reopenThread(id as ThreadId)}>
<MaterialIcon type="refresh" accessibilityLabel={t('reopen')} />
</Button>
</Tooltip>
<Tooltip
id="delete-thread"
overlayProps={{ placement: 'bottom' }}
description={t('delete')}
>
<Button onClick={() => deleteThread(id as ThreadId)}>
<MaterialIcon type="delete" accessibilityLabel={t('delete')} />
</Button>
</Tooltip>
</div>
</div>
<div className="review-panel-resolved-comment-quoted-text">

21
services/web/frontend/js/features/review-panel-new/components/review-panel-resolved-threads-button.tsx
View file

@ -2,20 +2,29 @@ import React, { FC, useRef, useState } from 'react'
import Icon from '@/shared/components/icon'
import { ReviewPanelResolvedThreadsMenu } from './review-panel-resolved-threads-menu'
import { Overlay, Popover } from 'react-bootstrap'
import Tooltip from '@/shared/components/tooltip'
import { useTranslation } from 'react-i18next'
export const ReviewPanelResolvedThreadsButton: FC = () => {
const [expanded, setExpanded] = useState(false)
const buttonRef = useRef<HTMLButtonElement>(null)
const { t } = useTranslation()
return (
<>
<button
className="resolved-comments-toggle"
ref={buttonRef}
onClick={() => setExpanded(true)}
<Tooltip
id="resolved-comments"
overlayProps={{ placement: 'bottom' }}
description={t('resolved_comments')}
>
<Icon type="inbox" fw />
</button>
<button
className="resolved-comments-toggle"
ref={buttonRef}
onClick={() => setExpanded(true)}
>
<Icon type="inbox" fw />
</button>
</Tooltip>
{expanded && (
<Overlay
show