From 28b0dd34cba0c878301230750f8441801fcebb8a Mon Sep 17 00:00:00 2001 From: Tim Down Date: Fri, 10 Jun 2022 10:46:19 +0100 Subject: [PATCH] Fix layout shift by nearly always applying overflow-y hidden on review panel (#8174) * Always hide vertical overflow on the review panel, not just when it's expanded, which prevents it scrolling slightly when scrolling the PDF in some circumstances * Fix layout shift by always applying overflow-y hidden on review panel and make entry visible in minimized review panel by making the overflow visible while hovering over the entry GitOrigin-RevId: 854ee47a762ee2cf78fbbb5856afddb3b723d679 --- .../app/views/project/editor/review-panel.pug | 22 ++++++++++++++++--- .../controllers/ReviewPanelController.js | 13 +++++++++++ .../directives/aggregateChangeEntry.js | 2 ++ .../review-panel/directives/changeEntry.js | 2 ++ .../review-panel/directives/commentEntry.js | 2 ++ .../stylesheets/app/editor/review-panel.less | 9 ++++---- 6 files changed, 43 insertions(+), 7 deletions(-) diff --git a/services/web/app/views/project/editor/review-panel.pug b/services/web/app/views/project/editor/review-panel.pug index d0fdafe569..7ad226593f 100644 --- a/services/web/app/views/project/editor/review-panel.pug +++ b/services/web/app/views/project/editor/review-panel.pug @@ -1,4 +1,6 @@ -#review-panel +#review-panel( + ng-class="{ 'rp-collapsed-displaying-entry': reviewPanel.entryHover }" +) .rp-in-editor-widgets a.rp-track-changes-indicator( href @@ -125,6 +127,8 @@ on-reject="rejectChanges(entry.entry_ids);" on-accept="acceptChanges(entry.entry_ids);" on-indicator-click="toggleReviewPanel();" + on-mouse-enter="mouseEnterIndicator()" + on-mouse-leave="mouseLeaveIndicator()" on-body-click="gotoEntry(editor.open_doc_id, entry)" permissions="permissions" ) @@ -136,6 +140,8 @@ on-reject="rejectChanges(entry.entry_ids);" on-accept="acceptChanges(entry.entry_ids);" on-indicator-click="toggleReviewPanel();" + on-mouse-enter="mouseEnterIndicator()" + on-mouse-leave="mouseLeaveIndicator()" on-body-click="gotoEntry(editor.open_doc_id, entry)" permissions="permissions" ) @@ -147,6 +153,8 @@ on-resolve="resolveComment(entry, entry_id)" on-reply="submitReply(entry, entry_id);" on-indicator-click="toggleReviewPanel();" + on-mouse-enter="mouseEnterIndicator()" + on-mouse-leave="mouseLeaveIndicator()" on-save-edit="saveEdit(entry.thread_id, comment)" on-delete="deleteComment(entry.thread_id, comment)" on-body-click="gotoEntry(editor.open_doc_id, entry)" @@ -248,7 +256,10 @@ script(type='text/ng-template', id='changeEntryTemplate') - div + div( + ng-mouseenter="onMouseEnter();" + ng-mouseleave="onMouseLeave();" + ) .rp-entry-callout( ng-class="'rp-entry-callout-' + entry.type" ) @@ -296,7 +307,10 @@ script(type='text/ng-template', id='changeEntryTemplate') |  #{translate("accept")} script(type='text/ng-template', id='aggregateChangeEntryTemplate') - div + div( + ng-mouseenter="onMouseEnter();" + ng-mouseleave="onMouseLeave();" + ) .rp-entry-callout.rp-entry-callout-aggregate .rp-entry-indicator( ng-class="{ 'rp-entry-indicator-focused': entry.focused }" @@ -343,6 +357,8 @@ script(type='text/ng-template', id='aggregateChangeEntryTemplate') script(type='text/ng-template', id='commentEntryTemplate') .rp-comment-wrapper( ng-class="{ 'rp-comment-wrapper-resolving': state.animating }" + ng-mouseenter="onMouseEnter();" + ng-mouseleave="onMouseLeave();" ) .rp-entry-callout.rp-entry-callout-comment .rp-entry-indicator( diff --git a/services/web/frontend/js/ide/review-panel/controllers/ReviewPanelController.js b/services/web/frontend/js/ide/review-panel/controllers/ReviewPanelController.js index 0743e72898..37145cbab8 100644 --- a/services/web/frontend/js/ide/review-panel/controllers/ReviewPanelController.js +++ b/services/web/frontend/js/ide/review-panel/controllers/ReviewPanelController.js @@ -103,6 +103,7 @@ export default App.controller( // A count of user-facing selected changes. An aggregated change (insertion + deletion) will count // as only one. nVisibleSelectedChanges: 0, + entryHover: false, } window.addEventListener('beforeunload', function () { @@ -642,6 +643,18 @@ export default App.controller( }) } + // The next two functions control a class on the review panel that affects + // the overflow-y rule on the panel. This is necessary so that an entry in + // the review panel is visible when hovering over its indicator when the + // review panel is minimized. See issue #8057. + $scope.mouseEnterIndicator = function () { + $scope.reviewPanel.entryHover = true + } + + $scope.mouseLeaveIndicator = function () { + $scope.reviewPanel.entryHover = false + } + function _doAcceptChanges(change_ids) { $http.post( `/project/${$scope.project_id}/doc/${$scope.editor.open_doc_id}/changes/accept`, diff --git a/services/web/frontend/js/ide/review-panel/directives/aggregateChangeEntry.js b/services/web/frontend/js/ide/review-panel/directives/aggregateChangeEntry.js index 354f3b2491..4fd844ff3b 100644 --- a/services/web/frontend/js/ide/review-panel/directives/aggregateChangeEntry.js +++ b/services/web/frontend/js/ide/review-panel/directives/aggregateChangeEntry.js @@ -21,6 +21,8 @@ export default App.directive('aggregateChangeEntry', $timeout => ({ onAccept: '&', onReject: '&', onIndicatorClick: '&', + onMouseEnter: '&', + onMouseLeave: '&', onBodyClick: '&', }, link(scope, element, attrs) { diff --git a/services/web/frontend/js/ide/review-panel/directives/changeEntry.js b/services/web/frontend/js/ide/review-panel/directives/changeEntry.js index fe8dc799d2..42054a1021 100644 --- a/services/web/frontend/js/ide/review-panel/directives/changeEntry.js +++ b/services/web/frontend/js/ide/review-panel/directives/changeEntry.js @@ -21,6 +21,8 @@ export default App.directive('changeEntry', $timeout => ({ onAccept: '&', onReject: '&', onIndicatorClick: '&', + onMouseEnter: '&', + onMouseLeave: '&', onBodyClick: '&', }, link(scope, element, attrs) { diff --git a/services/web/frontend/js/ide/review-panel/directives/commentEntry.js b/services/web/frontend/js/ide/review-panel/directives/commentEntry.js index f603afd4df..e05f9e8050 100644 --- a/services/web/frontend/js/ide/review-panel/directives/commentEntry.js +++ b/services/web/frontend/js/ide/review-panel/directives/commentEntry.js @@ -21,6 +21,8 @@ export default App.directive('commentEntry', $timeout => ({ onResolve: '&', onReply: '&', onIndicatorClick: '&', + onMouseEnter: '&', + onMouseLeave: '&', onSaveEdit: '&', onDelete: '&', onBodyClick: '&', diff --git a/services/web/frontend/stylesheets/app/editor/review-panel.less b/services/web/frontend/stylesheets/app/editor/review-panel.less index 41eb763e53..a561905ffc 100644 --- a/services/web/frontend/stylesheets/app/editor/review-panel.less +++ b/services/web/frontend/stylesheets/app/editor/review-panel.less @@ -188,10 +188,6 @@ display: block; } - .rp-size-expanded & { - overflow-y: hidden; - } - .rp-unsupported & { display: none; } @@ -201,6 +197,11 @@ 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 & {