Add possibility to make branch in branch page (#15911)

Add possibility to make branch in branch page
in the area next to Download and Delete buttons.
It is a more intuitive place in the interface
compared to what is already there.

Signed-off-by: Viktor Yakovchuk <viktor@yakovchuk.net>

options/locale/locale_en-US.ini

@@ -1977,6 +1977,10 @@ branch.restore = Restore Branch '%s'
 branch.download = Download 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.new_branch = Create new branch
+branch.new_branch_from = Create new branch from '%s'
 
 tag.create_tag = Create tag <strong>%s</strong>
 tag.create_success = Tag '%s' has been created.

templates/repo/branch/list.tmpl

@@ -24,6 +24,11 @@
 						{{end}}
 						</td>
 						<td class="right aligned overflow-visible">
+							{{if and $.IsWriter (not $.Repository.IsArchived) (not .IsDeleted)}}
+								<div class="ui basic jump button icon poping up show-create-branch-modal" data-content="{{$.i18n.Tr "repo.branch.new_branch_from" ($.DefaultBranch)}}" data-variation="tiny inverted" data-branch-from="{{EscapePound $.DefaultBranch}}" data-modal="#create-branch-modal" data-position="top right">
+									{{svg "octicon-git-branch"}}
+								</div>
+							{{end}}
 							<div class="ui basic jump dropdown icon button poping up" data-content="{{$.i18n.Tr "repo.branch.download" ($.DefaultBranch)}}" data-variation="tiny inverted" data-position="top right">
 								{{svg "octicon-download"}}
 								<div class="menu">
@@ -102,6 +107,11 @@
 										{{end}}
 									</td>
 									<td class="two wide right aligned overflow-visible">
+										{{if and $.IsWriter (not $.Repository.IsArchived) (not .IsDeleted)}}
+											<div class="ui basic jump button icon poping up show-create-branch-modal" data-branch-from="{{EscapePound .Name}}" data-content="{{$.i18n.Tr "repo.branch.new_branch_from" (.Name)}}" data-variation="tiny inverted" data-position="top right" data-modal="#create-branch-modal" data-name="{{.Name}}">
+												{{svg "octicon-git-branch"}}
+											</div>
+										{{end}}
 										{{if (not .IsDeleted)}}
 											<div class="ui basic jump dropdown icon button poping up" data-content="{{$.i18n.Tr "repo.branch.download" (.Name)}}" data-variation="tiny inverted" data-position="top right">
 												{{svg "octicon-download"}}
@@ -142,4 +152,30 @@
 	</div>
 	{{template "base/delete_modal_actions" .}}
 </div>
+
+<div class="ui small modal" id="create-branch-modal">
+	<div class="header">
+		{{.i18n.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">
+			{{.CsrfTokenHtml}}
+			<div class="field">
+				<label>
+					{{.i18n.Tr "repo.branch.create_new_branch"}}
+					<span class="text" id="modal-create-branch-from-span"></span>
+				</label>
+			</div>
+			<div class="required field">
+				<label for="new_branch_name">{{.i18n.Tr "repo.branch.name"}}</label>
+				<input id="new_branch_name" name="new_branch_name" required>
+			</div>
+
+			<div class="text right actions">
+				<div class="ui cancel button">{{.i18n.Tr "settings.cancel"}}</div>
+				<button class="ui green button">{{.i18n.Tr "repo.branch.confirm_create_branch"}}</button>
+			</div>
+		</form>
+	</div>
+</div>
 {{template "base/footer" .}}

web_src/js/index.js

@@ -2658,6 +2658,11 @@ $(document).ready(async () => {
   $('.show-panel.button').on('click', function () {
     $($(this).data('panel')).show();
   });
+  $('.show-create-branch-modal.button').on('click', function () {
+    $('#create-branch-form')[0].action = $('#create-branch-form').data('base-action') + $(this).data('branch-from');
+    $('#modal-create-branch-from-span').text($(this).data('branch-from'));
+    $($(this).data('modal')).modal('show');
+  });
   $('.show-modal.button').on('click', function () {
     $($(this).data('modal')).modal('show');
   });