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 <[email protected]>

Author: silverwind

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">

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;
-  }
-}

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;

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;