diff options
author | silverwind <me@silverwind.io> | 2024-11-28 13:25:21 +0100 |
---|---|---|
committer | GitHub <noreply@github.com> | 2024-11-28 12:25:21 +0000 |
commit | a1f56f83bff56f86180e59742efd3748908b82c1 (patch) | |
tree | 1a9e56f4af4865be68c05a80956473e6a0303c01 /web_src/js | |
parent | 00f8090de4b42305f6e717dc2cdb32c14b4a8fe2 (diff) | |
download | gitea-a1f56f83bff56f86180e59742efd3748908b82c1.tar.gz gitea-a1f56f83bff56f86180e59742efd3748908b82c1.zip |
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">
Diffstat (limited to 'web_src/js')
-rw-r--r-- | web_src/js/components/DiffFileTreeItem.vue | 8 | ||||
-rw-r--r-- | web_src/js/svg.ts | 2 |
2 files changed, 8 insertions, 2 deletions
diff --git a/web_src/js/components/DiffFileTreeItem.vue b/web_src/js/components/DiffFileTreeItem.vue index 84431ff372..12cafd8f1b 100644 --- a/web_src/js/components/DiffFileTreeItem.vue +++ b/web_src/js/components/DiffFileTreeItem.vue @@ -51,7 +51,7 @@ function getIconForDiffType(pType) { <div v-else class="item-directory" :title="item.name" @click.stop="collapsed = !collapsed"> <!-- directory --> <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> </div> @@ -87,12 +87,16 @@ a, a:hover { color: var(--color-text-light-3); } +.item-directory { + user-select: none; +} + .item-file, .item-directory { display: flex; align-items: center; gap: 0.25em; - padding: 3px 6px; + padding: 6px; } .item-file:hover, diff --git a/web_src/js/svg.ts b/web_src/js/svg.ts index cbb1af4ba1..3a0f2ed53c 100644 --- a/web_src/js/svg.ts +++ b/web_src/js/svg.ts @@ -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 octiconFile from '../../public/assets/img/svg/octicon-file.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 octiconGear from '../../public/assets/img/svg/octicon-gear.svg'; import octiconGitBranch from '../../public/assets/img/svg/octicon-git-branch.svg'; @@ -101,6 +102,7 @@ const svgs = { 'octicon-eye': octiconEye, 'octicon-file': octiconFile, 'octicon-file-directory-fill': octiconFileDirectoryFill, + 'octicon-file-directory-open-fill': octiconFileDirectoryOpenFill, 'octicon-filter': octiconFilter, 'octicon-gear': octiconGear, 'octicon-git-branch': octiconGitBranch, |