test1234
/
gitea
forked from gitea/gitea
1
0
Fork 0
Code Pull Requests Activity

Expand selected file when clicking file tree (#24041) 

Auto expand the selected file when clicking the file item of the file
tree.
This is consistent with Github's behavior.

https://user-images.githubusercontent.com/33891828/231048124-61f180af-adba-42d7-9ffa-626e1de04aed.mov
This commit is contained in:
sillyguodong 2023-04-12 15:06:39 +08:00 committed by GitHub
parent 97176754be
commit e03e827dcb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 10 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
web_src/js/components/DiffFileTree.vue
View File

@ -18,6 +18,7 @@ import DiffFileTreeItem from './DiffFileTreeItem.vue';
import {doLoadMoreFiles} from '../features/repo-diff.js'; import {doLoadMoreFiles} from '../features/repo-diff.js';
import {toggleElem} from '../utils/dom.js'; import {toggleElem} from '../utils/dom.js';
import {DiffTreeStore} from '../modules/stores.js'; import {DiffTreeStore} from '../modules/stores.js';
import {setFileFolding} from '../features/file-fold.js';
const {pageData} = window.config; const {pageData} = window.config;
const LOCAL_STORAGE_KEY = 'diff_file_tree_visible'; const LOCAL_STORAGE_KEY = 'diff_file_tree_visible';
@ -104,6 +105,7 @@ export default {
this.hashChangeListener = () => { this.hashChangeListener = () => {
this.store.selectedItem = window.location.hash; this.store.selectedItem = window.location.hash;
this.expandSelectedFile();
}; };
this.hashChangeListener(); this.hashChangeListener();
window.addEventListener('hashchange', this.hashChangeListener); window.addEventListener('hashchange', this.hashChangeListener);
@ -113,6 +115,14 @@ export default {
window.removeEventListener('hashchange', this.hashChangeListener); window.removeEventListener('hashchange', this.hashChangeListener);
}, },
methods: { methods: {
expandSelectedFile() {
// expand file if the selected file is folded
if (this.store.selectedItem) {
const box = document.querySelector(this.store.selectedItem);
const folded = box?.getAttribute('data-folded') === 'true';
if (folded) setFileFolding(box, box.querySelector('.fold-file'), false);
}
},
toggleVisibility() { toggleVisibility() {
this.updateVisibility(!this.fileTreeIsVisible); this.updateVisibility(!this.fileTreeIsVisible);
}, },