forgejo/templates/repo/diff/box.tmpl
wxiaoguang c46f53a627
Fix diff UI for unexpandable items (#22700)
Follows #21094

Before:

There are 2 problems:

1. Sometimes, the header starts with a number, sometimes, it starts with
an icon button. It makes the UI look like misaligned.
2. The second item's bottom border is too thick (actually, that's an
empty element with border, which should be hidden as well)
3. (An old problem) the number is not mono-font


![image](https://user-images.githubusercontent.com/2114189/215935944-003fe2d3-69bf-413c-bbae-0a4668a508c3.png)


After:

Fix above problems.


![image](https://user-images.githubusercontent.com/2114189/215944811-b867a20c-110c-47a2-aa52-572a8162a44d.png)

---------

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
Co-authored-by: John Olheiser <john.olheiser@gmail.com>
2023-02-02 13:39:55 +08:00

212 lines
11 KiB
Handlebars

{{if .DiffNotAvailable}}
<div class="diff-detail-box diff-box sticky">
<div>
<div class="ui right">
{{template "repo/diff/whitespace_dropdown" .}}
{{template "repo/diff/options_dropdown" .}}
{{if and .PageIsPullFiles $.SignedUserID (not .IsArchived)}}
{{template "repo/diff/new_review" .}}
{{end}}
</div>
</div>
</div>
<h4>{{.locale.Tr "repo.diff.data_not_available"}}</h4>
{{else}}
<div>
<div class="diff-detail-box diff-box sticky df sb ac fw">
<div class="df ac fw">
<a class="diff-toggle-file-tree-button muted df ac">
{{/* the icon meaning is reversed here, "octicon-sidebar-collapse" means show the file tree */}}
{{svg "octicon-sidebar-collapse" 20 "icon hide"}}
{{svg "octicon-sidebar-expand" 20 "icon"}}
</a>
<div class="diff-detail-stats df ac ml-3">
{{svg "octicon-diff" 16 "mr-2"}}{{.locale.Tr "repo.diff.stats_desc" .Diff.NumFiles .Diff.TotalAddition .Diff.TotalDeletion | Str2html}}
</div>
</div>
<div class="diff-detail-actions df ac">
{{if and .PageIsPullFiles $.SignedUserID (not .IsArchived)}}
<progress id="viewed-files-summary" class="mr-2" value="{{.Diff.NumViewedFiles}}" max="{{.Diff.NumFiles}}"></progress>
<label for="viewed-files-summary" id="viewed-files-summary-label" class="mr-3" data-text-changed-template="{{.locale.Tr "repo.pulls.viewed_files_label"}}">
{{.locale.Tr "repo.pulls.viewed_files_label" .Diff.NumViewedFiles .Diff.NumFiles}}
</label>
{{end}}
{{template "repo/diff/whitespace_dropdown" .}}
{{template "repo/diff/options_dropdown" .}}
{{if and .PageIsPullFiles $.SignedUserID (not .IsArchived)}}
{{template "repo/diff/new_review" .}}
{{end}}
</div>
</div>
<script id="diff-data-script">
(() => {
const diffData = {
files: [{{range $i, $file := .Diff.Files}}{Name:"{{$file.Name}}",NameHash:"{{$file.NameHash}}",Type:{{$file.Type}},IsBin:{{$file.IsBin}},Addition:{{$file.Addition}},Deletion:{{$file.Deletion}}},{{end}}],
isIncomplete: {{.Diff.IsIncomplete}},
tooManyFilesMessage: "{{$.locale.Tr "repo.diff.too_many_files"}}",
binaryFileMessage: "{{$.locale.Tr "repo.diff.bin"}}",
showMoreMessage: "{{.locale.Tr "repo.diff.show_more"}}",
statisticsMessage: "{{.locale.Tr "repo.diff.stats_desc_file"}}",
fileTreeIsVisible: false,
fileListIsVisible: false,
isLoadingNewData: false,
diffEnd: {{.Diff.End}},
link: "{{$.Link}}"
};
if(window.config.pageData.diffFileInfo) {
// Page is already loaded - add the data to our existing data
window.config.pageData.diffFileInfo.files.push(...diffData.files);
window.config.pageData.diffFileInfo.isIncomplete = diffData.isIncomplete;
window.config.pageData.diffFileInfo.diffEnd = diffData.diffEnd;
window.config.pageData.diffFileInfo.link = diffData.link;
} else {
// new load of page - populate initial data
window.config.pageData.diffFileInfo = diffData;
}
})();
</script>
<div id="diff-file-list"></div>
<div id="diff-container">
<div id="diff-file-tree" class="hide"></div>
<div id="diff-file-boxes" class="sixteen wide column">
{{range $i, $file := .Diff.Files}}
{{/*notice: the index of Diff.Files should not be used for element ID, because the index will be restarted from 0 when doing load-more for PRs with a lot of files*/}}
{{$blobBase := call $.GetBlobByPathForCommit $.BaseCommit $file.OldName}}
{{$blobHead := call $.GetBlobByPathForCommit $.HeadCommit $file.Name}}
{{$isImage := or (call $.IsBlobAnImage $blobBase) (call $.IsBlobAnImage $blobHead)}}
{{$isCsv := (call $.IsCsvFile $file)}}
{{$showFileViewToggle := or $isImage (and (not $file.IsIncomplete) $isCsv)}}
{{$isExpandable := or (gt $file.Addition 0) (gt $file.Deletion 0) $file.IsBin}}
<div class="diff-file-box diff-box file-content {{TabSizeClass $.Editorconfig $file.Name}} mt-3" id="diff-{{$file.NameHash}}" data-old-filename="{{$file.OldName}}" data-new-filename="{{$file.Name}}" {{if or ($file.ShouldBeHidden) (not $isExpandable)}}data-folded="true"{{end}}>
<h4 class="diff-file-header sticky-2nd-row ui top attached normal header df ac sb">
<div class="df ac">
<a role="button" class="fold-file muted mr-2" {{if not $isExpandable}}style="visibility: hidden"{{end}}>
{{if $file.ShouldBeHidden}}
{{svg "octicon-chevron-right" 18}}
{{else}}
{{svg "octicon-chevron-down" 18}}
{{end}}
</a>
<div class="bold df ac mono">
{{if $file.IsBin}}
<span class="ml-1 mr-3">
{{$.locale.Tr "repo.diff.bin"}}
</span>
{{else}}
{{template "repo/diff/stats" dict "file" . "root" $}}
{{end}}
</div>
<span class="file mono"><a class="muted" href="#diff-{{$file.NameHash}}">{{if $file.IsRenamed}}{{$file.OldName}} &rarr; {{end}}{{$file.Name}}</a>{{if .IsLFSFile}} ({{$.locale.Tr "repo.stored_lfs"}}){{end}}</span>
{{if $file.IsGenerated}}
<span class="ui label ml-3">{{$.locale.Tr "repo.diff.generated"}}</span>
{{end}}
{{if $file.IsVendored}}
<span class="ui label ml-3">{{$.locale.Tr "repo.diff.vendored"}}</span>
{{end}}
</div>
<div class="diff-file-header-actions df ac">
{{if $showFileViewToggle}}
<div class="ui compact icon buttons">
<span class="ui tiny basic button tooltip file-view-toggle" data-toggle-selector="#diff-source-{{$file.NameHash}}" data-content="{{$.locale.Tr "repo.file_view_source"}}" data-position="bottom center">{{svg "octicon-code"}}</span>
<span class="ui tiny basic button tooltip file-view-toggle active" data-toggle-selector="#diff-rendered-{{$file.NameHash}}" data-content="{{$.locale.Tr "repo.file_view_rendered"}}" data-position="bottom center">{{svg "octicon-file"}}</span>
</div>
{{end}}
{{if $file.IsProtected}}
<span class="ui basic label">{{$.locale.Tr "repo.diff.protected"}}</span>
{{end}}
{{if not (or $file.IsIncomplete $file.IsBin $file.IsSubmodule)}}
<a class="ui basic tiny button unescape-button">{{$.locale.Tr "repo.unescape_control_characters"}}</a>
<a class="ui basic tiny button escape-button" style="display: none;">{{$.locale.Tr "repo.escape_control_characters"}}</a>
{{end}}
{{if and (not $file.IsSubmodule) (not $.PageIsWiki)}}
{{if $file.IsDeleted}}
<a class="ui basic tiny button" rel="nofollow" href="{{$.BeforeSourcePath}}/{{PathEscapeSegments .Name}}">{{$.locale.Tr "repo.diff.view_file"}}</a>
{{else}}
<a class="ui basic tiny button" rel="nofollow" href="{{$.SourcePath}}/{{PathEscapeSegments .Name}}">{{$.locale.Tr "repo.diff.view_file"}}</a>
{{end}}
{{end}}
{{if and $.IsSigned $.PageIsPullFiles (not $.IsArchived)}}
{{if $file.HasChangedSinceLastReview}}
<span class="changed-since-last-review unselectable">{{$.locale.Tr "repo.pulls.has_changed_since_last_review"}}</span>
{{end}}
<label data-link="{{$.Issue.Link}}/viewed-files" data-headcommit="{{$.PullHeadCommitID}}" class="viewed-file-form unselectable{{if $file.IsViewed}} viewed-file-checked-form{{end}}">
<input type="checkbox" name="{{$file.GetDiffFileName}}" autocomplete="off"{{if $file.IsViewed}} checked{{end}}> {{$.locale.Tr "repo.pulls.has_viewed_file"}}
</label>
{{end}}
</div>
</h4>
<div class="diff-file-body ui attached unstackable table segment" {{if $file.IsViewed}}data-folded="true"{{end}}>
<div id="diff-source-{{$file.NameHash}}" class="file-body file-code unicode-escaped code-diff{{if $.IsSplitStyle}} code-diff-split{{else}} code-diff-unified{{end}}{{if $showFileViewToggle}} hide{{end}}">
{{if or $file.IsIncomplete $file.IsBin}}
<div class="diff-file-body binary" style="padding: 5px 10px;">
{{if $file.IsIncomplete}}
{{if $file.IsIncompleteLineTooLong}}
{{$.locale.Tr "repo.diff.file_suppressed_line_too_long"}}
{{else}}
{{$.locale.Tr "repo.diff.file_suppressed"}}
<a class="ui basic tiny button diff-load-button" data-href="{{$.Link}}?file-only=true&files={{$file.Name}}&files={{$file.OldName}}">{{$.locale.Tr "repo.diff.load"}}</a>
{{end}}
{{else}}
{{$.locale.Tr "repo.diff.bin_not_shown"}}
{{end}}
</div>
{{else}}
<table class="chroma" data-new-comment-url="{{$.Issue.HTMLURL}}/files/reviews/new_comment" data-path="{{$file.Name}}">
{{if $.IsSplitStyle}}
{{template "repo/diff/section_split" dict "file" . "root" $}}
{{else}}
{{template "repo/diff/section_unified" dict "file" . "root" $}}
{{end}}
</table>
{{end}}
</div>
{{if $showFileViewToggle}}
<div id="diff-rendered-{{$file.NameHash}}" class="file-body file-code {{if $.IsSplitStyle}} code-diff-split{{else}} code-diff-unified{{end}}">
<table class="chroma w-100">
{{if $isImage}}
{{template "repo/diff/image_diff" dict "file" . "root" $ "blobBase" $blobBase "blobHead" $blobHead}}
{{else}}
{{template "repo/diff/csv_diff" dict "file" . "root" $ "blobBase" $blobBase "blobHead" $blobHead}}
{{end}}
</table>
</div>
{{end}}
</div>
</div>
{{end}}
{{if .Diff.IsIncomplete}}
<div class="diff-file-box diff-box file-content mt-3" id="diff-incomplete">
<h4 class="ui top attached normal header df ac sb">
{{$.locale.Tr "repo.diff.too_many_files"}}
<a class="ui basic tiny button" id="diff-show-more-files" data-href="{{$.Link}}?skip-to={{.Diff.End}}&file-only=true">{{.locale.Tr "repo.diff.show_more"}}</a>
</h4>
</div>
{{end}}
</div>
</div>
{{if not $.Repository.IsArchived}}
<div class="hide" id="edit-content-form">
<div class="ui comment form">
<div class="ui top attached tabular menu">
<a class="active write item">{{$.locale.Tr "write"}}</a>
<a class="preview item" data-url="{{$.Repository.HTMLURL}}/markdown" data-context="{{$.RepoLink}}">{{$.locale.Tr "preview"}}</a>
</div>
<div class="ui bottom attached active write tab segment">
<textarea class="review-textarea js-quick-submit" tabindex="1" name="content"></textarea>
</div>
<div class="ui bottom attached tab preview segment markup">
{{$.locale.Tr "loading"}}
</div>
<div class="text right edit buttons">
<div class="ui basic primary cancel button" tabindex="3">{{.locale.Tr "repo.issues.cancel"}}</div>
<div class="ui green save button" tabindex="2">{{.locale.Tr "repo.issues.save"}}</div>
</div>
</div>
</div>
{{end}}
{{template "repo/issue/view_content/reference_issue_dialog" .}}
</div>
{{end}}