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_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_file = %d changes: %d additions and %d deletions
diff.bin = BIN
diff.view_file = View File
diff.file_before = Before

View file

@ -36,9 +36,9 @@
<ol class="diff-detail-box diff-stats detail-files hide" id="diff-files">
{{range .Diff.Files}}
<li>
<div class="diff-counter count pull-right">
<div class="diff-counter pull-right">
{{if not .IsBin}}
{{template "repo/diff/stats" .}}
{{template "repo/diff/stats" dict "file" . "root" $}}
{{else}}
<span>{{$.i18n.Tr "repo.diff.bin"}}</span>
{{end}}
@ -53,9 +53,9 @@
{{if $file.IsIncomplete}}
<div class="diff-file-box diff-box file-content">
<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}}
{{template "repo/diff/stats" .}}
{{template "repo/diff/stats" dict "file" . "root" $}}
{{end}}
</div>
<span class="file">{{$file.Name}}</span>
@ -87,11 +87,11 @@
{{svg "octicon-chevron-down" 18}}
</a>
{{end}}
<div class="diff-counter count">
<div class="diff-counter">
{{if $file.IsBin}}
{{$.i18n.Tr "repo.diff.bin"}}
{{else if not $file.IsRenamed}}
{{template "repo/diff/stats" .}}
{{template "repo/diff/stats" dict "file" . "root" $}}
{{end}}
</div>
<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>
<span class="bar">
<div class="pull-left add" style="width: {{DiffStatsWidth .Addition .Deletion}}%"></div>
<div class="pull-left del"></div>
{{Add .file.Addition .file.Deletion}}
<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="diff-stats-add-bar" style="width: {{DiffStatsWidth .file.Addition .file.Deletion}}%"></div>
</span>
<span class="del" data-line="{{.Deletion}}">- {{.Deletion}}</span>

View file

@ -1563,29 +1563,8 @@
display: flex;
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 {
flex: 1;
color: var(--color-text-light-2);
word-break: break-all;
}
@ -1768,17 +1747,6 @@
border-bottom: 1px dashed #dddddd;
padding-left: 6px;
}
.diff-counter {
margin-right: 15px;
.del {
color: var(--color-red);
}
.add {
color: var(--color-green);
}
}
}
.repo-search-result {
@ -3142,6 +3110,25 @@ td.blob-excerpt {
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 */
.repository-summary-language-stats {
height: 48px;