From e8173c2c33f1dd5b0a2c044255434d414cab62d2 Mon Sep 17 00:00:00 2001
From: sillyguodong <33891828+sillyguodong@users.noreply.github.com>
Date: Sun, 30 Apr 2023 23:08:51 +0800
Subject: Move `Rename branch` from repo settings page to the page of branches
 list (#24380)

Co-Author: @wxiaoguang

It is more convenient that user just need to enter a new branch name after he selects the branch which he want to rename.
So this PR move the function of renaming branch to the page of branches list.

This PR also restyle the button of `new branch`, `download`, `delete`....

https://user-images.githubusercontent.com/33891828/235277997-413060bb-759f-430a-b5c4-df5e40ffcd28.mov

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
---
 templates/repo/branch/list.tmpl | 82 +++++++++++++++++++++++++++++++----------
 1 file changed, 62 insertions(+), 20 deletions(-)

(limited to 'templates/repo/branch')

diff --git a/templates/repo/branch/list.tmpl b/templates/repo/branch/list.tmpl
index 40d6351301..53ca2b9b09 100644
--- a/templates/repo/branch/list.tmpl
+++ b/templates/repo/branch/list.tmpl
@@ -27,22 +27,36 @@
 							</td>
 							<td class="right aligned overflow-visible">
 								{{if and $.IsWriter (not $.Repository.IsArchived) (not .IsDeleted)}}
-									<button class="ui basic jump button icon show-create-branch-modal" data-tooltip-content="{{$.locale.Tr "repo.branch.new_branch_from" ($.DefaultBranch)}}" data-branch-from="{{$.DefaultBranch}}" data-branch-from-urlcomponent="{{PathEscapeSegments $.DefaultBranch}}" data-modal="#create-branch-modal">
+									<button class="ui tertiary button show-create-branch-modal gt-mx-3"
+										data-modal="#create-branch-modal"
+										data-branch-from="{{$.DefaultBranch}}"
+										data-branch-from-urlcomponent="{{PathEscapeSegments $.DefaultBranch}}"
+										data-tooltip-content="{{$.locale.Tr "repo.branch.new_branch_from" ($.DefaultBranch)}}"
+									>
 										{{svg "octicon-git-branch"}}
 									</button>
 								{{end}}
 								{{if .EnableFeed}}
-									<a role="button" class="ui basic button icon" href="{{$.FeedURL}}/rss/branch/{{PathEscapeSegments .DefaultBranch}}">
+									<a role="button" class="ui tertiary button gt-mx-3" href="{{$.FeedURL}}/rss/branch/{{PathEscapeSegments .DefaultBranch}}">
 										{{svg "octicon-rss"}}
 									</a>
 								{{end}}
 								{{if not $.DisableDownloadSourceArchives}}
-									<button class="ui basic jump dropdown icon button" data-tooltip-content="{{$.locale.Tr "repo.branch.download" ($.DefaultBranch)}}">
+									<div class="ui dropdown tertiary button gt-mx-3"  data-tooltip-content="{{$.locale.Tr "repo.branch.download" ($.DefaultBranch)}}">
 										{{svg "octicon-download"}}
 										<div class="menu">
 											<a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments $.DefaultBranch}}.zip" rel="nofollow">{{svg "octicon-file-zip"}}&nbsp;ZIP</a>
 											<a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments $.DefaultBranch}}.tar.gz" rel="nofollow">{{svg "octicon-file-zip"}}&nbsp;TAR.GZ</a>
 										</div>
+									</div>
+								{{end}}
+								{{if and $.IsWriter (not $.Repository.IsArchived) (not .IsDeleted) (not $.IsMirror)}}
+									<button class="ui tertiary button show-modal show-rename-branch-modal gt-mx-3"
+										data-modal="#rename-branch-modal"
+										data-old-branch-name="{{$.DefaultBranch}}"
+										data-tooltip-content="{{$.locale.Tr "repo.branch.rename" ($.DefaultBranch)}}"
+									>
+										{{svg "octicon-pencil"}}
 									</button>
 								{{end}}
 							</td>
@@ -119,33 +133,47 @@
 									</td>
 									<td class="three wide right aligned overflow-visible">
 										{{if and $.IsWriter (not $.Repository.IsArchived) (not .IsDeleted)}}
-											<button class="ui basic jump button icon show-create-branch-modal" data-branch-from="{{.Name}}" data-branch-from-urlcomponent="{{PathEscapeSegments .Name}}" data-tooltip-content="{{$.locale.Tr "repo.branch.new_branch_from" .Name}}" data-modal="#create-branch-modal" data-name="{{.Name}}">
+											<button class="ui tertiary button show-modal show-create-branch-modal gt-mx-3"
+												data-branch-from="{{.Name}}"
+												data-branch-from-urlcomponent="{{PathEscapeSegments .Name}}"
+												data-tooltip-content="{{$.locale.Tr "repo.branch.new_branch_from" .Name}}"
+												data-modal="#create-branch-modal" data-name="{{.Name}}"
+											>
 												{{svg "octicon-git-branch"}}
 											</button>
 										{{end}}
 										{{if $.EnableFeed}}
-											<a role="button" class="ui basic button icon" href="{{$.FeedURL}}/rss/branch/{{PathEscapeSegments .Name}}">
+											<a role="button" class="ui tertiary button gt-mx-3" href="{{$.FeedURL}}/rss/branch/{{PathEscapeSegments .Name}}">
 												{{svg "octicon-rss"}}
 											</a>
 										{{end}}
 										{{if and (not .IsDeleted) (not $.DisableDownloadSourceArchives)}}
