Skip to content

Commit 835ecef

Browse files
Bot-GJ16Bot-GJ16
authored
Enhance file view with search box and header actions
Added a search box for file filtering and improved the file listing layout with a header row for actions. Signed-off-by: Bot-GJ16 <[email protected]>
1 parent 24aa6df commit 835ecef

File tree

1 file changed

+129
-58
lines changed

1 file changed

+129
-58
lines changed

‎templates/repo/view_list.tmpl‎

Lines changed: 129 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,132 @@
1+
{{/* Search box for file filtering */}}
2+
{{if not .HasParentPath}}
3+
<div class="ui fluid icon input" style="margin-bottom: 15px;">
4+
<input
5+
id="repo-files-search"
6+
type="text"
7+
placeholder="🔍 Search files and folders..."
8+
autocomplete="off"
9+
aria-label="Search repository files"
10+
style="padding: 10px 15px; font-size: 14px;"
11+
>
12+
<i class="search icon"></i>
13+
</div>
14+
{{end}}
15+
116
{{/* use grid layout, still use the old ID because there are many other CSS styles depending on this ID */}}
217
<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 repo-file-last-commit">
4-
{{template "repo/latest_commit" .}}
5-
<div>{{if and .LatestCommit .LatestCommit.Committer}}{{DateUtils.TimeSince .LatestCommit.Committer.When}}{{end}}</div>
6-
</div>
7-
{{$.FileIconPoolHTML}}
8-
{{if .HasParentPath}}
9-
<a class="repo-file-line parent-link silenced" href="{{.BranchLink}}{{if .ParentPath}}{{PathEscapeSegments .ParentPath}}{{end}}">
10-
{{index $.FileIcons ".."}} ..
11-
</a>
12-
{{end}}
13-
{{range $item := .Files}}
14-
<div class="repo-file-item">
15-
{{$entry := $item.Entry}}
16-
{{$commit := $item.Commit}}
17-
{{$submoduleFile := $item.SubmoduleFile}}
18-
<div class="repo-file-cell name muted-links {{if not $commit}}notready{{end}}">
19-
{{index $.FileIcons $entry.Name}}
20-
{{if $entry.IsSubModule}}
21-
{{$submoduleLink := $submoduleFile.SubmoduleWebLinkTree ctx}}
22-
{{if $submoduleLink}}
23-
<a class="entry-name" href="{{$submoduleLink.RepoWebLink}}" title="{{$entry.Name}}">{{$entry.Name}}</a>
24-
@ <a class="text primary" href="{{$submoduleLink.CommitWebLink}}">{{ShortSha $submoduleFile.RefID}}</a>
25-
{{else}}
26-
<span class="entry-name" title="{{$entry.Name}}">{{$entry.Name}}</span>
27-
@ {{ShortSha $submoduleFile.RefID}}
28-
{{end}}
29-
{{else}}
30-
{{if $entry.IsDir}}
31-
{{$subJumpablePathName := $entry.GetSubJumpablePathName}}
32-
<a class="entry-name" href="{{$.TreeLink}}/{{PathEscapeSegments $subJumpablePathName}}" title="{{$subJumpablePathName}}">
33-
{{$subJumpablePathFields := StringUtils.Split $subJumpablePathName "/"}}
34-
{{$subJumpablePathFieldLast := (Eval (len $subJumpablePathFields) "-" 1)}}
35-
{{if eq $subJumpablePathFieldLast 0}}
36-
{{$subJumpablePathName}}
37-
{{else}}
38-
{{$subJumpablePathPrefixes := slice $subJumpablePathFields 0 $subJumpablePathFieldLast}}
39-
<span class="text light-2">{{StringUtils.Join $subJumpablePathPrefixes "/"}}</span>/{{index $subJumpablePathFields $subJumpablePathFieldLast}}
40-
{{end}}
41-
</a>
42-
{{else}}
43-
<a class="entry-name" href="{{$.TreeLink}}/{{PathEscapeSegments $entry.Name}}" title="{{$entry.Name}}">{{$entry.Name}}</a>
44-
{{if $entry.IsLink}}
45-
<a class="entry-symbol-link flex-text-inline" data-tooltip-content title="{{ctx.Locale.Tr "repo.find_file.follow_symlink"}}" href="{{$.TreeLink}}/{{PathEscapeSegments $entry.Name}}?follow_symlink=1">{{svg "octicon-link" 12}}</a>
46-
{{end}}
47-
{{end}}
48-
{{end}}
49-
</div>
50-
<div class="repo-file-cell message loading-icon-2px">
51-
{{if $commit}}
52-
{{$commitLink := printf "%s/commit/%s" $.RepoLink (PathEscape $commit.ID.String)}}
53-
{{ctx.RenderUtils.RenderCommitMessageLinkSubject $commit.Message $commitLink $.Repository}}
54-
{{else}}
55-
… {{/* will be loaded again by LastCommitLoaderURL */}}
56-
{{end}}
57-
</div>
58-
<div class="repo-file-cell age">{{if $commit}}{{DateUtils.TimeSince $commit.Committer.When}}{{end}}</div>
59-
</div>
60-
{{end}}
18+
{{/* Header row with Add File button and three-dot menu */}}
19+
<div class="repo-file-header" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; padding: 10px 0;">
20+
<div class="repo-file-actions" style="display: flex; gap: 10px;">
21+
{{/* Add File Dropdown Button */}}
22+
<div class="ui dropdown" id="add-file-dropdown">
23+
<button class="ui basic button">
24+
Add file
25+
<i class="dropdown icon"></i>
26+
</button>
27+
<div class="menu">
28+
<a class="item" href="{{.RepoLink}}/_new/{{.BranchNameSubURL}}{{if .TreePath}}/{{PathEscapeSegments .TreePath}}{{end}}">
29+
<i class="file icon"></i>
30+
Create new file
31+
</a>
32+
<a class="item" href="{{.RepoLink}}/_upload/{{.BranchNameSubURL}}{{if .TreePath}}/{{PathEscapeSegments .TreePath}}{{end}}">
33+
<i class="upload icon"></i>
34+
Upload files
35+
</a>
36+
</div>
37+
</div>
38+
</div>
39+
40+
{{/* Three-dot context menu */}}
41+
<div class="ui dropdown" id="directory-options-dropdown">
42+
<button class="ui basic icon button">
43+
<i class="ellipsis horizontal icon"></i>
44+
</button>
45+
<div class="menu">
46+
<a class="item" id="copy-path-button" data-path="{{.TreePath}}">
47+
<i class="copy icon"></i>
48+
Copy path
49+
</a>
50+
<a class="item" id="copy-permalink-button" data-permalink="{{.RepoLink}}/src/{{.BranchNameSubURL}}{{if .TreePath}}/{{PathEscapeSegments .TreePath}}{{end}}">
51+
<i class="linkify icon"></i>
52+
Copy permalink
53+
</a>
54+
{{if .CanWriteCode}}
55+
<div class="divider"></div>
56+
<a class="item" id="delete-directory-button" data-path="{{.TreePath}}">
57+
<i class="trash icon"></i>
58+
Delete directory
59+
</a>
60+
{{end}}
61+
<div class="divider"></div>
62+
<div class="header">
63+
<i class="eye icon"></i>
64+
View options
65+
</div>
66+
<a class="item" id="center-content-toggle">
67+
<i class="align center icon"></i>
68+
Center content
69+
</a>
70+
</div>
71+
</div>
72+
</div>
73+
74+
<div class="repo-file-line repo-file-last-commit">
75+
{{template "repo/latest_commit" .}}
76+
<div>{{if and .LatestCommit .LatestCommit.Committer}}{{TimeSince .LatestCommit.Committer.When}}{{end}}</div>
77+
</div>
78+
{{$.FileIconPoolHTML}}
79+
{{if .HasParentPath}}
80+
<a class="repo-file-line parent-link silenced" href="{{.BranchLink}}{{if .ParentPath}}{{PathEscapeSegments .ParentPath}}{{end}}">
81+
{{index $.FileIcons ".."}} ..
82+
</a>
83+
{{end}}
84+
{{range $item := .Files}}
85+
<div class="repo-file-item">
86+
{{$entry := $item.Entry}}
87+
{{$commit := $item.Commit}}
88+
{{$submoduleFile := $item.SubmoduleFile}}
89+
<div class="repo-file-cell name muted-links {{if not $commit}}notready{{end}}">
90+
{{index $.FileIcons $entry.Name}}
91+
{{if $entry.IsSubModule}}
92+
{{$submoduleLink := $submoduleFile.SubmoduleWebLinkTree ctx}}
93+
{{if $submoduleLink}}
94+
<a class="entry-name" href="{{$submoduleLink.RepoWebLink}}" title="{{$entry.Name}}">{{$entry.Name}}</a>
95+
@ <a class="text primary" href="{{$submoduleLink.CommitWebLink}}">{{ShortSha $submoduleFile.RefID}}</a>
96+
{{else}}
97+
<span class="entry-name" title="{{$entry.Name}}">{{$entry.Name}}</span>
98+
@ {{ShortSha $submoduleFile.RefID}}
99+
{{end}}
100+
{{else}}
101+
{{if $entry.IsDir}}
102+
{{$subJumpablePathName := $entry.GetSubJumpablePathName}}
103+
<a class="entry-name" href="{{$.TreeLink}}/{{PathEscapeSegments $subJumpablePathName}}" title="{{$subJumpablePathName}}">
104+
{{$subJumpablePathFields := Split $subJumpablePathName "/"}}
105+
{{$subJumpablePathFieldLast := (Eval (len $subJumpablePathFields) "-" 1)}}
106+
{{if eq $subJumpablePathFieldLast 0}}
107+
{{$subJumpablePathName}}
108+
{{else}}
109+
{{$subJumpablePathPrefixes := slice $subJumpablePathFields 0 $subJumpablePathFieldLast}}
110+
<span class="text light-2">{{Join $subJumpablePathPrefixes "/"}}</span>/{{index $subJumpablePathFields $subJumpablePathFieldLast}}
111+
{{end}}
112+
</a>
113+
{{else}}
114+
<a class="entry-name" href="{{$.TreeLink}}/{{PathEscapeSegments $entry.Name}}" title="{{$entry.Name}}">{{$entry.Name}}</a>
115+
{{if $entry.IsLink}}
116+
<a class="entry-symbol-link flex-text-inline" data-tooltip-content title="{{ctx.Locale.Tr "repo.find_file.follow_symlink"}}" href="{{$.TreeLink}}/{{PathEscapeSegments $entry.Name}}?follow_symlink=1">{{svg "octicon-link" 12}}</a>
117+
{{end}}
118+
{{end}}
119+
{{end}}
120+
</div>
121+
<div class="repo-file-cell message loading-icon-2px">
122+
{{if $commit}}
123+
{{$commitLink := printf "%s/commit/%s" $.RepoLink (PathEscape $commit.ID.String)}}
124+
{{ctx.RenderUtils.RenderCommitMessageLinkSubject $commit.Message $commitLink $.Repository}}
125+
{{else}}
126+
… {{/* will be loaded again by LastCommitLoaderURL */}}
127+
{{end}}
128+
</div>
129+
<div class="repo-file-cell age">{{if $commit}}{{TimeSince $commit.Committer.When}}{{end}}</div>
130+
</div>
131+
{{end}}
61132
</div>

0 commit comments

Comments
 (0)