Enhance Change Request UI: Streamline Merge Options and Fix Commit Links

custom/options/locale/locale_en-US.ini

@@ -1112,7 +1112,7 @@ fork_article_confirm_yes = Yes, Fork article
 fork_article_confirm_cancel = Go back
 fork_article_confirm_body2 = If you'd like to collaborate on the article by making edits, return to the article, apply your changes, and submit.
 editor.edit_your_article = Edit Your Article
-editor.edit_in_your_fork = Edit in Your Fork
+editor.edit_in_your_fork = Fork
 editor.submit_changes = Submit Changes
 editor.submit_changes_tooltip = Submit your changes as a Change Request to the original article
 editor.submit_changes_confirm_title = Submit Changes
@@ -2014,7 +2014,7 @@ pulls.blocked_by_official_review_requests = "This change request has official re
 pulls.blocked_by_outdated_branch = "This change request is blocked because it's outdated."
 pulls.blocked_by_changed_protected_files_1= "This change request is blocked because it changes a protected file:"
 pulls.blocked_by_changed_protected_files_n= "This change request is blocked because it changes protected files:"
-pulls.can_auto_merge_desc = This change request can be merged automatically.
+pulls.can_auto_merge_desc = This change request has no conflicts with the latest article.
 pulls.cannot_auto_merge_desc = This change request cannot be merged automatically due to conflicts.
 pulls.cannot_auto_merge_helper = Merge manually to resolve the conflicts.
 pulls.num_conflicting_files_1 = "%d conflicting file"

custom/public/assets/css/base.custom.css

