From 395c7167354c6b7ebfdc11c7212cf41d63c400ab Mon Sep 17 00:00:00 2001 From: yusifeng <36984894+yusifeng@users.noreply.github.com> Date: Sat, 8 Apr 2023 02:27:10 +0800 Subject: [PATCH] Highlight selected file in the PR file tree (#23947) 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) --- web_src/js/components/DiffFileTree.vue | 14 ++++++++++-- web_src/js/components/DiffFileTreeItem.vue | 26 ++++++++++++++-------- 2 files changed, 29 insertions(+), 11 deletions(-) diff --git a/web_src/js/components/DiffFileTree.vue b/web_src/js/components/DiffFileTree.vue index 2c2fabfed..1ead1458e 100644 --- a/web_src/js/components/DiffFileTree.vue +++ b/web_src/js/components/DiffFileTree.vue @@ -5,7 +5,7 @@ >
- +
{{ tooManyFilesMessage }}{{ showMoreMessage }} @@ -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() { diff --git a/web_src/js/components/DiffFileTreeItem.vue b/web_src/js/components/DiffFileTreeItem.vue index c68c5c546..9fdb78875 100644 --- a/web_src/js/components/DiffFileTreeItem.vue +++ b/web_src/js/components/DiffFileTreeItem.vue @@ -1,7 +1,7 @@