diff --git a/services/web/frontend/js/features/review-panel-new/components/review-panel-container.tsx b/services/web/frontend/js/features/review-panel-new/components/review-panel-container.tsx index ade154b061..c24de044a2 100644 --- a/services/web/frontend/js/features/review-panel-new/components/review-panel-container.tsx +++ b/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(, view.scrollDOM) + return ReactDOM.createPortal( + <> + {wantTrackChanges && } + + , + view.scrollDOM + ) } return null diff --git a/services/web/frontend/js/features/review-panel-new/components/track-changes-on-widget.tsx b/services/web/frontend/js/features/review-panel-new/components/track-changes-on-widget.tsx new file mode 100644 index 0000000000..63ee10060f --- /dev/null +++ b/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 ( +
+
+ +
+
+ ) +} + +export default TrackChangesOnWidget diff --git a/services/web/frontend/stylesheets/app/editor/review-panel-new.less b/services/web/frontend/stylesheets/app/editor/review-panel-new.less index ac329f176c..b3a3578b4d 100644 --- a/services/web/frontend/stylesheets/app/editor/review-panel-new.less +++ b/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; + } +} diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/review-panel-new.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/review-panel-new.scss index 31bf1b4954..d48ad9a3ac 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/review-panel-new.scss +++ b/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; + } +}