oppi.li
1<script>
2import {SvgIcon} from '../svg.js';
3import {diffTreeStore} from '../modules/stores.js';
4
5export default {
6 components: {SvgIcon},
7 props: {
8 item: {
9 type: Object,
10 required: true,
11 },
12 },
13 data: () => ({
14 store: diffTreeStore(),
15 collapsed: false,
16 }),
17 methods: {
18 getIconForDiffType(pType) {
19 const diffTypes = {
20 1: {name: 'octicon-diff-added', classes: ['text', 'green']},
21 2: {name: 'octicon-diff-modified', classes: ['text', 'yellow']},
22 3: {name: 'octicon-diff-removed', classes: ['text', 'red']},
23 4: {name: 'octicon-diff-renamed', classes: ['text', 'teal']},
24 5: {name: 'octicon-diff-renamed', classes: ['text', 'green']}, // there is no octicon for copied, so renamed should be ok
25 };
26 return diffTypes[pType];
27 },
28 },
29};
30</script>
31<template>
32 <!--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"-->
33 <a
34 v-if="item.isFile" class="item-file"
35 :class="{'selected': store.selectedItem === '#diff-' + item.file.NameHash, 'viewed': item.file.IsViewed}"
36 :title="item.name" :href="'#diff-' + item.file.NameHash"
37 >
38 <!-- file -->
39 <SvgIcon name="octicon-file"/>
40 <span class="gt-ellipsis tw-flex-1">{{ item.name }}</span>
41 <SvgIcon :name="getIconForDiffType(item.file.Type).name" :class="getIconForDiffType(item.file.Type).classes"/>
42 </a>
43 <div v-else class="item-directory" :title="item.name" @click.stop="collapsed = !collapsed">
44 <!-- directory -->
45 <SvgIcon :name="collapsed ? 'octicon-chevron-right' : 'octicon-chevron-down'"/>
46 <SvgIcon class="text primary" name="octicon-file-directory-fill"/>
47 <span class="gt-ellipsis">{{ item.name }}</span>
48 </div>
49
50 <div v-if="item.children?.length" v-show="!collapsed" class="sub-items">
51 <DiffFileTreeItem v-for="childItem in item.children" :key="childItem.name" :item="childItem"/>
52 </div>
53</template>
54<style scoped>
55a, a:hover {
56 text-decoration: none;
57 color: var(--color-text);
58}
59
60.sub-items {
61 display: flex;
62 flex-direction: column;
63 gap: 1px;
64 margin-left: 13px;
65 border-left: 1px solid var(--color-secondary);
66}
67
68.sub-items .item-file {
69 padding-left: 18px;
70}
71
72.item-file.selected {
73 color: var(--color-text);
74 background: var(--color-active);
75 border-radius: 4px;
76}
77
78.item-file.viewed {
79 color: var(--color-text-light-3);
80}
81
82.item-file,
83.item-directory {
84 display: flex;
85 align-items: center;
86 gap: 0.25em;
87 padding: 3px 6px;
88}
89
90.item-file:hover,
91.item-directory:hover {
92 color: var(--color-text);
93 background: var(--color-hover);
94 border-radius: 4px;
95 cursor: pointer;
96}
97</style>