forgejo/web_src/js/components/DiffFileTreeItem.vue
silverwind b96845ae01
Enforce trailing comma in JS on multiline (#30002)
To keep blame info accurate and to avoid [changes like
this](https://github.com/go-gitea/gitea/pull/29977/files#diff-c3422631a14edbe1e508c4b22f0c718db318be08a6e889427802f9b6165d88d6R359),
it's good to always have a trailing comma, so let's enforce it in JS.

This rule is completely automatically fixable with `make lint-js-fix`
and that's what I did here.

(cherry picked from commit 3d751b6ec18e57698ce86b79866031d2c80c2071)

Conflicts:
	web_src/js/components/DashboardRepoList.vue
	trivial context conflict because of '3b7b899afa fix commit_status'
2024-03-26 19:04:27 +01:00

97 lines
2.6 KiB
Vue

<script>
import {SvgIcon} from '../svg.js';
import {diffTreeStore} from '../modules/stores.js';
export default {
components: {SvgIcon},
props: {
item: {
type: Object,
required: true,
},
},
data: () => ({
store: diffTreeStore(),
collapsed: false,
}),
methods: {
getIconForDiffType(pType) {
const diffTypes = {
1: {name: 'octicon-diff-added', classes: ['text', 'green']},
2: {name: 'octicon-diff-modified', classes: ['text', 'yellow']},
3: {name: 'octicon-diff-removed', classes: ['text', 'red']},
4: {name: 'octicon-diff-renamed', classes: ['text', 'teal']},
5: {name: 'octicon-diff-renamed', classes: ['text', 'green']}, // there is no octicon for copied, so renamed should be ok
};
return diffTypes[pType];
},
},
};
</script>
<template>
<!--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"-->
<a
v-if="item.isFile" class="item-file"
:class="{'selected': store.selectedItem === '#diff-' + item.file.NameHash, 'viewed': item.file.IsViewed}"
:title="item.name" :href="'#diff-' + item.file.NameHash"
>
<!-- file -->
<SvgIcon name="octicon-file"/>
<span class="gt-ellipsis tw-flex-1">{{ item.name }}</span>
<SvgIcon :name="getIconForDiffType(item.file.Type).name" :class="getIconForDiffType(item.file.Type).classes"/>
</a>
<div v-else class="item-directory" :title="item.name" @click.stop="collapsed = !collapsed">
<!-- directory -->
<SvgIcon :name="collapsed ? 'octicon-chevron-right' : 'octicon-chevron-down'"/>
<SvgIcon class="text primary" name="octicon-file-directory-fill"/>
<span class="gt-ellipsis">{{ item.name }}</span>
</div>
<div v-if="item.children?.length" v-show="!collapsed" class="sub-items">
<DiffFileTreeItem v-for="childItem in item.children" :key="childItem.name" :item="childItem"/>
</div>
</template>
<style scoped>
a, a:hover {
text-decoration: none;
color: var(--color-text);
}
.sub-items {
display: flex;
flex-direction: column;
gap: 1px;
margin-left: 13px;
border-left: 1px solid var(--color-secondary);
}
.sub-items .item-file {
padding-left: 18px;
}
.item-file.selected {
color: var(--color-text);
background: var(--color-active);
border-radius: 4px;
}
.item-file.viewed {
color: var(--color-text-light-3);
}
.item-file,
.item-directory {
display: flex;
align-items: center;
gap: 0.25em;
padding: 3px 6px;
}
.item-file:hover,
.item-directory:hover {
color: var(--color-text);
background: var(--color-hover);
border-radius: 4px;
cursor: pointer;
}
</style>