forgejo/web_src/js/components/DiffFileTreeItem.vue
gempir e460b6ef4d
Fix PR file tree folders no longer collapsing (#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: zeripath <art27@cantab.net>
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
2023-02-12 10:34:46 +08:00

148 lines
3.1 KiB
Vue

<template>
<div v-show="show">
<div class="item" :class="item.isFile ? 'filewrapper p-1' : ''">
<!-- Files -->
<SvgIcon
v-if="item.isFile"
data-position="right center"
name="octicon-file"
class="svg-icon file"
/>
<a
v-if="item.isFile"
class="file ellipsis muted"
:href="item.isFile ? '#diff-' + item.file.NameHash : ''"
>{{ item.name }}</a>
<SvgIcon
v-if="item.isFile"
data-position="right center"
:name="getIconForDiffType(item.file.Type)"
:class="['svg-icon', getIconForDiffType(item.file.Type), 'status']"
/>
<!-- Directories -->
<div v-if="!item.isFile" class="directory p-1" @click.stop="handleClick(item.isFile)">
<SvgIcon
class="svg-icon"
:name="collapsed ? 'octicon-chevron-right' : 'octicon-chevron-down'"
/>
<SvgIcon
class="svg-icon directory"
name="octicon-file-directory-fill"
/>
<span class="ellipsis">{{ item.name }}</span>
</div>
<div v-show="!collapsed">
<DiffFileTreeItem v-for="childItem in item.children" :key="childItem.name" :item="childItem" class="list" />
</div>
</div>
</div>
</template>
<script>
import {SvgIcon} from '../svg.js';
export default {
components: {SvgIcon},
props: {
item: {
type: Object,
required: true
},
show: {
type: Boolean,
required: false,
default: true
}
},
data: () => ({
collapsed: false,
}),
methods: {
handleClick(itemIsFile) {
if (itemIsFile) {
return;
}
this.collapsed = !this.collapsed;
},
getIconForDiffType(pType) {
const diffTypes = {
1: 'octicon-diff-added',
2: 'octicon-diff-modified',
3: 'octicon-diff-removed',
4: 'octicon-diff-renamed',
5: 'octicon-diff-modified', // there is no octicon for copied, so modified should be ok
};
return diffTypes[pType];
},
},
};
</script>
<style scoped>
span.svg-icon.status {
float: right;
}
span.svg-icon.file {
color: var(--color-secondary-dark-7);
}
span.svg-icon.directory {
color: var(--color-primary);
}
span.svg-icon.octicon-diff-modified {
color: var(--color-yellow);
}
span.svg-icon.octicon-diff-added {
color: var(--color-green);
}
span.svg-icon.octicon-diff-removed {
color: var(--color-red);
}
span.svg-icon.octicon-diff-renamed {
color: var(--color-teal);
}
.item.filewrapper {
display: grid !important;
grid-template-columns: 20px 7fr 1fr;
padding-left: 18px !important;
}
.item.filewrapper:hover {
color: var(--color-text);
background: var(--color-hover);
border-radius: 4px;
}
div.directory {
display: grid;
grid-template-columns: 18px 20px auto;
user-select: none;
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;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
</style>