Rewrite the DiffFileTreeItem and fix misalignment (#26565)

Fix some layout / user-interaction problems and close #25650 , the code
has been simplified (+46 −108)

<details>


![image](https://github.com/go-gitea/gitea/assets/2114189/55c38812-3338-4048-9137-0cae0ef213e8)

</details>

---------

Co-authored-by: delvh <dev.lh@web.de>
This commit is contained in:
wxiaoguang 2023-08-19 03:55:56 +08:00 committed by GitHub
parent 30e5278d1b
commit 48c4a7e75c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 53 additions and 115 deletions

View file

@ -1,9 +1,7 @@
<template> <template>
<div v-if="store.fileTreeIsVisible" class="gt-mr-3 gt-mt-3 diff-detail-box"> <div v-if="store.fileTreeIsVisible" class="gt-mr-3 gt-mt-3 diff-detail-box">
<!-- only render the tree if we're visible. in many cases this is something that doesn't change very often --> <!-- only render the tree if we're visible. in many cases this is something that doesn't change very often -->
<div class="ui list">
<DiffFileTreeItem v-for="item in fileTree" :key="item.name" :item="item"/> <DiffFileTreeItem v-for="item in fileTree" :key="item.name" :item="item"/>
</div>
<div v-if="store.isIncomplete" class="gt-pt-2"> <div v-if="store.isIncomplete" class="gt-pt-2">
<a :class="['ui', 'basic', 'tiny', 'button', store.isLoadingNewData ? 'disabled' : '']" @click.stop="loadMoreData">{{ store.showMoreMessage }}</a> <a :class="['ui', 'basic', 'tiny', 'button', store.isLoadingNewData ? 'disabled' : '']" @click.stop="loadMoreData">{{ store.showMoreMessage }}</a>
</div> </div>

View file

@ -1,40 +1,24 @@
<template> <template>
<div v-show="show" :title="item.name">
<!--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"--> <!--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"-->
<div class="item" :class="[item.isFile ? 'filewrapper gt-p-1 gt-ac' : '', store.selectedItem === '#diff-' + item.file?.NameHash ? 'selected' : '']">
<!-- Files -->
<SvgIcon
v-if="item.isFile"
name="octicon-file"
class="svg-icon file"
/>
<a <a
v-if="item.isFile" v-if="item.isFile" class="item-file"
:class="['file gt-ellipsis', {'viewed': item.file.IsViewed}]" :class="{'selected': store.selectedItem === '#diff-' + item.file.NameHash, 'viewed': item.file.IsViewed}"
:href="item.isFile ? '#diff-' + item.file.NameHash : ''" :title="item.name" :href="'#diff-' + item.file.NameHash"
>{{ item.name }}</a> >
<SvgIcon <!-- file -->
v-if="item.isFile" <SvgIcon name="octicon-file"/>
:name="getIconForDiffType(item.file.Type)" <span class="gt-ellipsis gt-f1">{{ item.name }}</span>
:class="['svg-icon', getIconForDiffType(item.file.Type), 'status']" <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">
<!-- Directories --> <!-- directory -->
<div v-if="!item.isFile" class="directory gt-p-1 gt-ac" @click.stop="handleClick(item.isFile)"> <SvgIcon :name="collapsed ? 'octicon-chevron-right' : 'octicon-chevron-down'"/>
<SvgIcon <SvgIcon class="text primary" name="octicon-file-directory-fill"/>
class="svg-icon"
:name="collapsed ? 'octicon-chevron-right' : 'octicon-chevron-down'"
/>
<SvgIcon
class="svg-icon directory"
name="octicon-file-directory-fill"
/>
<span class="gt-ellipsis">{{ item.name }}</span> <span class="gt-ellipsis">{{ item.name }}</span>
</div> </div>
<div v-show="!collapsed">
<DiffFileTreeItem v-for="childItem in item.children" :key="childItem.name" :item="childItem" class="list"/> <div v-if="item.children?.length" v-show="!collapsed" class="sub-items">
</div> <DiffFileTreeItem v-for="childItem in item.children" :key="childItem.name" :item="childItem"/>
</div>
</div> </div>
</template> </template>
@ -49,30 +33,19 @@ export default {
type: Object, type: Object,
required: true required: true
}, },
show: {
type: Boolean,
required: false,
default: true
},
}, },
data: () => ({ data: () => ({
store: diffTreeStore(), store: diffTreeStore(),
collapsed: false, collapsed: false,
}), }),
methods: { methods: {
handleClick(itemIsFile) {
if (itemIsFile) {
return;
}
this.collapsed = !this.collapsed;
},
getIconForDiffType(pType) { getIconForDiffType(pType) {
const diffTypes = { const diffTypes = {
1: 'octicon-diff-added', 1: {name: 'octicon-diff-added', classes: ['text', 'green']},
2: 'octicon-diff-modified', 2: {name: 'octicon-diff-modified', classes: ['text', 'yellow']},
3: 'octicon-diff-removed', 3: {name: 'octicon-diff-removed', classes: ['text', 'red']},
4: 'octicon-diff-renamed', 4: {name: 'octicon-diff-renamed', classes: ['text', 'teal']},
5: 'octicon-diff-modified', // there is no octicon for copied, so modified should be ok 5: {name: 'octicon-diff-renamed', classes: ['text', 'green']}, // there is no octicon for copied, so renamed should be ok
}; };
return diffTypes[pType]; return diffTypes[pType];
}, },
@ -81,75 +54,42 @@ export default {
</script> </script>
<style scoped> <style scoped>
.svg-icon.status { a, a:hover {
float: right; text-decoration: none;
}
.svg-icon.file {
color: var(--color-secondary-dark-7);
}
.svg-icon.directory {
color: var(--color-primary);
}
.svg-icon.octicon-diff-modified {
color: var(--color-yellow);
}
.svg-icon.octicon-diff-added {
color: var(--color-green);
}
.svg-icon.octicon-diff-removed {
color: var(--color-red);
}
.svg-icon.octicon-diff-renamed {
color: var(--color-teal);
}
.item.filewrapper {
display: grid !important;
grid-template-columns: 20px 7fr 1fr;
padding-left: 18px !important;
}
.item.filewrapper:hover, div.directory:hover {
color: var(--color-text); color: var(--color-text);
background: var(--color-hover);
border-radius: 4px;
} }
.item.filewrapper.selected { .sub-items {
padding-left: 9px;
}
.item-file {
margin-left: 20px;
}
.item-file.selected {
color: var(--color-text); color: var(--color-text);
background: var(--color-active); background: var(--color-active);
border-radius: 4px; border-radius: 4px;
} }
div.directory { .item-file.viewed {
display: grid;
grid-template-columns: 18px 20px auto;
user-select: none;
cursor: pointer;
}
div.list {
padding-bottom: 0 !important;
padding-top: inherit !important;
}
a {
text-decoration: none;
color: var(--color-text);
}
a:hover {
text-decoration: none;
color: var(--color-text);
}
a.file.viewed {
color: var(--color-text-light-3); color: var(--color-text-light-3);
} }
.item-file,
.item-directory {
display: flex;
align-items: center;
gap: 0.25em;
padding: 2px;
}
.item-file:hover,
.item-directory:hover {
color: var(--color-text);
background: var(--color-hover);
border-radius: 4px;
cursor: pointer;
}
</style> </style>