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 @@
@@ -52,6 +52,11 @@ export default {
type: Boolean,
required: false,
default: true
+ },
+ selectedFile: {
+ type: String,
+ default: '',
+ required: true
}
},
data: () => ({
@@ -74,6 +79,9 @@ export default {
};
return diffTypes[pType];
},
+ genCompleteFileHash(hash) {
+ return `#diff-${hash}`;
+ }
},
};
@@ -113,12 +121,18 @@ export default {
padding-left: 18px !important;
}
-.item.filewrapper:hover {
+.item.filewrapper:hover, div.directory:hover {
color: var(--color-text);
background: var(--color-hover);
border-radius: 4px;
}
+.item.filewrapper.selected {
+ color: var(--color-text);
+ background: var(--color-active);
+ border-radius: 4px;
+}
+
div.directory {
display: grid;
grid-template-columns: 18px 20px auto;
@@ -126,12 +140,6 @@ div.directory {
cursor: pointer;
}
-div.directory:hover {
- color: var(--color-text);
- background: var(--color-hover);
- border-radius: 4px;
-}
-
div.list {
padding-bottom: 0 !important;
padding-top: inherit !important;