agw/overleaf-cep
1
0
Fork 0
mirror of https://github.com/yu-i-i/overleaf-cep.git synced 2026-11-12 13:13:45 +01:00
Code Issues Packages Projects Releases Wiki Activity

Prevent focusing review panel entry on resolve/accept/reject (#23859)

Browse Source 
GitOrigin-RevId: 91d6725d1ea2a27f1ff93871db745440486b7246
This commit is contained in:
Domagoj Kriskovic
2025-02-26 09:04:16 +00:00
committed by Copybot
parent fe1beec09a
commit 598d51c9e7
5 changed files with 108 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files
services/web/frontend/js/features/review-panel-new/components/review-panel-change.tsx
+45 -40
View File
@@ -17,6 +17,7 @@ import { ReviewPanelEntry } from './review-panel-entry'
import { useModalsContext } from '@/features/ide-react/context/modals-context'
import { ExpandableContent } from './review-panel-expandable-content'
import { useUserContext } from '@/shared/context/user-context'
import { PreventSelectingEntry } from './review-panel-prevent-selecting'
export const ReviewPanelChange = memo<{
change: Change<EditOperation>
@@ -109,52 +110,56 @@ export const ReviewPanelChange = memo<{
{editable && (
<div className="review-panel-entry-actions">
{permissions.write && (
<OLTooltip
id="accept-change"
overlayProps={{ placement: 'bottom' }}
description={t('accept_change')}
tooltipProps={{ className: 'review-panel-tooltip' }}
>
<button
type="button"
className="btn"
onClick={acceptHandler}
tabIndex={0}
<PreventSelectingEntry>
<OLTooltip
id="accept-change"
overlayProps={{ placement: 'bottom' }}
description={t('accept_change')}
tooltipProps={{ className: 'review-panel-tooltip' }}
>
<MaterialIcon
type="check"
className="review-panel-entry-actions-icon"
accessibilityLabel={t('accept_change')}
/>
</button>
</OLTooltip>
<button
type="button"
className="btn"
onClick={acceptHandler}
tabIndex={0}
>
<MaterialIcon
type="check"
className="review-panel-entry-actions-icon"
accessibilityLabel={t('accept_change')}
/>
</button>
</OLTooltip>
</PreventSelectingEntry>
)}
{(permissions.write ||
(permissions.trackedWrite && isChangeAuthor)) && (
<OLTooltip
id="reject-change"
description={t('reject_change')}
overlayProps={{ placement: 'bottom' }}
tooltipProps={{ className: 'review-panel-tooltip' }}
>
<button
tabIndex={0}
type="button"
className="btn"
onClick={() =>
aggregate
? rejectChanges(change.id, aggregate.id)
: rejectChanges(change.id)
}
<PreventSelectingEntry>
<OLTooltip
id="reject-change"
description={t('reject_change')}
overlayProps={{ placement: 'bottom' }}
tooltipProps={{ className: 'review-panel-tooltip' }}
>
<MaterialIcon
className="review-panel-entry-actions-icon"
accessibilityLabel={t('reject_change')}
type="close"
/>
</button>
</OLTooltip>
<button
tabIndex={0}
type="button"
className="btn"
onClick={() =>
aggregate
? rejectChanges(change.id, aggregate.id)
: rejectChanges(change.id)
}
>
<MaterialIcon
className="review-panel-entry-actions-icon"
accessibilityLabel={t('reject_change')}
type="close"
/>
</button>
</OLTooltip>
</PreventSelectingEntry>
)}
</div>
)}
services/web/frontend/js/features/review-panel-new/components/review-panel-entry.tsx
+1 -13
View File
@@ -48,7 +48,7 @@ export const ReviewPanelEntry: FC<{
const [selected, setSelected] = useState(false)
const [focused, setFocused] = useState(false)
const [textareaFocused, setTextareaFocused] = useState(false)
const { setReviewPanelOpen, reviewPanelOpen } = useLayoutContext()
const { setReviewPanelOpen } = useLayoutContext()
const highlighted = isSelectionWithinOp(op, state.selection.main)
const entryRef = useRef<HTMLDivElement>(null)
const mousePressedRef = useRef(false)
@@ -61,17 +61,6 @@ export const ReviewPanelEntry: FC<{
event => {
setFocused(true)
if (
event.target instanceof HTMLButtonElement ||
event.target instanceof HTMLLinkElement ||
event.target instanceof HTMLAnchorElement ||
(event.target instanceof HTMLTextAreaElement && !reviewPanelOpen)
) {
// Ignore focus events on certain elements so as to not affect
// their behavior
return
}
if (event.target instanceof HTMLTextAreaElement) {
const entryBottom =
(entryRef.current?.offsetTop || 0) +
@@ -120,7 +109,6 @@ export const ReviewPanelEntry: FC<{
view,
position,
openDocWithId,
reviewPanelOpen,
]
)
services/web/frontend/js/features/review-panel-new/components/review-panel-expandable-content.tsx
+17 -14
View File
@@ -2,6 +2,7 @@ import { FC, useCallback, useRef, useState } from 'react'
import OLButton from '@/features/ui/components/ol/ol-button'
import { useTranslation } from 'react-i18next'
import classNames from 'classnames'
import { PreventSelectingEntry } from './review-panel-prevent-selecting'
export const ExpandableContent: FC<{
className?: string
@@ -58,25 +59,27 @@ export const ExpandableContent: FC<{
'review-panel-expandable-inline': inline,
})}
>
{isExpanded ? (
<OLButton
variant="link"
className="btn-inline-link"
onClick={handleShowLess}
>
{t('show_less')}
</OLButton>
) : (
isOverflowing && (
<PreventSelectingEntry>
{isExpanded ? (
<OLButton
variant="link"
className="btn-inline-link"
onClick={handleShowMore}
onClick={handleShowLess}
>
{t('show_more')}
{t('show_less')}
</OLButton>
)
)}
) : (
isOverflowing && (
<OLButton
variant="link"
className="btn-inline-link"
onClick={handleShowMore}
>
{t('show_more')}
</OLButton>
)
)}
</PreventSelectingEntry>
</div>
</>
)
services/web/frontend/js/features/review-panel-new/components/review-panel-message.tsx
+30 -25
View File
@@ -14,6 +14,7 @@ import ReviewPanelDeleteCommentModal from './review-panel-delete-comment-modal'
import { useUserContext } from '@/shared/context/user-context'
import ReviewPanelEntryUser from './review-panel-entry-user'
import { usePermissionsContext } from '@/features/ide-react/context/permissions-context'
import { PreventSelectingEntry } from './review-panel-prevent-selecting'
export const ReviewPanelMessage: FC<{
message: ReviewPanelCommentThreadMessage
@@ -72,35 +73,39 @@ export const ReviewPanelMessage: FC<{
<div className="review-panel-entry-actions">
{!editing && !isReply && !isThreadResolved && canResolve && (
<OLTooltip
id="resolve-thread"
overlayProps={{ placement: 'bottom' }}
description={t('resolve_comment')}
tooltipProps={{ className: 'review-panel-tooltip' }}
>
<button
type="button"
tabIndex={0}
className="btn"
onClick={onResolve}
<PreventSelectingEntry>
<OLTooltip
id="resolve-thread"
overlayProps={{ placement: 'bottom' }}
description={t('resolve_comment')}
tooltipProps={{ className: 'review-panel-tooltip' }}
>
<MaterialIcon
type="check"
className="review-panel-entry-actions-icon"
accessibilityLabel={t('resolve_comment')}
/>
</button>
</OLTooltip>
<button
type="button"
tabIndex={0}
className="btn"
onClick={onResolve}
>
<MaterialIcon
type="check"
className="review-panel-entry-actions-icon"
accessibilityLabel={t('resolve_comment')}
/>
</button>
</OLTooltip>
</PreventSelectingEntry>
)}
{!editing && !isThreadResolved && (
<ReviewPanelCommentOptions
canDelete={canDelete}
canEdit={canEdit}
onEdit={handleEditOption}
onDelete={showDeleteModal}
id={message.id}
/>
<PreventSelectingEntry>
<ReviewPanelCommentOptions
canDelete={canDelete}
canEdit={canEdit}
onEdit={handleEditOption}
onDelete={showDeleteModal}
id={message.id}
/>
</PreventSelectingEntry>
)}
</div>
</div>
services/web/frontend/js/features/review-panel-new/components/review-panel-prevent-selecting.tsx
+15
View File
@@ -0,0 +1,15 @@
const stopPropagation = (e: React.FocusEvent | React.MouseEvent) =>
e.stopPropagation()
export const PreventSelectingEntry = ({
children,
}: {
children: React.ReactNode
}) => {
return (
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
<div onFocus={stopPropagation} onMouseUp={stopPropagation}>
{children}
</div>
)
}