mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2026-05-13 14:30:25 +00:00
6b75654cc2
Related issue: https://codeberg.org/forgejo/forgejo/issues/8581 This should be a nice first step towards RTL support. Future PRs can look at updating the tailwind classes, changing some of the icons (arrow left might need to become arrow right in some cases for example, and updating the template files) Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/12491 Reviewed-by: 0ko <0ko@noreply.codeberg.org>
97 lines
2.7 KiB
Vue
97 lines
2.7 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-inline-start: 13px;
|
|
border-inline-start: 1px solid var(--color-secondary);
|
|
}
|
|
|
|
.sub-items .item-file {
|
|
padding-inline-start: 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>
|