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 <wxiaoguang@gmail.com>
This commit is contained in:
sebastian-sauer 2022-09-27 07:22:19 +02:00 committed by GitHub
parent 525751243e
commit 31f934c1d8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 591 additions and 159 deletions

View file

@ -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();