mirror of
https://github.com/go-gitea/gitea
synced 2024-12-22 16:44:26 +00:00
Improve diff file tree (#32658)
- Unfolded directories now show a "open" icon - Prevent accidential text selection while toggling directories - Increase vertical item padding from 3px to 6px <img width="257" alt="image" src="https://github.com/user-attachments/assets/d5372306-a666-4732-827e-3ddeee3c711e">
This commit is contained in:
parent
00f8090de4
commit
a1f56f83bf
@ -51,7 +51,7 @@ function getIconForDiffType(pType) {
|
|||||||
<div v-else class="item-directory" :title="item.name" @click.stop="collapsed = !collapsed">
|
<div v-else class="item-directory" :title="item.name" @click.stop="collapsed = !collapsed">
|
||||||
<!-- directory -->
|
<!-- directory -->
|
||||||
<SvgIcon :name="collapsed ? 'octicon-chevron-right' : 'octicon-chevron-down'"/>
|
<SvgIcon :name="collapsed ? 'octicon-chevron-right' : 'octicon-chevron-down'"/>
|
||||||
<SvgIcon class="text primary" name="octicon-file-directory-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>
|
||||||
|
|
||||||
@ -87,12 +87,16 @@ a, a:hover {
|
|||||||
color: var(--color-text-light-3);
|
color: var(--color-text-light-3);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.item-directory {
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
.item-file,
|
.item-file,
|
||||||
.item-directory {
|
.item-directory {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 0.25em;
|
gap: 0.25em;
|
||||||
padding: 3px 6px;
|
padding: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.item-file:hover,
|
.item-file:hover,
|
||||||
|
@ -27,6 +27,7 @@ import octiconDownload from '../../public/assets/img/svg/octicon-download.svg';
|
|||||||
import octiconEye from '../../public/assets/img/svg/octicon-eye.svg';
|
import octiconEye from '../../public/assets/img/svg/octicon-eye.svg';
|
||||||
import octiconFile from '../../public/assets/img/svg/octicon-file.svg';
|
import octiconFile from '../../public/assets/img/svg/octicon-file.svg';
|
||||||
import octiconFileDirectoryFill from '../../public/assets/img/svg/octicon-file-directory-fill.svg';
|
import octiconFileDirectoryFill from '../../public/assets/img/svg/octicon-file-directory-fill.svg';
|
||||||
|
import octiconFileDirectoryOpenFill from '../../public/assets/img/svg/octicon-file-directory-open-fill.svg';
|
||||||
import octiconFilter from '../../public/assets/img/svg/octicon-filter.svg';
|
import octiconFilter from '../../public/assets/img/svg/octicon-filter.svg';
|
||||||
import octiconGear from '../../public/assets/img/svg/octicon-gear.svg';
|
import octiconGear from '../../public/assets/img/svg/octicon-gear.svg';
|
||||||
import octiconGitBranch from '../../public/assets/img/svg/octicon-git-branch.svg';
|
import octiconGitBranch from '../../public/assets/img/svg/octicon-git-branch.svg';
|
||||||
@ -101,6 +102,7 @@ const svgs = {
|
|||||||
'octicon-eye': octiconEye,
|
'octicon-eye': octiconEye,
|
||||||
'octicon-file': octiconFile,
|
'octicon-file': octiconFile,
|
||||||
'octicon-file-directory-fill': octiconFileDirectoryFill,
|
'octicon-file-directory-fill': octiconFileDirectoryFill,
|
||||||
|
'octicon-file-directory-open-fill': octiconFileDirectoryOpenFill,
|
||||||
'octicon-filter': octiconFilter,
|
'octicon-filter': octiconFilter,
|
||||||
'octicon-gear': octiconGear,
|
'octicon-gear': octiconGear,
|
||||||
'octicon-git-branch': octiconGitBranch,
|
'octicon-git-branch': octiconGitBranch,
|
||||||
|
Loading…
Reference in New Issue
Block a user