From 5ae314dd586db6d751f844c6946ee1d8d33c854c Mon Sep 17 00:00:00 2001 From: Sebastian Sauer Date: Wed, 31 Aug 2022 19:36:25 +0200 Subject: [PATCH 01/22] Add filelist on left of diff view not yet a real directory tree but already usable --- templates/repo/commit_page.tmpl | 2 +- templates/repo/diff/box.tmpl | 228 +++++++++++++++++-------------- templates/repo/diff/compare.tmpl | 2 +- templates/repo/pulls/files.tmpl | 2 +- web_src/less/_repository.less | 20 +++ 5 files changed, 147 insertions(+), 107 deletions(-) diff --git a/templates/repo/commit_page.tmpl b/templates/repo/commit_page.tmpl index 8ece768832fb7..da37aaa9b323f 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 35b8b3956da74..c365ea310436c 100644 --- a/templates/repo/diff/box.tmpl +++ b/templates/repo/diff/box.tmpl @@ -56,120 +56,140 @@ {{end}} -
- {{range $i, $file := .Diff.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 .Diff.Files}} +
  • +   + {{.Name}} +
    • + {{end}} + {{if .Diff.IsIncomplete}} +
  • + {{$.locale.Tr "repo.diff.too_many_files"}} + {{.locale.Tr "repo.diff.show_more"}} + +
    • + {{end}} +
    +
    + {{range $i, $file := .Diff.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}} + {{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}} - {{template "repo/diff/csv_diff" dict "file" . "root" $}} +
    + {{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" $}} + {{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 426ea737bda74..ce36698608566 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/pulls/files.tmpl b/templates/repo/pulls/files.tmpl index 9b24000002863..7b72f7f8152af 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/less/_repository.less b/web_src/less/_repository.less index 473d6f9dc7dd6..fd5daf72bbddf 100644 --- a/web_src/less/_repository.less +++ b/web_src/less/_repository.less @@ -3066,6 +3066,26 @@ td.blob-excerpt { padding-left: 8px; } +#div-file-tree { + position: sticky; + top: 47px; + border-top: 1px solid var(--color-secondary); + max-height: calc(100vh - 47px); + overflow-y: scroll; + overflow-x: scroll; + border-right: 1px solid var(--color-secondary); + + li { + list-style: none; + + .file { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + } +} + .ui.message.unicode-escape-prompt { margin-bottom: 0; border-radius: 0; From 4f2ea0a6a700154a470f5a64e78f3bfe7e3c7b31 Mon Sep 17 00:00:00 2001 From: Sebastian Sauer Date: Wed, 31 Aug 2022 21:03:38 +0200 Subject: [PATCH 02/22] Hide file tree on small screens --- templates/repo/diff/box.tmpl | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl index c365ea310436c..6c2808de2a019 100644 --- a/templates/repo/diff/box.tmpl +++ b/templates/repo/diff/box.tmpl @@ -58,11 +58,11 @@
    -
    +
    {{range .Diff.Files}}
  •   - {{.Name}}
    • {{end}} @@ -74,7 +74,7 @@ {{end}}
    -
    +
    {{range $i, $file := .Diff.Files}} {{$blobBase := call $.GetBlobByPathForCommit $.BaseCommit $file.OldName}} {{$blobHead := call $.GetBlobByPathForCommit $.HeadCommit $file.Name}} From 1dd45c89052804e18879353e57b7f23b5b4ab533 Mon Sep 17 00:00:00 2001 From: Sebastian Sauer Date: Wed, 31 Aug 2022 21:03:56 +0200 Subject: [PATCH 03/22] Use ellipsis class and overflow auto --- templates/repo/diff/box.tmpl | 2 +- web_src/less/_repository.less | 10 ++-------- 2 files changed, 3 insertions(+), 9 deletions(-) diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl index 6c2808de2a019..e4ef0823bd388 100644 --- a/templates/repo/diff/box.tmpl +++ b/templates/repo/diff/box.tmpl @@ -60,7 +60,7 @@
    {{range .Diff.Files}} -
  • +
  •   {{.Name}} diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less index fd5daf72bbddf..faa7629faec6a 100644 --- a/web_src/less/_repository.less +++ b/web_src/less/_repository.less @@ -3071,18 +3071,12 @@ td.blob-excerpt { top: 47px; border-top: 1px solid var(--color-secondary); max-height: calc(100vh - 47px); - overflow-y: scroll; - overflow-x: scroll; + overflow-y: auto; + overflow-x: auto; border-right: 1px solid var(--color-secondary); li { list-style: none; - - .file { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } } } From 6706cf8b32bf41e2bc53da34641bda4f283acb88 Mon Sep 17 00:00:00 2001 From: Sebastian Sauer Date: Thu, 1 Sep 2022 22:16:46 +0200 Subject: [PATCH 04/22] Use vue and create a tree layout for diff files --- templates/repo/diff/box.tmpl | 30 +++-- templates/repo/diff/options_dropdown.tmpl | 1 + web_src/js/components/DiffFileTree.vue | 121 +++++++++++++++++++++ web_src/js/components/DiffFileTreeItem.vue | 83 ++++++++++++++ web_src/js/features/repo-diff-filetree.js | 12 ++ web_src/js/index.js | 2 + web_src/less/_repository.less | 7 +- 7 files changed, 236 insertions(+), 20 deletions(-) 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/diff/box.tmpl b/templates/repo/diff/box.tmpl index e4ef0823bd388..3452ec77d163b 100644 --- a/templates/repo/diff/box.tmpl +++ b/templates/repo/diff/box.tmpl @@ -58,23 +58,19 @@
    -
    - {{range .Diff.Files}} -
  • -   - {{.Name}} -
    • - {{end}} - {{if .Diff.IsIncomplete}} -
  • - {{$.locale.Tr "repo.diff.too_many_files"}} - {{.locale.Tr "repo.diff.show_more"}} - -
    • - {{end}} -
    -
    + +
    +
    {{range $i, $file := .Diff.Files}} {{$blobBase := call $.GetBlobByPathForCommit $.BaseCommit $file.OldName}} {{$blobHead := call $.GetBlobByPathForCommit $.HeadCommit $file.Name}} diff --git a/templates/repo/diff/options_dropdown.tmpl b/templates/repo/diff/options_dropdown.tmpl index 18fa100dcfa6d..360b70b765cd3 100644 --- a/templates/repo/diff/options_dropdown.tmpl +++ b/templates/repo/diff/options_dropdown.tmpl @@ -12,5 +12,6 @@ {{.locale.Tr "repo.diff.download_patch"}} {{.locale.Tr "repo.diff.download_diff"}} {{end}} + Show file tree
    diff --git a/web_src/js/components/DiffFileTree.vue b/web_src/js/components/DiffFileTree.vue new file mode 100644 index 0000000000000..98464296a0b78 --- /dev/null +++ b/web_src/js/components/DiffFileTree.vue @@ -0,0 +1,121 @@ + + + + + diff --git a/web_src/js/components/DiffFileTreeItem.vue b/web_src/js/components/DiffFileTreeItem.vue new file mode 100644 index 0000000000000..e47fb6213d961 --- /dev/null +++ b/web_src/js/components/DiffFileTreeItem.vue @@ -0,0 +1,83 @@ + + + + + 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 0000000000000..ac2b009f0a9cf --- /dev/null +++ b/web_src/js/features/repo-diff-filetree.js @@ -0,0 +1,12 @@ +import Vue from 'vue'; +import PullRequestFileTree from '../components/DiffFileTree.vue'; + +export default function initDiffFileTree() { + const el = document.getElementById('diff-file-tree-container'); + if (!el) return; + + const View = Vue.extend({ + render: (createElement) => createElement(PullRequestFileTree), + }); + new View().$mount(el); +} diff --git a/web_src/js/index.js b/web_src/js/index.js index bd56fff773195..b13ad0e13aa34 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/less/_repository.less b/web_src/less/_repository.less index faa7629faec6a..d3183aece3ef2 100644 --- a/web_src/less/_repository.less +++ b/web_src/less/_repository.less @@ -3066,7 +3066,8 @@ td.blob-excerpt { padding-left: 8px; } -#div-file-tree { +#diff-file-tree { + line-height: inherit; position: sticky; top: 47px; border-top: 1px solid var(--color-secondary); @@ -3075,8 +3076,8 @@ td.blob-excerpt { overflow-x: auto; border-right: 1px solid var(--color-secondary); - li { - list-style: none; + .list { + padding-top: inherit; } } From ce0b4ec200fc4d9cf3c058e1bfdcf6b09865bffd Mon Sep 17 00:00:00 2001 From: Sebastian Sauer Date: Fri, 2 Sep 2022 18:26:47 +0200 Subject: [PATCH 05/22] Rework vue component and add toggle button --- templates/repo/diff/box.tmpl | 15 +++-- templates/repo/diff/options_dropdown.tmpl | 1 - web_src/js/components/DiffFileTree.vue | 42 ++++++++---- web_src/js/components/DiffFileTreeItem.vue | 77 ++++++++++++---------- web_src/js/svg.js | 4 ++ web_src/less/_repository.less | 33 +++++++++- 6 files changed, 118 insertions(+), 54 deletions(-) diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl index 3452ec77d163b..9eb49c23fb32d 100644 --- a/templates/repo/diff/box.tmpl +++ b/templates/repo/diff/box.tmpl @@ -14,6 +14,14 @@ {{else}}
    +
    +
    + {{svg "octicon-sidebar-collapse"}} +
    + +
    {{svg "octicon-diff" 16 "mr-2"}}{{.locale.Tr "repo.diff.stats_desc" .Diff.NumFiles .Diff.TotalAddition .Diff.TotalDeletion | Str2html}}
    @@ -56,8 +64,7 @@ {{end}} -
    -
    +
    @@ -185,7 +193,6 @@
    {{end}}
    -
    {{if not $.Repository.IsArchived}} diff --git a/templates/repo/diff/options_dropdown.tmpl b/templates/repo/diff/options_dropdown.tmpl index 360b70b765cd3..18fa100dcfa6d 100644 --- a/templates/repo/diff/options_dropdown.tmpl +++ b/templates/repo/diff/options_dropdown.tmpl @@ -12,6 +12,5 @@ {{.locale.Tr "repo.diff.download_patch"}} {{.locale.Tr "repo.diff.download_diff"}} {{end}} - Show file tree
    diff --git a/web_src/js/components/DiffFileTree.vue b/web_src/js/components/DiffFileTree.vue index 98464296a0b78..5ab98ced9f589 100644 --- a/web_src/js/components/DiffFileTree.vue +++ b/web_src/js/components/DiffFileTree.vue @@ -1,12 +1,14 @@ @@ -25,6 +27,7 @@ export default { files: pageData.pullRequestFileTree.files, isIncomplete: pageData.pullRequestFileTree.isIncomplete, visibilityInfo: pageData.pullRequestFileTree.visibilityInfo, + tooManyFilesMessage: pageData.pullRequestFileTree.tooManyFilesMessage }), computed: { @@ -45,11 +48,13 @@ export default { let newParent = { name: split, children: [], - isFile, - level: index, - file, + isFile }; + if (isFile === true) { + newParent.file = file; + } + if (parent) { // check if the folder already exists const existingFolder = parent.children.find( @@ -78,14 +83,10 @@ export default { watch: { visibilityInfo: { handler(val) { - const fileBoxesDiv = document.querySelector('#diff-file-boxes'); if (val.isVisible === true) { localStorage.setItem(LOCAL_STORAGE_KEY, 'true'); - fileBoxesDiv.classList.value = - 'sixteen wide mobile tablet eleven wide large screen column'; } else { localStorage.setItem(LOCAL_STORAGE_KEY, 'false'); - fileBoxesDiv.classList.value = 'sixteen wide column'; } }, deep: true, @@ -100,17 +101,32 @@ export default { }, mounted() { + // ensure correct buttons when we are mounted to the dom + this.toggleExpandCollapseButtons(this.visibilityInfo.isVisible); + + // Add our eventlisteners to the show / hide buttons document .querySelector('.diff-show-file-tree-button') .addEventListener('click', (evt) => { evt.stopPropagation(); this.visibilityInfo.isVisible = !this.visibilityInfo.isVisible; + this.toggleExpandCollapseButtons(this.visibilityInfo.isVisible); + }); + document + .querySelector('.diff-hide-file-tree-button') + .addEventListener('click', (evt) => { + evt.stopPropagation(); + this.visibilityInfo.isVisible = !this.visibilityInfo.isVisible; + this.toggleExpandCollapseButtons(this.visibilityInfo.isVisible); }); }, - unmounted() {}, - - methods: {}, + methods: { + toggleExpandCollapseButtons(isCurrentlyVisible) { + document.querySelector('.diff-show-file-tree-button').style.display = isCurrentlyVisible ? 'none' : 'block'; + document.querySelector('.diff-hide-file-tree-button').style.display = isCurrentlyVisible ? 'block' : 'none'; + } + }, }; diff --git a/web_src/js/components/DiffFileTreeItem.vue b/web_src/js/components/DiffFileTreeItem.vue index e47fb6213d961..16bfe3cf41e16 100644 --- a/web_src/js/components/DiffFileTreeItem.vue +++ b/web_src/js/components/DiffFileTreeItem.vue @@ -1,55 +1,66 @@ diff --git a/web_src/js/svg.js b/web_src/js/svg.js index 9c39852c303ef..81190df173a4e 100644 --- a/web_src/js/svg.js +++ b/web_src/js/svg.js @@ -17,6 +17,8 @@ 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,6 +42,8 @@ export const svgs = { 'octicon-repo-template': octiconRepoTemplate, 'octicon-triangle-down': octiconTriangleDown, 'octicon-file': octiconFile, + 'octicon-sidebar-expand': octiconSidebarExpand, + 'octicon-sidebar-collapse': octiconSidebarCollapse, }; const parser = new DOMParser(); diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less index d3183aece3ef2..d321739a2ecdd 100644 --- a/web_src/less/_repository.less +++ b/web_src/less/_repository.less @@ -3066,21 +3066,48 @@ td.blob-excerpt { padding-left: 8px; } +#diff-container { + display: flex; +} +#diff-file-boxes { + width: 80%; +} + #diff-file-tree { + width: 20%; + max-width: 20%; line-height: inherit; position: sticky; + padding-top: 0; top: 47px; - border-top: 1px solid var(--color-secondary); - max-height: calc(100vh - 47px); + max-height: calc(100vh - 50px); + height: calc(100vh - 50px); overflow-y: auto; overflow-x: auto; - border-right: 1px solid var(--color-secondary); .list { padding-top: inherit; } } +#diff-file-tree[style*='display: none'] ~ #diff-file-boxes { + width: 100%; +} + +@media @mediaMdAndDown { + #diff-file-tree { + display: none; + } + + #diff-file-boxes { + width: 100%; + } + + .diff-file-tree-visibility-buttons { + display: none; + } +} + .ui.message.unicode-escape-prompt { margin-bottom: 0; border-radius: 0; From a6a076165458ec5978af836cfde87d427b64cfbf Mon Sep 17 00:00:00 2001 From: Sebastian Sauer Date: Fri, 2 Sep 2022 19:15:27 +0200 Subject: [PATCH 06/22] Only pass needed infos to vue template --- templates/repo/diff/box.tmpl | 2 +- web_src/js/components/DiffFileTreeItem.vue | 14 ++++++++++---- 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl index 9eb49c23fb32d..b84ca3d5f3d3f 100644 --- a/templates/repo/diff/box.tmpl +++ b/templates/repo/diff/box.tmpl @@ -68,7 +68,7 @@ From 6d53226c4a5dca84491f211e8f6dbc9cadc40373 Mon Sep 17 00:00:00 2001 From: Sebastian Sauer Date: Fri, 2 Sep 2022 21:36:55 +0200 Subject: [PATCH 07/22] Fix styling and overflow --- web_src/js/components/DiffFileTreeItem.vue | 93 ++++++++++++++-------- web_src/js/svg.js | 12 +++ web_src/less/_repository.less | 1 - 3 files changed, 71 insertions(+), 35 deletions(-) diff --git a/web_src/js/components/DiffFileTreeItem.vue b/web_src/js/components/DiffFileTreeItem.vue index fe9e2d942e280..03fb52c0c9799 100644 --- a/web_src/js/components/DiffFileTreeItem.vue +++ b/web_src/js/components/DiffFileTreeItem.vue @@ -1,29 +1,36 @@