mirror of
https://github.com/go-gitea/gitea.git
synced 2026-08-27 18:53:52 +00:00
McMichalK
2bcf950b78
Adds a search box and a file-extension filter to the pull request diff sidebar, so reviewers can narrow a large diff down to the files they care about. Both filters apply to the file tree and to the diff itself. The extension menu follows GitHub: extensions sorted alphabetically, dotfiles and extension-less files in their own buckets, and the selection kept in the same `file-filters[]` query parameter, so a filtered view is shareable and survives a reload. The menu can list every extension in a diff, so `createTippy` gains an opt-in `limitSizeToViewport` option that caps a popup to the space left in the viewport and scrolls its content. Popups that do not ask for it are unchanged. Closes https://github.com/go-gitea/gitea/issues/27256 Signed-off-by: silverwind <me@silverwind.io> Signed-off-by: wxiaoguang <wxiaoguang@gmail.com> Co-authored-by: silverwind <me@silverwind.io> Co-authored-by: Claude (Opus 4.7) <noreply@anthropic.com> Co-authored-by: Copilot <copilot@github.com> Co-authored-by: Nicolas <bircni@icloud.com> Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
104 lines
3.0 KiB
Vue
104 lines
3.0 KiB
Vue
<script lang="ts" setup>
|
|
import SvgIcon from './SvgIcon.vue';
|
|
import type {SvgName} from '../svg.ts';
|
|
import {shallowRef} from 'vue';
|
|
import {type DiffStatus, type DiffTreeEntry, diffTreeStore} from '../modules/diff-file.ts';
|
|
|
|
const props = defineProps<{
|
|
item: DiffTreeEntry,
|
|
}>();
|
|
|
|
const store = diffTreeStore();
|
|
const collapsed = shallowRef(props.item.IsViewed);
|
|
|
|
const diffStatusIcons: Record<DiffStatus, {name: SvgName, class: string}> = {
|
|
'': {name: 'octicon-blocked', class: 'tw-text-red'},
|
|
'added': {name: 'octicon-diff-added', class: 'tw-text-green'},
|
|
'modified': {name: 'octicon-diff-modified', class: 'tw-text-yellow'},
|
|
'deleted': {name: 'octicon-diff-removed', class: 'tw-text-red'},
|
|
'renamed': {name: 'octicon-diff-renamed', class: 'tw-text-teal'},
|
|
'copied': {name: 'octicon-diff-renamed', class: 'tw-text-green'}, // there is no octicon for copied, so renamed should be ok
|
|
'typechanged': {name: 'octicon-diff-modified', class: 'tw-text-green'},
|
|
'unmerged': {name: 'octicon-blocked', class: 'tw-text-red'},
|
|
'unknown': {name: 'octicon-blocked', class: 'tw-text-red'},
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<template v-if="item.EntryMode === 'tree'">
|
|
<div class="item-directory" :class="{ 'viewed': item.IsViewed }" :title="item.DisplayName" @click.stop="collapsed = !collapsed">
|
|
<!-- directory -->
|
|
<SvgIcon :name="collapsed ? 'octicon-chevron-right' : 'octicon-chevron-down'"/>
|
|
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
<span class="tw-contents" v-html="collapsed ? store.folderIcon : store.folderOpenIcon"/>
|
|
<span class="gt-ellipsis">{{ item.DisplayName }}</span>
|
|
</div>
|
|
|
|
<div v-show="!collapsed" class="sub-items">
|
|
<DiffFileTreeItem v-for="childItem in item.Children!" :key="childItem.DisplayName" :item="childItem"/>
|
|
</div>
|
|
</template>
|
|
<a
|
|
v-else
|
|
class="item-file" :class="{ 'selected': store.selectedItem === '#diff-' + item.NameHash, 'viewed': item.IsViewed }"
|
|
:title="item.DisplayName" :href="'#diff-' + item.NameHash"
|
|
>
|
|
<!-- file -->
|
|
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
<span class="tw-contents" v-html="item.FileIcon"/>
|
|
<span class="gt-ellipsis tw-flex-1">{{ item.DisplayName }}</span>
|
|
<SvgIcon v-bind="diffStatusIcons[item.DiffStatus] ?? diffStatusIcons['']"/>
|
|
</a>
|
|
</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,
|
|
.item-directory.viewed {
|
|
color: var(--color-text-light-3);
|
|
}
|
|
|
|
.item-directory {
|
|
user-select: none;
|
|
}
|
|
|
|
.item-file,
|
|
.item-directory {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25em;
|
|
padding: 6px;
|
|
}
|
|
|
|
.item-file:hover,
|
|
.item-directory:hover {
|
|
color: var(--color-text);
|
|
background: var(--color-hover);
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|