mirror of
https://github.com/go-gitea/gitea
synced 2024-11-09 19:42:09 +01:00
3602a1987d
## Add border to file tree 'sub-items' close #24766 view in `gitea-light` <img width="275" alt="image" src="https://github.com/go-gitea/gitea/assets/70063547/f1bf8736-2db3-454f-86f5-d050a2fae3eb"> view in `gitea-dark` <img width="296" alt="image" src="https://github.com/go-gitea/gitea/assets/70063547/053e2e6e-28f7-41d2-a139-1dae4df45929"> ## Change the 'item-file' padding Before that the 'item-file' only have padding when they in 'item-directory', which is too compact when 'item-file' after 'item-directory' <details>  --------- Co-authored-by: silverwind <me@silverwind.io>
97 lines
2.6 KiB
Vue
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 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>
|
|
<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>
|