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>
tokarchuk/v1.18
silverwind 2 years ago committed by GitHub
parent 4de48d5252
commit 9dc264a2ee
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 12
      templates/repo/diff/box.tmpl
  2. 4
      web_src/less/_repository.less

@ -14,14 +14,16 @@
{{else}} {{else}}
<div> <div>
<div class="diff-detail-box diff-box sticky df sb ac fw"> <div class="diff-detail-box diff-box sticky df sb ac fw">
<a class="diff-toggle-file-tree-button"> <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 */}} {{/* the icon meaning is reversed here, "octicon-sidebar-collapse" means show the file tree */}}
{{svg "octicon-sidebar-collapse" 16 "icon hide"}} {{svg "octicon-sidebar-collapse" 20 "icon hide"}}
{{svg "octicon-sidebar-expand" 16 "icon"}} {{svg "octicon-sidebar-expand" 20 "icon"}}
</a> </a>
<div class="diff-detail-stats df ac"> <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}} {{svg "octicon-diff" 16 "mr-2"}}{{.locale.Tr "repo.diff.stats_desc" .Diff.NumFiles .Diff.TotalAddition .Diff.TotalDeletion | Str2html}}
</div> </div>
</div>
<div class="diff-detail-actions df ac"> <div class="diff-detail-actions df ac">
{{if and .PageIsPullFiles $.SignedUserID (not .IsArchived)}} {{if and .PageIsPullFiles $.SignedUserID (not .IsArchived)}}
<progress id="viewed-files-summary" class="mr-2" value="{{.Diff.NumViewedFiles}}" max="{{.Diff.NumFiles}}"></progress> <progress id="viewed-files-summary" class="mr-2" value="{{.Diff.NumViewedFiles}}" max="{{.Diff.NumFiles}}"></progress>
@ -65,7 +67,7 @@
</script> </script>
<div id="diff-file-list"></div> <div id="diff-file-list"></div>
<div id="diff-container"> <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"> <div id="diff-file-boxes" class="sixteen wide column">
{{range $i, $file := .Diff.Files}} {{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*/}} {{/*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 { @media @mediaMdAndDown {
#diff-file-tree { #diff-file-tree {
display: none; display: none !important;
} }
.diff-toggle-file-tree-button { .diff-toggle-file-tree-button {
display: none; display: none !important;
} }
} }

Loading…
Cancel
Save