home » zplus/clif.git
Author zPlus <zplus@peers.community> 2022-08-07 20:52:55
Committer zPlus <zplus@peers.community> 2022-08-07 20:52:55
Commit 108bbbe (patch)
Tree 15e60e0
Parent(s)

Add diffstat histogram in commit page.


commits diff: ef2ab34..108bbbe
3 files changed, 168 insertions, 68 deletionsdownload


Diffstat
-rw-r--r-- static/css/clif.css 71
-rw-r--r-- templates/repository/commit.html 163
-rw-r--r-- templates/repository/log.html 2

Diff options
View
Side
Whitespace
Context lines
Inter-hunk lines
+70/-1 M   static/css/clif.css
index f104018..5c82909
old size: 8K - new size: 9K
@@ -326,10 +326,73 @@ div.commit {
326 326 }
327 327
328 328 div.commit .message {
329 - margin: 2rem 0;
330 329 white-space: pre-wrap;
331 330 }
332 331
332 + div.commit details.diffstat {
333 + }
334 +
335 + div.commit details.diffstat table {
336 + width: 100%;
337 + }
338 +
339 + div.commit details.diffstat table .filemode {
340 + font-family: monospace;
341 + font-size: 1rem;
342 + white-space: nowrap;
343 + width: 0;
344 + }
345 +
346 + div.commit details.diffstat table .path {
347 + font-family: monospace;
348 + font-size: 1rem;
349 + padding: 0 1rem;
350 + white-space: nowrap;
351 + width: 0;
352 + }
353 +
354 + div.commit details.diffstat table .lines {
355 + font-family: monospace;
356 + font-size: 1rem;
357 + text-align: right;
358 + white-space: nowrap;
359 + width:0;
360 + }
361 +
362 + div.commit details.diffstat table .histogram {
363 + max-width: 20%;
364 + }
365 +
366 + div.commit details.diffstat table .histogram span {
367 + display: inline-block;
368 + height:1rem;
369 + vertical-align: middle;
370 + }
371 +
372 + div.commit details.diffstat table .histogram .insertions {
373 + background: lightgreen;
374 + }
375 +
376 + div.commit details.diffstat table .histogram .deletions {
377 + background: red;
378 + }
379 +
380 + div.commit details.diffstat .accumulated {
381 + margin-top: .5rem;
382 + }
383 +
384 + div.commit details.diffstat .accumulated .insertions {
385 + color: darkgreen;
386 + }
387 +
388 + div.commit details.diffstat .accumulated .deletions {
389 + color: darkred;
390 + }
391 +
392 + div.commit details.diff_options input[type=submit] {
393 + margin-top: .5rem;
394 + }
395 +
333 396 div.commit .diff {
334 397 border: 1px solid #d4d4d4;
335 398 border-collapse: collapse;
@@ -349,6 +412,12 @@ div.commit {
349 412 padding: .1rem .5rem;
350 413 }
351 414
415 + div.commit .diff .histogram {
416 + border-bottom: .3rem solid;
417 + display: inline-block;
418 + vertical-align: middle;
419 + }
420 +
352 421 div.commit .diff .header {
353 422 background-color: #f0f9ff;
354 423 color: darkblue;

+97/-66 M   templates/repository/commit.html
index f814f2d..e3de9bf
old size: 15K - new size: 16K
@@ -51,76 +51,99 @@
51 51 {% endfor %}
52 52 </td>
53 53 </tr>
54 - <tr>
55 - <td>
56 - <b>±</b>
57 - </td>
58 - <td>
59 - {{ diff.stats.files_changed }} files changed,
60 - {{ diff.stats.insertions }} insertions,
61 - {{ diff.stats.deletions }} deletions
62 - </td>
63 - </tr>
64 54 </tbody>
65 55 </table>
66 56
57 + <br />
58 +
67 59 <div class="message">{{ commit.message }}</div>
68 60
69 - <div>
70 - <details>
71 - <summary>Diff options</summary>
72 - <form action="" method="get">
73 - <table>
74 - <tr>
75 - <td>
76 - View
77 - </td>
78 - <td>
79 - <label><input type="radio" name="mode" value="udiff" {{ 'checked' if mode == 'udiff' }}>Unified</label>
80 - <label><input type="radio" name="mode" value="ssdiff" {{ 'checked' if mode == 'ssdiff' }}>Side by side</label>
81 - </td>
82 - </tr>
83 - <tr>
84 - <td>
85 - Context lines
86 - </td>
87 - <td>
88 - <input type="number" min=0 max=1000 name="context_lines" value="{{ context_lines }}" />
89 - </td>
90 - </tr>
91 - <tr>
92 - <td>
93 - Inter-hunk lines
94 - </td>
95 - <td>
96 - <input type="number" min=0 max=1000 name="inter_hunk_lines" value="{{ inter_hunk_lines }}" />
97 - </td>
98 - </tr>
99 - <tr>
100 - <td>
101 - Side
102 - </td>
103 - <td>
104 - <label><input type="radio" name="side" value="normal" {{ 'checked' if side == 'normal' }}>Normal</label>
105 - <label><input type="radio" name="side" value="reverse" {{ 'checked' if side == 'reverse' }}>Reverse</label>
106 - </td>
107 - </tr>
108 - <tr>
109 - <td>
110 - Whitespace
111 - </td>
112 - <td>
113 - <label><input type="radio" name="whitespace" value="include" {{ 'checked' if whitespace == 'include' }}>Include</label>
114 - <label><input type="radio" name="whitespace" value="ignore_all" {{ 'checked' if whitespace == 'ignore_all' }}>Ignore all</label>
115 - <label><input type="radio" name="whitespace" value="ignore_change" {{ 'checked' if whitespace == 'ignore_change' }}>Ignore amount changes</label>
116 - <label><input type="radio" name="whitespace" value="ignore_eol" {{ 'checked' if whitespace == 'ignore_eol' }}>Ignore at end of line</label>
117 - </td>
118 - </tr>
119 - </table>
120 - <input type="submit" value="Update" />
121 - </form>
122 - </details>
123 - </div>
61 + <br /><br /><br /><br />
62 +
63 + <details class="diffstat" open>
64 + {# pygit2 appears to recompute all the stats every time we use diff.stats,
65 + # therefore we set this variable in order to compute it only once.
66 + #}
67 + {% set diff_stats = diff.stats %}
68 +
69 + <summary>Diffstat</summary>
70 + <table>
71 + {% for patch in diff %}
72 + <tr>
73 + <td class="filemode">{{ patch.delta.new_file.mode|filemode }}</td>
74 + <td class="path">{{ patch.delta.new_file.path }}</td>
75 + <td class="lines">{{ patch.line_stats[1] + patch.line_stats[2] }}</td>
76 + <td class="histogram">
77 + <span title="+{{ patch.line_stats[1] }}" class="insertions" style="width:{{ patch.line_stats[1] / (diff_stats.insertions + diff_stats.deletions) * 100 }}%"></span
78 + ><span title="-{{ patch.line_stats[2] }}" class="deletions" style="width:{{ patch.line_stats[2] / (diff_stats.insertions + diff_stats.deletions) * 100 }}%"></span>
79 + </td>
80 + <td></td>
81 + </tr>
82 + {% endfor %}
83 + </table>
84 +
85 + <div class="accumulated">
86 + <b>{{ diff_stats.files_changed }}</b> file{{ 's' if diff_stats.files_changed != 1 }} changed,
87 + <span class="insertions"><b>{{ diff_stats.insertions }}</b> insertion{{ 's' if diff_stats.insertions != 1 }}</span>,
88 + <span class="deletions"><b>{{ diff_stats.deletions }}</b> deletion{{ 's' if diff_stats.deletions != 1 }}</span>
89 + </div>
90 + </details>
91 +
92 + <br />
93 +
94 + <details class="diff_options">
95 + <summary>Diff options</summary>
96 + <form action="" method="get">
97 + <table>
98 + <tr>
99 + <td>
100 + View
101 + </td>
102 + <td>
103 + <label><input type="radio" name="mode" value="udiff" {{ 'checked' if mode == 'udiff' }}>Unified</label>
104 + <label><input type="radio" name="mode" value="ssdiff" {{ 'checked' if mode == 'ssdiff' }}>Side by side</label>
105 + </td>
106 + </tr>
107 + <tr>
108 + <td>
109 + Context lines
110 + </td>
111 + <td>
112 + <input type="number" min=0 max=1000 name="context_lines" value="{{ context_lines }}" />
113 + </td>
114 + </tr>
115 + <tr>
116 + <td>
117 + Inter-hunk lines
118 + </td>
119 + <td>
120 + <input type="number" min=0 max=1000 name="inter_hunk_lines" value="{{ inter_hunk_lines }}" />
121 + </td>
122 + </tr>
123 + <tr>
124 + <td>
125 + Side
126 + </td>
127 + <td>
128 + <label><input type="radio" name="side" value="normal" {{ 'checked' if side == 'normal' }}>Normal</label>
129 + <label><input type="radio" name="side" value="reverse" {{ 'checked' if side == 'reverse' }}>Reverse</label>
130 + </td>
131 + </tr>
132 + <tr>
133 + <td>
134 + Whitespace
135 + </td>
136 + <td>
137 + <label><input type="radio" name="whitespace" value="include" {{ 'checked' if whitespace == 'include' }}>Include</label>
138 + <label><input type="radio" name="whitespace" value="ignore_all" {{ 'checked' if whitespace == 'ignore_all' }}>Ignore all</label>
139 + <label><input type="radio" name="whitespace" value="ignore_change" {{ 'checked' if whitespace == 'ignore_change' }}>Ignore amount changes</label>
140 + <label><input type="radio" name="whitespace" value="ignore_eol" {{ 'checked' if whitespace == 'ignore_eol' }}>Ignore at end of line</label>
141 + </td>
142 + </tr>
143 + </table>
144 + <input type="submit" value="Update" />
145 + </form>
146 + </details>
124 147
125 148 {% for patch in diff %}
126 149
@@ -139,7 +162,15 @@
139 162 <thead>
140 163 <tr>
141 164 <td colspan="4">
142 - -{{ patch.line_stats[2] }}/+{{ patch.line_stats[1] }}
165 + {% if patch.line_stats[1] + patch.line_stats[2] > 0 %}
166 + {% set color_border = patch.line_stats[1] / ( patch.line_stats[1] + patch.line_stats[2] ) * 100 %}
167 + {% else %}
168 + {% set color_border = 0 %}
169 + {% endif %}
170 +
171 + <span class="histogram" style="border-image: linear-gradient(to right, lightgreen {{ color_border }}%, red {{ color_border }}%) 1;">
172 + +{{ patch.line_stats[1] }}/-{{ patch.line_stats[2] }}
173 + </span>
143 174
144 175 {% if patch.delta.status == 1 %}
145 176 <b title="Added">A</b> {{ patch.delta.new_file.path }}

+1/-1 M   templates/repository/log.html
index 2ec71a7..c2da4bc
old size: 4K - new size: 4K
@@ -78,7 +78,7 @@
78 78 </td>
79 79 <td class="lines">
80 80 {% if commit.short_id in diff %}
81 - <span class="deletions">-{{ diff[commit.short_id].stats.deletions }}</span>/<span class="insertions">+{{ diff[commit.short_id].stats.insertions }}</span>
81 + <span class="insertions">+{{ diff[commit.short_id].stats.insertions }}</span>/<span class="deletions">-{{ diff[commit.short_id].stats.deletions }}</span>
82 82 {% endif %}
83 83 </td>
84 84 </tr>