forked from gitea/gitea
1
0
Fork 0

Diff stat improvements (#13954)

* Diff stat improvements

- Combine number to just total number of changes
- Add tooltip over stats bar
- Increase contrast on file name
- Refactor classes and CSS to be more reusable

* misc tweaks

* make count bold
This commit is contained in:
silverwind 2020-12-12 02:06:22 +01:00 committed by GitHub
parent 3285babcae
commit 1837e647eb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 29 additions and 43 deletions

View File

@ -1787,6 +1787,7 @@ diff.whitespace_ignore_all_whitespace = Ignore whitespace when comparing lines
diff.whitespace_ignore_amount_changes = Ignore changes in amount of whitespace diff.whitespace_ignore_amount_changes = Ignore changes in amount of whitespace
diff.whitespace_ignore_at_eol = Ignore changes in whitespace at EOL diff.whitespace_ignore_at_eol = Ignore changes in whitespace at EOL
diff.stats_desc = <strong> %d changed files</strong> with <strong>%d additions</strong> and <strong>%d deletions</strong> diff.stats_desc = <strong> %d changed files</strong> with <strong>%d additions</strong> and <strong>%d deletions</strong>
diff.stats_desc_file = %d changes: %d additions and %d deletions
diff.bin = BIN diff.bin = BIN
diff.view_file = View File diff.view_file = View File
diff.file_before = Before diff.file_before = Before

View File

@ -36,9 +36,9 @@
<ol class="diff-detail-box diff-stats detail-files hide" id="diff-files"> <ol class="diff-detail-box diff-stats detail-files hide" id="diff-files">
{{range .Diff.Files}} {{range .Diff.Files}}
<li> <li>
<div class="diff-counter count pull-right"> <div class="diff-counter pull-right">
{{if not .IsBin}} {{if not .IsBin}}
{{template "repo/diff/stats" .}} {{template "repo/diff/stats" dict "file" . "root" $}}
{{else}} {{else}}
<span>{{$.i18n.Tr "repo.diff.bin"}}</span> <span>{{$.i18n.Tr "repo.diff.bin"}}</span>
{{end}} {{end}}
@ -53,9 +53,9 @@
{{if $file.IsIncomplete}} {{if $file.IsIncomplete}}
<div class="diff-file-box diff-box file-content"> <div class="diff-file-box diff-box file-content">
<h4 class="ui top attached normal header rounded"> <h4 class="ui top attached normal header rounded">
<div class="diff-counter count ui left"> <div class="diff-counter ui left">
{{if not $file.IsRenamed}} {{if not $file.IsRenamed}}
{{template "repo/diff/stats" .}} {{template "repo/diff/stats" dict "file" . "root" $}}
{{end}} {{end}}
</div> </div>
<span class="file">{{$file.Name}}</span> <span class="file">{{$file.Name}}</span>
@ -87,11 +87,11 @@
{{svg "octicon-chevron-down" 18}} {{svg "octicon-chevron-down" 18}}
</a> </a>
{{end}} {{end}}
<div class="diff-counter count"> <div class="diff-counter">
{{if $file.IsBin}} {{if $file.IsBin}}
{{$.i18n.Tr "repo.diff.bin"}} {{$.i18n.Tr "repo.diff.bin"}}
{{else if not $file.IsRenamed}} {{else if not $file.IsRenamed}}
{{template "repo/diff/stats" .}} {{template "repo/diff/stats" dict "file" . "root" $}}
{{end}} {{end}}
</div> </div>
<span class="file">{{if $file.IsRenamed}}{{$file.OldName}} &rarr; {{end}}{{$file.Name}}{{if .IsLFSFile}} ({{$.i18n.Tr "repo.stored_lfs"}}){{end}}</span> <span class="file">{{if $file.IsRenamed}}{{$file.OldName}} &rarr; {{end}}{{$file.Name}}{{if .IsLFSFile}} ({{$.i18n.Tr "repo.stored_lfs"}}){{end}}</span>

View File

@ -1,6 +1,4 @@
<span class="add" data-line="{{.Addition}}">+ {{.Addition}}</span> {{Add .file.Addition .file.Deletion}}
<span class="bar"> <span class="diff-stats-bar poping up ml-2" data-content="{{.root.i18n.Tr "repo.diff.stats_desc_file" (Add .file.Addition .file.Deletion) .file.Addition .file.Deletion | Str2html}}" data-variation="wide">
<div class="pull-left add" style="width: {{DiffStatsWidth .Addition .Deletion}}%"></div> <div class="diff-stats-add-bar" style="width: {{DiffStatsWidth .file.Addition .file.Deletion}}%"></div>
<div class="pull-left del"></div>
</span> </span>
<span class="del" data-line="{{.Deletion}}">- {{.Deletion}}</span>

View File

@ -1563,29 +1563,8 @@
display: flex; display: flex;
align-items: center; align-items: center;
.count {
margin-right: 12px;
font-size: 13px;
flex: 0 0 auto;
.bar {
background-color: var(--color-red);
height: 12px;
width: 40px;
display: inline-block;
margin: 2px 4px 0;
vertical-align: text-top;
.add {
background-color: var(--color-green);
height: 12px;
}
}
}
.file { .file {
flex: 1; flex: 1;
color: var(--color-text-light-2);
word-break: break-all; word-break: break-all;
} }
@ -1768,17 +1747,6 @@
border-bottom: 1px dashed #dddddd; border-bottom: 1px dashed #dddddd;
padding-left: 6px; padding-left: 6px;
} }
.diff-counter {
margin-right: 15px;
.del {
color: var(--color-red);
}
.add {
color: var(--color-green);
}
}
} }
.repo-search-result { .repo-search-result {
@ -3142,6 +3110,25 @@ td.blob-excerpt {
border-radius: var(--border-radius) !important; border-radius: var(--border-radius) !important;
} }
.diff-counter {
font-weight: 600;
margin-right: 8px;
}
.diff-stats-bar {
display: inline-block;
background-color: var(--color-red);
height: 12px;
width: 40px;
position: relative;
top: 2px;
.diff-stats-add-bar {
background-color: var(--color-green);
height: 100%;
}
}
/* prevent page shaking on language bar click */ /* prevent page shaking on language bar click */
.repository-summary-language-stats { .repository-summary-language-stats {
height: 48px; height: 48px;