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 { ExpandableContent } from './review-panel-expandable-content'
import { ReviewPanelCommentContent } from './review-panel-comment-content' import { ReviewPanelCommentContent } from './review-panel-comment-content'
import { Change, CommentOperation } from '../../../../../types/change' import { Change, CommentOperation } from '../../../../../types/change'
import Tooltip from '@/shared/components/tooltip'
export const ReviewPanelResolvedThread: FC<{ export const ReviewPanelResolvedThread: FC<{
id: string id: string
@ -32,12 +33,25 @@ export const ReviewPanelResolvedThread: FC<{
/> />
</div> </div>
<div className="review-panel-resolved-comment-buttons"> <div className="review-panel-resolved-comment-buttons">
<Button onClick={() => reopenThread(id as ThreadId)}> <Tooltip
<MaterialIcon type="refresh" accessibilityLabel={t('reopen')} /> id="reopen-thread"
</Button> overlayProps={{ placement: 'bottom' }}
<Button onClick={() => deleteThread(id as ThreadId)}> description={t('reopen')}
<MaterialIcon type="delete" accessibilityLabel={t('delete')} /> >
</Button> <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> </div>
<div className="review-panel-resolved-comment-quoted-text"> <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 Icon from '@/shared/components/icon'
import { ReviewPanelResolvedThreadsMenu } from './review-panel-resolved-threads-menu' import { ReviewPanelResolvedThreadsMenu } from './review-panel-resolved-threads-menu'
import { Overlay, Popover } from 'react-bootstrap' import { Overlay, Popover } from 'react-bootstrap'
import Tooltip from '@/shared/components/tooltip'
import { useTranslation } from 'react-i18next'
export const ReviewPanelResolvedThreadsButton: FC = () => { export const ReviewPanelResolvedThreadsButton: FC = () => {
const [expanded, setExpanded] = useState(false) const [expanded, setExpanded] = useState(false)
const buttonRef = useRef<HTMLButtonElement>(null) const buttonRef = useRef<HTMLButtonElement>(null)
const { t } = useTranslation()
return ( return (
<> <>
<button <Tooltip
className="resolved-comments-toggle" id="resolved-comments"
ref={buttonRef} overlayProps={{ placement: 'bottom' }}
onClick={() => setExpanded(true)} 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 && ( {expanded && (
<Overlay <Overlay
show show