Expand/Collapse all changed files (#23639)

close #23628 

Now in `...` dropdown, you can expand or collapse all diff files that
have loaded.

https://user-images.githubusercontent.com/33891828/227749688-2d406916-3347-49f6-93a5-4092a00e8809.mov

Co-authored-by: silverwind <me@silverwind.io>
This commit is contained in:
sillyguodong 2023-04-09 21:11:02 +08:00 committed by GitHub
parent f2b98d8259
commit bedad23f9e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 45 additions and 19 deletions

View File

@ -1572,6 +1572,8 @@ pulls.compare_changes_desc = Select the branch to merge into and the branch to p
pulls.has_viewed_file = Viewed
pulls.has_changed_since_last_review = Changed since your last review
pulls.viewed_files_label = %[1]d / %[2]d files viewed
pulls.expand_files = Expand all files
pulls.collapse_files = Collapse all files
pulls.compare_base = merge into
pulls.compare_compare = pull from
pulls.switch_comparison_type = Switch comparison type

View File

@ -12,5 +12,7 @@
<a class="item" href="{{$.RepoLink}}/commit/{{PathEscape .Commit.ID.String}}.patch" download="{{ShortSha .Commit.ID.String}}.patch">{{.locale.Tr "repo.diff.download_patch"}}</a>
<a class="item" href="{{$.RepoLink}}/commit/{{PathEscape .Commit.ID.String}}.diff" download="{{ShortSha .Commit.ID.String}}.diff">{{.locale.Tr "repo.diff.download_diff"}}</a>
{{end}}
<a id="expand-files-btn" class="item">{{.locale.Tr "repo.pulls.expand_files"}}</a>
<a id="collapse-files-btn"class="item">{{.locale.Tr "repo.pulls.collapse_files"}}</a>
</div>
</div>

View File

@ -256,7 +256,7 @@ a.blob-excerpt:hover {
.changed-since-last-review {
border: 1px var(--color-accent) solid;
background-color: var(--color-small-accent);
border-radius: 15px;
border-radius: var(--border-radius);
padding: 4px 8px;
margin: -8px 0; /* just like other buttons in the diff box header */
font-size: 0.857rem; /* just like .ui.tiny.button */

View File

@ -4,6 +4,8 @@ const {csrfToken, pageData} = window.config;
const prReview = pageData.prReview || {};
const viewedStyleClass = 'viewed-file-checked-form';
const viewedCheckboxSelector = '.viewed-file-form'; // Selector under which all "Viewed" checkbox forms can be found
const expandFilesBtnSelector = '#expand-files-btn';
const collapseFilesBtnSelector = '#collapse-files-btn';
// Refreshes the summary of viewed files if present
@ -69,3 +71,21 @@ export function initViewedCheckboxListenerFor() {
});
}
}
export function initExpandAndCollapseFilesButton() {
// expand btn
document.querySelector(expandFilesBtnSelector)?.addEventListener('click', () => {
for (const box of document.querySelectorAll('.file-content[data-folded="true"]')) {
setFileFolding(box, box.querySelector('.fold-file'), false);
}
});
// collapse btn, need to exclude the div of “show more”
document.querySelector(collapseFilesBtnSelector)?.addEventListener('click', () => {
for (const box of document.querySelectorAll('.file-content:not([data-folded="true"])')) {
if (box.getAttribute('id') === 'diff-incomplete') continue;
setFileFolding(box, box.querySelector('.fold-file'), true);
}
});
}

View File

@ -1,12 +1,13 @@
import $ from 'jquery';
import {initCompReactionSelector} from './comp/ReactionSelector.js';
import {initRepoIssueContentHistory} from './repo-issue-content.js';
import {initViewedCheckboxListenerFor, countAndUpdateViewedFiles} from './pull-view-file.js';
import {initDiffFileTree} from './repo-diff-filetree.js';
import {validateTextareaNonEmpty} from './comp/ComboMarkdownEditor.js';
import {initViewedCheckboxListenerFor, countAndUpdateViewedFiles, initExpandAndCollapseFilesButton} from './pull-view-file.js';
const {csrfToken} = window.config;
export function initRepoDiffReviewButton() {
function initRepoDiffReviewButton() {
const $reviewBox = $('#review-box');
const $counter = $reviewBox.find('.review-comments-counter');
@ -25,7 +26,7 @@ export function initRepoDiffReviewButton() {
});
}
export function initRepoDiffFileViewToggle() {
function initRepoDiffFileViewToggle() {
$('.file-view-toggle').on('click', function () {
const $this = $(this);
$this.parent().children().removeClass('active');
@ -37,7 +38,7 @@ export function initRepoDiffFileViewToggle() {
});
}
export function initRepoDiffConversationForm() {
function initRepoDiffConversationForm() {
$(document).on('submit', '.conversation-holder form', async (e) => {
e.preventDefault();
@ -152,7 +153,7 @@ function loadMoreFiles(url, callback) {
});
}
export function initRepoDiffShowMore() {
function initRepoDiffShowMore() {
$(document).on('click', 'a#diff-show-more-files', (e) => {
e.preventDefault();
@ -186,3 +187,15 @@ export function initRepoDiffShowMore() {
});
});
}
export function initRepoDiffView() {
const diffFileList = $('#diff-file-list');
if (diffFileList.length === 0) return;
initDiffFileTree();
initRepoDiffShowMore();
initRepoDiffReviewButton();
initRepoDiffFileViewToggle();
initRepoDiffConversationForm();
initViewedCheckboxListenerFor();
initExpandAndCollapseFilesButton();
}

View File

@ -21,14 +21,8 @@ import {initRepoIssueContentHistory} from './features/repo-issue-content.js';
import {initStopwatch} from './features/stopwatch.js';
import {initFindFileInRepo} from './features/repo-findfile.js';
import {initCommentContent, initMarkupContent} from './markup/content.js';
import {initDiffFileTree} from './features/repo-diff-filetree.js';
import {initUserAuthLinkAccountView, initUserAuthOauth2} from './features/user-auth.js';
import {
initRepoDiffConversationForm,
initRepoDiffFileViewToggle,
initRepoDiffReviewButton, initRepoDiffShowMore,
} from './features/repo-diff.js';
import {
initRepoIssueDue,
initRepoIssueReferenceRepositorySearch,
@ -68,7 +62,7 @@ import {
initRepoSettingsCollaboration,
initRepoSettingSearchTeamBox,
} from './features/repo-settings.js';
import {initViewedCheckboxListenerFor} from './features/pull-view-file.js';
import {initRepoDiffView} from './features/repo-diff.js';
import {initOrgTeamSearchRepoBox, initOrgTeamSettings} from './features/org-team.js';
import {initUserAuthWebAuthn, initUserAuthWebAuthnRegister} from './features/user-auth-webauthn.js';
import {initRepoRelease, initRepoReleaseNew} from './features/repo-release.js';
@ -151,11 +145,6 @@ onDomReady(() => {
initRepoCommentForm();
initRepoEllipsisButton();
initRepoCommitLastCommitLoader();
initRepoDiffConversationForm();
initRepoDiffFileViewToggle();
initRepoDiffReviewButton();
initRepoDiffShowMore();
initDiffFileTree();
initRepoEditor();
initRepoGraphGit();
initRepoIssueContentHistory();
@ -190,5 +179,5 @@ onDomReady(() => {
initUserAuthWebAuthn();
initUserAuthWebAuthnRegister();
initUserSettings();
initViewedCheckboxListenerFor();
initRepoDiffView();
});