Skip to content

Commit

Permalink
Fix PR file tree folders no longer collapsing (#22864) (#22872)
Browse files Browse the repository at this point in the history
Backport #22864

Collapsing folders currently just throws a console error

```
index.js?v=1.19.0~dev-403-gb6b8feb3d:10 TypeError: this.$set is not a function
    at Proxy.handleClick (index.js?v=1.19.0~dev-403-gb6b8feb3d:58:7159)
    at index.js?v=1.19.0~dev-403-gb6b8feb3d:58:6466
    at index.js?v=1.19.0~dev-403-gb6b8feb3d:10:93922
    at ce (index.js?v=1.19.0~dev-403-gb6b8feb3d:10:1472)
    at Q (index.js?v=1.19.0~dev-403-gb6b8feb3d:10:1567)
    at HTMLDivElement.$e (index.js?v=1.19.0~dev-403-gb6b8feb3d:10:79198)
```

This PR fixes this and allows folders to be collapsed again.

Also:
- better cursor interaction with folders
- added some color to the diff detail stats
- remove green link color from all the file names

Screenshots:

![image](https://user-images.githubusercontent.com/9765622/218269712-2f3dda55-6d70-407f-8d34-2a5d9c8df548.png)

![image](https://user-images.githubusercontent.com/9765622/218269714-6ce8a954-daea-4ed6-9eea-8b2323db4d8f.png)

Co-authored-by: gempir <[email protected]>
Co-authored-by: zeripath <[email protected]>
Co-authored-by: Lunny Xiao <[email protected]>
  • Loading branch information
4 people authored Feb 12, 2023
1 parent 43d1183 commit 656d5a1
Show file tree
Hide file tree
Showing 2 changed files with 19 additions and 2 deletions.
7 changes: 5 additions & 2 deletions web_src/js/components/DiffFileTreeItem.vue
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
/>
<a
v-if="item.isFile"
class="file ellipsis"
class="file ellipsis muted"
:href="item.isFile ? '#diff-' + item.file.NameHash : ''"
>{{ item.name }}</a>
<SvgIcon
Expand Down Expand Up @@ -68,7 +68,7 @@ export default {
if (itemIsFile) {
return;
}
this.$set(this, 'collapsed', !this.collapsed);
this.collapsed = !this.collapsed;
},
getIconForDiffType(pType) {
const diffTypes = {
Expand All @@ -88,6 +88,7 @@ export default {
span.svg-icon.status {
float: right;
}
span.svg-icon.file {
color: var(--color-secondary-dark-7);
}
Expand Down Expand Up @@ -127,6 +128,8 @@ span.svg-icon.octicon-diff-renamed {
div.directory {
display: grid;
grid-template-columns: 18px 20px auto;
user-select: none;
cursor: pointer;
}
div.directory:hover {
Expand Down
14 changes: 14 additions & 0 deletions web_src/less/_repository.less
Original file line number Diff line number Diff line change
Expand Up @@ -1608,6 +1608,20 @@
margin-right: .25rem;
}

// Because the translations contain the <strong> we need to style with nth-of-type

.diff-detail-stats strong:nth-of-type(1) {
color: var(--color-yellow);
}

.diff-detail-stats strong:nth-of-type(2) {
color: var(--color-green);
}

.diff-detail-stats strong:nth-of-type(3) {
color: var(--color-red);
}

.diff-detail-stats {
@media (max-width: 480px) {
font-size: 0;
Expand Down

0 comments on commit 656d5a1

Please sign in to comment.