Tweak pull request branch delete ui (#23951)

- Move delete button to right and remove red color on it.
- Remove CLI instructions when PR has been merged.

Before:

<img width="855" alt="Screenshot 2023-04-06 at 20 21 47"
src="https://user-images.githubusercontent.com/115237/230463178-95735fc0-9632-4d51-bbd5-2131c40186c4.png">

After:

<img width="865" alt="Screenshot 2023-04-06 at 20 23 17"
src="https://user-images.githubusercontent.com/115237/230463347-8155cbf9-4e58-421a-93a8-56ce6188dab8.png">

After (deleted):

<img width="860" alt="Screenshot 2023-04-06 at 20 19 30"
src="https://user-images.githubusercontent.com/115237/230463442-f53d7500-191d-4d75-a097-d100a461672a.png">

---------

Co-authored-by: Giteabot <[email protected]>

Author: silverwind

options/locale/locale_en-US.ini

@@ -1623,11 +1623,11 @@ pulls.tab_files = Files Changed
 pulls.reopen_to_merge = Please reopen this pull request to perform a merge.
 pulls.cant_reopen_deleted_branch = This pull request cannot be reopened because the branch was deleted.
 pulls.merged = Merged
-pulls.merged_as = The pull request has been merged as <a rel="nofollow" class="ui sha" href="%[1]s"><code>%[2]s</code></a>.
+pulls.merged_success = Pull request successfully merged and closed
+pulls.closed = Pull request closed
 pulls.manually_merged = Manually merged
-pulls.manually_merged_as = The pull request has been manually merged as <a rel="nofollow" class="ui sha" href="%[1]s"><code>%[2]s</code></a>.
+pulls.merged_info_text = The branch %s can now be deleted.
 pulls.is_closed = The pull request has been closed.
-pulls.has_merged = The pull request has been merged.
 pulls.title_wip_desc = `<a href="#">Start the title with <strong>%s</strong></a> to prevent the pull request from being merged accidentally.`
 pulls.cannot_merge_work_in_progress = This pull request is marked as a work in progress.
 pulls.still_in_progress = Still in progress?

templates/repo/issue/view_content/pull.tmpl

@@ -109,7 +109,7 @@
 	</div>
 {{end}}
 <div class="timeline-item comment merge box">
-	<a class="timeline-avatar text  {{if .Issue.PullRequest.HasMerged}}purple
+	<a class="timeline-avatar text {{if .Issue.PullRequest.HasMerged}}purple
 	{{- else if .Issue.IsClosed}}grey
 	{{- else if .IsPullWorkInProgress}}grey
 	{{- else if .IsFilesConflicted}}grey
@@ -131,38 +131,37 @@
 		{{$showGeneralMergeForm := false}}
 		<div class="ui attached merge-section segment {{if not $.LatestCommitStatus}}no-header{{end}}">
 			{{if .Issue.PullRequest.HasMerged}}
-				<div class="item text">
-					{{if .Issue.PullRequest.MergedCommitID}}
-						{{$link := printf "%s/commit/%s" $.Repository.Link (.Issue.PullRequest.MergedCommitID|PathEscape)}}
-						{{if eq $.Issue.PullRequest.Status 3}}
-							{{$.locale.Tr "repo.pulls.manually_merged_as" ($link|Escape) (ShortSha .Issue.PullRequest.MergedCommitID) | Safe}}
-						{{else}}
-							{{$.locale.Tr "repo.pulls.merged_as" ($link|Escape) (ShortSha .Issue.PullRequest.MergedCommitID) | Safe}}
-						{{end}}
-					{{else}}
-						{{$.locale.Tr "repo.pulls.has_merged"}}
+				<div class="item item-section text gt-f1">
+					<div class="item-section-left">
+						<h3 class="gt-mb-3">{{$.locale.Tr "repo.pulls.merged_success"}}</h3>
+						<div class="merge-section-info">
+							{{$.locale.Tr "repo.pulls.merged_info_text" (printf "<code>%s</code>" (.HeadTarget | Escape)) | Str2html}}
+						</div>
+					</div>
+					{{if .IsPullBranchDeletable}}
+						<div class="item-section-right">
+							<button class="delete-button ui button" data-url="{{.DeleteBranchLink}}">{{$.locale.Tr "repo.branch.delete_html"}}</button>
+						</div>
 					{{end}}
 				</div>
-				{{if .IsPullBranchDeletable}}
-					<div class="ui divider"></div>
-					<div>
-						<a class="delete-button ui red button" href="" data-url="{{.DeleteBranchLink}}">{{$.locale.Tr "repo.branch.delete" .HeadTarget}}</a>
-					</div>
-				{{end}}
 			{{else if .Issue.IsClosed}}
-				<div class="item text">
-					{{if .IsPullRequestBroken}}
-						{{$.locale.Tr "repo.pulls.cant_reopen_deleted_branch"}}
-					{{else}}
-						{{$.locale.Tr "repo.pulls.reopen_to_merge"}}
+				<div class="item item-section text gt-f1">
+					<div class="item-section-left">
+						<h3 class="gt-mb-3">{{$.locale.Tr "repo.pulls.closed"}}</h3>
+						<div class="merge-section-info">
+							{{if .IsPullRequestBroken}}
+								{{$.locale.Tr "repo.pulls.cant_reopen_deleted_branch"}}
+							{{else}}
+								{{$.locale.Tr "repo.pulls.reopen_to_merge"}}
+							{{end}}
+						</div>
+					</div>
+					{{if and .IsPullBranchDeletable (not .IsPullRequestBroken)}}
+						<div class="item-section-right">
+							<button class="delete-button ui button" data-url="{{.DeleteBranchLink}}">{{$.locale.Tr "repo.branch.delete_html"}}</button>
+						</div>
 					{{end}}
 				</div>
-				{{if and .IsPullBranchDeletable ( not .IsPullRequestBroken )}}
-					<div class="ui divider"></div>
-					<div>
-						<a class="delete-button ui red button" href="" data-url="{{.DeleteBranchLink}}">{{$.locale.Tr "repo.branch.delete" .HeadTarget}}</a>
-					</div>
-				{{end}}
 			{{else if .IsPullFilesConflicted}}
 				<div class="item text">
 					{{svg "octicon-x"}}
@@ -471,7 +470,7 @@
 				</div>
 			{{end}}
 
-			{{if and .ShowMergeInstructions .Issue.PullRequest.HeadRepo}}
+			{{if and .ShowMergeInstructions .Issue.PullRequest.HeadRepo (not .Issue.PullRequest.HasMerged) (not .Issue.IsClosed)}}
 				{{template "repo/issue/view_content/pull_merge_instruction" (dict "locale" .locale "Issue" .Issue)}}
 			{{end}}
 		</div>

web_src/css/repository.css

@@ -694,9 +694,9 @@
   margin-right: 5px;
 }
 
-.repository.view.issue .pull .merge.box .avatar {
-  margin-left: 10px;
-  margin-top: 10px;
+.repository.view.issue .pull .merge.box .timeline-avatar {
+  margin-top: 3px;
+  margin-left: 4px;
 }
 
 .repository.view.issue .pull .merge.box .branch-update.grid .row {
@@ -1036,6 +1036,13 @@
   margin-top: -8px;
 }
 
+.merge-section-info code {
+  border: 1px solid var(--color-light-border);
+  border-radius: 4px;
+  padding: 2px 4px;
+  background: var(--color-light);
+}
+
 .repository.view.issue .comment-list .comment .markup {
   font-size: 14px;
 }