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

options/locale/locale_en-US.ini

@@ -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

templates/repo/diff/box.tmpl

@@ -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>

templates/repo/diff/stats.tmpl

@@ -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>

web_src/less/_repository.less

@@ -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;