domi/forgejo-domi
1
0
Fork 0
forked from forgejo/forgejo
Code Pull requests Activity

Highlight selected file in the PR file tree (#23947)

Browse source 
before

![before](https://user-images.githubusercontent.com/36984894/230327904-6e712ca2-f777-4cad-99f3-53bc20008180.gif)

after

![after](https://user-images.githubusercontent.com/36984894/230327966-6e5dd971-f0df-427a-a80b-6a9b6db6065d.gif)
This commit is contained in:
yusifeng 2023-04-08 02:27:10 +08:00 • committed by GitHub
parent 93eb914438
commit 395c716735
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 29 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

14
web_src/js/components/DiffFileTree.vue
View file

@ -5,7 +5,7 @@
>
<!-- only render the tree if we're visible. in many cases this is something that doesn't change very often -->
<div class="ui list">
<DiffFileTreeItem v-for="item in fileTree" :key="item.name" :item="item" />
<DiffFileTreeItem v-for="item in fileTree" :key="item.name" :item="item" :selected-file="selectedFile"/>
</div>
<div v-if="isIncomplete" id="diff-too-many-files-stats" class="gt-pt-2">
<span class="gt-mr-2">{{ tooManyFilesMessage }}</span><a :class="['ui', 'basic', 'tiny', 'button', isLoadingNewData === true ? 'disabled' : '']" id="diff-show-more-files-stats" @click.stop="loadMoreData">{{ showMoreMessage }}</a>
@ -26,7 +26,10 @@ export default {
data: () => {
const fileTreeIsVisible = localStorage.getItem(LOCAL_STORAGE_KEY) === 'true';
pageData.diffFileInfo.fileTreeIsVisible = fileTreeIsVisible;
return pageData.diffFileInfo;
return {
...pageData.diffFileInfo,
selectedFile: ''
};
},
computed: {
fileTree() {
@ -97,9 +100,16 @@ export default {
pageData.diffFileInfo.files = this.files;
document.querySelector('.diff-toggle-file-tree-button').addEventListener('click', this.toggleVisibility);
this.hashChangeListener = () => {
this.selectedFile = window.location.hash;
};
this.hashListener = window.addEventListener('hashchange', this.hashChangeListener);
this.selectedFile = window.location.hash;
},
unmounted() {
document.querySelector('.diff-toggle-file-tree-button').removeEventListener('click', this.toggleVisibility);
window.removeEventListener('hashchange', this.hashChangeListener);
},
methods: {
toggleVisibility() {