Skip to content

Commit

Permalink
Calculate diff on compare page only on demand
Browse files Browse the repository at this point in the history
Don't automatically reload the compare page on a branch change.
Adds a new calculate changes button to trigger the reload on demand.

go-gitea#13949
  • Loading branch information
sebastian-sauer committed Dec 11, 2020
1 parent b355466 commit 2654367
Show file tree
Hide file tree
Showing 3 changed files with 106 additions and 36 deletions.
2 changes: 2 additions & 0 deletions options/locale/locale_en-US.ini
Original file line number Diff line number Diff line change
Expand Up @@ -1224,6 +1224,8 @@ pulls.compare_compare = pull from
pulls.filter_branch = Filter branch
pulls.no_results = No results found.
pulls.nothing_to_compare = These branches are equal. There is no need to create a pull request.
pulls.click_calc_changes_to_see_diff = Click on calculate changes to see the diff
pulls.calculate_changes = Calculate changes
pulls.has_pull_request = `A pull request between these branches already exists: <a href="%[1]s/pulls/%[3]d">%[2]s#%[3]d</a>`
pulls.create = Create Pull Request
pulls.title_desc = wants to merge %[1]d commits from <code>%[2]s</code> into <code id="branch_target">%[3]s</code>
Expand Down
109 changes: 75 additions & 34 deletions templates/repo/diff/compare.tmpl
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,12 @@
{{svg "octicon-git-compare"}}
<div class="ui floating filter dropdown" data-no-results="{{.i18n.Tr "repo.pulls.no_results"}}">
<div class="ui basic small button">
<span class="text">{{.i18n.Tr "repo.pulls.compare_base"}}: {{$.BaseName}}:{{$.BaseBranch}}</span>
<span class="text">{{.i18n.Tr "repo.pulls.compare_base"}}: <span class="branch-name base"
data-base-url="{{$.RepoLink}}/compare/"
data-base-branchname="{{$.BaseName}}:{{$.BaseBranch}}">
{{$.BaseName}}:{{$.BaseBranch}}
</span>
</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
</div>
<div class="menu">
Expand All @@ -26,21 +31,38 @@
</div>
<div class="scrolling menu">
{{range .Branches}}
<div class="item {{if eq $.BaseBranch .}}selected{{end}}" data-url="{{$.RepoLink}}/compare/{{EscapePound .}}...{{if not $.PullRequestCtx.SameRepo}}{{$.HeadUser.Name}}/{{$.HeadRepo.Name}}:{{end}}{{EscapePound $.HeadBranch}}">{{$.BaseName}}:{{.}}</div>
<div class="item {{if eq $.BaseBranch .}}selected{{end}}"
data-base-url="{{$.RepoLink}}/compare/"
data-base-branchname="{{EscapePound .}}"
>
{{$.BaseName}}:{{.}}
</div>
{{end}}
{{if not .PullRequestCtx.SameRepo}}
{{range .HeadBranches}}
<div class="item" data-url="{{$.HeadRepo.Link}}/compare/{{EscapePound .}}...{{$.HeadUser.Name}}/{{$.HeadRepo.Name}}:{{EscapePound $.HeadBranch}}">{{$.HeadUser.Name}}:{{.}}</div>
<div class="item"
data-base-url="{{$.HeadRepo.Link}}/compare/"
data-base-branchname="{{EscapePound .}}">
{{$.HeadUser.Name}}:{{.}}
</div>
{{end}}
{{end}}
{{if .OwnForkRepo}}
{{range .OwnForkRepoBranches}}
<div class="item" data-url="{{$.OwnForkRepo.Link}}/compare/{{EscapePound .}}...{{$.HeadUser.Name}}/{{$.HeadRepo.Name}}:{{EscapePound $.HeadBranch}}">{{$.OwnForkRepo.OwnerName}}:{{.}}</div>
<div class="item"
data-base-url="{{$.OwnForkRepo.Link}}/compare/"
data-base-branchname="{{EscapePound .}}">
{{$.OwnForkRepo.OwnerName}}:{{.}}
</div>
{{end}}
{{end}}
{{if .RootRepo}}
{{range .RootRepoBranches}}
<div class="item" data-url="{{$.RootRepo.Link}}/compare/{{EscapePound .}}...{{$.HeadUser.Name}}/{{$.HeadRepo.Name}}:{{EscapePound $.HeadBranch}}">{{$.RootRepo.OwnerName}}:{{.}}</div>
<div class="item"
data-base-url="{$.RootRepo.Link}}/compare/"
data-base-branchname="{{EscapePound .}}">
{{$.RootRepo.OwnerName}}:{{.}}
</div>
{{end}}
{{end}}
</div>
Expand All @@ -49,7 +71,9 @@
...
<div class="ui floating filter dropdown">
<div class="ui basic small button">
<span class="text">{{.i18n.Tr "repo.pulls.compare_compare"}}: {{$.HeadUser.Name}}:{{$.HeadBranch}}</span>
<span class="text">{{.i18n.Tr "repo.pulls.compare_compare"}}: <span class="branch-name head"
data-head-branchname="{{if not $.PullRequestCtx.SameRepo}}{{$.HeadUser.Name}}/{{$.HeadRepo.Name}}:{{end}}{{EscapePound $.HeadBranch}}"
>{{$.HeadUser.Name}}:{{$.HeadBranch}}</span></span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
</div>
<div class="menu">
Expand All @@ -59,58 +83,75 @@
</div>
<div class="scrolling menu">
{{range .HeadBranches}}
<div class="{{if eq $.HeadBranch .}}selected{{end}} item" data-url="{{$.RepoLink}}/compare/{{EscapePound $.BaseBranch}}...{{if not $.PullRequestCtx.SameRepo}}{{$.HeadUser.Name}}/{{$.HeadRepo.Name}}:{{end}}{{EscapePound .}}">{{$.HeadUser.Name}}:{{.}}</div>
<div
class="{{if eq $.HeadBranch .}}selected{{end}} item"
data-head-branchname="{{if not $.PullRequestCtx.SameRepo}}{{$.HeadUser.Name}}/{{$.HeadRepo.Name}}:{{end}}{{EscapePound .}}"
>
{{$.HeadUser.Name}}:{{.}}
</div>
{{end}}
{{if not .PullRequestCtx.SameRepo}}
{{range .Branches}}
<div class="item" data-url="{{$.RepoLink}}/compare/{{EscapePound $.BaseBranch}}...{{$.BaseName}}/{{$.Repository.Name}}:{{EscapePound .}}">{{$.BaseName}}:{{.}}</div>
<div class="item"
data-head-branchname="{{$.BaseName}}/{{$.Repository.Name}}:{{EscapePound .}}"
>{{$.BaseName}}:{{.}}</div>
{{end}}
{{end}}
{{if .OwnForkRepo}}
{{range .OwnForkRepoBranches}}
<div class="item" data-url="{{$.RepoLink}}/compare/{{EscapePound $.BaseBranch}}...{{$.OwnForkRepo.OwnerName}}/{{$.OwnForkRepo.Name}}:{{EscapePound .}}">{{$.OwnForkRepo.OwnerName}}:{{.}}</div>
<div class="item"
data-head-branchname="{{$.OwnForkRepo.OwnerName}}/{{$.OwnForkRepo.Name}}:{{EscapePound .}}"
>{{$.OwnForkRepo.OwnerName}}:{{.}}</div>
{{end}}
{{end}}
{{if .RootRepo}}
{{range .RootRepoBranches}}
<div class="item" data-url="{{$.RepoLink}}/compare/{{EscapePound $.BaseBranch}}...{{$.RootRepo.OwnerName}}/{{$.RootRepo.Name}}:{{EscapePound .}}">{{$.RootRepo.OwnerName}}:{{.}}</div>
<div class="item"
data-head-branchname="{{$.RootRepo.OwnerName}}/{{$.RootRepo.Name}}:{{EscapePound .}}"
>{{$.RootRepo.OwnerName}}:{{.}}</div>
{{end}}
{{end}}
</div>
</div>
</div>
<a id="compare-calc-changes">
<button id="compare-calc-changes-btn" class="ui green button disabled">{{.i18n.Tr "repo.pulls.calculate_changes"}}</button>
</a>
</div>
{{end}}

