oppi.li / perf-test
loading up the forgejo repo on tangled to test page performance
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Restore function to "Show more" buttons (#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 <art27@cantab.net>
Co-authored-by: John Olheiser <john.olheiser@gmail.com>
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>

authored by

zeripath
John Olheiser
Lunny Xiao and committed by
GitHub c0da3638 99cf0d39

+30 -3
+1 -1
templates/repo/diff/box.tmpl
··· 143 143 {{$.locale.Tr "repo.diff.file_suppressed_line_too_long"}} 144 144 {{else}} 145 145 {{$.locale.Tr "repo.diff.file_suppressed"}} 146 - <a class="ui basic tiny button diff-show-more-button" data-href="{{$.Link}}?file-only=true&files={{$file.Name}}&files={{$file.OldName}}">{{$.locale.Tr "repo.diff.load"}}</a> 146 + <a class="ui basic tiny button diff-load-button" data-href="{{$.Link}}?file-only=true&files={{$file.Name}}&files={{$file.OldName}}">{{$.locale.Tr "repo.diff.load"}}</a> 147 147 {{end}} 148 148 {{else}} 149 149 {{$.locale.Tr "repo.diff.bin_not_shown"}}
+4 -1
web_src/js/components/DiffFileTree.vue
··· 8 8 <DiffFileTreeItem v-for="item in fileTree" :key="item.name" :item="item" /> 9 9 </div> 10 10 <div v-if="isIncomplete" id="diff-too-many-files-stats" class="pt-2"> 11 - <span>{{ tooManyFilesMessage }}</span><a :class="['ui', 'basic', 'tiny', 'button', isLoadingNewData === true ? 'disabled' : '']" id="diff-show-more-files-stats" @click.stop="loadMoreData">{{ showMoreMessage }}</a> 11 + <span class="mr-2">{{ tooManyFilesMessage }}</span><a :class="['ui', 'basic', 'tiny', 'button', isLoadingNewData === true ? 'disabled' : '']" id="diff-show-more-files-stats" @click.stop="loadMoreData">{{ showMoreMessage }}</a> 12 12 </div> 13 13 </div> 14 14 </template> ··· 94 94 mounted() { 95 95 // ensure correct buttons when we are mounted to the dom 96 96 this.adjustToggleButton(this.fileTreeIsVisible); 97 + // replace the pageData.diffFileInfo.files with our watched data so we get updates 98 + pageData.diffFileInfo.files = this.files; 99 + 97 100 document.querySelector('.diff-toggle-file-tree-button').addEventListener('click', this.toggleVisibility); 98 101 }, 99 102 unmounted() {
+22 -1
web_src/js/features/repo-diff.js
··· 119 119 120 120 export function doLoadMoreFiles(link, diffEnd, callback) { 121 121 const url = `${link}?skip-to=${diffEnd}&file-only=true`; 122 + loadMoreFiles(url, callback); 123 + } 124 + 125 + function loadMoreFiles(url, callback) { 126 + const $target = $('a#diff-show-more-files'); 127 + if ($target.hasClass('disabled')) { 128 + callback(); 129 + return; 130 + } 131 + $target.addClass('disabled'); 122 132 $.ajax({ 123 133 type: 'GET', 124 134 url, 125 135 }).done((resp) => { 126 136 if (!resp) { 137 + $target.removeClass('disabled'); 127 138 callback(resp); 128 139 return; 129 140 } 141 + $('#diff-incomplete').replaceWith($(resp).find('#diff-file-boxes').children()); 130 142 // By simply rerunning the script we add the new data to our existing 131 143 // pagedata object. this triggers vue and the filetree and filelist will 132 144 // render the new elements. 133 145 $('body').append($(resp).find('script#diff-data-script')); 146 + onShowMoreFiles(); 134 147 callback(resp); 135 148 }).fail(() => { 149 + $target.removeClass('disabled'); 136 150 callback(); 137 151 }); 138 152 } 139 153 140 154 export function initRepoDiffShowMore() { 141 - $(document).on('click', 'a.diff-show-more-button', (e) => { 155 + $(document).on('click', 'a#diff-show-more-files', (e) => { 156 + e.preventDefault(); 157 + 158 + const $target = $(e.target); 159 + loadMoreFiles($target.data('href'), () => {}); 160 + }); 161 + 162 + $(document).on('click', 'a.diff-load-button', (e) => { 142 163 e.preventDefault(); 143 164 const $target = $(e.target); 144 165
+3
web_src/less/_repository.less
··· 1667 1667 background-color: var(--color-teal); 1668 1668 } 1669 1669 } 1670 + .button { 1671 + padding: 8px 12px; 1672 + } 1670 1673 } 1671 1674 1672 1675 .diff-box .header:not(.resolved-placeholder) {