Synchronized repository commit page layout and styles

This commit is contained in:
lutinglt
2025-11-29 18:09:27 +08:00
parent ca7207db06
commit 3084a5f54e
9 changed files with 474 additions and 1 deletions

View File

@@ -7,6 +7,7 @@
##### Template File ##### Template File
- Synchronized repository commit page layout and styles
- Synchronized repository code list page layout and styles - Synchronized repository code list page layout and styles
- Synchronized repository add file button menu styles - Synchronized repository add file button menu styles

View File

@@ -0,0 +1,81 @@
{{/* Template attributes:
* Commit
* CommitBaseLink
* CommitSignVerification
If you'd like to modify this template, you could test it on the devtest page.
ATTENTION: this template could be re-rendered many times (on the graph and commit list page),
so this template should be kept as small as possible, DO NOT put large components like modal/dialog into it.
*/}}
{{- $commit := $.Commit -}}
{{- $commitBaseLink := $.CommitBaseLink -}}
{{- $verification := $.CommitSignVerification -}}{{- /* asymkey.CommitVerification */ -}}
{{- $extraClass := "" -}}
{{- $verified := false -}}
{{- $signingUser := NIL -}}
{{- $signingEmail := "" -}}
{{- $msgReasonPrefix := "" -}}
{{- $msgReason := "" -}}
{{- $msgSigningKey := "" -}}
{{- if $verification -}}
{{- $signingUser = $verification.SigningUser -}}
{{- $signingEmail = $verification.SigningEmail -}}
{{- $extraClass = print $extraClass " commit-is-signed" -}}
{{- if $verification.Verified -}}
{{- /* reason is "{name} / {key-id}" */ -}}
{{- $msgReason = $verification.Reason -}}
{{- $verified = true -}}
{{- if eq $verification.TrustStatus "trusted" -}}
{{- $extraClass = print $extraClass " sign-trusted" -}}
{{- else if eq $verification.TrustStatus "untrusted" -}}
{{- $extraClass = print $extraClass " sign-untrusted" -}}
{{- $msgReasonPrefix = ctx.Locale.Tr "repo.commits.signed_by_untrusted_user" -}}
{{- else -}}
{{- $extraClass = print $extraClass " sign-unmatched" -}}
{{- $msgReasonPrefix = ctx.Locale.Tr "repo.commits.signed_by_untrusted_user_unmatched" -}}
{{- end -}}
{{- else -}}
{{- if $verification.Warning -}}
{{- $extraClass = print $extraClass " sign-warning" -}}
{{- else -}}
{{- $extraClass = "" -}}{{/* the commit is not signed */}}
{{- end -}}
{{- $msgReason = ctx.Locale.Tr $verification.Reason -}}{{- /* dirty part: it is the translation key ..... */ -}}
{{- end -}}
{{- if $msgReasonPrefix -}}
{{- $msgReason = print $msgReasonPrefix ": " $msgReason -}}
{{- end -}}
{{- if $verification.SigningSSHKey -}}
{{- $msgSigningKey = print (ctx.Locale.Tr "repo.commits.ssh_key_fingerprint") ": " $verification.SigningSSHKey.Fingerprint -}}
{{- else if $verification.SigningKey -}}{{- /* asymkey.GPGKey */ -}}
{{- $msgSigningKey = print (ctx.Locale.Tr "repo.commits.gpg_key_id") ": " $verification.SigningKey.PaddedKeyID -}}
{{- end -}}
{{- end -}}
{{- if $commit -}}
<a {{if $commitBaseLink}}href="{{$commitBaseLink}}/{{$commit.ID}}"{{end}} class="ui label commit-id-short {{$extraClass}}" rel="nofollow">
{{- ShortSha $commit.ID.String -}}
{{- end -}}
{{- if or (not $commit) $extraClass}}{{/* only show the lock icon if there is no commit info (icon only) or the commit is really signed */}}
<span class="ui label commit-sign-badge {{$extraClass}}">
{{- if $verified -}}
{{- if and $signingUser $signingUser.ID -}}
<span data-tooltip-content="{{$msgReason}}">{{svg "gitea-lock"}}</span>
<span data-tooltip-content="{{$msgSigningKey}}">{{ctx.AvatarUtils.Avatar $signingUser 16}}</span>
{{- else -}}
<span data-tooltip-content="{{$msgReason}}">{{svg "gitea-lock-cog"}}</span>
<span data-tooltip-content="{{$msgSigningKey}}">{{ctx.AvatarUtils.AvatarByEmail $signingEmail "" 16}}</span>
{{- end -}}
{{- else -}}
<span data-tooltip-content="{{$msgReason}}">{{svg "gitea-unlock"}}</span>
{{- end -}}
</span>
{{- end -}}
{{- if $commit -}}
</a>
{{- end -}}
{{- /* This template should be kept as small as possible, DO NOT put large components like modal/dialog into it. */ -}}

