Move Rename branch from repo settings page to the page of branches list

options/locale/locale_en-US.ini

@@ -2406,10 +2406,13 @@ branch.protected_deletion_failed = Branch "%s" is protected. It cannot be delete
 branch.default_deletion_failed = Branch "%s" is the default branch. It cannot be deleted.
 branch.restore = Restore Branch "%s"
 branch.download = Download Branch "%s"
+branch.rename = Rename Branch "%s"
 branch.included_desc = This branch is part of the default branch
 branch.included = Included
 branch.create_new_branch = Create branch from branch:
 branch.confirm_create_branch = Create branch
+branch.rename_branch_to = Rename "%s" to:
+branch.confirm_rename_branch = Rename branch
 branch.create_branch_operation = Create branch
 branch.new_branch = Create new branch
 branch.new_branch_from = Create new branch from "%s"

routers/web/repo/setting_protected_branch.go

@@ -343,7 +343,7 @@ func RenameBranchPost(ctx *context.Context) {
 
 	if ctx.HasError() {
 		ctx.Flash.Error(ctx.GetErrMsg())
-		ctx.Redirect(fmt.Sprintf("%s/settings/branches", ctx.Repo.RepoLink))
+		ctx.Redirect(fmt.Sprintf("%s/branches", ctx.Repo.RepoLink))
 		return
 	}
 
@@ -355,16 +355,16 @@ func RenameBranchPost(ctx *context.Context) {
 
 	if msg == "target_exist" {
 		ctx.Flash.Error(ctx.Tr("repo.settings.rename_branch_failed_exist", form.To))
-		ctx.Redirect(fmt.Sprintf("%s/settings/branches", ctx.Repo.RepoLink))
+		ctx.Redirect(fmt.Sprintf("%s/branches", ctx.Repo.RepoLink))
 		return
 	}
 
 	if msg == "from_not_exist" {
 		ctx.Flash.Error(ctx.Tr("repo.settings.rename_branch_failed_not_exist", form.From))
-		ctx.Redirect(fmt.Sprintf("%s/settings/branches", ctx.Repo.RepoLink))
+		ctx.Redirect(fmt.Sprintf("%s/branches", ctx.Repo.RepoLink))
 		return
 	}
 
 	ctx.Flash.Success(ctx.Tr("repo.settings.rename_branch_success", form.From, form.To))
-	ctx.Redirect(fmt.Sprintf("%s/settings/branches", ctx.Repo.RepoLink))
+	ctx.Redirect(fmt.Sprintf("%s/branches", ctx.Repo.RepoLink))
 }

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" .}}

templates/repo/settings/branches.tmpl

@@ -60,28 +60,6 @@
 					</div>
 				</div>
 			</div>
-
-			{{if $.Repository.CanCreateBranch}}
-				<h4 class="ui top attached header">
-					{{.locale.Tr "repo.settings.rename_branch"}}
-				</h4>
-				<div class="ui attached segment">
-					<form class="ui form" action="{{$.Repository.Link}}/settings/rename_branch" method="post">
-						{{.CsrfTokenHtml}}
-						<div class="required field">
-							<label for="from">{{.locale.Tr "repo.settings.rename_branch_from"}}</label>
-							<input id="from" name="from" required>
-						</div>
-						<div class="required field {{if .Err_BranchName}}error{{end}}">
-							<label for="to">{{.locale.Tr "repo.settings.rename_branch_to"}}</label>
-							<input id="to" name="to" required>
-						</div>
-						<div class="field">
-							<button class="ui green button">{{$.locale.Tr "repo.settings.update_settings"}}</button>
-						</div>
-					</form>
-				</div>
-			{{end}}
 		{{end}}
 	</div>
 

web_src/css/modules/modal.css

@@ -30,6 +30,7 @@
 .ui.modal > .content,
 .ui.modal > form > .content {
   background: var(--color-body);
+  padding: 1.5em;
 }
 
 .ui.modal > .actions,

web_src/js/features/repo-branch.js

@@ -1,6 +1,12 @@
 import $ from 'jquery';
 
 export function initRepoBranchButton() {
+  initRepoCreateBranchButton();
+  initRepoRenameBranchButton();
+}
+
+function initRepoCreateBranchButton() {
+  // 2 pages share this code, one is the branch list page, the other is the commit view page: create branch/tag from current commit (dirty code)
   $('.show-create-branch-modal').on('click', function () {
     let modalFormName = $(this).attr('data-modal-form');
     if (!modalFormName) {
@@ -16,3 +22,16 @@ export function initRepoBranchButton() {
     $($(this).attr('data-modal')).modal('show');
   });
 }
+
+function initRepoRenameBranchButton() {
+  $('.show-rename-branch-modal').on('click', function () {
+    const target = $(this).attr('data-modal');
+    const $modal = $(target);
+
+    const oldBranchName = $(this).attr('data-old-branch-name');
+    $modal.find('input[name=from]').val(oldBranchName);
+
+    const $text = $modal.find('[data-rename-branch-to]');
+    $text.text($text.attr('data-rename-branch-to').replace('%s', oldBranchName));
+  });
+}