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:
		
							parent
							
								
									97176754be
								
							
						
					
					
						commit
						e03e827dcb
					
				|  | @ -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); | ||||
|     }, | ||||
|  |  | |||
		Loading…
	
		Reference in New Issue