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

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