From 31f934c1d8005cdd87c47ce104d00c0efaec374b Mon Sep 17 00:00:00 2001 From: sebastian-sauer Date: Tue, 27 Sep 2022 07:22:19 +0200 Subject: [PATCH] Add filetree on left of diff view (#21012) This PR adds a filetree to the left side of the files/diff view. Initially the filetree will not be shown and may be shown via a new "Show file tree" button. Showing and hiding is using the same icon as github. Folders are collapsible. On small devices (max-width 991 PX) the file tree will be hidden. Close #18192 Co-authored-by: wxiaoguang --- templates/repo/commit_page.tmpl | 2 +- templates/repo/diff/box.tmpl | 271 +++++++++++---------- templates/repo/diff/compare.tmpl | 2 +- templates/repo/diff/options_dropdown.tmpl | 2 +- templates/repo/pulls/files.tmpl | 2 +- web_src/js/components/DiffFileList.vue | 81 ++++++ web_src/js/components/DiffFileTree.vue | 129 ++++++++++ web_src/js/components/DiffFileTreeItem.vue | 150 ++++++++++++ web_src/js/features/repo-diff-filetree.js | 21 ++ web_src/js/features/repo-diff.js | 43 ++-- web_src/js/index.js | 2 + web_src/js/svg.js | 16 ++ web_src/less/_repository.less | 29 +++ 13 files changed, 591 insertions(+), 159 deletions(-) create mode 100644 web_src/js/components/DiffFileList.vue create mode 100644 web_src/js/components/DiffFileTree.vue create mode 100644 web_src/js/components/DiffFileTreeItem.vue create mode 100644 web_src/js/features/repo-diff-filetree.js diff --git a/templates/repo/commit_page.tmpl b/templates/repo/commit_page.tmpl index 8ece76883..da37aaa9b 100644 --- a/templates/repo/commit_page.tmpl +++ b/templates/repo/commit_page.tmpl @@ -1,7 +1,7 @@ {{template "base/head" .}}
{{template "repo/header" .}} -
+
{{$class := ""}} {{if .Commit.Signature}} {{$class = (printf "%s%s" $class " isSigned")}} diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl index 51769eb95..4624a53ba 100644 --- a/templates/repo/diff/box.tmpl +++ b/templates/repo/diff/box.tmpl @@ -14,6 +14,11 @@ {{else}}
+ + {{/* the icon meaning is reversed here, "octicon-sidebar-collapse" means show the file tree */}} + {{svg "octicon-sidebar-collapse" 16 "icon hide"}} + {{svg "octicon-sidebar-expand" 16 "icon"}} +
{{svg "octicon-diff" 16 "mr-2"}}{{.locale.Tr "repo.diff.stats_desc" .Diff.NumFiles .Diff.TotalAddition .Diff.TotalDeletion | Str2html}}
@@ -31,145 +36,151 @@ {{end}}
-
    - {{range .Diff.Files}} -
  1. -
    - {{if .IsBin}} - - {{$.locale.Tr "repo.diff.bin"}} - - {{else}} - {{template "repo/diff/stats" dict "file" . "root" $}} - {{end}} -
    - -   - {{.Name}} -
  2. - {{end}} - {{if .Diff.IsIncomplete}} -
  3. - {{$.locale.Tr "repo.diff.too_many_files"}} - {{.locale.Tr "repo.diff.show_more"}} - -
  4. - {{end}} -
-
- {{range $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)}} -
-

-
- - {{if $file.ShouldBeHidden}} - {{svg "octicon-chevron-right" 18}} - {{else}} - {{svg "octicon-chevron-down" 18}} - {{end}} - -
- {{if $file.IsBin}} - - {{$.locale.Tr "repo.diff.bin"}} - - {{else}} - {{template "repo/diff/stats" dict "file" . "root" $}} - {{end}} -
- {{if $file.IsRenamed}}{{$file.OldName}} → {{end}}{{$file.Name}}{{if .IsLFSFile}} ({{$.locale.Tr "repo.stored_lfs"}}){{end}} - {{if $file.IsGenerated}} - {{$.locale.Tr "repo.diff.generated"}} - {{end}} - {{if $file.IsVendored}} - {{$.locale.Tr "repo.diff.vendored"}} - {{end}} -
-
- {{if $showFileViewToggle}} -
- {{svg "octicon-code"}} - {{svg "octicon-file"}} -
- {{end}} - {{if $file.IsProtected}} - {{$.locale.Tr "repo.diff.protected"}} - {{end}} - {{if not (or $file.IsIncomplete $file.IsBin $file.IsSubmodule)}} - {{$.locale.Tr "repo.unescape_control_characters"}} - - {{end}} - {{if and (not $file.IsSubmodule) (not $.PageIsWiki)}} - {{if $file.IsDeleted}} - {{$.locale.Tr "repo.diff.view_file"}} - {{else}} - {{$.locale.Tr "repo.diff.view_file"}} - {{end}} - {{end}} - {{if and $.IsSigned $.PageIsPullFiles (not $.IsArchived)}} - {{if $file.HasChangedSinceLastReview}} - {{$.locale.Tr "repo.pulls.has_changed_since_last_review"}} - {{end}} - - {{end}} -
-

