Skip to content

Commit 4814f43

Browse files
authored
Fix repo home file list (#32788)
1. use grid instead of table, completely drop "ui table" from that list 2. move some "commit sign" related styles into a new file by the way (no change) because I need to figure out where `#repo-files-table` is used. 3. move legacy "branch/tag selector" related code into repo-legacy.ts, now there are 13 `import $` files left.
1 parent 18061af commit 4814f43

File tree

11 files changed

+441
-559
lines changed

11 files changed

+441
-559
lines changed

templates/repo/home.tmpl

+4-2
Original file line numberDiff line numberDiff line change
@@ -102,8 +102,7 @@
102102
{{end}}
103103
</div>
104104

105-
{{/* by default, the row-right flex grows, but on non-root tree path, it should not because the row-left might contain a long path */}}
106-
<div class="repo-button-row-right {{if not $isTreePathRoot}}tw-flex-grow-0{{end}}">
105+
<div class="repo-button-row-right">
107106
<!-- Only show clone panel in repository home page -->
108107
{{if $isTreePathRoot}}
109108
{{template "repo/clone_panel" .}}
@@ -124,6 +123,9 @@
124123
{{template "repo/code/upstream_diverging_info" .}}
125124
{{end}}
126125
{{template "repo/view_list" .}}
126+
{{if and .ReadmeExist (or .IsMarkup .IsPlainText)}}
127+
{{template "repo/view_file" .}}
128+
{{end}}
127129
{{end}}
128130
</div>
129131

templates/repo/latest_commit.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{{if not .LatestCommit}}
2-
<div class="ui active tiny slow centered inline">…</div>
2+
33
{{else}}
44
{{if .LatestCommitUser}}
55
{{ctx.AvatarUtils.Avatar .LatestCommitUser 24 "tw-mr-1"}}

templates/repo/view_list.tmpl

+52-68
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,57 @@
1-
<table id="repo-files-table" class="ui single line fixed table tw-mt-0" {{if .HasFilesWithoutLatestCommit}}hx-indicator="tr.notready td.message span" hx-trigger="load" hx-swap="morph" hx-post="{{.LastCommitLoaderURL}}"{{end}}>
2-
<thead>
3-
<tr class="commit-list">
4-
<th class="tw-overflow-hidden" colspan="2">
5-
<div class="tw-flex">
6-
<div class="latest-commit">
7-
{{template "repo/latest_commit" .}}
8-
</div>
9-
</div>
10-
</th>
11-
<th class="text grey right age">{{if .LatestCommit}}{{if .LatestCommit.Committer}}{{DateUtils.TimeSince .LatestCommit.Committer.When}}{{end}}{{end}}</th>
12-
</tr>
13-
</thead>
14-
<tbody>
15-
{{if .HasParentPath}}
16-
<tr class="has-parent">
17-
<td colspan="3">{{svg "octicon-reply"}}<a class="muted" href="{{.BranchLink}}{{if .ParentPath}}{{PathEscapeSegments .ParentPath}}{{end}}">..</a></td>
18-
</tr>
19-
{{end}}
20-
{{range $item := .Files}}
1+
{{/* use grid layout, still use the old ID because there are many other CSS styles depending on this ID */}}
2+
<div id="repo-files-table" {{if .HasFilesWithoutLatestCommit}}hx-indicator="#repo-files-table .repo-file-cell.message" hx-trigger="load" hx-swap="morph" hx-post="{{.LastCommitLoaderURL}}"{{end}}>
3+
<div class="repo-file-line">
4+
<div class="latest-commit">{{template "repo/latest_commit" .}}</div>
5+
<div>{{if and .LatestCommit .LatestCommit.Committer}}{{DateUtils.TimeSince .LatestCommit.Committer.When}}{{end}}</div>
6+
</div>
7+
{{if .HasParentPath}}
8+
<div class="repo-file-line">
9+
{{svg "octicon-reply"}} <a class="muted" href="{{.BranchLink}}{{if .ParentPath}}{{PathEscapeSegments .ParentPath}}{{end}}">..</a>
10+
</div>
11+
{{end}}
12+
{{range $item := .Files}}
13+
<div class="repo-file-item">
2114
{{$entry := $item.Entry}}
2215
{{$commit := $item.Commit}}
2316
{{$subModuleFile := $item.SubModuleFile}}
24-
<tr data-entryname="{{$entry.Name}}" data-ready="{{if $commit}}true{{else}}false{{end}}" class="{{if not $commit}}not{{end}}ready entry">
25-
<td class="name four wide">
26-
<span class="truncate">
27-
{{if $entry.IsSubModule}}
28-
{{svg "octicon-file-submodule"}}
29-
{{$refURL := $subModuleFile.RefURL AppUrl $.Repository.FullName $.SSHDomain}} {{/* FIXME: the usage of AppUrl seems incorrect, it would be fixed in the future, use AppSubUrl instead */}}
30-
{{if $refURL}}
31-
<a class="muted" href="{{$refURL}}">{{$entry.Name}}</a><span class="at">@</span><a href="{{$refURL}}/commit/{{PathEscape $subModuleFile.RefID}}">{{ShortSha $subModuleFile.RefID}}</a>
17+
<div class="repo-file-cell name {{if not $commit}}notready{{end}}">
18+
{{if $entry.IsSubModule}}
19+
{{svg "octicon-file-submodule"}}
20+
{{$refURL := $subModuleFile.RefURL AppUrl $.Repository.FullName $.SSHDomain}} {{/* FIXME: the usage of AppUrl seems incorrect, it would be fixed in the future, use AppSubUrl instead */}}
21+
{{if $refURL}}
22+
<a class="muted" href="{{$refURL}}">{{$entry.Name}}</a><span class="at">@</span><a href="{{$refURL}}/commit/{{PathEscape $subModuleFile.RefID}}">{{ShortSha $subModuleFile.RefID}}</a>
23+
{{else}}
24+
{{$entry.Name}}<span class="at">@</span>{{ShortSha $subModuleFile.RefID}}
25+
{{end}}
26+
{{else}}
27+
{{if $entry.IsDir}}
28+
{{$subJumpablePathName := $entry.GetSubJumpablePathName}}
29+
{{svg "octicon-file-directory-fill"}}
30+
<a class="muted" href="{{$.TreeLink}}/{{PathEscapeSegments $subJumpablePathName}}" title="{{$subJumpablePathName}}">
31+
{{$subJumpablePathFields := StringUtils.Split $subJumpablePathName "/"}}
32+
{{$subJumpablePathFieldLast := (Eval (len $subJumpablePathFields) "-" 1)}}
33+
{{if eq $subJumpablePathFieldLast 0}}
34+
{{$subJumpablePathName}}
3235
{{else}}
33-
{{$entry.Name}}<span class="at">@</span>{{ShortSha $subModuleFile.RefID}}
36+
{{$subJumpablePathPrefixes := slice $subJumpablePathFields 0 $subJumpablePathFieldLast}}
37+
<span class="text light-2">{{StringUtils.Join $subJumpablePathPrefixes "/"}}</span>/{{index $subJumpablePathFields $subJumpablePathFieldLast}}
3438
{{end}}
35-
{{else}}
36-
{{if $entry.IsDir}}
37-
{{$subJumpablePathName := $entry.GetSubJumpablePathName}}
38-
{{svg "octicon-file-directory-fill"}}
39-
<a class="muted" href="{{$.TreeLink}}/{{PathEscapeSegments $subJumpablePathName}}" title="{{$subJumpablePathName}}">
40-
{{$subJumpablePathFields := StringUtils.Split $subJumpablePathName "/"}}
41-
{{$subJumpablePathFieldLast := (Eval (len $subJumpablePathFields) "-" 1)}}
42-
{{if eq $subJumpablePathFieldLast 0}}
43-
{{$subJumpablePathName}}
44-
{{else}}
45-
{{$subJumpablePathPrefixes := slice $subJumpablePathFields 0 $subJumpablePathFieldLast}}
46-
<span class="text light-2">{{StringUtils.Join $subJumpablePathPrefixes "/"}}</span>/{{index $subJumpablePathFields $subJumpablePathFieldLast}}
47-
{{end}}
48-
</a>
49-
{{else}}
50-
{{svg (printf "octicon-%s" (EntryIcon $entry))}}
51-
<a class="muted" href="{{$.TreeLink}}/{{PathEscapeSegments $entry.Name}}" title="{{$entry.Name}}">{{$entry.Name}}</a>
52-
{{end}}
53-
{{end}}
54-
</span>
55-
</td>
56-
<td class="message nine wide">
57-
<span class="truncate">
58-
{{if $commit}}
59-
{{$commitLink := printf "%s/commit/%s" $.RepoLink (PathEscape $commit.ID.String)}}
60-
{{ctx.RenderUtils.RenderCommitMessageLinkSubject $commit.Message $commitLink ($.Repository.ComposeMetas ctx)}}
61-
{{else}}
62-
<div class="ui active tiny slow centered inline"></div>
63-
{{end}}
64-
</span>
65-
</td>
66-
<td class="text right age three wide">{{if $commit}}{{DateUtils.TimeSince $commit.Committer.When}}{{end}}</td>
67-
</tr>
68-
{{end}}
69-
</tbody>
70-
</table>
71-
{{if and .ReadmeExist (or .IsMarkup .IsPlainText)}}
72-
{{template "repo/view_file" .}}
73-
{{end}}
39+
</a>
40+
{{else}}
41+
{{svg (printf "octicon-%s" (EntryIcon $entry))}}
42+
<a class="muted" href="{{$.TreeLink}}/{{PathEscapeSegments $entry.Name}}" title="{{$entry.Name}}">{{$entry.Name}}</a>
43+
{{end}}
44+
{{end}}
45+
</div>
46+
<div class="repo-file-cell message loading-icon-2px">
47+
{{if $commit}}
48+
{{$commitLink := printf "%s/commit/%s" $.RepoLink (PathEscape $commit.ID.String)}}
49+
{{ctx.RenderUtils.RenderCommitMessageLinkSubject $commit.Message $commitLink ($.Repository.ComposeMetas ctx)}}
50+
{{else}}
51+
… {{/* will be loaded again by LastCommitLoaderURL */}}
52+
{{end}}
53+
</div>
54+
<div class="repo-file-cell age">{{if $commit}}{{DateUtils.TimeSince $commit.Committer.When}}{{end}}</div>
55+
</div>
56+
{{end}}
57+
</div>

templates/repo/wiki/view.tmpl

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
{{$title := .title}}
55
<div class="ui container">
66
<div class="repo-button-row">
7-
<div class="tw-flex tw-items-center">
7+
<div class="flex-text-block tw-flex-1">
88
<div class="ui floating filter dropdown" data-no-results="{{ctx.Locale.Tr "no_results_found"}}">
99
<div class="ui basic small button">
1010
<span class="text">
@@ -42,7 +42,7 @@
4242
</div>
4343
</div>
4444
</div>
45-
<div class="flex-text-block tw-flex-wrap tw-justify-end">
45+
<div class="repo-button-row">
4646
{{if .EscapeStatus.Escaped}}
4747
<a class="ui small button unescape-button tw-m-0 tw-hidden">{{ctx.Locale.Tr "repo.unescape_control_characters"}}</a>
4848
<a class="ui small button escape-button tw-m-0">{{ctx.Locale.Tr "repo.escape_control_characters"}}</a>

tests/integration/repo_test.go

+3-3
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ func testViewRepo(t *testing.T) {
4949
resp := session.MakeRequest(t, req, http.StatusOK)
5050

5151
htmlDoc := NewHTMLParser(t, resp.Body)
52-
files := htmlDoc.doc.Find("#repo-files-table > TBODY > TR")
52+
files := htmlDoc.doc.Find("#repo-files-table .repo-file-item")
5353

5454
type file struct {
5555
fileName string
@@ -61,7 +61,7 @@ func testViewRepo(t *testing.T) {
6161
var items []file
6262

6363
files.Each(func(i int, s *goquery.Selection) {
64-
tds := s.Find("td")
64+
tds := s.Find(".repo-file-cell")
6565
var f file
6666
tds.Each(func(i int, s *goquery.Selection) {
6767
if i == 0 {
@@ -161,7 +161,7 @@ func TestViewRepoWithSymlinks(t *testing.T) {
161161
resp := session.MakeRequest(t, req, http.StatusOK)
162162

163163
htmlDoc := NewHTMLParser(t, resp.Body)
164-
files := htmlDoc.doc.Find("#repo-files-table > TBODY > TR > TD.name > SPAN.truncate")
164+
files := htmlDoc.doc.Find("#repo-files-table .repo-file-cell.name")
165165
items := files.Map(func(i int, s *goquery.Selection) string {
166166
cls, _ := s.Find("SVG").Attr("class")
167167
file := strings.Trim(s.Find("A").Text(), " \t\n")

web_src/css/index.css

+2
Original file line numberDiff line numberDiff line change
@@ -66,8 +66,10 @@
6666
@import "./repo/wiki.css";
6767
@import "./repo/header.css";
6868
@import "./repo/home.css";
69+
@import "./repo/home-file-list.css";
6970
@import "./repo/reactions.css";
7071
@import "./repo/clone.css";
72+
@import "./repo/commit-sign.css";
7173

7274
@import "./editor/fileeditor.css";
7375
@import "./editor/combomarkdowneditor.css";

0 commit comments

Comments
 (0)