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 <daniel.pasch.s@gmail.com> Co-authored-by: zeripath <art27@cantab.net> Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>tags/v1.18.4
@@ -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 | |||
@@ -68,7 +68,7 @@ export default { | |||
if (itemIsFile) { | |||
return; | |||
} | |||
this.$set(this, 'collapsed', !this.collapsed); | |||
this.collapsed = !this.collapsed; | |||
}, | |||
getIconForDiffType(pType) { | |||
const diffTypes = { | |||
@@ -88,6 +88,7 @@ export default { | |||
span.svg-icon.status { | |||
float: right; | |||
} | |||
span.svg-icon.file { | |||
color: var(--color-secondary-dark-7); | |||
} | |||
@@ -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 { |
@@ -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; |