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

Open
silverwind wants to merge 9 commits into
base: main
Choose a base branch
from
+35 −26
Open

Improve diff file headers #36215

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 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
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 "file" . "root" $}}
{{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
15 changes: 10 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,10 @@
{{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>
<div class="tw-flex tw-items-center tw-gap-2 tw-text-[13px] tw-font-sans">
<span>
{{if .file.Addition}}<span class="tw-text-green">+{{.file.Addition}}</span>{{end}}
{{if .file.Deletion}}<span class="tw-text-red">-{{.file.Deletion}}</span>{{end}}
</span>
<span class="diff-stats-bar" 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>
</div>
5 changes: 5 additions & 0 deletions web_src/css/repo.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1684,6 +1684,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 +1694,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