From 74b06d4f5cc8dd11140a778768d384c4240ecd66 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sun, 15 Dec 2024 17:56:56 +0100
Subject: [PATCH] Repo file list enhancements (#32835)
1. restore background color
2. fix border radius on top/bottom and on hover
3. parent link is now full-row again, much easier to click
4. parent link now uses directory icon, matching github
5 changed grid layout to remove auto width on file name column which could get too small.
6. mobile layout now shows more of the filename.
---------
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
---
templates/repo/view_list.tmpl | 6 ++--
web_src/css/repo/home-file-list.css | 44 +++++++++++++++++-------
web_src/css/themes/theme-gitea-dark.css | 1 +
web_src/css/themes/theme-gitea-light.css | 1 +
4 files changed, 37 insertions(+), 15 deletions(-)
diff --git a/templates/repo/view_list.tmpl b/templates/repo/view_list.tmpl
index 0fdb45e574..2d555e4c2e 100644
--- a/templates/repo/view_list.tmpl
+++ b/templates/repo/view_list.tmpl
@@ -5,9 +5,9 @@
<div>{{if and .LatestCommit .LatestCommit.Committer}}{{DateUtils.TimeSince .LatestCommit.Committer.When}}{{end}}</div>
</div>
{{if .HasParentPath}}
- <div class="repo-file-line">
- {{svg "octicon-reply"}} <a class="muted" href="{{.BranchLink}}{{if .ParentPath}}{{PathEscapeSegments .ParentPath}}{{end}}">..</a>
- </div>
+ <a class="repo-file-line parent-link silenced" href="{{.BranchLink}}{{if .ParentPath}}{{PathEscapeSegments .ParentPath}}{{end}}">
+ {{svg "octicon-file-directory-fill"}} ..
+ </a>
{{end}}
{{range $item := .Files}}
<div class="repo-file-item">
diff --git a/web_src/css/repo/home-file-list.css b/web_src/css/repo/home-file-list.css
index 285b823d57..19ba1f2bcb 100644
--- a/web_src/css/repo/home-file-list.css
+++ b/web_src/css/repo/home-file-list.css
@@ -1,12 +1,23 @@
#repo-files-table {
width: 100%;
display: grid;
- grid-template-columns: auto 1fr auto;
- border: 1px solid var(--color-light-border);
+ grid-template-columns: 2fr 3fr auto;
+ border: 1px solid var(--color-secondary);
+ background: var(--color-box-body);
border-radius: var(--border-radius);
margin: 10px 0; /* match the "clone-panel-popup" margin to avoid "visual double-border" */
}
+@media (max-width: 767.98px) {
+ #repo-files-table {
+ grid-template-columns: auto 1fr auto;
+ }
+}
+
+#repo-files-table .repo-file-cell.name .svg {
+ margin-right: 2px;
+}
+
#repo-files-table .svg.octicon-file-directory-fill,
#repo-files-table .svg.octicon-file-submodule {
color: var(--color-primary);
@@ -22,18 +33,28 @@
display: contents;
}
-#repo-files-table .repo-file-item:hover > .repo-file-cell {
- background: var(--color-hover);
+#repo-files-table .repo-file-item:hover > .repo-file-cell,
+#repo-files-table .parent-link:hover {
+ background: var(--color-hover-opaque);
}
#repo-files-table .repo-file-line,
#repo-files-table .repo-file-cell {
- border-top: 1px solid var(--color-light-border);
+ border-top: 1px solid var(--color-secondary);
padding: 8px 10px;
}
#repo-files-table .repo-file-line:first-child {
border-top: none;
+ border-radius: var(--border-radius) var(--border-radius) 0 0;
+}
+
+#repo-files-table .repo-file-item:last-child .repo-file-cell:first-child {
+ border-bottom-left-radius: calc(var(--border-radius) - 1px);
+}
+
+#repo-files-table .repo-file-item:last-child .repo-file-cell:last-child {
+ border-bottom-right-radius: calc(var(--border-radius) - 1px);
}
#repo-files-table .repo-file-line {
@@ -48,12 +69,17 @@
}
#repo-files-table .repo-file-cell.name {
- max-width: 300px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
+@media (max-width: 767.98px) {
+ #repo-files-table .repo-file-cell.name {
+ max-width: 35vw;
+ }
+}
+
#repo-files-table .repo-file-cell.message {
white-space: nowrap;
overflow: hidden;
@@ -66,9 +92,3 @@
white-space: nowrap;
color: var(--color-text-light-1);
}
-
-@media (max-width: 767.98px) {
- #repo-files-table .repo-file-cell.name {
- max-width: 150px;
- }
-}
diff --git a/web_src/css/themes/theme-gitea-dark.css b/web_src/css/themes/theme-gitea-dark.css
index 85de7e210a..9bc7747697 100644
--- a/web_src/css/themes/theme-gitea-dark.css
+++ b/web_src/css/themes/theme-gitea-dark.css
@@ -203,6 +203,7 @@
--color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)));
--color-light-border: #e8f3ff28;
--color-hover: #e8f3ff19;
+ --color-hover-opaque: #21252a; /* TODO: color-mix(in srgb, var(--color-body), var(--color-hover)); */
--color-active: #e8f3ff24;
--color-menu: #171a1e;
--color-card: #171a1e;
diff --git a/web_src/css/themes/theme-gitea-light.css b/web_src/css/themes/theme-gitea-light.css
index 0bdfd076d6..d7f9debf90 100644
--- a/web_src/css/themes/theme-gitea-light.css
+++ b/web_src/css/themes/theme-gitea-light.css
@@ -203,6 +203,7 @@
--color-light-mimic-enabled: rgba(0, 0, 0, calc(6 / 255 * 222 / 255 / var(--opacity-disabled)));
--color-light-border: #0000171d;
--color-hover: #00001708;
+ --color-hover-opaque: #f1f3f5; /* TODO: color-mix(in srgb, var(--color-body), var(--color-hover)); */
--color-active: #00001714;
--color-menu: #f8f9fb;
--color-card: #f8f9fb;