Skip to content

Commit 395c716

Browse files

File tree

2 files changed

+29
-11
lines changed

2 files changed

+29
-11
lines changed

web_src/js/components/DiffFileTree.vue

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
>
66
<!-- only render the tree if we're visible. in many cases this is something that doesn't change very often -->
77
<div class="ui list">
8-
<DiffFileTreeItem v-for="item in fileTree" :key="item.name" :item="item" />
8+
<DiffFileTreeItem v-for="item in fileTree" :key="item.name" :item="item" :selected-file="selectedFile"/>
99
</div>
1010
<div v-if="isIncomplete" id="diff-too-many-files-stats" class="gt-pt-2">
1111
<span class="gt-mr-2">{{ tooManyFilesMessage }}</span><a :class="['ui', 'basic', 'tiny', 'button', isLoadingNewData === true ? 'disabled' : '']" id="diff-show-more-files-stats" @click.stop="loadMoreData">{{ showMoreMessage }}</a>
@@ -26,7 +26,10 @@ export default {
2626
data: () => {
2727
const fileTreeIsVisible = localStorage.getItem(LOCAL_STORAGE_KEY) === 'true';
2828
pageData.diffFileInfo.fileTreeIsVisible = fileTreeIsVisible;
29-
return pageData.diffFileInfo;
29+
return {
30+
...pageData.diffFileInfo,
31+
selectedFile: ''
32+
};
3033
},
3134
computed: {
3235
fileTree() {
@@ -97,9 +100,16 @@ export default {
97100
pageData.diffFileInfo.files = this.files;
98101
99102
document.querySelector('.diff-toggle-file-tree-button').addEventListener('click', this.toggleVisibility);
103+
104+
this.hashChangeListener = () => {
105+
this.selectedFile = window.location.hash;
106+
};
107+
this.hashListener = window.addEventListener('hashchange', this.hashChangeListener);
108+
this.selectedFile = window.location.hash;
100109
},
101110
unmounted() {
102111
document.querySelector('.diff-toggle-file-tree-button').removeEventListener('click', this.toggleVisibility);
112+
window.removeEventListener('hashchange', this.hashChangeListener);
103113
},
104114
methods: {
105115
toggleVisibility() {

web_src/js/components/DiffFileTreeItem.vue

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div v-show="show" :title="item.name">
33
<!--title instead of tooltip above as the tooltip needs too much work with the current methods, i.e. not being loaded or staying open for "too long"-->
4-
<div class="item" :class="item.isFile ? 'filewrapper gt-p-1 gt-ac' : ''">
4+
<div class="item" :class="[item.isFile ? 'filewrapper gt-p-1 gt-ac' : '', selectedFile === genCompleteFileHash(item.file?.NameHash) ? 'selected' : '']">
55
<!-- Files -->
66
<SvgIcon
77
v-if="item.isFile"
@@ -32,7 +32,7 @@
3232
<span class="gt-ellipsis">{{ item.name }}</span>
3333
</div>
3434
<div v-show="!collapsed">
35-
<DiffFileTreeItem v-for="childItem in item.children" :key="childItem.name" :item="childItem" class="list" />
35+
<DiffFileTreeItem v-for="childItem in item.children" :key="childItem.name" :item="childItem" class="list" :selected-file="selectedFile"/>
3636
</div>
3737
</div>
3838
</div>
@@ -52,6 +52,11 @@ export default {
5252
type: Boolean,
5353
required: false,
5454
default: true
55+
},
56+
selectedFile: {
57+
type: String,
58+
default: '',
59+
required: true
5560
}
5661
},
5762
data: () => ({
@@ -74,6 +79,9 @@ export default {
7479
};
7580
return diffTypes[pType];
7681
},
82+
genCompleteFileHash(hash) {
83+
return `#diff-${hash}`;
84+
}
7785
},
7886
};
7987
</script>
@@ -113,25 +121,25 @@ export default {
113121
padding-left: 18px !important;
114122
}
115123
116-
.item.filewrapper:hover {
124+
.item.filewrapper:hover, div.directory:hover {
117125
color: var(--color-text);
118126
background: var(--color-hover);
119127
border-radius: 4px;
120128
}
121129
130+
.item.filewrapper.selected {
131+
color: var(--color-text);
132+
background: var(--color-active);
133+
border-radius: 4px;
134+
}
135+
122136
div.directory {
123137
display: grid;
124138
grid-template-columns: 18px 20px auto;
125139
user-select: none;
126140
cursor: pointer;
127141
}
128142
129-
div.directory:hover {
130-
color: var(--color-text);
131-
background: var(--color-hover);
132-
border-radius: 4px;
133-
}
134-
135143
div.list {
136144
padding-bottom: 0 !important;
137145
padding-top: inherit !important;

0 commit comments

Comments
 (0)