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}} -
  2. - {{$.locale.Tr "repo.diff.too_many_files"}} - {{.locale.Tr "repo.diff.show_more"}} - -
    3. - {{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 @@
{{svg "octicon-kebab-horizontal"}}
- {{.locale.Tr "repo.diff.show_diff_stats"}} + {{.locale.Tr "repo.diff.show_diff_stats"}} {{if .Issue.Index}} {{.locale.Tr "repo.diff.download_patch"}} {{.locale.Tr "repo.diff.download_diff"}} diff --git a/templates/repo/pulls/files.tmpl b/templates/repo/pulls/files.tmpl index 9b2400000..7b72f7f81 100644 --- a/templates/repo/pulls/files.tmpl +++ b/templates/repo/pulls/files.tmpl @@ -5,7 +5,7 @@
{{template "repo/header" .}} -
+
{{template "repo/issue/navbar" .}}
diff --git a/web_src/js/components/DiffFileList.vue b/web_src/js/components/DiffFileList.vue new file mode 100644 index 000000000..2a9aa7737 --- /dev/null +++ b/web_src/js/components/DiffFileList.vue @@ -0,0 +1,81 @@ + + + diff --git a/web_src/js/components/DiffFileTree.vue b/web_src/js/components/DiffFileTree.vue new file mode 100644 index 000000000..d0962254c --- /dev/null +++ b/web_src/js/components/DiffFileTree.vue @@ -0,0 +1,129 @@ + + + diff --git a/web_src/js/components/DiffFileTreeItem.vue b/web_src/js/components/DiffFileTreeItem.vue new file mode 100644 index 000000000..4f20f1e66 --- /dev/null +++ b/web_src/js/components/DiffFileTreeItem.vue @@ -0,0 +1,150 @@ + + + + + diff --git a/web_src/js/features/repo-diff-filetree.js b/web_src/js/features/repo-diff-filetree.js new file mode 100644 index 000000000..9eba3cf88 --- /dev/null +++ b/web_src/js/features/repo-diff-filetree.js @@ -0,0 +1,21 @@ +import Vue from 'vue'; +import DiffFileTree from '../components/DiffFileTree.vue'; +import DiffFileList from '../components/DiffFileList.vue'; + +export default function initDiffFileTree() { + const el = document.getElementById('diff-file-tree-container'); + if (!el) return; + + const View = Vue.extend({ + render: (createElement) => createElement(DiffFileTree), + }); + new View().$mount(el); + + const fileListElement = document.getElementById('diff-file-list-container'); + if (!fileListElement) return; + + const fileListView = Vue.extend({ + render: (createElement) => createElement(DiffFileList), + }); + new fileListView().$mount(fileListElement); +} diff --git a/web_src/js/features/repo-diff.js b/web_src/js/features/repo-diff.js index 0a59bcf1c..0fb7ee22d 100644 --- a/web_src/js/features/repo-diff.js +++ b/web_src/js/features/repo-diff.js @@ -68,7 +68,6 @@ export function initRepoDiffConversationForm() { initCompReactionSelector($newConversationHolder); }); - $(document).on('click', '.resolve-conversation', async function (e) { e.preventDefault(); const comment_id = $(this).data('comment-id'); @@ -118,32 +117,27 @@ function onShowMoreFiles() { countAndUpdateViewedFiles(); } -export function initRepoDiffShowMore() { - $('#diff-files, #diff-file-boxes').on('click', '#diff-show-more-files, #diff-show-more-files-stats', (e) => { - e.preventDefault(); - - if ($(e.target).hasClass('disabled')) { +export function doLoadMoreFiles(link, diffEnd, callback) { + const url = `${link}?skip-to=${diffEnd}&file-only=true`; + $.ajax({ + type: 'GET', + url, + }).done((resp) => { + if (!resp) { + callback(resp); return; } - $('#diff-show-more-files, #diff-show-more-files-stats').addClass('disabled'); - - const url = $('#diff-show-more-files, #diff-show-more-files-stats').data('href'); - $.ajax({ - type: 'GET', - url, - }).done((resp) => { - if (!resp) { - $('#diff-show-more-files, #diff-show-more-files-stats').removeClass('disabled'); - return; - } - $('#diff-too-many-files-stats').remove(); - $('#diff-files').append($(resp).find('#diff-files li')); - $('#diff-incomplete').replaceWith($(resp).find('#diff-file-boxes').children()); - onShowMoreFiles(); - }).fail(() => { - $('#diff-show-more-files, #diff-show-more-files-stats').removeClass('disabled'); - }); + // By simply rerunning the script we add the new data to our existing + // pagedata object. this triggers vue and the filetree and filelist will + // render the new elements. + $('body').append($(resp).find('script#diff-data-script')); + callback(resp); + }).fail(() => { + callback(); }); +} + +export function initRepoDiffShowMore() { $(document).on('click', 'a.diff-show-more-button', (e) => { e.preventDefault(); const $target = $(e.target); @@ -163,7 +157,6 @@ export function initRepoDiffShowMore() { $target.removeClass('disabled'); return; } - $target.parent().replaceWith($(resp).find('#diff-file-boxes .diff-file-body .file-body').children()); onShowMoreFiles(); }).fail(() => { diff --git a/web_src/js/index.js b/web_src/js/index.js index bd56fff77..b13ad0e13 100644 --- a/web_src/js/index.js +++ b/web_src/js/index.js @@ -23,6 +23,7 @@ import {initRepoIssueContentHistory} from './features/repo-issue-content.js'; import {initStopwatch} from './features/stopwatch.js'; import {initFindFileInRepo} from './features/repo-findfile.js'; import {initCommentContent, initMarkupContent} from './markup/content.js'; +import initDiffFileTree from './features/repo-diff-filetree.js'; import {initUserAuthLinkAccountView, initUserAuthOauth2} from './features/user-auth.js'; import { @@ -158,6 +159,7 @@ $(document).ready(() => { initRepoDiffFileViewToggle(); initRepoDiffReviewButton(); initRepoDiffShowMore(); + initDiffFileTree(); initRepoEditor(); initRepoGraphGit(); initRepoIssueContentHistory(); diff --git a/web_src/js/svg.js b/web_src/js/svg.js index 9c39852c3..6677bf83c 100644 --- a/web_src/js/svg.js +++ b/web_src/js/svg.js @@ -2,6 +2,11 @@ import octiconChevronDown from '../../public/img/svg/octicon-chevron-down.svg'; import octiconChevronRight from '../../public/img/svg/octicon-chevron-right.svg'; import octiconCopy from '../../public/img/svg/octicon-copy.svg'; import octiconClock from '../../public/img/svg/octicon-clock.svg'; +import octiconDiffAdded from '../../public/img/svg/octicon-diff-added.svg'; +import octiconDiffModified from '../../public/img/svg/octicon-diff-modified.svg'; +import octiconDiffRemoved from '../../public/img/svg/octicon-diff-removed.svg'; +import octiconDiffRenamed from '../../public/img/svg/octicon-diff-renamed.svg'; +import octiconFileDirectoryFill from '../../public/img/svg/octicon-file-directory-fill.svg'; import octiconGitMerge from '../../public/img/svg/octicon-git-merge.svg'; import octiconGitPullRequest from '../../public/img/svg/octicon-git-pull-request.svg'; import octiconIssueClosed from '../../public/img/svg/octicon-issue-closed.svg'; @@ -17,6 +22,9 @@ import octiconRepoForked from '../../public/img/svg/octicon-repo-forked.svg'; import octiconRepoTemplate from '../../public/img/svg/octicon-repo-template.svg'; import octiconTriangleDown from '../../public/img/svg/octicon-triangle-down.svg'; import octiconFile from '../../public/img/svg/octicon-file.svg'; +import octiconSidebarExpand from '../../public/img/svg/octicon-sidebar-expand.svg'; +import octiconSidebarCollapse from '../../public/img/svg/octicon-sidebar-collapse.svg'; + import Vue from 'vue'; @@ -40,8 +48,16 @@ export const svgs = { 'octicon-repo-template': octiconRepoTemplate, 'octicon-triangle-down': octiconTriangleDown, 'octicon-file': octiconFile, + 'octicon-file-directory-fill': octiconFileDirectoryFill, + 'octicon-sidebar-expand': octiconSidebarExpand, + 'octicon-sidebar-collapse': octiconSidebarCollapse, + 'octicon-diff-added': octiconDiffAdded, + 'octicon-diff-modified': octiconDiffModified, + 'octicon-diff-removed': octiconDiffRemoved, + 'octicon-diff-renamed': octiconDiffRenamed, }; + const parser = new DOMParser(); const serializer = new XMLSerializer(); diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less index 44e9a0430..f30bafa4c 100644 --- a/web_src/less/_repository.less +++ b/web_src/less/_repository.less @@ -3068,6 +3068,35 @@ td.blob-excerpt { padding-left: 8px; } +#diff-container { + display: flex; +} +#diff-file-boxes { + flex: 1; +} + +#diff-file-tree { + width: 20%; + max-width: 380px; + line-height: inherit; + position: sticky; + padding-top: 0; + top: 47px; + max-height: calc(100vh - 50px); + height: 100%; + overflow-y: auto; +} + +@media @mediaMdAndDown { + #diff-file-tree { + display: none; + } + + .diff-toggle-file-tree-button { + display: none; + } +} + .ui.message.unicode-escape-prompt { margin-bottom: 0; border-radius: 0;