Merge pull request #16162 from overleaf/ii-ide-page-prototype-review-panel-issues-1

[web] Review panel editor widgets fix

GitOrigin-RevId: a762ce3983fd7a3a99b8be5647baea4f8a0bb76c

services/web/frontend/js/features/source-editor/components/review-panel/editor-widgets/editor-widgets.tsx

@@ -15,6 +15,8 @@ import getMeta from '../../../../../utils/meta'
 import useScopeValue from '../../../../../shared/hooks/use-scope-value'
 import useScopeEventListener from '@/shared/hooks/use-scope-event-listener'
 import { memo, useCallback } from 'react'
+import { useLayoutContext } from '@/shared/context/layout-context'
+import classnames from 'classnames'
 
 function EditorWidgets() {
   const { t } = useTranslation()
@@ -35,6 +37,7 @@ function EditorWidgets() {
       'addNewComment'
     )
   const view = useCodeMirrorViewContext()
+  const { reviewPanelOpen } = useLayoutContext()
 
   const {
     entries,
@@ -75,7 +78,13 @@ function EditorWidgets() {
 
   return ReactDOM.createPortal(
     <>
-      <div className="rp-in-editor-widgets react-rp-in-editor-widgets">
+      <div
+        className={classnames(
+          'rp-in-editor-widgets',
+          'react-rp-in-editor-widgets',
+          { hidden: reviewPanelOpen }
+        )}
+      >
         <div className="rp-in-editor-widgets-inner">
           {wantTrackChanges && <ToggleWidget />}
           {nChanges > 1 && (

services/web/frontend/js/features/source-editor/components/review-panel/review-panel.tsx

@@ -33,11 +33,10 @@ function ReviewPanelView({ parentDomNode }: ReviewPanelViewProps) {
     </>
   )
 
-  // TODO fix DOM structure
   return ReactDOM.createPortal(
     isReactIde ? (
       <div
-        className={classnames('review-panel', {
+        className={classnames('review-panel-wrapper', {
           'rp-state-current-file': subView === 'cur_file',
           'rp-state-current-file-expanded':
             subView === 'cur_file' && reviewPanelOpen,

services/web/frontend/stylesheets/app/editor/ide-react.less

@@ -13,13 +13,12 @@
     height: 100%;
   }
 
-  .review-panel {
-    height: 100%;
-  }
-
-  .rp-state-overview {
-    position: sticky;
-    top: 0;
+  .review-panel-wrapper {
+    &.rp-state-overview {
+      position: sticky;
+      top: 0;
+      height: 100%;
+    }
   }
 }
 

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

@@ -108,10 +108,6 @@
     padding: 0 5px;
   }
 
-  .rp-unsupported & {
-    display: none;
-  }
-
   position: relative;
   border-bottom: 1px solid @rp-border-grey;
   background-color: @rp-bg-dim-blue;
@@ -199,22 +195,6 @@
     display: block;
   }
 
-  .rp-unsupported & {
-    display: none;
-  }
-
-  .rp-state-current-file & {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    padding-bottom: 52px;
-    overflow-y: hidden;
-  }
-
-  .rp-state-current-file.rp-size-mini .rp-collapsed-displaying-entry & {
-    overflow-y: visible;
-  }
-
   .rp-state-overview & {
     flex-grow: 2;
     overflow-y: auto;
@@ -795,10 +775,6 @@
     display: flex;
   }
 
-  .rp-unsupported & {
-    display: none;
-  }
-
   .rp-state-current-file & {
     position: absolute;
     bottom: 0;
@@ -839,14 +815,6 @@
 #editor {
   .rp-size-mini & {
     right: @review-off-width;
-
-    .ace-editor-body {
-      overflow: visible;
-
-      .ace_scrollbar-v {
-        right: -@review-off-width;
-      }
-    }
   }
 
   .rp-size-expanded & {
@@ -854,109 +822,12 @@
     left: 0px;
     width: auto;
   }
-
-  .rp-state-current-file-expanded & {
-    .ace-editor-body {
-      overflow: visible;
-
-      .ace_scrollbar-v {
-        right: -@review-panel-width;
-      }
-    }
-  }
 }
 
 #editor.review-panel-react {
   right: 0;
 }
 
-.rp-unsupported-msg-wrapper {
-  display: none;
-
-  .rp-size-expanded.rp-unsupported & {
-    display: block;
-  }
-
-  height: 100%;
-
-  .rp-unsupported-msg {
-    display: flex;
-    width: @review-panel-width - 70px;
-    height: 100%;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    margin: 0 auto;
-    text-align: center;
-
-    .rp-unsupported-msg-title {
-      font-size: 1.3em;
-      margin-top: 13px;
-    }
-  }
-}
-
-.ace-editor-wrapper {
-  .track-changes-marker-callout {
-    border-radius: 0;
-    position: absolute;
-
-    .rp-state-overview &,
-    .rp-loading-threads & {
-      display: none;
-    }
-  }
-
-  .track-changes-added-marker-callout {
-    border-bottom: 1px dashed @rp-green;
-    z-index: 1;
-  }
-
-  .track-changes-comment-marker-callout {
-    border-bottom: 1px dashed @rp-yellow;
-  }
-
-  .track-changes-deleted-marker-callout {
-    border-bottom: 1px dashed @rp-red;
-  }
-
-  .track-changes-marker {
-    border-radius: 0;
-    position: absolute;
-
-    .rp-loading-threads & {
-      display: none;
-    }
-
-    z-index: 6; // Appear above text selection
-  }
-
-  .track-changes-comment-marker {
-    background-color: @rp-yellow;
-    opacity: 0.3;
-  }
-
-  .track-changes-added-marker {
-    background-color: @rp-green;
-    opacity: 0.3;
-  }
-
-  .track-changes-deleted-marker {
-    border-left: 2px dotted @rp-red;
-    margin-left: -1px;
-  }
-
-  .ace_dark {
-    .track-changes-comment-marker {
-      background-color: @rp-yellow-on-dark;
-    }
-
-    .track-changes-added-marker {
-      background-color: @rp-green-on-dark;
-    }
-  }
-}
-
 .cm-editor-wrapper {
   @rp-yellow-for-cm: fade(
     @rp-yellow,
@@ -1115,15 +986,6 @@ button when (@is-overleaf-light = true) {
   .rp-offset-widgets & {
     top: 32px;
   }
-
-  .rp-size-mini & {
-    right: @review-off-width;
-  }
-
-  .rp-size-expanded &,
-  .rp-unsupported & {
-    display: none;
-  }
 }
 
 .rp-track-changes-indicator {
@@ -1167,15 +1029,6 @@ button when (@is-overleaf-light = true) {
   background-color: transparent;
   transition: background 0.1s;
 
-  .rp-size-mini &,
-  .rp-size-expanded & {
-    display: block;
-  }
-
-  .rp-unsupported & {
-    display: none;
-  }
-
   .rp-size-expanded & {
     &::after {
       content: '\f105';