Improve diff file tree (#32658)
Some checks are pending
release-nightly / nightly-binary (push) Waiting to run
release-nightly / nightly-docker-rootful (push) Waiting to run
release-nightly / nightly-docker-rootless (push) Waiting to run

- 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:
silverwind 2024-11-28 13:25:21 +01:00 committed by GitHub
parent 00f8090de4
commit a1f56f83bf
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 8 additions and 2 deletions

View File

@ -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,

View File

@ -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,