diff options
| author | Giteabot <teabot@gitea.io> | 2023-03-17 22:59:18 -0400 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2023-03-17 22:59:18 -0400 |
| commit | 22911a1ece5bd08648e10b7ffcb3308d204180ee (patch) | |
| tree | 9bfaf0819c5d139808ae0c8ab7f782c13dd19ba0 | |
| parent | 4b763d8d37628f49c610760fd694540cab3b2ceb (diff) | |
| download | gitea-22911a1ece5bd08648e10b7ffcb3308d204180ee.tar.gz gitea-22911a1ece5bd08648e10b7ffcb3308d204180ee.zip | |
Imrove scroll behavior to hash issuecomment(scroll position, auto expand if file is folded, and on refreshing) (#23513) (#23540)
Backport #23513 by @HesterG
Close #23466
Right now on pull request "files Changed" tab, if a file is viewed, when
the comments' links are visited, the comment will not be shown as the
file is folded after viewed. This PR is to improve the behavior, to make
the comment seen even the related file is folded, like on github.
And right now scroll position will be remembered and hence it won’t
scroll to hashed comment after refreshing, this PR also adjust the
scroll position remembering behavior: When there is hash comment in url,
do not remember the scroll position.
Before:
https://user-images.githubusercontent.com/17645053/225512079-6cf79581-9346-44cf-95d6-06919642e6a8.mov
After:
https://user-images.githubusercontent.com/17645053/225523753-3f6728f2-977b-4ed0-a65c-63dcef2ace80.mov
Update - long comment's behavior after using `scrollTop ` (Comment div
scroll to the position which is 30px below the diff header, or 30px
below top on conversation tab):
https://user-images.githubusercontent.com/17645053/225614460-0602c1a6-229c-41f4-84d2-334e78251486.mov
Co-authored-by: Hester Gong <hestergong@gmail.com>
| -rw-r--r-- | web_src/js/features/repo-issue.js | 22 |
1 files changed, 21 insertions, 1 deletions
diff --git a/web_src/js/features/repo-issue.js b/web_src/js/features/repo-issue.js index 2b283b3c24..a110b82c5c 100644 --- a/web_src/js/features/repo-issue.js +++ b/web_src/js/features/repo-issue.js @@ -6,6 +6,7 @@ import {initEasyMDEImagePaste} from './comp/ImagePaste.js'; import {initCompMarkupContentPreviewTab} from './comp/MarkupContentPreview.js'; import {initTooltip, showTemporaryTooltip, createTippy} from '../modules/tippy.js'; import {hideElem, showElem, toggleElem} from '../utils/dom.js'; +import {setFileFolding} from './file-fold.js'; const {appSubUrl, csrfToken} = window.config; @@ -436,17 +437,36 @@ export async function handleReply($el) { export function initRepoPullRequestReview() { if (window.location.hash && window.location.hash.startsWith('#issuecomment-')) { + // set scrollRestoration to 'manual' when there is a hash in url, so that the scroll position will not be remembered after refreshing + if (window.history.scrollRestoration !== 'manual') { + window.history.scrollRestoration = 'manual'; + } const commentDiv = $(window.location.hash); if (commentDiv) { // get the name of the parent id const groupID = commentDiv.closest('div[id^="code-comments-"]').attr('id'); if (groupID && groupID.startsWith('code-comments-')) { const id = groupID.slice(14); + const ancestorDiffBox = commentDiv.closest('.diff-file-box'); + // on pages like conversation, there is no diff header + const diffHeader = ancestorDiffBox.find('.diff-file-header'); + // offset is for scrolling + let offset = 30; + if (diffHeader[0]) { + offset += $('.diff-detail-box').outerHeight() + diffHeader.outerHeight(); + } $(`#show-outdated-${id}`).addClass('gt-hidden'); $(`#code-comments-${id}`).removeClass('gt-hidden'); $(`#code-preview-${id}`).removeClass('gt-hidden'); $(`#hide-outdated-${id}`).removeClass('gt-hidden'); - commentDiv[0].scrollIntoView(); + // if the comment box is folded, expand it + if (ancestorDiffBox.attr('data-folded') && ancestorDiffBox.attr('data-folded') === 'true') { + setFileFolding(ancestorDiffBox[0], ancestorDiffBox.find('.fold-file')[0], false); + } + window.scrollTo({ + top: commentDiv.offset().top - offset, + behavior: 'instant' + }); } } } |