-
-
- {{if or $file.IsIncomplete $file.IsBin}} -
- {{if $file.IsIncomplete}} - {{if $file.IsIncompleteLineTooLong}} - {{$.locale.Tr "repo.diff.file_suppressed_line_too_long"}} + +
+
+
+
+ {{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)}} +
+

+
+ + {{if $file.ShouldBeHidden}} + {{svg "octicon-chevron-right" 18}} {{else}} - {{$.locale.Tr "repo.diff.file_suppressed"}} - {{$.locale.Tr "repo.diff.load"}} + {{svg "octicon-chevron-down" 18}} {{end}} - {{else}} - {{$.locale.Tr "repo.diff.bin_not_shown"}} + +
+ {{if $file.IsBin}} + + {{$.locale.Tr "repo.diff.bin"}} + + {{else}} + {{template "repo/diff/stats" dict "file" . "root" $}} + {{end}} +
+ {{if $file.IsRenamed}}{{$file.OldName}} → {{end}}{{$file.Name}}{{if .IsLFSFile}} ({{$.locale.Tr "repo.stored_lfs"}}){{end}} + {{if $file.IsGenerated}} + {{$.locale.Tr "repo.diff.generated"}} + {{end}} + {{if $file.IsVendored}} + {{$.locale.Tr "repo.diff.vendored"}} {{end}}
- {{else}} - - {{if $.IsSplitStyle}} - {{template "repo/diff/section_split" dict "file" . "root" $}} - {{else}} - {{template "repo/diff/section_unified" dict "file" . "root" $}} +
+ {{if $showFileViewToggle}} +
+ {{svg "octicon-code"}} + {{svg "octicon-file"}} +
{{end}} -
- {{end}} -

- {{if $showFileViewToggle}} -
- - {{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}} + {{if $file.IsProtected}} + {{$.locale.Tr "repo.diff.protected"}} {{end}} -
+ {{if not (or $file.IsIncomplete $file.IsBin $file.IsSubmodule)}} + {{$.locale.Tr "repo.unescape_control_characters"}} + + {{end}} + {{if and (not $file.IsSubmodule) (not $.PageIsWiki)}} + {{if $file.IsDeleted}} + {{$.locale.Tr "repo.diff.view_file"}} + {{else}} + {{$.locale.Tr "repo.diff.view_file"}} + {{end}} + {{end}} + {{if and $.IsSigned $.PageIsPullFiles (not $.IsArchived)}} + {{if $file.HasChangedSinceLastReview}} + {{$.locale.Tr "repo.pulls.has_changed_since_last_review"}} + {{end}} + + {{end}} +
+ +
+
+ {{if or $file.IsIncomplete $file.IsBin}} +
+ {{if $file.IsIncomplete}} + {{if $file.IsIncompleteLineTooLong}} + {{$.locale.Tr "repo.diff.file_suppressed_line_too_long"}} + {{else}} + {{$.locale.Tr "repo.diff.file_suppressed"}} + {{$.locale.Tr "repo.diff.load"}} + {{end}} + {{else}} + {{$.locale.Tr "repo.diff.bin_not_shown"}} + {{end}} +
+ {{else}} + + {{if $.IsSplitStyle}} + {{template "repo/diff/section_split" dict "file" . "root" $}} + {{else}} + {{template "repo/diff/section_unified" dict "file" . "root" $}} + {{end}} +
+ {{end}} +
+ {{if $showFileViewToggle}} +
+ + {{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}} +
+
+ {{end}}
- {{end}} -
-
- {{end}} +
+ {{end}} - {{if .Diff.IsIncomplete}} -
-

- {{$.locale.Tr "repo.diff.too_many_files"}} - {{.locale.Tr "repo.diff.show_more"}} -

+ {{if .Diff.IsIncomplete}} +
+

+ {{$.locale.Tr "repo.diff.too_many_files"}} + {{.locale.Tr "repo.diff.show_more"}} +

+
+ {{end}}
- {{end}}
{{if not $.Repository.IsArchived}} diff --git a/templates/repo/diff/compare.tmpl b/templates/repo/diff/compare.tmpl index 029e7717a..e0e683720 100644 --- a/templates/repo/diff/compare.tmpl +++ b/templates/repo/diff/compare.tmpl @@ -1,7 +1,7 @@ {{template "base/head" .}}
{{template "repo/header" .}} -
+

{{if and $.PageIsComparePull $.IsSigned (not .Repository.IsArchived)}} diff --git a/templates/repo/diff/options_dropdown.tmpl b/templates/repo/diff/options_dropdown.tmpl index 18fa100dc..2cb5abcb3 100644 --- a/templates/repo/diff/options_dropdown.tmpl +++ b/templates/repo/diff/options_dropdown.tmpl @@ -1,7 +1,7 @@