12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697 |
- <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>
|