aboutsummaryrefslogtreecommitdiffstats
path: root/web_src/js
diff options
context:
space:
mode:
authorsilverwind <me@silverwind.io>2024-11-28 13:25:21 +0100
committerGitHub <noreply@github.com>2024-11-28 12:25:21 +0000
commita1f56f83bff56f86180e59742efd3748908b82c1 (patch)
tree1a9e56f4af4865be68c05a80956473e6a0303c01 /web_src/js
parent00f8090de4b42305f6e717dc2cdb32c14b4a8fe2 (diff)
downloadgitea-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.vue8
-rw-r--r--web_src/js/svg.ts2
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,