View File

@@ -0,0 +1,89 @@
<div class="ui attached table segment commit-table">
<table class="ui very basic striped table unstackable" id="commits-table">
<thead>
<tr>
<th class="three wide">{{ctx.Locale.Tr "repo.commits.author"}}</th>
<th class="two wide sha">{{StringUtils.ToUpper $.Repository.ObjectFormatName}}</th>
<th class="eight wide message">{{ctx.Locale.Tr "repo.commits.message"}}</th>
<th class="two wide tw-text-right">{{ctx.Locale.Tr "repo.commits.date"}}</th>
<th class="one wide"></th>
</tr>
</thead>
<tbody class="commit-list">
{{$commitRepoLink := $.RepoLink}}{{if $.CommitRepoLink}}{{$commitRepoLink = $.CommitRepoLink}}{{end}}
{{range .Commits}}
<tr>
<td class="author">
<div class="tw-flex">
{{$userName := .Author.Name}}
{{if .User}}
{{if and .User.FullName DefaultShowFullName}}
{{$userName = .User.FullName}}
{{end}}
{{ctx.AvatarUtils.Avatar .User 28 "tw-mr-2"}}<a class="muted author-wrapper" href="{{.User.HomeLink}}">{{$userName}}</a>
{{else}}
{{ctx.AvatarUtils.AvatarByEmail .Author.Email .Author.Name 28 "tw-mr-2"}}
<span class="author-wrapper">{{$userName}}</span>
{{end}}
</div>
</td>
<td class="sha">
{{$commitBaseLink := ""}}
{{if $.PageIsWiki}}
{{$commitBaseLink = printf "%s/wiki/commit" $commitRepoLink}}
{{else if $.PageIsPullCommits}}
{{$commitBaseLink = printf "%s/pulls/%d/commits" $commitRepoLink $.Issue.Index}}
{{else if $.Reponame}}
{{$commitBaseLink = printf "%s/commit" $commitRepoLink}}
{{end}}
{{template "repo/commit_sign_badge" dict "Commit" . "CommitBaseLink" $commitBaseLink "CommitSignVerification" .Verification}}
</td>
<td class="message">
<span class="message-wrapper">
{{if $.PageIsWiki}}
<span class="commit-summary {{if gt .ParentCount 1}} grey text{{end}}" title="{{.Summary}}">{{.Summary | ctx.RenderUtils.RenderEmoji}}</span>
{{else}}
{{$commitLink:= printf "%s/commit/%s" $commitRepoLink (PathEscape .ID.String)}}
<span class="commit-summary {{if gt .ParentCount 1}} grey text{{end}}" title="{{.Summary}}">{{ctx.RenderUtils.RenderCommitMessageLinkSubject .Message $commitLink $.Repository}}</span>
{{end}}
</span>
{{if IsMultilineCommitMessage .Message}}
<button class="ui button ellipsis-button" aria-expanded="false" data-global-click="onRepoEllipsisButtonClick">...</button>
{{end}}
{{template "repo/commit_statuses" dict "Status" .Status "Statuses" .Statuses}}
{{if IsMultilineCommitMessage .Message}}
<pre class="commit-body tw-hidden">{{ctx.RenderUtils.RenderCommitBody .Message $.Repository}}</pre>
{{end}}
{{if $.CommitsTagsMap}}
{{range (index $.CommitsTagsMap .ID.String)}}
{{- template "repo/tag/name" dict "AdditionalClasses" "tw-py-0" "RepoLink" $.Repository.Link "TagName" .TagName "IsRelease" (not .IsTag) -}}
{{end}}
{{end}}
</td>
{{if .Committer}}
<td class="tw-text-right">{{DateUtils.TimeSince .Committer.When}}</td>
{{else}}
<td class="tw-text-right">{{DateUtils.TimeSince .Author.When}}</td>
{{end}}
<td class="tw-text-right tw-py-0">
<button class="btn interact-bg tw-p-2 copy-commit-id" data-tooltip-content="{{ctx.Locale.Tr "copy_hash"}}" data-clipboard-text="{{.ID}}">{{svg "octicon-copy"}}</button>
{{/* at the moment, wiki doesn't support these "view" links like "view at history point" */}}
{{if not $.PageIsWiki}}
{{/* view single file diff */}}
{{if $.FileTreePath}}
<a class="btn interact-bg tw-p-2 view-single-diff" data-tooltip-content="{{ctx.Locale.Tr "repo.commits.view_file_diff"}}"
href="{{$commitRepoLink}}/commit/{{.ID.String}}?files={{$.FileTreePath}}"
>{{svg "octicon-file-diff"}}</a>
{{end}}
{{/* view at history point */}}
{{$viewCommitLink := printf "%s/src/commit/%s" $commitRepoLink (PathEscape .ID.String)}}
{{if $.FileTreePath}}{{$viewCommitLink = printf "%s/%s" $viewCommitLink (PathEscapeSegments $.FileTreePath)}}{{end}}
<a class="btn interact-bg tw-p-2 view-commit-path" data-tooltip-content="{{ctx.Locale.Tr "repo.commits.view_path"}}" href="{{$viewCommitLink}}">{{svg "octicon-file-code"}}</a>
{{end}}
</td>
</tr>
{{end}}
</tbody>
</table>
</div>