{{if .IsNothingToCompare}}
<div class="ui segment">{{.i18n.Tr "repo.pulls.nothing_to_compare"}}</div>
{{else if and .PageIsComparePull (gt .CommitCount 0)}}
{{if .HasPullRequest}}
<div class="ui segment">
{{.i18n.Tr "repo.pulls.has_pull_request" $.RepoLink $.RepoRelPath .PullRequest.Index | Safe}}
</div>
{{else}}
{{if and $.IsSigned (not .Repository.IsArchived)}}
<div class="ui info message show-form-container">
<button class="ui button green show-form">{{.i18n.Tr "repo.pulls.new"}}</button>
</div>
{{else if .Repository.IsArchived}}
<div class="ui warning message">
{{.i18n.Tr "repo.archive.title"}}
</div>
{{end}}
{{if $.IsSigned}}
<div class="pullrequest-form" style="display: none">
{{template "repo/issue/new_form" .}}
<div class="ui segment" id="info-calculate-changes-needed" style="display:none;">{{.i18n.Tr "repo.pulls.click_calc_changes_to_see_diff"}}</div>
<div id="compare-contents-area">
{{if .IsNothingToCompare}}
<div class="ui segment">{{.i18n.Tr "repo.pulls.nothing_to_compare"}}</div>
{{else if and .PageIsComparePull (gt .CommitCount 0)}}
{{if .HasPullRequest}}
<div class="ui segment">
{{.i18n.Tr "repo.pulls.has_pull_request" $.RepoLink $.RepoRelPath .PullRequest.Index | Safe}}
</div>
{{else}}
{{if and $.IsSigned (not .Repository.IsArchived)}}
<div class="ui info message show-form-container">
<button class="ui button green show-form">{{.i18n.Tr "repo.pulls.new"}}</button>
</div>
{{else if .Repository.IsArchived}}
<div class="ui warning message">
{{.i18n.Tr "repo.archive.title"}}
</div>
{{end}}
{{if $.IsSigned}}
<div class="pullrequest-form" style="display: none">
{{template "repo/issue/new_form" .}}
</div>
{{end}}
{{template "repo/commits_table" .}}
{{template "repo/diff/box" .}}
{{end}}
{{else}}
{{template "repo/commits_table" .}}
{{template "repo/diff/box" .}}
{{end}}
{{else}}
{{template "repo/commits_table" .}}
{{template "repo/diff/box" .}}
{{end}}
</div>
</div>
</div>
{{template "base/footer" .}}
31 changes: 29 additions & 2 deletions web_src/js/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -745,15 +745,19 @@ async function initRepository() {
return;
}

