domi/forgejo-domi
1
0
Fork 0
forked from forgejo/forgejo
Code Pull requests Activity

Highlight selected file in the PR file tree (#23947)

Browse source 
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)
This commit is contained in:
yusifeng 2023-04-08 02:27:10 +08:00 • committed by GitHub
parent 93eb914438
commit 395c716735
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 29 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

26
web_src/js/components/DiffFileTreeItem.vue
View file

@ -1,7 +1,7 @@
<template>
<div v-show="show" :title="item.name">
<!--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"-->
<div class="item" :class="item.isFile ? 'filewrapper gt-p-1 gt-ac' : ''">
<div class="item" :class="[item.isFile ? 'filewrapper gt-p-1 gt-ac' : '', selectedFile === genCompleteFileHash(item.file?.NameHash) ? 'selected' : '']">
<!-- Files -->
<SvgIcon
v-if="item.isFile"
@ -32,7 +32,7 @@
<span class="gt-ellipsis">{{ item.name }}</span>
</div>
<div v-show="!collapsed">
<DiffFileTreeItem v-for="childItem in item.children" :key="childItem.name" :item="childItem" class="list" />
<DiffFileTreeItem v-for="childItem in item.children" :key="childItem.name" :item="childItem" class="list" :selected-file="selectedFile"/>
</div>
</div>
</div>
@ -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}`;
}
},
};
</script>
@ -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;