From 4814f43af778d636f1a920e4fa45d7b173ef4582 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Wed, 11 Dec 2024 23:54:42 +0800 Subject: [PATCH] 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. --- templates/repo/home.tmpl | 6 +- templates/repo/latest_commit.tmpl | 2 +- templates/repo/view_list.tmpl | 120 ++++---- templates/repo/wiki/view.tmpl | 4 +- tests/integration/repo_test.go | 6 +- web_src/css/index.css | 2 + web_src/css/repo.css | 454 +--------------------------- web_src/css/repo/commit-sign.css | 272 +++++++++++++++++ web_src/css/repo/home-file-list.css | 70 +++++ web_src/js/features/repo-common.ts | 33 +- web_src/js/features/repo-legacy.ts | 31 +- 11 files changed, 441 insertions(+), 559 deletions(-) create mode 100644 web_src/css/repo/commit-sign.css create mode 100644 web_src/css/repo/home-file-list.css diff --git a/templates/repo/home.tmpl b/templates/repo/home.tmpl index cc36fa4eea1d3..4e6d375b51710 100644 --- a/templates/repo/home.tmpl +++ b/templates/repo/home.tmpl @@ -102,8 +102,7 @@ {{end}} - {{/* 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 */}} -
+
{{if $isTreePathRoot}} {{template "repo/clone_panel" .}} @@ -124,6 +123,9 @@ {{template "repo/code/upstream_diverging_info" .}} {{end}} {{template "repo/view_list" .}} + {{if and .ReadmeExist (or .IsMarkup .IsPlainText)}} + {{template "repo/view_file" .}} + {{end}} {{end}}
diff --git a/templates/repo/latest_commit.tmpl b/templates/repo/latest_commit.tmpl index 9d718d7197a41..34a5df8f7762e 100644 --- a/templates/repo/latest_commit.tmpl +++ b/templates/repo/latest_commit.tmpl @@ -1,5 +1,5 @@ {{if not .LatestCommit}} -
…
+ … {{else}} {{if .LatestCommitUser}} {{ctx.AvatarUtils.Avatar .LatestCommitUser 24 "tw-mr-1"}} diff --git a/templates/repo/view_list.tmpl b/templates/repo/view_list.tmpl index 3edfbb347456f..ea61c3736ae5f 100644 --- a/templates/repo/view_list.tmpl +++ b/templates/repo/view_list.tmpl @@ -1,73 +1,57 @@ - - - - - - - - - {{if .HasParentPath}} - - - - {{end}} - {{range $item := .Files}} +{{/* use grid layout, still use the old ID because there are many other CSS styles depending on this ID */}} +
+
+
{{template "repo/latest_commit" .}}
+
{{if and .LatestCommit .LatestCommit.Committer}}{{DateUtils.TimeSince .LatestCommit.Committer.When}}{{end}}
+
+ {{if .HasParentPath}} +
+ {{svg "octicon-reply"}} .. +
+ {{end}} + {{range $item := .Files}} +
{{$entry := $item.Entry}} {{$commit := $item.Commit}} {{$subModuleFile := $item.SubModuleFile}} -
- - - - - {{end}} - -
-
-
- {{template "repo/latest_commit" .}} -
-
- 		{{if .LatestCommit}}{{if .LatestCommit.Committer}}{{DateUtils.TimeSince .LatestCommit.Committer.When}}{{end}}{{end}}
{{svg "octicon-reply"}}..
- - {{if $entry.IsSubModule}} - {{svg "octicon-file-submodule"}} - {{$refURL := $subModuleFile.RefURL AppUrl $.Repository.FullName $.SSHDomain}} {{/* FIXME: the usage of AppUrl seems incorrect, it would be fixed in the future, use AppSubUrl instead */}} - {{if $refURL}} - {{$entry.Name}}@{{ShortSha $subModuleFile.RefID}} +
+ {{if $entry.IsSubModule}} + {{svg "octicon-file-submodule"}} + {{$refURL := $subModuleFile.RefURL AppUrl $.Repository.FullName $.SSHDomain}} {{/* FIXME: the usage of AppUrl seems incorrect, it would be fixed in the future, use AppSubUrl instead */}} + {{if $refURL}} + {{$entry.Name}}@{{ShortSha $subModuleFile.RefID}} + {{else}} + {{$entry.Name}}@{{ShortSha $subModuleFile.RefID}} + {{end}} + {{else}} + {{if $entry.IsDir}} + {{$subJumpablePathName := $entry.GetSubJumpablePathName}} + {{svg "octicon-file-directory-fill"}} + + {{$subJumpablePathFields := StringUtils.Split $subJumpablePathName "/"}} + {{$subJumpablePathFieldLast := (Eval (len $subJumpablePathFields) "-" 1)}} + {{if eq $subJumpablePathFieldLast 0}} + {{$subJumpablePathName}} {{else}} - {{$entry.Name}}@{{ShortSha $subModuleFile.RefID}} + {{$subJumpablePathPrefixes := slice $subJumpablePathFields 0 $subJumpablePathFieldLast}} + {{StringUtils.Join $subJumpablePathPrefixes "/"}}/{{index $subJumpablePathFields $subJumpablePathFieldLast}} {{end}} - {{else}} - {{if $entry.IsDir}} - {{$subJumpablePathName := $entry.GetSubJumpablePathName}} - {{svg "octicon-file-directory-fill"}} - - {{$subJumpablePathFields := StringUtils.Split $subJumpablePathName "/"}} - {{$subJumpablePathFieldLast := (Eval (len $subJumpablePathFields) "-" 1)}} - {{if eq $subJumpablePathFieldLast 0}} - {{$subJumpablePathName}} - {{else}} - {{$subJumpablePathPrefixes := slice $subJumpablePathFields 0 $subJumpablePathFieldLast}} - {{StringUtils.Join $subJumpablePathPrefixes "/"}}/{{index $subJumpablePathFields $subJumpablePathFieldLast}} - {{end}} - - {{else}} - {{svg (printf "octicon-%s" (EntryIcon $entry))}} - {{$entry.Name}} - {{end}} - {{end}} - -
- - {{if $commit}} - {{$commitLink := printf "%s/commit/%s" $.RepoLink (PathEscape $commit.ID.String)}} - {{ctx.RenderUtils.RenderCommitMessageLinkSubject $commit.Message $commitLink ($.Repository.ComposeMetas ctx)}} - {{else}} -
- {{end}} - - 		{{if $commit}}{{DateUtils.TimeSince $commit.Committer.When}}{{end}}
-{{if and .ReadmeExist (or .IsMarkup .IsPlainText)}} - {{template "repo/view_file" .}} -{{end}} + + {{else}} + {{svg (printf "octicon-%s" (EntryIcon $entry))}} + {{$entry.Name}} + {{end}} + {{end}} +
+
+ {{if $commit}} + {{$commitLink := printf "%s/commit/%s" $.RepoLink (PathEscape $commit.ID.String)}} + {{ctx.RenderUtils.RenderCommitMessageLinkSubject $commit.Message $commitLink ($.Repository.ComposeMetas ctx)}} + {{else}} + … {{/* will be loaded again by LastCommitLoaderURL */}} + {{end}} +
+
{{if $commit}}{{DateUtils.TimeSince $commit.Committer.When}}{{end}}
+ + {{end}} + diff --git a/templates/repo/wiki/view.tmpl b/templates/repo/wiki/view.tmpl index 68933b0bcfbe8..2bb0a4f006888 100644 --- a/templates/repo/wiki/view.tmpl +++ b/templates/repo/wiki/view.tmpl @@ -4,7 +4,7 @@ {{$title := .title}}
-
+
@@ -42,7 +42,7 @@
-
+
{{if .EscapeStatus.Escaped}} {{ctx.Locale.Tr "repo.unescape_control_characters"}} {{ctx.Locale.Tr "repo.escape_control_characters"}} diff --git a/tests/integration/repo_test.go b/tests/integration/repo_test.go index 1b9f6887fd95b..7889dfaf3b797 100644 --- a/tests/integration/repo_test.go +++ b/tests/integration/repo_test.go @@ -49,7 +49,7 @@ func testViewRepo(t *testing.T) { resp := session.MakeRequest(t, req, http.StatusOK) htmlDoc := NewHTMLParser(t, resp.Body) - files := htmlDoc.doc.Find("#repo-files-table > TBODY > TR") + files := htmlDoc.doc.Find("#repo-files-table .repo-file-item") type file struct { fileName string @@ -61,7 +61,7 @@ func testViewRepo(t *testing.T) { var items []file files.Each(func(i int, s *goquery.Selection) { - tds := s.Find("td") + tds := s.Find(".repo-file-cell") var f file tds.Each(func(i int, s *goquery.Selection) { if i == 0 { @@ -161,7 +161,7 @@ func TestViewRepoWithSymlinks(t *testing.T) { resp := session.MakeRequest(t, req, http.StatusOK) htmlDoc := NewHTMLParser(t, resp.Body) - files := htmlDoc.doc.Find("#repo-files-table > TBODY > TR > TD.name > SPAN.truncate") + files := htmlDoc.doc.Find("#repo-files-table .repo-file-cell.name") items := files.Map(func(i int, s *goquery.Selection) string { cls, _ := s.Find("SVG").Attr("class") file := strings.Trim(s.Find("A").Text(), " \t\n") diff --git a/web_src/css/index.css b/web_src/css/index.css index 43648268c5385..02513aebc1cd1 100644 --- a/web_src/css/index.css +++ b/web_src/css/index.css @@ -66,8 +66,10 @@ @import "./repo/wiki.css"; @import "./repo/header.css"; @import "./repo/home.css"; +@import "./repo/home-file-list.css"; @import "./repo/reactions.css"; @import "./repo/clone.css"; +@import "./repo/commit-sign.css"; @import "./editor/fileeditor.css"; @import "./editor/combomarkdowneditor.css"; diff --git a/web_src/css/repo.css b/web_src/css/repo.css index cf637e1c4846b..9a43e10e826b7 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -141,138 +141,6 @@ td .commit-summary { overflow-wrap: anywhere; } -/* this is what limits the commit table width to a value that works on all viewport sizes */ -#repo-files-table th:first-of-type { - max-width: calc(calc(min(100vw, 1280px)) - 145px - calc(2 * var(--page-margin-x))); -} - -.repository.file.list #repo-files-table thead th { - font-weight: var(--font-weight-normal); -} - -.repository.file.list #repo-files-table tbody .svg { - margin-left: 3px; - margin-right: 5px; -} - -.repository.file.list #repo-files-table tbody .svg.octicon-reply { - margin-right: 10px; -} - -.repository.file.list #repo-files-table tbody .svg.octicon-file-directory-fill, -.repository.file.list #repo-files-table tbody .svg.octicon-file-submodule { - color: var(--color-primary); -} - -.repository.file.list #repo-files-table tbody .svg.octicon-file, -.repository.file.list #repo-files-table tbody .svg.octicon-file-symlink-file, -.repository.file.list #repo-files-table tbody .svg.octicon-file-directory-symlink { - color: var(--color-secondary-dark-7); -} - -.repository.file.list #repo-files-table td { - padding-top: 0; - padding-bottom: 0; - overflow: initial; -} - -.repository.file.list #repo-files-table td.name { - width: 33%; - max-width: calc(100vw - 140px); -} - -@media (min-width: 1201px) { - .repository.file.list #repo-files-table td.name { - max-width: 150px; - } -} - -@media (min-width: 992px) and (max-width: 1200px) { - .repository.file.list #repo-files-table td.name { - max-width: 200px; - } -} - -@media (min-width: 768px) and (max-width: 991.98px) { - .repository.file.list #repo-files-table td.name { - max-width: 300px; - } -} - -.repository.file.list #repo-files-table td.message { - color: var(--color-text-light-1); - width: 66%; -} - -@media (min-width: 1201px) { - .repository.file.list #repo-files-table td.message { - max-width: 400px; - } -} - -@media (min-width: 992px) and (max-width: 1200px) { - .repository.file.list #repo-files-table td.message { - max-width: 350px; - } -} - -@media (min-width: 768px) and (max-width: 991.98px) { - .repository.file.list #repo-files-table td.message { - max-width: 250px; - } -} - -.repository.file.list #repo-files-table td.age { - color: var(--color-text-light-1); -} - -.repository.file.list #repo-files-table td .truncate { - display: inline-block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - width: 100%; - padding-top: 8px; - padding-bottom: 8px; -} - -.repository.file.list #repo-files-table td a { - padding-top: 8px; - padding-bottom: 8px; -} - -.repository.file.list #repo-files-table td .at { - margin-left: 3px; - margin-right: 3px; -} - -.repository.file.list #repo-files-table td > * { - vertical-align: middle; -} - -.repository.file.list #repo-files-table td.message .isSigned { - cursor: default; -} - -.repository.file.list #repo-files-table tr:last-of-type td:first-child { - border-bottom-left-radius: var(--border-radius); -} - -.repository.file.list #repo-files-table tr:last-of-type td:last-child { - border-bottom-right-radius: var(--border-radius); -} - -.repository.file.list #repo-files-table tr:hover { - background-color: var(--color-hover); -} - -.repository.file.list #repo-files-table tr.has-parent a { - display: inline-block; - padding-top: 8px; - padding-bottom: 8px; - width: calc(100% - 1.25rem); -} - .repository.file.list .non-diff-file-content .header .icon { font-size: 1em; } @@ -751,47 +619,6 @@ td .commit-summary { height: 30px !important; } -.singular-commit .shabox .sha.label { - margin: 0; - border: 1px solid var(--color-light-border); -} - -.singular-commit .shabox .sha.label.isSigned.isWarning { - border: 1px solid var(--color-red-badge); - background: var(--color-red-badge-bg); -} - -.singular-commit .shabox .sha.label.isSigned.isWarning:hover { - background: var(--color-red-badge-hover-bg) !important; -} - -.singular-commit .shabox .sha.label.isSigned.isVerified { - border: 1px solid var(--color-green-badge); - background: var(--color-green-badge-bg); -} - -.singular-commit .shabox .sha.label.isSigned.isVerified:hover { - background: var(--color-green-badge-hover-bg) !important; -} - -.singular-commit .shabox .sha.label.isSigned.isVerifiedUntrusted { - border: 1px solid var(--color-yellow-badge); - background: var(--color-yellow-badge-bg); -} - -.singular-commit .shabox .sha.label.isSigned.isVerifiedUntrusted:hover { - background: var(--color-yellow-badge-hover-bg) !important; -} - -.singular-commit .shabox .sha.label.isSigned.isVerifiedUnmatched { - border: 1px solid var(--color-orange-badge); - background: var(--color-orange-badge-bg); -} - -.singular-commit .shabox .sha.label.isSigned.isVerifiedUnmatched:hover { - background: var(--color-orange-badge-hover-bg) !important; -} - .repository.view.issue .comment-list .timeline-item.event > .commit-status-link { float: right; margin-right: 8px; @@ -1126,151 +953,6 @@ td .commit-summary { background-color: var(--color-light) !important; } -.repository #commits-table td.sha .sha.label, -.repository #repo-files-table .sha.label, -.repository #repo-file-commit-box .sha.label, -.repository #rev-list .sha.label, -.repository .timeline-item.commits-list .singular-commit .sha.label { - border: 1px solid var(--color-light-border); -} - -.repository #commits-table td.sha .sha.label .detail.icon, -.repository #repo-files-table .sha.label .detail.icon, -.repository #repo-file-commit-box .sha.label .detail.icon, -.repository #rev-list .sha.label .detail.icon, -.repository .timeline-item.commits-list .singular-commit .sha.label .detail.icon { - background: var(--color-light); - margin: -6px -10px -4px 0; - padding: 5px 4px 5px 6px; - border-left: 1px solid var(--color-light-border); - border-top: 0; - border-right: 0; - border-bottom: 0; - border-top-left-radius: 0; - border-bottom-left-radius: 0; -} - -.repository #commits-table td.sha .sha.label .detail.icon .svg, -.repository #repo-files-table .sha.label .detail.icon .svg, -.repository #repo-file-commit-box .sha.label .detail.icon .svg, -.repository #rev-list .sha.label .detail.icon .svg, -.repository .timeline-item.commits-list .singular-commit .sha.label .detail.icon .svg { - margin: 0 0.25em 0 0; -} - -.repository #commits-table td.sha .sha.label .detail.icon > div, -.repository #repo-files-table .sha.label .detail.icon > div, -.repository #repo-file-commit-box .sha.label .detail.icon > div, -.repository #rev-list .sha.label .detail.icon > div, -.repository .timeline-item.commits-list .singular-commit .sha.label .detail.icon > div { - display: flex; - align-items: center; -} - -.repository #commits-table td.sha .sha.label.isSigned.isWarning, -.repository #repo-files-table .sha.label.isSigned.isWarning, -.repository #repo-file-commit-box .sha.label.isSigned.isWarning, -.repository #rev-list .sha.label.isSigned.isWarning, -.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isWarning { - border: 1px solid var(--color-red-badge); - background: var(--color-red-badge-bg); -} - -.repository #commits-table td.sha .sha.label.isSigned.isWarning .detail.icon, -.repository #repo-files-table .sha.label.isSigned.isWarning .detail.icon, -.repository #repo-file-commit-box .sha.label.isSigned.isWarning .detail.icon, -.repository #rev-list .sha.label.isSigned.isWarning .detail.icon, -.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isWarning .detail.icon { - border-left: 1px solid var(--color-red-badge); - color: var(--color-red-badge); -} - -.repository #commits-table td.sha .sha.label.isSigned.isWarning:hover, -.repository #repo-files-table .sha.label.isSigned.isWarning:hover, -.repository #repo-file-commit-box .sha.label.isSigned.isWarning:hover, -.repository #rev-list .sha.label.isSigned.isWarning:hover, -.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isWarning:hover { - background: var(--color-red-badge-hover-bg) !important; -} - -.repository #commits-table td.sha .sha.label.isSigned.isVerified, -.repository #repo-files-table .sha.label.isSigned.isVerified, -.repository #repo-file-commit-box .sha.label.isSigned.isVerified, -.repository #rev-list .sha.label.isSigned.isVerified, -.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerified { - border: 1px solid var(--color-green-badge); - background: var(--color-green-badge-bg); -} - -.repository #commits-table td.sha .sha.label.isSigned.isVerified .detail.icon, -.repository #repo-files-table .sha.label.isSigned.isVerified .detail.icon, -.repository #repo-file-commit-box .sha.label.isSigned.isVerified .detail.icon, -.repository #rev-list .sha.label.isSigned.isVerified .detail.icon, -.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerified .detail.icon { - border-left: 1px solid var(--color-green-badge); - color: var(--color-green-badge); -} - -.repository #commits-table td.sha .sha.label.isSigned.isVerified:hover, -.repository #repo-files-table .sha.label.isSigned.isVerified:hover, -.repository #repo-file-commit-box .sha.label.isSigned.isVerified:hover, -.repository #rev-list .sha.label.isSigned.isVerified:hover, -.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerified:hover { - background: var(--color-green-badge-hover-bg) !important; -} - -.repository #commits-table td.sha .sha.label.isSigned.isVerifiedUntrusted, -.repository #repo-files-table .sha.label.isSigned.isVerifiedUntrusted, -.repository #repo-file-commit-box .sha.label.isSigned.isVerifiedUntrusted, -.repository #rev-list .sha.label.isSigned.isVerifiedUntrusted, -.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerifiedUntrusted { - border: 1px solid var(--color-yellow-badge); - background: var(--color-yellow-badge-bg); -} - -.repository #commits-table td.sha .sha.label.isSigned.isVerifiedUntrusted .detail.icon, -.repository #repo-files-table .sha.label.isSigned.isVerifiedUntrusted .detail.icon, -.repository #repo-file-commit-box .sha.label.isSigned.isVerifiedUntrusted .detail.icon, -.repository #rev-list .sha.label.isSigned.isVerifiedUntrusted .detail.icon, -.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerifiedUntrusted .detail.icon { - border-left: 1px solid var(--color-yellow-badge); - color: var(--color-yellow-badge); -} - -.repository #commits-table td.sha .sha.label.isSigned.isVerifiedUntrusted:hover, -.repository #repo-files-table .sha.label.isSigned.isVerifiedUntrusted:hover, -.repository #repo-file-commit-box .sha.label.isSigned.isVerifiedUntrusted:hover, -.repository #rev-list .sha.label.isSigned.isVerifiedUntrusted:hover, -.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerifiedUntrusted:hover { - background: var(--color-yellow-badge-hover-bg) !important; -} - -.repository #commits-table td.sha .sha.label.isSigned.isVerifiedUnmatched, -.repository #repo-files-table .sha.label.isSigned.isVerifiedUnmatched, -.repository #repo-file-commit-box .sha.label.isSigned.isVerifiedUnmatched, -.repository #rev-list .sha.label.isSigned.isVerifiedUnmatched, -.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerifiedUnmatched { - border: 1px solid var(--color-orange-badge); - background: var(--color-orange-badge-bg); -} - -.repository #commits-table td.sha .sha.label.isSigned.isVerifiedUnmatched .detail.icon, -.repository #repo-files-table .sha.label.isSigned.isVerifiedUnmatched .detail.icon, -.repository #repo-file-commit-box .sha.label.isSigned.isVerifiedUnmatched .detail.icon, -.repository #rev-list .sha.label.isSigned.isVerifiedUnmatched .detail.icon, -.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerifiedUnmatched .detail.icon { - border-left: 1px solid var(--color-orange-badge); - color: var(--color-orange-badge); -} - -.repository #commits-table td.sha .sha.label.isSigned.isVerifiedUnmatched:hover, -.repository #repo-files-table .sha.label.isSigned.isVerifiedUnmatched:hover, -.repository #repo-file-commit-box .sha.label.isSigned.isVerifiedUnmatched:hover, -.repository #rev-list .sha.label.isSigned.isVerifiedUnmatched:hover, -.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerifiedUnmatched:hover { - background: var(--color-orange-badge-hover-bg) !important; -} - .repository .data-table { width: 100%; } @@ -1634,92 +1316,6 @@ td .commit-summary { padding-top: 0; } -.repository .ui.attached.isSigned.isWarning { - border-left: 1px solid var(--color-error-border); - border-right: 1px solid var(--color-error-border); -} - -.repository .ui.attached.isSigned.isWarning.top, -.repository .ui.attached.isSigned.isWarning.message { - border-top: 1px solid var(--color-error-border); -} - -.repository .ui.attached.isSigned.isWarning.message { - box-shadow: none; - background-color: var(--color-error-bg); - color: var(--color-error-text); -} - -.repository .ui.attached.isSigned.isWarning.message .ui.text { - color: var(--color-error-text); -} - -.repository .ui.attached.isSigned.isWarning:last-child, -.repository .ui.attached.isSigned.isWarning.bottom { - border-bottom: 1px solid var(--color-error-border); -} - -.repository .ui.attached.isSigned.isVerified { - border-left: 1px solid var(--color-success-border); - border-right: 1px solid var(--color-success-border); -} - -.repository .ui.attached.isSigned.isVerified.top, -.repository .ui.attached.isSigned.isVerified.message { - border-top: 1px solid var(--color-success-border); -} - -.repository .ui.attached.isSigned.isVerified.message { - box-shadow: none; - background-color: var(--color-success-bg); - color: var(--color-success-text); -} - -.repository .ui.attached.isSigned.isVerified.message .pull-right { - color: var(--color-text); -} - -.repository .ui.attached.isSigned.isVerified.message .ui.text { - color: var(--color-success-text); -} - -.repository .ui.attached.isSigned.isVerified:last-child, -.repository .ui.attached.isSigned.isVerified.bottom { - border-bottom: 1px solid var(--color-success-border); -} - -.repository .ui.attached.isSigned.isVerifiedUntrusted, -.repository .ui.attached.isSigned.isVerifiedUnmatched { - border-left: 1px solid var(--color-warning-border); - border-right: 1px solid var(--color-warning-border); -} - -.repository .ui.attached.isSigned.isVerifiedUntrusted.top, -.repository .ui.attached.isSigned.isVerifiedUnmatched.top, -.repository .ui.attached.isSigned.isVerifiedUntrusted.message, -.repository .ui.attached.isSigned.isVerifiedUnmatched.message { - border-top: 1px solid var(--color-warning-border); -} - -.repository .ui.attached.isSigned.isVerifiedUntrusted.message, -.repository .ui.attached.isSigned.isVerifiedUnmatched.message { - box-shadow: none; - background-color: var(--color-warning-bg); - color: var(--color-warning-text); -} - -.repository .ui.attached.isSigned.isVerifiedUntrusted.message .ui.text, -.repository .ui.attached.isSigned.isVerifiedUnmatched.message .ui.text { - color: var(--color-warning-text); -} - -.repository .ui.attached.isSigned.isVerifiedUntrusted:last-child, -.repository .ui.attached.isSigned.isVerifiedUnmatched:last-child, -.repository .ui.attached.isSigned.isVerifiedUntrusted.bottom, -.repository .ui.attached.isSigned.isVerifiedUnmatched.bottom { - border-bottom: 1px solid var(--color-warning-border); -} - .repository .ui.fluid.action.input .ui.search.action.input { flex: auto; } @@ -1738,7 +1334,7 @@ td .commit-summary { .repository .repository-summary .sub-menu .item { flex: 1; - height: 30px; + height: 33px; /* match search bar height, need to be improved in the future to use some consistent methods */ line-height: var(--line-height-default); display: flex; align-items: center; @@ -2066,26 +1662,18 @@ td .commit-summary { display: flex; align-items: center; gap: 8px; - justify-content: space-between; + flex-wrap: wrap; } .repo-button-row-left, .repo-button-row-right { display: flex; - flex: 1; align-items: center; gap: 0.5rem; } -.repo-button-row-right { - justify-content: flex-end; -} - -@media (max-width: 1200px) { - .repository:not(.wiki) .repo-button-row { - flex-direction: column; - align-items: stretch; - } +.repo-button-row-left { + flex: 1; } .repo-button-row .button { @@ -2099,16 +1687,6 @@ td .commit-summary { padding-right: 22px !important; /* normal buttons have !important paddings, so we need to override it for dropdown (Add File) icons */ } -.repo-button-row input { - height: 30px; -} - -@media (max-width: 600px) { - .repo-button-row-left { - flex-wrap: wrap; - } -} - tbody.commit-list { vertical-align: baseline; } @@ -2134,11 +1712,6 @@ tbody.commit-list { overflow-wrap: anywhere; } -/* but in the repo-files-table we cannot */ -#repo-files-table .commit-list .message-wrapper { - display: inline-block; -} - @media (max-width: 767.98px) { tr.commit-list { width: 100%; @@ -2534,25 +2107,6 @@ tbody.commit-list { } @media (max-width: 767.98px) { - .repository.file.list #repo-files-table .entry, - .repository.file.list #repo-files-table .commit-list { - align-items: center; - display: flex !important; - padding-top: 4px; - padding-bottom: 4px; - } - .repository.file.list #repo-files-table .entry td.age, - .repository.file.list #repo-files-table .commit-list td.age, - .repository.file.list #repo-files-table .entry th.age, - .repository.file.list #repo-files-table .commit-list th.age { - margin-left: auto; - } - .repository.file.list #repo-files-table .entry td.message, - .repository.file.list #repo-files-table .commit-list td.message, - .repository.file.list #repo-files-table .entry span.commit-summary, - .repository.file.list #repo-files-table .commit-list tr span.commit-summary { - display: none !important; - } .repository.view.issue .comment-list .timeline, .repository.view.issue .comment-list .timeline-item { margin-left: 0; diff --git a/web_src/css/repo/commit-sign.css b/web_src/css/repo/commit-sign.css new file mode 100644 index 0000000000000..e7570304194d3 --- /dev/null +++ b/web_src/css/repo/commit-sign.css @@ -0,0 +1,272 @@ + +.repository .ui.attached.isSigned.isWarning { + border-left: 1px solid var(--color-error-border); + border-right: 1px solid var(--color-error-border); +} + +.repository .ui.attached.isSigned.isWarning.top, +.repository .ui.attached.isSigned.isWarning.message { + border-top: 1px solid var(--color-error-border); +} + +.repository .ui.attached.isSigned.isWarning.message { + box-shadow: none; + background-color: var(--color-error-bg); + color: var(--color-error-text); +} + +.repository .ui.attached.isSigned.isWarning.message .ui.text { + color: var(--color-error-text); +} + +.repository .ui.attached.isSigned.isWarning:last-child, +.repository .ui.attached.isSigned.isWarning.bottom { + border-bottom: 1px solid var(--color-error-border); +} + +.repository .ui.attached.isSigned.isVerified { + border-left: 1px solid var(--color-success-border); + border-right: 1px solid var(--color-success-border); +} + +.repository .ui.attached.isSigned.isVerified.top, +.repository .ui.attached.isSigned.isVerified.message { + border-top: 1px solid var(--color-success-border); +} + +.repository .ui.attached.isSigned.isVerified.message { + box-shadow: none; + background-color: var(--color-success-bg); + color: var(--color-success-text); +} + +.repository .ui.attached.isSigned.isVerified.message .pull-right { + color: var(--color-text); +} + +.repository .ui.attached.isSigned.isVerified.message .ui.text { + color: var(--color-success-text); +} + +.repository .ui.attached.isSigned.isVerified:last-child, +.repository .ui.attached.isSigned.isVerified.bottom { + border-bottom: 1px solid var(--color-success-border); +} + +.repository .ui.attached.isSigned.isVerifiedUntrusted, +.repository .ui.attached.isSigned.isVerifiedUnmatched { + border-left: 1px solid var(--color-warning-border); + border-right: 1px solid var(--color-warning-border); +} + +.repository .ui.attached.isSigned.isVerifiedUntrusted.top, +.repository .ui.attached.isSigned.isVerifiedUnmatched.top, +.repository .ui.attached.isSigned.isVerifiedUntrusted.message, +.repository .ui.attached.isSigned.isVerifiedUnmatched.message { + border-top: 1px solid var(--color-warning-border); +} + +.repository .ui.attached.isSigned.isVerifiedUntrusted.message, +.repository .ui.attached.isSigned.isVerifiedUnmatched.message { + box-shadow: none; + background-color: var(--color-warning-bg); + color: var(--color-warning-text); +} + +.repository .ui.attached.isSigned.isVerifiedUntrusted.message .ui.text, +.repository .ui.attached.isSigned.isVerifiedUnmatched.message .ui.text { + color: var(--color-warning-text); +} + +.repository .ui.attached.isSigned.isVerifiedUntrusted:last-child, +.repository .ui.attached.isSigned.isVerifiedUnmatched:last-child, +.repository .ui.attached.isSigned.isVerifiedUntrusted.bottom, +.repository .ui.attached.isSigned.isVerifiedUnmatched.bottom { + border-bottom: 1px solid var(--color-warning-border); +} + +.repository #commits-table td.sha .sha.label, +.repository #repo-files-table .sha.label, +.repository #repo-file-commit-box .sha.label, +.repository #rev-list .sha.label, +.repository .timeline-item.commits-list .singular-commit .sha.label { + border: 1px solid var(--color-light-border); +} + +.repository #commits-table td.sha .sha.label .detail.icon, +.repository #repo-files-table .sha.label .detail.icon, +.repository #repo-file-commit-box .sha.label .detail.icon, +.repository #rev-list .sha.label .detail.icon, +.repository .timeline-item.commits-list .singular-commit .sha.label .detail.icon { + background: var(--color-light); + margin: -6px -10px -4px 0; + padding: 5px 4px 5px 6px; + border-left: 1px solid var(--color-light-border); + border-top: 0; + border-right: 0; + border-bottom: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +.repository #commits-table td.sha .sha.label .detail.icon .svg, +.repository #repo-files-table .sha.label .detail.icon .svg, +.repository #repo-file-commit-box .sha.label .detail.icon .svg, +.repository #rev-list .sha.label .detail.icon .svg, +.repository .timeline-item.commits-list .singular-commit .sha.label .detail.icon .svg { + margin: 0 0.25em 0 0; +} + +.repository #commits-table td.sha .sha.label .detail.icon > div, +.repository #repo-files-table .sha.label .detail.icon > div, +.repository #repo-file-commit-box .sha.label .detail.icon > div, +.repository #rev-list .sha.label .detail.icon > div, +.repository .timeline-item.commits-list .singular-commit .sha.label .detail.icon > div { + display: flex; + align-items: center; +} + +.repository #commits-table td.sha .sha.label.isSigned.isWarning, +.repository #repo-files-table .sha.label.isSigned.isWarning, +.repository #repo-file-commit-box .sha.label.isSigned.isWarning, +.repository #rev-list .sha.label.isSigned.isWarning, +.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isWarning { + border: 1px solid var(--color-red-badge); + background: var(--color-red-badge-bg); +} + +.repository #commits-table td.sha .sha.label.isSigned.isWarning .detail.icon, +.repository #repo-files-table .sha.label.isSigned.isWarning .detail.icon, +.repository #repo-file-commit-box .sha.label.isSigned.isWarning .detail.icon, +.repository #rev-list .sha.label.isSigned.isWarning .detail.icon, +.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isWarning .detail.icon { + border-left: 1px solid var(--color-red-badge); + color: var(--color-red-badge); +} + +.repository #commits-table td.sha .sha.label.isSigned.isWarning:hover, +.repository #repo-files-table .sha.label.isSigned.isWarning:hover, +.repository #repo-file-commit-box .sha.label.isSigned.isWarning:hover, +.repository #rev-list .sha.label.isSigned.isWarning:hover, +.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isWarning:hover { + background: var(--color-red-badge-hover-bg) !important; +} + +.repository #commits-table td.sha .sha.label.isSigned.isVerified, +.repository #repo-files-table .sha.label.isSigned.isVerified, +.repository #repo-file-commit-box .sha.label.isSigned.isVerified, +.repository #rev-list .sha.label.isSigned.isVerified, +.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerified { + border: 1px solid var(--color-green-badge); + background: var(--color-green-badge-bg); +} + +.repository #commits-table td.sha .sha.label.isSigned.isVerified .detail.icon, +.repository #repo-files-table .sha.label.isSigned.isVerified .detail.icon, +.repository #repo-file-commit-box .sha.label.isSigned.isVerified .detail.icon, +.repository #rev-list .sha.label.isSigned.isVerified .detail.icon, +.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerified .detail.icon { + border-left: 1px solid var(--color-green-badge); + color: var(--color-green-badge); +} + +.repository #commits-table td.sha .sha.label.isSigned.isVerified:hover, +.repository #repo-files-table .sha.label.isSigned.isVerified:hover, +.repository #repo-file-commit-box .sha.label.isSigned.isVerified:hover, +.repository #rev-list .sha.label.isSigned.isVerified:hover, +.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerified:hover { + background: var(--color-green-badge-hover-bg) !important; +} + +.repository #commits-table td.sha .sha.label.isSigned.isVerifiedUntrusted, +.repository #repo-files-table .sha.label.isSigned.isVerifiedUntrusted, +.repository #repo-file-commit-box .sha.label.isSigned.isVerifiedUntrusted, +.repository #rev-list .sha.label.isSigned.isVerifiedUntrusted, +.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerifiedUntrusted { + border: 1px solid var(--color-yellow-badge); + background: var(--color-yellow-badge-bg); +} + +.repository #commits-table td.sha .sha.label.isSigned.isVerifiedUntrusted .detail.icon, +.repository #repo-files-table .sha.label.isSigned.isVerifiedUntrusted .detail.icon, +.repository #repo-file-commit-box .sha.label.isSigned.isVerifiedUntrusted .detail.icon, +.repository #rev-list .sha.label.isSigned.isVerifiedUntrusted .detail.icon, +.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerifiedUntrusted .detail.icon { + border-left: 1px solid var(--color-yellow-badge); + color: var(--color-yellow-badge); +} + +.repository #commits-table td.sha .sha.label.isSigned.isVerifiedUntrusted:hover, +.repository #repo-files-table .sha.label.isSigned.isVerifiedUntrusted:hover, +.repository #repo-file-commit-box .sha.label.isSigned.isVerifiedUntrusted:hover, +.repository #rev-list .sha.label.isSigned.isVerifiedUntrusted:hover, +.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerifiedUntrusted:hover { + background: var(--color-yellow-badge-hover-bg) !important; +} + +.repository #commits-table td.sha .sha.label.isSigned.isVerifiedUnmatched, +.repository #repo-files-table .sha.label.isSigned.isVerifiedUnmatched, +.repository #repo-file-commit-box .sha.label.isSigned.isVerifiedUnmatched, +.repository #rev-list .sha.label.isSigned.isVerifiedUnmatched, +.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerifiedUnmatched { + border: 1px solid var(--color-orange-badge); + background: var(--color-orange-badge-bg); +} + +.repository #commits-table td.sha .sha.label.isSigned.isVerifiedUnmatched .detail.icon, +.repository #repo-files-table .sha.label.isSigned.isVerifiedUnmatched .detail.icon, +.repository #repo-file-commit-box .sha.label.isSigned.isVerifiedUnmatched .detail.icon, +.repository #rev-list .sha.label.isSigned.isVerifiedUnmatched .detail.icon, +.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerifiedUnmatched .detail.icon { + border-left: 1px solid var(--color-orange-badge); + color: var(--color-orange-badge); +} + +.repository #commits-table td.sha .sha.label.isSigned.isVerifiedUnmatched:hover, +.repository #repo-files-table .sha.label.isSigned.isVerifiedUnmatched:hover, +.repository #repo-file-commit-box .sha.label.isSigned.isVerifiedUnmatched:hover, +.repository #rev-list .sha.label.isSigned.isVerifiedUnmatched:hover, +.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerifiedUnmatched:hover { + background: var(--color-orange-badge-hover-bg) !important; +} + +.singular-commit .shabox .sha.label { + margin: 0; + border: 1px solid var(--color-light-border); +} + +.singular-commit .shabox .sha.label.isSigned.isWarning { + border: 1px solid var(--color-red-badge); + background: var(--color-red-badge-bg); +} + +.singular-commit .shabox .sha.label.isSigned.isWarning:hover { + background: var(--color-red-badge-hover-bg) !important; +} + +.singular-commit .shabox .sha.label.isSigned.isVerified { + border: 1px solid var(--color-green-badge); + background: var(--color-green-badge-bg); +} + +.singular-commit .shabox .sha.label.isSigned.isVerified:hover { + background: var(--color-green-badge-hover-bg) !important; +} + +.singular-commit .shabox .sha.label.isSigned.isVerifiedUntrusted { + border: 1px solid var(--color-yellow-badge); + background: var(--color-yellow-badge-bg); +} + +.singular-commit .shabox .sha.label.isSigned.isVerifiedUntrusted:hover { + background: var(--color-yellow-badge-hover-bg) !important; +} + +.singular-commit .shabox .sha.label.isSigned.isVerifiedUnmatched { + border: 1px solid var(--color-orange-badge); + background: var(--color-orange-badge-bg); +} + +.singular-commit .shabox .sha.label.isSigned.isVerifiedUnmatched:hover { + background: var(--color-orange-badge-hover-bg) !important; +} diff --git a/web_src/css/repo/home-file-list.css b/web_src/css/repo/home-file-list.css new file mode 100644 index 0000000000000..eab2124d6f489 --- /dev/null +++ b/web_src/css/repo/home-file-list.css @@ -0,0 +1,70 @@ +#repo-files-table { + width: 100%; + display: grid; + grid-template-columns: auto 1fr auto; + border: 1px solid var(--color-light-border); + border-radius: var(--border-radius); + margin: 10px 0; /* match the "clone-panel-popup" margin to avoid "visual double-border" */ +} + +#repo-files-table .svg.octicon-file-directory-fill, +#repo-files-table .svg.octicon-file-submodule { + color: var(--color-primary); +} + +#repo-files-table .svg.octicon-file, +#repo-files-table .svg.octicon-file-symlink-file, +#repo-files-table .svg.octicon-file-directory-symlink { + color: var(--color-secondary-dark-7); +} + +#repo-files-table .repo-file-item { + display: contents; +} + +#repo-files-table .repo-file-item:hover > .repo-file-cell { + background: var(--color-hover); +} + +#repo-files-table .repo-file-line, +#repo-files-table .repo-file-cell { + border-top: 1px solid var(--color-light-border); + padding: 6px 10px; +} + +#repo-files-table .repo-file-line:first-child { + border-top: none; +} + +#repo-files-table .repo-file-line { + grid-column: 1 / span 3; + display: flex; + align-items: center; + gap: 0.5em; + padding: 6px 10px; +} + +#repo-files-table .repo-file-cell.name { + max-width: 300px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +#repo-files-table .repo-file-cell.message { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + color: var(--color-text-light-1); +} + +#repo-files-table .repo-file-cell.age { + 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/js/features/repo-common.ts b/web_src/js/features/repo-common.ts index 336deb125fa1b..40932f66678a8 100644 --- a/web_src/js/features/repo-common.ts +++ b/web_src/js/features/repo-common.ts @@ -1,5 +1,4 @@ -import $ from 'jquery'; -import {hideElem, queryElems, showElem} from '../utils/dom.ts'; +import {queryElems} from '../utils/dom.ts'; import {POST} from '../modules/fetch.ts'; import {showErrorToast} from '../modules/toast.ts'; import {sleep} from '../utils.ts'; @@ -92,6 +91,8 @@ function initCloneSchemeUrlSelection(parent: Element) { function initClonePanelButton(btn: HTMLButtonElement) { const elPanel = btn.nextElementSibling; + // "init" must be before the "createTippy" otherwise the "tippy-target" will be removed from the document + initCloneSchemeUrlSelection(elPanel); createTippy(btn, { content: elPanel, trigger: 'click', @@ -99,7 +100,6 @@ function initClonePanelButton(btn: HTMLButtonElement) { interactive: true, hideOnClick: true, }); - initCloneSchemeUrlSelection(elPanel); } export function initRepoCloneButtons() { @@ -107,33 +107,6 @@ export function initRepoCloneButtons() { queryElems(document, '.clone-buttons-combo', initCloneSchemeUrlSelection); } -export function initRepoCommonBranchOrTagDropdown(selector: string) { - $(selector).each(function () { - const $dropdown = $(this); - $dropdown.find('.reference.column').on('click', function () { - hideElem($dropdown.find('.scrolling.reference-list-menu')); - showElem($($(this).data('target'))); - return false; - }); - }); -} - -export function initRepoCommonFilterSearchDropdown(selector: string) { - const $dropdown = $(selector); - if (!$dropdown.length) return; - - $dropdown.dropdown({ - fullTextSearch: 'exact', - selectOnKeydown: false, - onChange(_text, _value, $choice) { - if ($choice[0].getAttribute('data-url')) { - window.location.href = $choice[0].getAttribute('data-url'); - } - }, - message: {noResults: $dropdown[0].getAttribute('data-no-results')}, - }); -} - export async function updateIssuesMeta(url, action, issue_ids, id) { try { const response = await POST(url, {data: new URLSearchParams({action, issue_ids, id})}); diff --git a/web_src/js/features/repo-legacy.ts b/web_src/js/features/repo-legacy.ts index 2f760f1d153f9..eaa9e3742a869 100644 --- a/web_src/js/features/repo-legacy.ts +++ b/web_src/js/features/repo-legacy.ts @@ -8,9 +8,7 @@ import { } from './repo-issue.ts'; import {initUnicodeEscapeButton} from './repo-unicode-escape.ts'; import {initRepoBranchTagSelector} from '../components/RepoBranchTagSelector.vue'; -import { - initRepoCloneButtons, initRepoCommonBranchOrTagDropdown, initRepoCommonFilterSearchDropdown, -} from './repo-common.ts'; +import {initRepoCloneButtons} from './repo-common.ts'; import {initCitationFileCopyContent} from './citation.ts'; import {initCompLabelEdit} from './comp/LabelEdit.ts'; import {initRepoDiffConversationNav} from './repo-diff.ts'; @@ -36,6 +34,33 @@ export function initBranchSelectorTabs() { }); } +function initRepoCommonBranchOrTagDropdown(selector: string) { + $(selector).each(function () { + const $dropdown = $(this); + $dropdown.find('.reference.column').on('click', function () { + hideElem($dropdown.find('.scrolling.reference-list-menu')); + showElem($($(this).data('target'))); + return false; + }); + }); +} + +function initRepoCommonFilterSearchDropdown(selector: string) { + const $dropdown = $(selector); + if (!$dropdown.length) return; + + $dropdown.dropdown({ + fullTextSearch: 'exact', + selectOnKeydown: false, + onChange(_text, _value, $choice) { + if ($choice[0].getAttribute('data-url')) { + window.location.href = $choice[0].getAttribute('data-url'); + } + }, + message: {noResults: $dropdown[0].getAttribute('data-no-results')}, + }); +} + export function initRepository() { if (!$('.page-content.repository').length) return;