forgejo/web_src/js/components/DiffFileTreeItem.vue
wxiaoguang 48c4a7e75c
Rewrite the DiffFileTreeItem and fix misalignment (#26565)
Fix some layout / user-interaction problems and close #25650 , the code
has been simplified (+46 −108)

<details>


![image](https://github.com/go-gitea/gitea/assets/2114189/55c38812-3338-4048-9137-0cae0ef213e8)

</details>

---------

Co-authored-by: delvh <dev.lh@web.de>
2023-08-18 19:55:56 +00:00

96 lines
2.5 KiB
Vue

<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 gt-f1">{{ 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>
<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>
<style scoped>
a, a:hover {
text-decoration: none;
color: var(--color-text);
}
.sub-items {
padding-left: 9px;
}
.item-file {
margin-left: 20px;
}
.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: 2px;
}
.item-file:hover,
.item-directory:hover {
color: var(--color-text);
background: var(--color-hover);
border-radius: 4px;
cursor: pointer;
}
</style>