function initFilterSearchDropdown(selector) {
function initFilterSearchDropdown(selector, optionalOnChangeFunc) {
const $dropdown = $(selector);
$dropdown.dropdown({
fullTextSearch: true,
selectOnKeydown: false,
onChange(_text, _value, $choice) {
if (optionalOnChangeFunc) {
optionalOnChangeFunc(_text, _value, $choice);
} else {
if ($choice.data('url')) {
window.location.href = $choice.data('url');
}
}
},
message: {noResults: $dropdown.data('no-results')}
});
Expand Down Expand Up @@ -1164,7 +1168,30 @@ async function initRepository() {
// Pull request
const $repoComparePull = $('.repository.compare.pull');
if ($repoComparePull.length > 0) {
initFilterSearchDropdown('.choose.branch .dropdown');
// initialize onchange listener for our dropdowns
initFilterSearchDropdown('.choose.branch .dropdown', function(_text, _value, $choice) {
// Set the text of this dropdowns span
const lParentSpan = $choice.closest('.ui.floating.filter.dropdown').find('span.branch-name');
lParentSpan.text(_text);
if(lParentSpan.hasClass('base')){
lParentSpan.data('base-url', $choice.data('base-url'));
lParentSpan.data('base-branchname',$choice.data('base-branchname'));
} else {
lParentSpan.data('head-branchname',$choice.data('head-branchname'))
}

const lBaseUrl = $('span.branch-name.base').data('base-url');
const lBaseBranchName = $('span.branch-name.base').data('base-branchname');
const lTargetBranchName = $('span.branch-name.head').data('head-branchname');
// Update link on our compare button
$('#compare-calc-changes').attr('href', lBaseUrl + lBaseBranchName + '...' + lTargetBranchName);
// show the hint to click on calculate changes to update / see the diff
$('#info-calculate-changes-needed').show();
// hide any old contents from compare page
$('#compare-contents-area').remove();
// Activate the calculate changes button
$('#compare-calc-changes-btn').removeClass('disabled');
});
// show pull request form
$repoComparePull.find('button.show-form').on('click', function (e) {
e.preventDefault();
Expand Down

0 comments on commit 2654367

Please sign in to comment.