From bedad23f9e043072bd6f260bff07919588e45e65 Mon Sep 17 00:00:00 2001 From: sillyguodong <33891828+sillyguodong@users.noreply.github.com> Date: Sun, 9 Apr 2023 21:11:02 +0800 Subject: [PATCH] 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 --- options/locale/locale_en-US.ini | 2 ++ templates/repo/diff/options_dropdown.tmpl | 2 ++ web_src/css/review.css | 2 +- web_src/js/features/pull-view-file.js | 20 ++++++++++++++++++++ web_src/js/features/repo-diff.js | 23 ++++++++++++++++++----- web_src/js/index.js | 15 ++------------- 6 files changed, 45 insertions(+), 19 deletions(-) diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini index d8693ee9df..eb1ffebc37 100644 --- a/options/locale/locale_en-US.ini +++ b/options/locale/locale_en-US.ini @@ -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 diff --git a/templates/repo/diff/options_dropdown.tmpl b/templates/repo/diff/options_dropdown.tmpl index 93e1183d1b..ced0e06046 100644 --- a/templates/repo/diff/options_dropdown.tmpl +++ b/templates/repo/diff/options_dropdown.tmpl @@ -12,5 +12,7 @@ {{.locale.Tr "repo.diff.download_patch"}} {{.locale.Tr "repo.diff.download_diff"}} {{end}} + {{.locale.Tr "repo.pulls.expand_files"}} + {{.locale.Tr "repo.pulls.collapse_files"}} diff --git a/web_src/css/review.css b/web_src/css/review.css index 0111311d3c..14668eb245 100644 --- a/web_src/css/review.css +++ b/web_src/css/review.css @@ -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 */ diff --git a/web_src/js/features/pull-view-file.js b/web_src/js/features/pull-view-file.js index 06d78d78c2..c6985efadb 100644 --- a/web_src/js/features/pull-view-file.js +++ b/web_src/js/features/pull-view-file.js @@ -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); + } + }); +} + + diff --git a/web_src/js/features/repo-diff.js b/web_src/js/features/repo-diff.js index df66db7f6c..9be4bc8d0f 100644 --- a/web_src/js/features/repo-diff.js +++ b/web_src/js/features/repo-diff.js @@ -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(); +} diff --git a/web_src/js/index.js b/web_src/js/index.js index f5584d2940..878afb10d7 100644 --- a/web_src/js/index.js +++ b/web_src/js/index.js @@ -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(); });