opensource/gitea
1
0
Fork 0
mirror of https://gitcode.com/gitea/gitea.git synced 2025-05-22 09:37:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fix vertical centering of file tree icons and use entryIcon for submodules/symlinks (#34137)

Browse Source 
In the file tree, the icons are not vertically centered, which affects
the overall visual consistency.
Currently, the icons of submodules and symlinks do not adopt the value
of entryIcon, resulting in inconsistent icon display.

before:
![3000-gogitea-gitea-y4ulxr46c4k ws-us118 gitpod io_test_test
gitea_src_branch_main_README md
(3)](https://github.com/user-attachments/assets/d521b89f-909a-43f9-8f39-787b0243b159)

after:
![3000-gogitea-gitea-y4ulxr46c4k ws-us118 gitpod io_test_test
gitea_src_branch_main_README md
(2)](https://github.com/user-attachments/assets/4866807f-c890-4709-b595-7086011e5231)

---------

Co-authored-by: silverwind <me@silverwind.io>
This commit is contained in:
Kerwin Bryant
2025-04-10 09:10:16 +08:00
committed by GitHub
parent fac6b87dd2
commit 02e49a0f47
10 changed files with 36 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -58,7 +58,8 @@ const doGotoSubModule = () => {
>
<!-- submodule -->
<div class="item-content">
<SvgIcon class="text primary" name="octicon-file-submodule"/>
<!-- eslint-disable-next-line vue/no-v-html -->
<span class="tw-contents" v-html="item.entryIcon"/>
<span class="gt-ellipsis tw-flex-1">{{ item.entryName }}</span>
</div>
</div>
@ -70,7 +71,8 @@ const doGotoSubModule = () => {
>
<!-- symlink -->
<div class="item-content">
<SvgIcon name="octicon-file-symlink-file"/>
<!-- eslint-disable-next-line vue/no-v-html -->
<span class="tw-contents" v-html="item.entryIcon"/>
<span class="gt-ellipsis tw-flex-1">{{ item.entryName }}</span>
</div>
</div>
@ -83,7 +85,7 @@ const doGotoSubModule = () => {
<!-- file -->
<div class="item-content">
<!-- eslint-disable-next-line vue/no-v-html -->
<span v-html="item.entryIcon"/>
<span class="tw-contents" v-html="item.entryIcon"/>
<span class="gt-ellipsis tw-flex-1">{{ item.entryName }}</span>
</div>
</div>
@ -95,13 +97,12 @@ const doGotoSubModule = () => {
>
<!-- directory -->
<div class="item-toggle">
<!-- FIXME: use a general and global class for this animation -->
<SvgIcon v-if="isLoading" name="octicon-sync" class="job-status-rotate"/>
<SvgIcon v-if="isLoading" name="octicon-sync" class="circular-spin"/>
<SvgIcon v-else :name="collapsed ? 'octicon-chevron-right' : 'octicon-chevron-down'" @click.stop="doLoadChildren"/>
</div>
<div class="item-content">
<!-- eslint-disable-next-line vue/no-v-html -->
<span class="text primary" v-html="(!collapsed && item.entryIconOpen) ? item.entryIconOpen : item.entryIcon"/>
<span class="tw-contents" v-html="(!collapsed && item.entryIconOpen) ? item.entryIconOpen : item.entryIcon"/>
<span class="gt-ellipsis">{{ item.entryName }}</span>
</div>
</div>
@ -154,7 +155,7 @@ const doGotoSubModule = () => {
grid-area: content;
display: flex;
align-items: center;
gap: 0.25em;
gap: 0.5em;
text-overflow: ellipsis;
min-width: 0;
}