-											<button class="ui basic jump dropdown icon button" data-tooltip-content="{{$.locale.Tr "repo.branch.download" (.Name)}}">
+											<div class="ui dropdown tertiary button gt-mx-3" data-tooltip-content="{{$.locale.Tr "repo.branch.download" (.Name)}}">
 												{{svg "octicon-download"}}
 												<div class="menu">
 													<a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments .Name}}.zip" rel="nofollow">{{svg "octicon-file-zip"}}&nbsp;ZIP</a>
 													<a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments .Name}}.tar.gz" rel="nofollow">{{svg "octicon-file-zip"}}&nbsp;TAR.GZ</a>
 												</div>
+											</div>
+										{{end}}
+										{{if and $.IsWriter (not $.Repository.IsArchived) (not .IsDeleted) (not $.IsMirror)}}
+											<button class="ui tertiary button show-modal show-rename-branch-modal gt-mx-3"
+												data-old-branch-name="{{.Name}}"
+												data-modal="#rename-branch-modal"
+												data-tooltip-content="{{$.locale.Tr "repo.branch.rename" (.Name)}}"
+											>
+												{{svg "octicon-pencil"}}
 											</button>
 										{{end}}
 										{{if and $.IsWriter (not $.IsMirror) (not $.Repository.IsArchived) (not .IsProtected)}}
 											{{if .IsDeleted}}
-												<button class="ui basic jump button icon undo-button" data-url="{{$.Link}}/restore?branch_id={{.DeletedBranch.ID}}&name={{.DeletedBranch.Name}}&page={{$.Page.Paginater.Current}}" data-tooltip-content="{{$.locale.Tr "repo.branch.restore" (.Name)}}">
+												<button class="ui tertiary button undo-button gt-mx-3" data-url="{{$.Link}}/restore?branch_id={{.DeletedBranch.ID}}&name={{.DeletedBranch.Name}}&page={{$.Page.Paginater.Current}}" data-tooltip-content="{{$.locale.Tr "repo.branch.restore" (.Name)}}">
 													<span class="text blue">
 														{{svg "octicon-reply"}}
 													</span>
 												</button>
 											{{else}}
-												<button class="ui basic jump button icon delete-button delete-branch-button" data-url="{{$.Link}}/delete?name={{.Name}}&page={{$.Page.Paginater.Current}}" data-tooltip-content="{{$.locale.Tr "repo.branch.delete" (.Name)}}" data-name="{{.Name}}">
+												<button class="ui tertiary button delete-button delete-branch-button gt-mx-3" data-url="{{$.Link}}/delete?name={{.Name}}&page={{$.Page.Paginater.Current}}" data-tooltip-content="{{$.locale.Tr "repo.branch.delete" (.Name)}}" data-name="{{.Name}}">
 													{{svg "octicon-trash"}}
 												</button>
 											{{end}}
@@ -173,29 +201,43 @@
 	{{template "base/modal_actions_confirm" .}}
 </div>
 
-<div class="ui small modal" id="create-branch-modal">
+<div class="ui mini modal" id="create-branch-modal">
 	<div class="header">
 		{{.locale.Tr "repo.branch.new_branch"}}
 	</div>
-	<div class="content">
-		<form class="ui form" id="create-branch-form" action="" data-base-action="{{.Link}}/_new/branch/" method="post">
+
+	<form class="ui form" id="create-branch-form" action="" data-base-action="{{.Link}}/_new/branch/" method="post">
+		<div class="content">
 			{{.CsrfTokenHtml}}
 			<div class="field">
-				<label>
-					{{.locale.Tr "repo.branch.create_new_branch"}}
-					<span class="text" id="modal-create-branch-from-span"></span>
-				</label>
+				{{.locale.Tr "repo.branch.create_new_branch"}}
+				<span id="modal-create-branch-from-span"></span>
 			</div>
 			<div class="required field">
 				<label for="new_branch_name">{{.locale.Tr "repo.branch.name"}}</label>
 				<input id="new_branch_name" name="new_branch_name" required>
 			</div>
+		</div>
+		{{template "base/modal_actions_confirm" (dict "locale" $.locale "ModalButtonTypes" "confirm")}}
+	</form>
+</div>
 
-			<div class="text right actions">
-				<button class="ui cancel button">{{.locale.Tr "settings.cancel"}}</button>
-				<button class="ui green button">{{.locale.Tr "repo.branch.confirm_create_branch"}}</button>
-			</div>
-		</form>
+<div class="ui mini modal" id="rename-branch-modal">
+	<div class="header">
+		{{.locale.Tr "repo.settings.rename_branch"}}
 	</div>
+	<form class="ui form" action="{{$.Repository.Link}}/settings/rename_branch" method="post">
+		<div class="content">
+			{{.CsrfTokenHtml}}
+			<div class="field">
+				<span class="text" data-rename-branch-to="{{.locale.Tr "repo.branch.rename_branch_to"}}"></span>
+			</div>
+			<input name="from" type="hidden" required>
+			<div class="required field">
+				<input name="to" required>
+			</div>
+		</div>
+		{{template "base/modal_actions_confirm" (dict "locale" $.locale "ModalButtonTypes" "confirm")}}
+	</form>
 </div>
 {{template "base/footer" .}}
-- 
cgit v1.2.3