Diff file tree tweaks (#21446)
- Left-align the diff stat line again like previously. - Default the file tree to collapsed view, which means the tree will rendered initially collapsed and it may "pop in" via JS if enabled. I think this is more desirable than having the empty space for the tree "pop out" like it currently does. - Mute the icon, removing color unless hovered. - Increase icon size and vertically center it. Before: <img width="1271" alt="image" src="https://user-images.githubusercontent.com/115237/195666451-55771595-0525-42b8-be1b-d03cc1cb2961.png"> After: <img width="1280" alt="image" src="https://user-images.githubusercontent.com/115237/195666385-c91fd0de-6dcc-4d9c-89ff-7581828fcf14.png"> Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
This commit is contained in:
parent
4de48d5252
commit
9dc264a2ee
2 changed files with 12 additions and 10 deletions
|
@ -14,13 +14,15 @@
|
|||
{{else}}
|
||||
<div>
|
||||
<div class="diff-detail-box diff-box sticky df sb ac fw">
|
||||
<a class="diff-toggle-file-tree-button">
|
||||
{{/* 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"}}
|
||||
</a>
|
||||
<div class="diff-detail-stats df ac">
|
||||
{{svg "octicon-diff" 16 "mr-2"}}{{.locale.Tr "repo.diff.stats_desc" .Diff.NumFiles .Diff.TotalAddition .Diff.TotalDeletion | Str2html}}
|
||||
<div class="df ac fw">
|
||||
<a class="diff-toggle-file-tree-button muted df ac">
|
||||
{{/* the icon meaning is reversed here, "octicon-sidebar-collapse" means show the file tree */}}
|
||||
{{svg "octicon-sidebar-collapse" 20 "icon hide"}}
|
||||
{{svg "octicon-sidebar-expand" 20 "icon"}}
|
||||
</a>
|
||||
<div class="diff-detail-stats df ac ml-3">
|
||||
{{svg "octicon-diff" 16 "mr-2"}}{{.locale.Tr "repo.diff.stats_desc" .Diff.NumFiles .Diff.TotalAddition .Diff.TotalDeletion | Str2html}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="diff-detail-actions df ac">
|
||||
{{if and .PageIsPullFiles $.SignedUserID (not .IsArchived)}}
|
||||
|
@ -65,7 +67,7 @@
|
|||
</script>
|
||||
<div id="diff-file-list"></div>
|
||||
<div id="diff-container">
|
||||
<div id="diff-file-tree"></div>
|
||||
<div id="diff-file-tree" class="hide"></div>
|
||||
<div id="diff-file-boxes" class="sixteen wide column">
|
||||
{{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*/}}
|
||||
|
|
|
@ -3099,11 +3099,11 @@ td.blob-excerpt {
|
|||
|
||||
@media @mediaMdAndDown {
|
||||
#diff-file-tree {
|
||||
display: none;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.diff-toggle-file-tree-button {
|
||||
display: none;
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Reference in a new issue