Merge pull request #21014 from overleaf/dk-review-panel-tc-widget

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

GitOrigin-RevId: a165201f611860ba531f2eeb3d89f83a695cd017

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

@@ -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

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

@@ -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

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

@@ -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;
+  }
+}

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

@@ -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;
+  }
+}