From e03e827dcb27a4cd34dd4f9da96ec8d15aaa5c5a Mon Sep 17 00:00:00 2001
From: sillyguodong <33891828+sillyguodong@users.noreply.github.com>
Date: Wed, 12 Apr 2023 15:06:39 +0800
Subject: [PATCH] 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
---
web_src/js/components/DiffFileTree.vue | 10 ++++++++++
1 file changed, 10 insertions(+)
diff --git a/web_src/js/components/DiffFileTree.vue b/web_src/js/components/DiffFileTree.vue
index 9fc08af1fc..c5a62dd4cc 100644
--- a/web_src/js/components/DiffFileTree.vue
+++ b/web_src/js/components/DiffFileTree.vue
@@ -18,6 +18,7 @@ import DiffFileTreeItem from './DiffFileTreeItem.vue';
import {doLoadMoreFiles} from '../features/repo-diff.js';
import {toggleElem} from '../utils/dom.js';
import {DiffTreeStore} from '../modules/stores.js';
+import {setFileFolding} from '../features/file-fold.js';
const {pageData} = window.config;
const LOCAL_STORAGE_KEY = 'diff_file_tree_visible';
@@ -104,6 +105,7 @@ export default {
this.hashChangeListener = () => {
this.store.selectedItem = window.location.hash;
+ this.expandSelectedFile();
};
this.hashChangeListener();
window.addEventListener('hashchange', this.hashChangeListener);
@@ -113,6 +115,14 @@ export default {
window.removeEventListener('hashchange', this.hashChangeListener);
},
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() {
this.updateVisibility(!this.fileTreeIsVisible);
},