View File

@@ -1,6 +1,6 @@
{ {
"name": "gitea-github-theme", "name": "gitea-github-theme",
"version": "1.25.3.rc", "version": "1.25.3",
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "vite build --mode dev", "dev": "vite build --mode dev",

View File

@@ -0,0 +1,16 @@
import { css, themeVars, otherThemeVars } from "src/types/vars";
export const commitSignBadge = css`
.github-theme-sha {
border-radius: ${otherThemeVars.border.radius};
font-weight: 500;
padding: 0px 8px;
height: 26px;
display: flex;
align-items: center;
justify-content: center;
&:hover {
background-color: ${themeVars.color.hover.self};
}
}
`;

View File

@@ -0,0 +1,121 @@
import { css, themeVars } from "src/types/vars";
const primary = "primary" as const;
const secondary = "secondary" as const;
const metadata = "metadata" as const;
const actions = "actions" as const;
export const commitsList = css`
ul.github-theme-templates-commits-list {
margin: 0;
padding: 0;
list-style: none;
li.github-theme-commit {
border-bottom: 1px solid ${themeVars.color.secondary.self};
padding: 8px 16px;
display: grid;
grid-template-areas: "${primary} ${metadata} ${actions}" "${secondary} ${metadata} ${actions}";
grid-template-rows: repeat(2, auto);
grid-template-columns: minmax(30%, 1fr) minmax(0, max-content) min-content;
&:last-child {
border-bottom: none;
}
&:hover {
background-color: ${themeVars.color.hover.opaque};
}
.message {
grid-area: ${primary};
.commit-summary {
font-size: 16px;
font-weight: 500;
white-space: pre-wrap;
}
.ellipsis-button {
padding: unset;
height: 1.5rem;
min-width: 1.75rem;
background: unset;
border: unset;
vertical-align: bottom;
&:hover {
background: ${themeVars.color.hover.self};
}
}
.commit-body {
font-size: 12px;
font-weight: 400;
color: ${themeVars.color.text.light.num1};
margin: 8px 0;
}
}
.metadata {
grid-area: ${secondary};
font-size: 12px;
color: ${themeVars.color.text.light.num1};
display: flex;
align-items: center;
flex-direction: row;
gap: 4px;
img.ui.avatar {
border-radius: 9999px;
margin-right: 4px;
}
.ui.label svg {
min-width: 12px;
min-height: 12px;
width: 12px;
height: 12px;
}
}
.extra {
grid-area: ${metadata};
display: flex;
align-items: center;
flex-direction: row;
flex-wrap: wrap;
column-gap: 8px;
.github-theme-tag {
border-width: 1.5px;
border-radius: 9999px;
height: 25px;
}
.commit-id-short {
gap: 8px;
padding: unset;
margin: unset;
height: 28px;
margin: 0 4px;
&.commit-is-signed {
&:hover {
background-color: unset !important;
}
span.ui.label.commit-sign-badge.commit-is-signed {
margin: unset;
}
}
}
}
.actions {
grid-area: ${actions};
display: flex;
align-items: center;
flex-direction: row;
gap: 4px;
color: ${themeVars.color.text.light.num1};
.github-theme-action {
justify-content: center;
height: 28px;
width: 28px;
}
}
}
}
@media (max-width: 767.98px) {
ul.github-theme-templates-commits-list {
li.github-theme-commit {
grid-template-areas: "${primary} ${primary}" "${metadata} ${actions}" "${secondary} ${actions}";
grid-template-rows: repeat(3, auto);
}
}
}
`;

View File

@@ -1,2 +1,4 @@
import "./commit_sign_badge";
import "./commits_list";
import "./view_content"; import "./view_content";
import "./view_list"; import "./view_list";

View File

@@ -0,0 +1,81 @@
{{/* Template attributes:
* Commit
* CommitBaseLink
* CommitSignVerification
If you'd like to modify this template, you could test it on the devtest page.
ATTENTION: this template could be re-rendered many times (on the graph and commit list page),
so this template should be kept as small as possible, DO NOT put large components like modal/dialog into it.
*/}}
{{- $commit := $.Commit -}}
{{- $commitBaseLink := $.CommitBaseLink -}}
{{- $verification := $.CommitSignVerification -}}{{- /* asymkey.CommitVerification */ -}}
{{- $extraClass := "" -}}
{{- $verified := false -}}
{{- $signingUser := NIL -}}
{{- $signingEmail := "" -}}
{{- $msgReasonPrefix := "" -}}
{{- $msgReason := "" -}}
{{- $msgSigningKey := "" -}}
{{- if $verification -}}
{{- $signingUser = $verification.SigningUser -}}
{{- $signingEmail = $verification.SigningEmail -}}
{{- $extraClass = print $extraClass " commit-is-signed" -}}
{{- if $verification.Verified -}}
{{- /* reason is "{name} / {key-id}" */ -}}
{{- $msgReason = $verification.Reason -}}
{{- $verified = true -}}
{{- if eq $verification.TrustStatus "trusted" -}}
{{- $extraClass = print $extraClass " sign-trusted" -}}
{{- else if eq $verification.TrustStatus "untrusted" -}}
{{- $extraClass = print $extraClass " sign-untrusted" -}}
{{- $msgReasonPrefix = ctx.Locale.Tr "repo.commits.signed_by_untrusted_user" -}}
{{- else -}}
{{- $extraClass = print $extraClass " sign-unmatched" -}}
{{- $msgReasonPrefix = ctx.Locale.Tr "repo.commits.signed_by_untrusted_user_unmatched" -}}
{{- end -}}
{{- else -}}
{{- if $verification.Warning -}}
{{- $extraClass = print $extraClass " sign-warning" -}}
{{- else -}}
{{- $extraClass = "" -}}{{/* the commit is not signed */}}
{{- end -}}
{{- $msgReason = ctx.Locale.Tr $verification.Reason -}}{{- /* dirty part: it is the translation key ..... */ -}}
{{- end -}}
{{- if $msgReasonPrefix -}}
{{- $msgReason = print $msgReasonPrefix ": " $msgReason -}}
{{- end -}}
{{- if $verification.SigningSSHKey -}}
{{- $msgSigningKey = print (ctx.Locale.Tr "repo.commits.ssh_key_fingerprint") ": " $verification.SigningSSHKey.Fingerprint -}}
{{- else if $verification.SigningKey -}}{{- /* asymkey.GPGKey */ -}}
{{- $msgSigningKey = print (ctx.Locale.Tr "repo.commits.gpg_key_id") ": " $verification.SigningKey.PaddedKeyID -}}
{{- end -}}
{{- end -}}
{{- if $commit -}}
<a {{if $commitBaseLink}}href="{{$commitBaseLink}}/{{$commit.ID}}"{{end}} class="ui label commit-id-short {{$extraClass}}" rel="nofollow">
{{- end -}}
{{- if or (not $commit) $extraClass}}{{/* only show the lock icon if there is no commit info (icon only) or the commit is really signed */}}
<span class="ui label commit-sign-badge {{$extraClass}}">
{{- if $verified -}}
{{- if and $signingUser $signingUser.ID -}}
<span data-tooltip-content="{{$msgReason}}">{{svg "gitea-lock"}}</span>
<span data-tooltip-content="{{$msgSigningKey}}">{{ctx.AvatarUtils.Avatar $signingUser 16}}</span>
{{- else -}}
<span data-tooltip-content="{{$msgReason}}">{{svg "gitea-lock-cog"}}</span>
<span data-tooltip-content="{{$msgSigningKey}}">{{ctx.AvatarUtils.AvatarByEmail $signingEmail "" 16}}</span>
{{- end -}}
{{- else -}}
<span data-tooltip-content="{{$msgReason}}">{{svg "gitea-unlock"}}</span>
{{- end -}}
</span>
{{- end -}}
{{- if $commit -}}
<span class="github-theme-sha">{{- ShortSha $commit.ID.String -}}</span>
</a>
{{- end -}}
{{- /* This template should be kept as small as possible, DO NOT put large components like modal/dialog into it. */ -}}

View File

@@ -0,0 +1,82 @@
<div class="ui attached table segment commit-table">
<ul class="github-theme-templates-commits-list">
{{$commitRepoLink := $.RepoLink}}{{if $.CommitRepoLink}}{{$commitRepoLink = $.CommitRepoLink}}{{end}}
{{range.Commits}}
<li class="github-theme-commit">
{{/* 提交信息 */}}
<div class="message">
{{if $.PageIsWiki}}
<span class="commit-summary" title="{{.Summary}}">{{.Summary | ctx.RenderUtils.RenderEmoji}}</span>
{{else}}
{{$commitLink:= printf "%s/commit/%s" $commitRepoLink (PathEscape .ID.String)}}
<span class="commit-summary" title="{{.Summary}}">{{ctx.RenderUtils.RenderCommitMessageLinkSubject .Message $commitLink $.Repository}}</span>
{{end}}
{{if IsMultilineCommitMessage .Message}}
<button class="ui button ellipsis-button" aria-expanded="false" data-global-click="onRepoEllipsisButtonClick">{{svg "octicon-ellipsis" 16}}</button>
{{end}}
{{if IsMultilineCommitMessage .Message}}
<pre class="commit-body tw-hidden">{{ctx.RenderUtils.RenderCommitBody .Message $.Repository}}</pre>
{{end}}
</div>
{{/* 提交者信息 */}}
<div class="metadata">
{{/* 头像 */}}
{{$userName := .Author.Name}}
{{if .User}}
{{if and .User.FullName DefaultShowFullName}}
{{$userName = .User.FullName}}
{{end}}
{{ctx.AvatarUtils.Avatar .User 16}}<a class="muted author-wrapper" href="{{.User.HomeLink}}">{{$userName}}</a>
{{else}}
{{ctx.AvatarUtils.AvatarByEmail .Author.Email .Author.Name 16}}
<span class="author-wrapper">{{$userName}}</span>
{{end}}
{{/* 时间 */}}
·
{{if .Committer}}
{{DateUtils.TimeSince .Committer.When}}
{{else}}
{{DateUtils.TimeSince .Author.When}}
{{end}}
{{/* 状态 */}}
{{template "repo/commit_statuses" dict "Status" .Status "Statuses" .Statuses}}
</div>
{{/* 提交哈希 */}}
<div class="extra">
{{/* 标签 */}}
{{if $.CommitsTagsMap}}
{{range (index $.CommitsTagsMap .ID.String)}}
{{- template "repo/tag/name" dict "AdditionalClasses" "github-theme-tag" "RepoLink" $.Repository.Link "TagName" .TagName "IsRelease" (not .IsTag) -}}
{{end}}
{{end}}
{{$commitBaseLink := ""}}
{{if $.PageIsWiki}}
{{$commitBaseLink = printf "%s/wiki/commit" $commitRepoLink}}
{{else if $.PageIsPullCommits}}
{{$commitBaseLink = printf "%s/pulls/%d/commits" $commitRepoLink $.Issue.Index}}
{{else if $.Reponame}}
{{$commitBaseLink = printf "%s/commit" $commitRepoLink}}
{{end}}
{{template "repo/commit_sign_badge" dict "Commit" . "CommitBaseLink" $commitBaseLink "CommitSignVerification" .Verification}}
</div>
{{/* 操作 */}}
<div class="actions">
<button class="btn interact-bg copy-commit-id github-theme-action" data-tooltip-content="{{ctx.Locale.Tr "copy_hash"}}" data-clipboard-text="{{.ID}}">{{svg "octicon-copy"}}</button>
{{/* at the moment, wiki doesn't support these "view" links like "view at history point" */}}
{{if not $.PageIsWiki}}
{{/* view single file diff */}}
{{if $.FileTreePath}}
<a class="btn interact-bg view-single-diff github-theme-action" data-tooltip-content="{{ctx.Locale.Tr "repo.commits.view_file_diff"}}"
href="{{$commitRepoLink}}/commit/{{.ID.String}}?files={{$.FileTreePath}}"
>{{svg "octicon-file-diff"}}</a>
{{end}}
{{/* view at history point */}}
{{$viewCommitLink := printf "%s/src/commit/%s" $commitRepoLink (PathEscape .ID.String)}}
{{if $.FileTreePath}}{{$viewCommitLink = printf "%s/%s" $viewCommitLink (PathEscapeSegments $.FileTreePath)}}{{end}}
<a class="btn interact-bg view-commit-path github-theme-action" data-tooltip-content="{{ctx.Locale.Tr "repo.commits.view_path"}}" href="{{$viewCommitLink}}">{{svg "octicon-code"}}</a>
{{end}}
</div>
</li>
{{end}}
</ul>
</div>