Mirrors/gitea
0
0
Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2025-07-20 23:28:28 +02:00
Code Issues Activity

fix

Browse Source
This commit is contained in:
Kerwin Bryant 2025-01-15 01:29:48 +00:00
parent ca964c1ce9
commit 76c82b21a5
1 changed files with 37 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
web_src/js/components/ViewFileTreeItem.vue
View File

@ -54,9 +54,11 @@ const doGotoSubModule = () => {
@click.stop="doGotoSubModule" @click.stop="doGotoSubModule"
> >
<!-- submodule --> <!-- submodule -->
<div class="item-content">
<SvgIcon class="text primary" name="octicon-file-submodule"/> <SvgIcon class="text primary" name="octicon-file-submodule"/>
<span class="gt-ellipsis tw-flex-1">{{ item.name }}</span> <span class="gt-ellipsis tw-flex-1">{{ item.name }}</span>
</div> </div>
</div>
<div <div
v-else-if="item.type === 'symlink'" class="item-symlink" v-else-if="item.type === 'symlink'" class="item-symlink"
:class="{'selected': selectedItem.value === item.path}" :class="{'selected': selectedItem.value === item.path}"
@ -64,9 +66,11 @@ const doGotoSubModule = () => {
@click.stop="doLoadFileContent" @click.stop="doLoadFileContent"
> >
<!-- symlink --> <!-- symlink -->
<div class="item-content">
<SvgIcon name="octicon-file-symlink-file"/> <SvgIcon name="octicon-file-symlink-file"/>
<span class="gt-ellipsis tw-flex-1">{{ item.name }}</span> <span class="gt-ellipsis tw-flex-1">{{ item.name }}</span>
</div> </div>
</div>
<div <div
v-else-if="item.type !== 'tree'" class="item-file" v-else-if="item.type !== 'tree'" class="item-file"
:class="{'selected': selectedItem.value === item.path}" :class="{'selected': selectedItem.value === item.path}"
@ -74,9 +78,11 @@ const doGotoSubModule = () => {
@click.stop="doLoadFileContent" @click.stop="doLoadFileContent"
> >
<!-- file --> <!-- file -->
<div class="item-content">
<SvgIcon name="octicon-file"/> <SvgIcon name="octicon-file"/>
<span class="gt-ellipsis tw-flex-1">{{ item.name }}</span> <span class="gt-ellipsis tw-flex-1">{{ item.name }}</span>
</div> </div>
</div>
<div <div
v-else class="item-directory" v-else class="item-directory"
:class="{'selected': selectedItem.value === item.path}" :class="{'selected': selectedItem.value === item.path}"
@ -84,11 +90,15 @@ const doGotoSubModule = () => {
@click.stop="doLoadDirContent" @click.stop="doLoadDirContent"
> >
<!-- directory --> <!-- directory -->
<div class="item-toggle">
<SvgIcon v-if="isLoading" name="octicon-sync" class="job-status-rotate"/> <SvgIcon v-if="isLoading" name="octicon-sync" class="job-status-rotate"/>
<SvgIcon v-else :name="collapsed ? 'octicon-chevron-right' : 'octicon-chevron-down'" @click.stop="doLoadChildren"/> <SvgIcon v-else :name="collapsed ? 'octicon-chevron-right' : 'octicon-chevron-down'" @click.stop="doLoadChildren"/>
</div>
<div class="item-content">
<SvgIcon class="text primary" :name="collapsed ? 'octicon-file-directory-fill' : 'octicon-file-directory-open-fill'"/> <SvgIcon class="text primary" :name="collapsed ? 'octicon-file-directory-fill' : 'octicon-file-directory-open-fill'"/>
<span class="gt-ellipsis">{{ item.name }}</span> <span class="gt-ellipsis">{{ item.name }}</span>
</div> </div>
</div>
<div v-if="children?.length" v-show="!collapsed" class="sub-items"> <div v-if="children?.length" v-show="!collapsed" class="sub-items">
<ViewFileTreeItem v-for="childItem in children" :key="childItem.name" :item="childItem" :selected-item="selectedItem" :load-content="loadContent" :load-children="loadChildren"/> <ViewFileTreeItem v-for="childItem in children" :key="childItem.name" :item="childItem" :selected-item="selectedItem" :load-content="loadContent" :load-children="loadChildren"/>
@ -99,16 +109,10 @@ const doGotoSubModule = () => {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1px; gap: 1px;
margin-left: 13px; margin-left: 14px;
border-left: 1px solid var(--color-secondary); border-left: 1px solid var(--color-secondary);
} }
.sub-items .item-file,
.sub-items .item-symlink,
.sub-items .item-submodule {
padding-left: 18px;
}
.item-directory.selected, .item-directory.selected,
.item-symlink.selected, .item-symlink.selected,
.item-file.selected { .item-file.selected {
@ -125,8 +129,9 @@ const doGotoSubModule = () => {
.item-symlink, .item-symlink,
.item-submodule, .item-submodule,
.item-directory { .item-directory {
display: flex; display: grid;
align-items: center; grid-template-columns: 16px 1fr;
grid-template-areas: "toggle content";
gap: 0.25em; gap: 0.25em;
padding: 6px; padding: 6px;
} }
@ -140,4 +145,17 @@ const doGotoSubModule = () => {
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
} }
.item-toggle {
grid-area: toggle;
display: flex;
align-items: center;
}
.item-content {
grid-area: content;
display: flex;
align-items: center;
gap: 0.25em;
}
</style> </style>