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 #21014 from overleaf/dk-review-panel-tc-widget

Browse source 
Add "Track changes is On" button when review panel is closed

GitOrigin-RevId: a165201f611860ba531f2eeb3d89f83a695cd017
This commit is contained in:
David 2024-10-21 10:06:30 +01:00 committed by Copybot
parent 64460681b8
commit c7eafd69c2
4 changed files with 145 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
services/web/frontend/js/features/review-panel-new/components/review-panel-container.tsx
View file

@ -6,12 +6,15 @@ import { useLayoutContext } from '@/shared/context/layout-context'
import { useRangesContext } from '../context/ranges-context'
import { useThreadsContext } from '@/features/review-panel-new/context/threads-context'
import { hasActiveRange } from '@/features/review-panel-new/utils/has-active-range'
import TrackChangesOnWidget from './track-changes-on-widget'
import { useEditorManagerContext } from '@/features/ide-react/context/editor-manager-context'
function ReviewPanelContainer() {
const view = useCodeMirrorViewContext()
const ranges = useRangesContext()
const threads = useThreadsContext()
const { reviewPanelOpen } = useLayoutContext()
const { wantTrackChanges } = useEditorManagerContext()
if (!view) {
return null
@ -24,7 +27,13 @@ function ReviewPanelContainer() {
// the mini review panel
if (hasActiveRange(ranges, threads)) {
return ReactDOM.createPortal(<ReviewPanel mini />, view.scrollDOM)
return ReactDOM.createPortal(
<>
{wantTrackChanges && <TrackChangesOnWidget />}
<ReviewPanel mini />
</>,
view.scrollDOM
)
}
return null

36
services/web/frontend/js/features/review-panel-new/components/track-changes-on-widget.tsx Normal file
View file

@ -0,0 +1,36 @@
import { Trans } from 'react-i18next'
import { EditorView } from '@codemirror/view'
import classnames from 'classnames'
import { useCodeMirrorStateContext } from '@/features/source-editor/components/codemirror-context'
import { useLayoutContext } from '@/shared/context/layout-context'
import { useCallback } from 'react'
function TrackChangesOnWidget() {
const { setReviewPanelOpen } = useLayoutContext()
const state = useCodeMirrorStateContext()
const darkTheme = state.facet(EditorView.darkTheme)
const openReviewPanel = useCallback(() => {
setReviewPanelOpen(true)
}, [setReviewPanelOpen])
return (
<div className="review-panel-in-editor-widgets">
<div className="review-panel-in-editor-widgets-inner">
<button
className={classnames('review-panel-track-changes-indicator', {
'review-panel-track-changes-indicator-on-dark': darkTheme,
})}
onClick={openReviewPanel}
>
<Trans
i18nKey="track_changes_is_on"
components={{ strong: <strong /> }}
/>
</button>
</div>
</div>
)
}
export default TrackChangesOnWidget

49
services/web/frontend/stylesheets/app/editor/review-panel-new.less
View file

@ -642,3 +642,52 @@
.review-panel-tooltip {
pointer-events: none; // this is to prevent mouseLeave event from firing when hovering over the tooltip
}
.review-panel-in-editor-widgets {
position: sticky;
top: 0;
right: 0;
font-size: 11px;
z-index: 2;
font-family: @font-family-sans-serif;
.review-panel-in-editor-widgets-inner {
position: absolute;
top: 0;
right: 0;
display: flex;
flex-direction: column;
}
.review-panel-track-changes-indicator {
border: 0;
}
}
.review-panel-track-changes-indicator {
display: block;
padding: 5px 10px;
background-color: rgba(240, 240, 240, 0.9);
color: @rp-type-blue;
text-align: center;
border-bottom-left-radius: 3px;
white-space: nowrap;
&.review-panel-track-changes-indicator-on-dark {
background-color: rgba(88, 88, 88, 0.8);
color: #fff;
&:hover,
&:focus {
background-color: rgba(88, 88, 88, 1);
color: #fff;
}
}
&:hover,
&:focus {
outline: 0;
text-decoration: none;
background-color: rgba(240, 240, 240, 1);
color: @rp-type-blue;
}
}

50
services/web/frontend/stylesheets/bootstrap-5/pages/editor/review-panel-new.scss
View file

@ -646,3 +646,53 @@
.review-panel-tooltip {
pointer-events: none; // this is to prevent mouseLeave event from firing when hovering over the tooltip
}
.review-panel-in-editor-widgets {
position: sticky;
top: 0;
right: 0;
font-size: 11px;
z-index: 2;
font-family: $font-family-base;
.review-panel-in-editor-widgets-inner {
position: absolute;
top: 0;
right: 0;
display: flex;
flex-direction: column;
}
.review-panel-track-changes-indicator {
border: 0;
}
}
.review-panel-track-changes-indicator {
display: block;
padding: 5px 10px;
background-color: rgb(240 240 240 / 90%);
color: $rp-type-blue;
text-align: center;
border-bottom-left-radius: 3px;
white-space: nowrap;
&.review-panel-track-changes-indicator-on-dark {
background-color: rgb(88 88 88 / 80%);
color: #fff;
&:hover,
&:focus {
background-color: rgb(88 88 88 / 100%);
color: #fff;
}
}
&:hover,
&:focus {
outline: 0;
text-decoration: none;
background-color: rgb(240 240 240 / 100%);
color: $rp-type-blue;
}
}