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:
parent
525751243e
commit
31f934c1d8
13 changed files with 591 additions and 159 deletions
|
@ -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;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue