From 421d87933b8fc6dc1cc151b875f94c349b58299f Mon Sep 17 00:00:00 2001 From: zeripath Date: Fri, 13 Jan 2023 09:29:10 +0000 Subject: [PATCH] Restore function to "Show more" buttons (#22399) (#22426) Backport #22399 There was a serious regression in #21012 which broke the Show More button on the diff page, and the show more button was also broken on the file tree too. This PR fixes this by resetting the pageData.diffFiles as the vue watched value and reattachs a function to the show more button outside of the file tree view. Fix #22380 Signed-off-by: Andrew Thornton --- templates/repo/diff/box.tmpl | 2 +- web_src/js/components/DiffFileTree.vue | 5 ++++- web_src/js/features/repo-diff.js | 23 ++++++++++++++++++++++- web_src/less/_repository.less | 3 +++ 4 files changed, 30 insertions(+), 3 deletions(-) diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl index 15eff8109..8482c31cd 100644 --- a/templates/repo/diff/box.tmpl +++ b/templates/repo/diff/box.tmpl @@ -143,7 +143,7 @@ {{$.locale.Tr "repo.diff.file_suppressed_line_too_long"}} {{else}} {{$.locale.Tr "repo.diff.file_suppressed"}} - {{$.locale.Tr "repo.diff.load"}} + {{$.locale.Tr "repo.diff.load"}} {{end}} {{else}} {{$.locale.Tr "repo.diff.bin_not_shown"}} diff --git a/web_src/js/components/DiffFileTree.vue b/web_src/js/components/DiffFileTree.vue index 717ba70f7..71013f08e 100644 --- a/web_src/js/components/DiffFileTree.vue +++ b/web_src/js/components/DiffFileTree.vue @@ -8,7 +8,7 @@
- {{ tooManyFilesMessage }}{{ showMoreMessage }} + {{ tooManyFilesMessage }}{{ showMoreMessage }}
@@ -98,6 +98,9 @@ export default { mounted() { // ensure correct buttons when we are mounted to the dom this.adjustToggleButton(this.fileTreeIsVisible); + // replace the pageData.diffFileInfo.files with our watched data so we get updates + pageData.diffFileInfo.files = this.files; + document.querySelector('.diff-toggle-file-tree-button').addEventListener('click', this.toggleVisibility); }, unmounted() { diff --git a/web_src/js/features/repo-diff.js b/web_src/js/features/repo-diff.js index 0fb7ee22d..9b5da7de8 100644 --- a/web_src/js/features/repo-diff.js +++ b/web_src/js/features/repo-diff.js @@ -119,26 +119,47 @@ function onShowMoreFiles() { export function doLoadMoreFiles(link, diffEnd, callback) { const url = `${link}?skip-to=${diffEnd}&file-only=true`; + loadMoreFiles(url, callback); +} + +function loadMoreFiles(url, callback) { + const $target = $('a#diff-show-more-files'); + if ($target.hasClass('disabled')) { + callback(); + return; + } + $target.addClass('disabled'); $.ajax({ type: 'GET', url, }).done((resp) => { if (!resp) { + $target.removeClass('disabled'); callback(resp); return; } + $('#diff-incomplete').replaceWith($(resp).find('#diff-file-boxes').children()); // By simply rerunning the script we add the new data to our existing // pagedata object. this triggers vue and the filetree and filelist will // render the new elements. $('body').append($(resp).find('script#diff-data-script')); + onShowMoreFiles(); callback(resp); }).fail(() => { + $target.removeClass('disabled'); callback(); }); } export function initRepoDiffShowMore() { - $(document).on('click', 'a.diff-show-more-button', (e) => { + $(document).on('click', 'a#diff-show-more-files', (e) => { + e.preventDefault(); + + const $target = $(e.target); + loadMoreFiles($target.data('href'), () => {}); + }); + + $(document).on('click', 'a.diff-load-button', (e) => { e.preventDefault(); const $target = $(e.target); diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less index 20775e1cf..c57bfea43 100644 --- a/web_src/less/_repository.less +++ b/web_src/less/_repository.less @@ -1665,6 +1665,9 @@ background-color: var(--color-teal); } } + .button { + padding: 8px 12px; + } } .diff-box .header:not(.resolved-placeholder) {