Skip to content

Improve diff file headers #36215

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
wxiaoguang merged 17 commits into from
Jan 12, 2026
Merged

Improve diff file headers #36215

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
e091430
Improve diff file headers
silverwind Dec 19, 2025
c2a4bfc
move diff stat to right
silverwind Dec 19, 2025
4d3fbb4
improve file diff stats rendering
silverwind Dec 19, 2025
a3a10fc
fine tune
silverwind Dec 19, 2025
51a0dfe
avoid shrinking copy button, format
silverwind Dec 20, 2025
ab3dea7
more enhancements
silverwind Dec 20, 2025
f013a64
Merge remote-tracking branch 'origin/main' into diffhead
silverwind Dec 20, 2025
007e07f
fix, lowercase single-word all git.filemode
silverwind Dec 20, 2025
b8d4b6f
revert
silverwind Dec 20, 2025
725b957
use template in repo/pulls/tab_menu.tmpl as well
silverwind Dec 24, 2025
b7ecd07
remove box-shadow hack
silverwind Dec 24, 2025
05ffc84
Merge branch 'main' into diffhead
wxiaoguang Jan 12, 2026
8b7c6ef
fix various bugs
wxiaoguang Jan 12, 2026
45cb4dc
add color vars to dark theme
wxiaoguang Jan 12, 2026
84d69d2
fix comment
wxiaoguang Jan 12, 2026
e888dbd
Merge branch 'main' into diffhead
wxiaoguang Jan 12, 2026
5eca4cc
fix layout
wxiaoguang Jan 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions options/locale/locale_en-US.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3781,10 +3781,10 @@
},
"git.filemode": {
"changed_filemode": "%[1]s → %[2]s",
"directory": "Directory",
"normal_file": "Normal file",
"executable_file": "Executable file",
"symbolic_link": "Symbolic link",
"submodule": "Submodule"
"directory": "directory",
"normal_file": "normal",
"executable_file": "executable",
"symbolic_link": "symlink",
"submodule": "submodule"
}
}
31 changes: 15 additions & 16 deletions templates/repo/diff/box.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,34 +91,33 @@
{{svg "octicon-chevron-down" 18}}
{{end}}
</button>
<div class="tw-font-semibold tw-flex tw-items-center tw-font-mono">
{{if $file.IsBin}}
<span class="tw-ml-0.5 tw-mr-2">
{{ctx.Locale.Tr "repo.diff.bin"}}
</span>
{{else}}
{{template "repo/diff/stats" dict "file" . "root" $}}
{{end}}
</div>
<span class="file tw-flex tw-items-center tw-font-mono tw-flex-1"><a class="muted file-link" title="{{if $file.IsRenamed}}{{$file.OldName}} → {{end}}{{$file.Name}}" href="#diff-{{$file.NameHash}}">{{if $file.IsRenamed}}{{$file.OldName}} → {{end}}{{$file.Name}}</a>
<button class="btn interact-fg tw-p-2" data-clipboard-text="{{$file.Name}}" data-tooltip-content="{{ctx.Locale.Tr "copy_path"}}">{{svg "octicon-copy" 14}}</button>
<span class="file tw-font-mono">
<a class="muted file-link" title="{{if $file.IsRenamed}}{{$file.OldName}} → {{end}}{{$file.Name}}" href="#diff-{{$file.NameHash}}">{{if $file.IsRenamed}}{{$file.OldName}} → {{end}}{{$file.Name}}</a>
<button class="btn interact-fg tw-p-2 tw-shrink-0" data-clipboard-text="{{$file.Name}}" data-tooltip-content="{{ctx.Locale.Tr "copy_path"}}">{{svg "octicon-copy" 14}}</button>
{{if .IsLFSFile}}<span class="ui label">LFS</span>{{end}}
{{if $file.IsGenerated}}
<span class="ui label">{{ctx.Locale.Tr "repo.diff.generated"}}</span>
<span class="ui label tw-font-sans tw-shrink-0">{{ctx.Locale.Tr "repo.diff.generated"}}</span>
{{end}}
{{if $file.IsVendored}}
<span class="ui label">{{ctx.Locale.Tr "repo.diff.vendored"}}</span>
<span class="ui label tw-font-sans tw-shrink-0">{{ctx.Locale.Tr "repo.diff.vendored"}}</span>
{{end}}
{{if and $file.Mode $file.OldMode}}
{{$old := ctx.Locale.Tr ($file.ModeTranslationKey $file.OldMode)}}
{{$new := ctx.Locale.Tr ($file.ModeTranslationKey $file.Mode)}}
<span class="tw-mx-2 tw-font-mono tw-whitespace-nowrap">{{ctx.Locale.Tr "git.filemode.changed_filemode" $old $new}}</span>
<span class="ui label tw-font-sans tw-shrink-0">{{ctx.Locale.Tr "git.filemode.changed_filemode" $old $new}}</span>
{{else if $file.Mode}}
<span class="tw-mx-2 tw-font-mono tw-whitespace-nowrap">{{ctx.Locale.Tr ($file.ModeTranslationKey $file.Mode)}}</span>
<span class="ui label tw-font-sans tw-shrink-0">{{ctx.Locale.Tr ($file.ModeTranslationKey $file.Mode)}}</span>
{{end}}
</span>
</div>
<div class="diff-file-header-actions tw-flex tw-items-center tw-gap-1 tw-flex-wrap">
<div class="diff-file-header-actions tw-flex tw-items-center tw-gap-1 tw-flex-wrap tw-ml-2">
<div class="tw-font-semibold tw-flex tw-items-center tw-font-mono">
{{if $file.IsBin}}
{{ctx.Locale.Tr "repo.diff.bin"}}
{{else}}
{{template "repo/diff/stats" dict "Addition" .Addition "Deletion" .Deletion}}
{{end}}
</div>
{{if $showFileViewToggle}}
<div class="ui compact icon buttons">
<button class="ui tiny basic button file-view-toggle" data-toggle-selector="#diff-source-{{$file.NameHash}}" data-tooltip-content="{{ctx.Locale.Tr "repo.file_view_source"}}">{{svg "octicon-code"}}</button>
Expand Down
22 changes: 17 additions & 5 deletions templates/repo/diff/stats.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,17 @@
{{Eval .file.Addition "+" .file.Deletion}}
<span class="diff-stats-bar tw-mx-2" data-tooltip-content="{{ctx.Locale.Tr "repo.diff.stats_desc_file" (Eval .file.Addition "+" .file.Deletion) .file.Addition .file.Deletion}}">
{{/* if the denominator is zero, then the float result is "width: NaNpx", as before, it just works */}}
<div class="diff-stats-add-bar" style="width: {{Eval 100 "*" .file.Addition "/" "(" .file.Addition "+" .file.Deletion "+" 0.0 ")"}}%"></div>
</span>
{{/* Template Attributes:
* Addition: Number of additions
* Deletion: Number of deletions
* Classes: Additional classes for the root element
*/}}
{{if or .Addition .Deletion}}
<div class="tw-flex tw-items-center tw-gap-2 tw-text-[13px] tw-font-sans{{if .Classes}} {{.Classes}}{{end}}">
<span>
{{if .Addition}}<span class="tw-text-green">+{{.Addition}}</span>{{end}}
{{if .Deletion}}<span class="tw-text-red">-{{.Deletion}}</span>{{end}}
</span>
<span class="diff-stats-bar" data-tooltip-content="{{ctx.Locale.Tr "repo.diff.stats_desc_file" (Eval .Addition "+" .Deletion) .Addition .Deletion}}">
{{/* if the denominator is zero, then the float result is "width: NaNpx", as before, it just works */}}
<div class="diff-stats-add-bar" style="width: {{Eval 100 "*" .Addition "/" "(" .Addition "+" .Deletion "+" 0.0 ")"}}%"></div>
</span>
</div>
{{end}}
7 changes: 1 addition & 6 deletions templates/repo/pulls/tab_menu.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,7 @@
<span class="ui small label">{{if .NumFiles}}{{.NumFiles}}{{else}}-{{end}}</span>
</a>
{{if or .DiffShortStat.TotalAddition .DiffShortStat.TotalDeletion}}
<span class="tw-ml-auto tw-pl-3 tw-whitespace-nowrap tw-pr-0 tw-font-bold tw-flex tw-items-center tw-gap-2">
<span><span class="text green">{{if .DiffShortStat.TotalAddition}}+{{.DiffShortStat.TotalAddition}}{{end}}</span> <span class="text red">{{if .DiffShortStat.TotalDeletion}}-{{.DiffShortStat.TotalDeletion}}{{end}}</span></span>
<span class="diff-stats-bar">
<div class="diff-stats-add-bar" style="width: {{Eval 100 "*" .DiffShortStat.TotalAddition "/" "(" .DiffShortStat.TotalAddition "+" .DiffShortStat.TotalDeletion "+" 0.0 ")"}}%"></div>
</span>
</span>
{{template "repo/diff/stats" dict "Addition" .DiffShortStat.TotalAddition "Deletion" .DiffShortStat.TotalDeletion "Classes" "tw-ml-auto tw-pl-3 tw-whitespace-nowrap tw-pr-0 tw-font-semibold"}}
{{end}}
</div>
<div class="ui tabs divider"></div>
Expand Down
6 changes: 5 additions & 1 deletion web_src/css/repo.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1683,7 +1683,7 @@ tbody.commit-list {

.diff-file-header {
padding: 5px 8px !important;
box-shadow: 0 -1px 0 1px var(--color-body); /* prevent borders being visible behind top corners when sticky and scrolled */
font-size: 14px !important; /* override h4.ui.header */
font-weight: var(--font-weight-normal);
display: flex;
justify-content: space-between;
Expand All @@ -1693,6 +1693,10 @@ tbody.commit-list {

.diff-file-header .file {
min-width: 0;
display: flex;
align-items: center;
flex: 1;
gap: 4px;
}

.diff-file-header .file-link {
Expand Down