@@ -23,4 +23,52 @@
 .ui.form .field > .ui.input > input,
 .ui.form .field > .ui.input > textarea {
   border-radius: var(--border-radius);
+}
+
+.circle {
+	border-radius: 50% !important;
+	overflow: hidden;
+	width: 2rem;
+	height: 2rem;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.circle.small {
+	width: 1.5rem;
+	height: 1.5rem;
+}
+
+.circle svg {
+	width: 18px;
+	height: 18px;
+}
+
+.circle.small svg {
+	scale: .8;
+}
+
+.circle.green-light-1{
+	color: var(--color-white);
+	background-color: var(--color-green-light-1);
+	border: none !important;
+}
+
+.circle.red{
+	color: var(--color-white);
+	background-color: var(--color-red);
+	border: none !important;
+}
+
+.circle.yellow{
+	color: var(--color-white);
+	background-color: var(--color-yellow);
+	border: none !important;
+}
+
+.circle.grey{
+	color: var(--color-white);
+	background-color: var(--color-grey);
+	border: none !important;
 }

custom/public/assets/css/colors.custom.css

@@ -31,6 +31,7 @@ gitea-theme-meta-info {
   /* Green colors */
   --color-green: #1F883D;
   --color-green-light: #2DA44E;
+  --color-green-light-1: #1DD781;
   --color-green-dark-1: #1A7F37;
   --color-green-dark-2: #116329;
 
@@ -85,5 +86,8 @@ gitea-theme-meta-info {
   /* Tab colors */
   --color-tab-inactive: #969aa5;
   --color-tab-active-text: #555;
+
+  --color-red: #CF222E;
+  --color-yellow: #EBB400;
 }
 

custom/public/assets/css/repo.custom.css

@@ -21,6 +21,17 @@
   padding: 1rem;
 }
 
+/* Smaller timeline avatars */
+.timeline-avatar {
+  width: 28px !important;
+  height: 28px !important;
+}
+
+.timeline-avatar img {
+  width: 28px !important;
+  height: 28px !important;
+}
+
 @media (max-width: 767.98px) {
   .repository.view.issue .comment-list .comment .content .form .button:not(:last-child) {
       margin-bottom: 0 !important;
@@ -193,6 +204,12 @@
   overflow: hidden;
 }
 
+.repository .comment-container .diff-file-box {
+  border-radius: 0 !important;
+  border: none !important;
+  border-bottom: 1px solid var(--color-border) !important;
+}
+
 /* Remove inner borders to prevent double-border */
 .diff-file-box .ui.attached.table,
 .diff-file-box .ui.attached.header,

custom/templates/repo/commits_list.tmpl

@@ -0,0 +1,98 @@
+<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 if $.PageIsPullCommits}}
+							{{$commitLink:= printf "%s/pulls/%d/commits/%s" $commitRepoLink $.Issue.Index (PathEscape .ID.String)}}
+							<span class="commit-summary {{if gt .ParentCount 1}} grey text{{end}}" title="{{.Summary}}">{{ctx.RenderUtils.RenderCommitMessageLinkSubject .Message $commitLink $.Repository}}</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 */}}
+						{{if $.PageIsPullCommits}}
+							{{$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>
+						{{else}}
+							{{$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}}
+						{{end}}
+					</td>
+				</tr>
+			{{end}}
+		</tbody>
+	</table>
+</div>

custom/templates/repo/commits_list_small.tmpl

@@ -0,0 +1,55 @@
+{{$index := 0}}
+<div class="timeline-item commits-list">
+{{range .comment.Commits}}
+	{{$tag := printf "%s-%d" $.comment.HashTag $index}}
+	{{$index = Eval $index "+" 1}}
+	<div class="flex-text-block" id="{{$tag}}">{{/*singular-commit*/}}
+		<span class="badge badge-commit">{{svg "octicon-git-commit"}}</span>
+		{{if .User}}
+			<a class="avatar" href="{{.User.HomeLink}}">{{ctx.AvatarUtils.Avatar .User 20}}</a>
+		{{else}}
+			{{ctx.AvatarUtils.AvatarByEmail .Author.Email .Author.Name 20}}
+		{{end}}
+
+		{{$repoData := $.Repository}}
+		{{$repoLink := ""}}
+		{{if $.Repository}}
+			{{$repoLink = $.Repository.Link}}
+		{{end}}
+		{{if $.comment.Issue.PullRequest}}
+			{{if $.comment.Issue.PullRequest.BaseRepo}}
+				{{$repoData = $.comment.Issue.PullRequest.BaseRepo}}
+				{{$repoLink = $.comment.Issue.PullRequest.BaseRepo.Link}}
+			{{end}}
+		{{end}}
+
+		{{$commitBaseLink := ""}}
+		{{$commitLink := ""}}
+		{{if $.comment.Issue.IsPull}}
+			{{$commitBaseLink = printf "%s/pulls/%d/commits" $repoLink $.comment.Issue.Index}}
+			{{$commitLink = printf "%s/%s" $commitBaseLink (PathEscape .ID.String)}}
+		{{else}}
+			{{$commitBaseLink = printf "%s/commit" $repoLink}}
+			{{$commitLink = printf "%s/%s" $commitBaseLink (PathEscape .ID.String)}}
+		{{end}}
+
+		<span class="tw-flex-1 tw-font-mono gt-ellipsis" title="{{.Summary}}">
+			{{- ctx.RenderUtils.RenderCommitMessageLinkSubject .Message $commitLink $repoData -}}
+		</span>
+
+		{{if IsMultilineCommitMessage .Message}}
+			<button class="ui button ellipsis-button show-panel toggle" data-panel="[data-singular-commit-body-for='{{$tag}}']">...</button>
+		{{end}}
+
+		<span class="flex-text-block">
+			{{template "repo/commit_statuses" dict "Status" .Status "Statuses" .Statuses}}
+			{{template "repo/commit_sign_badge" dict "Commit" . "CommitBaseLink" $commitBaseLink "CommitSignVerification" .Verification}}
+		</span>
+	</div>
+	{{if IsMultilineCommitMessage .Message}}
+	<pre class="commit-body tw-ml-[33px] tw-hidden" data-singular-commit-body-for="{{$tag}}">
+		{{- ctx.RenderUtils.RenderCommitBody .Message $repoData -}}
+	</pre>
+	{{end}}
+{{end}}
+</div>

custom/templates/repo/issue/view_content/comments.tmpl

@@ -229,19 +229,7 @@
 					{{ctx.Locale.Tr "repo.issues.change_title_at" (.OldTitle|ctx.RenderUtils.RenderEmoji) (.NewTitle|ctx.RenderUtils.RenderEmoji) $createdStr}}
 				</span>
 			</div>
-		{{else if eq .Type 11}}
-			<!-- 11 = DELETE_BRANCH -->
-			<!--
-			<div class="timeline-item event" id="{{.HashTag}}">
-				<span class="badge">{{svg "octicon-git-branch"}}</span>
-				{# template "shared/user/avatarlink" dict "user" .Poster }
-				<span class="comment-text-line">
-					{# template "shared/user/authorlink" .Poster }
-					{{$oldRef := HTMLFormat `<span class="tw-line-through">%s</span>` .OldRef}}
-					{{ctx.Locale.Tr "repo.issues.delete_branch_at" $oldRef $createdStr}}
-				</span>
-			</div>
-			-->
+
 		{{else if eq .Type 12}}
 			<div class="timeline-item event" id="{{.HashTag}}">
 				<span class="badge">{{svg "octicon-clock"}}</span>
@@ -552,8 +540,7 @@
 				{{continue}}
 			{{end}}
 			<div class="timeline-item event" id="{{.HashTag}}">
-				<span class="badge">{{svg "octicon-repo-push"}}</span>
-				<span class="comment-text-line">
+				<span class="comment-text-line tw-ml-2">
 					{{template "shared/user/authorlink" .Poster}}
 					{{if .IsForcePush}}
 						{{ctx.Locale.Tr "repo.issues.force_push_codes" $.Issue.PullRequest.HeadBranch (ShortSha .OldCommit) ($.Issue.Repo.CommitLink .OldCommit) (ShortSha .NewCommit) ($.Issue.Repo.CommitLink .NewCommit) $createdStr}}